@c10t/nice-component-library 0.0.24 → 0.0.26
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.
|
@@ -207,6 +207,8 @@ class ColumnModel {
|
|
|
207
207
|
searchFn;
|
|
208
208
|
rowSpan = 1;
|
|
209
209
|
colSpan = 1;
|
|
210
|
+
pattern;
|
|
211
|
+
patternFilter;
|
|
210
212
|
}
|
|
211
213
|
|
|
212
214
|
class BaseModel {
|
|
@@ -1884,7 +1886,7 @@ class ValidatorService {
|
|
|
1884
1886
|
required: ValidatorService.getRequired(column),
|
|
1885
1887
|
maxLength: column.max ? column.max(row) : undefined,
|
|
1886
1888
|
minLength: column.min ? column.min(row) : undefined,
|
|
1887
|
-
pattern: undefined,
|
|
1889
|
+
pattern: column.pattern ? column.pattern : undefined,
|
|
1888
1890
|
}));
|
|
1889
1891
|
}
|
|
1890
1892
|
else if (columnType === ColumnTypeEnum.LIVE_SEARCHING) {
|
|
@@ -2652,7 +2654,7 @@ class CvaTableComponent {
|
|
|
2652
2654
|
this.buttonColspan = TableService.getHeaderButtonColspan(this.buttons, this.results.data);
|
|
2653
2655
|
}
|
|
2654
2656
|
onChangeGoToPageNumber($event) {
|
|
2655
|
-
if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event)) {
|
|
2657
|
+
if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event) || this.goToPageNumber < 1) {
|
|
2656
2658
|
this.goToPageNumber = 1;
|
|
2657
2659
|
return;
|
|
2658
2660
|
}
|
|
@@ -3133,15 +3135,14 @@ class NumericInputFormat {
|
|
|
3133
3135
|
if (value === null || value === undefined) {
|
|
3134
3136
|
return '';
|
|
3135
3137
|
}
|
|
3136
|
-
|
|
3138
|
+
const raw = value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 10, useGrouping: false });
|
|
3137
3139
|
const [thousandSeparator, decimalMarker] = formatNumber(1000.99, this.locale).replace(/\d/g, '');
|
|
3138
3140
|
this.decimalMarker = decimalMarker;
|
|
3139
3141
|
// Here value should always come with . as decimal marker thus any other behavior is bug
|
|
3140
|
-
const [integer, decimal] =
|
|
3141
|
-
// console.log('4');
|
|
3142
|
+
const [integer, decimal] = raw.split('.');
|
|
3142
3143
|
// Group every three elements, and add thousandSeparator after them
|
|
3143
|
-
const v =
|
|
3144
|
-
return
|
|
3144
|
+
const v = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
|
|
3145
|
+
return typeof decimal !== 'undefined' ? v + '.' + decimal : v;
|
|
3145
3146
|
}
|
|
3146
3147
|
}
|
|
3147
3148
|
|
|
@@ -4021,56 +4022,58 @@ class CvaDatePickerComponent {
|
|
|
4021
4022
|
useValue: APP_DATE_FORMATS,
|
|
4022
4023
|
},
|
|
4023
4024
|
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["xDatepicker"], descendants: true }], ngImport: i0, template: `
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4025
|
+
<!-- css labelOutside trong base.theme-->
|
|
4026
|
+
<div class="cva-date-picker"
|
|
4027
|
+
[ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
|
|
4028
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
4029
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
4030
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4031
|
+
<div class="label">
|
|
4032
|
+
<div>
|
|
4033
|
+
{{ (label ? label : placeholder) | translate }}<span
|
|
4034
|
+
class="required-label-outside">{{ !!required ? '*' : '' }}</span>
|
|
4035
|
+
</div>
|
|
4036
|
+
</div>
|
|
4037
|
+
</mat-label>
|
|
4038
|
+
<mat-form-field *ngIf="isShowControl()"
|
|
4039
|
+
appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
|
|
4040
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
4041
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4042
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}
|
|
4043
|
+
</mat-label>
|
|
4044
|
+
<input matInput [matDatepicker]="xDatepicker"
|
|
4045
|
+
[placeholder]="placeholder|translate"
|
|
4046
|
+
[(ngModel)]="datepickerValue"
|
|
4047
|
+
[disabled]="disabled"
|
|
4048
|
+
[readonly]="true"
|
|
4049
|
+
[required]="checkRequired(required)"
|
|
4050
|
+
[title]="title ? title : ''"
|
|
4051
|
+
[min]="getMinDate()" [max]="getMaxDate()"
|
|
4052
|
+
(click)="openDatepicker($event)">
|
|
4053
|
+
<mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
|
|
4054
|
+
<mat-datepicker #xDatepicker></mat-datepicker>
|
|
4055
|
+
<button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
|
|
4056
|
+
[disabled]="disabled" type="button">
|
|
4057
|
+
<mat-icon>clear</mat-icon>
|
|
4058
|
+
</button>
|
|
4056
4059
|
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
+
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4061
|
+
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4062
|
+
</mat-hint>
|
|
4060
4063
|
|
|
4061
|
-
|
|
4064
|
+
</mat-form-field>
|
|
4062
4065
|
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
|
|
4071
|
-
|
|
4072
|
-
|
|
4073
|
-
|
|
4066
|
+
<ng-container *ngIf="!isShowControl()">
|
|
4067
|
+
<div class="cva-style-disable-text">
|
|
4068
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4069
|
+
{{ (label ? label : placeholder) | translate }}
|
|
4070
|
+
</mat-label>
|
|
4071
|
+
<div [title]="title ? title : ''">
|
|
4072
|
+
{{ title ? title : '' }}
|
|
4073
|
+
</div>
|
|
4074
|
+
</div>
|
|
4075
|
+
</ng-container>
|
|
4076
|
+
</div>
|
|
4074
4077
|
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i8$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"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
4075
4078
|
}
|
|
4076
4079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, decorators: [{
|
|
@@ -4079,56 +4082,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
4079
4082
|
selector: 'cva-date-picker',
|
|
4080
4083
|
standalone: false,
|
|
4081
4084
|
template: `
|
|
4082
|
-
|
|
4083
|
-
|
|
4084
|
-
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
|
|
4089
|
-
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4085
|
+
<!-- css labelOutside trong base.theme-->
|
|
4086
|
+
<div class="cva-date-picker"
|
|
4087
|
+
[ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
|
|
4088
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
4089
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
4090
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4091
|
+
<div class="label">
|
|
4092
|
+
<div>
|
|
4093
|
+
{{ (label ? label : placeholder) | translate }}<span
|
|
4094
|
+
class="required-label-outside">{{ !!required ? '*' : '' }}</span>
|
|
4095
|
+
</div>
|
|
4096
|
+
</div>
|
|
4097
|
+
</mat-label>
|
|
4098
|
+
<mat-form-field *ngIf="isShowControl()"
|
|
4099
|
+
appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
|
|
4100
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
4101
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4102
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}
|
|
4103
|
+
</mat-label>
|
|
4104
|
+
<input matInput [matDatepicker]="xDatepicker"
|
|
4105
|
+
[placeholder]="placeholder|translate"
|
|
4106
|
+
[(ngModel)]="datepickerValue"
|
|
4107
|
+
[disabled]="disabled"
|
|
4108
|
+
[readonly]="true"
|
|
4109
|
+
[required]="checkRequired(required)"
|
|
4110
|
+
[title]="title ? title : ''"
|
|
4111
|
+
[min]="getMinDate()" [max]="getMaxDate()"
|
|
4112
|
+
(click)="openDatepicker($event)">
|
|
4113
|
+
<mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
|
|
4114
|
+
<mat-datepicker #xDatepicker></mat-datepicker>
|
|
4115
|
+
<button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()"
|
|
4116
|
+
[disabled]="disabled" type="button">
|
|
4117
|
+
<mat-icon>clear</mat-icon>
|
|
4118
|
+
</button>
|
|
4114
4119
|
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4120
|
+
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4121
|
+
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4122
|
+
</mat-hint>
|
|
4118
4123
|
|
|
4119
|
-
|
|
4124
|
+
</mat-form-field>
|
|
4120
4125
|
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
|
|
4130
|
-
|
|
4131
|
-
|
|
4126
|
+
<ng-container *ngIf="!isShowControl()">
|
|
4127
|
+
<div class="cva-style-disable-text">
|
|
4128
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4129
|
+
{{ (label ? label : placeholder) | translate }}
|
|
4130
|
+
</mat-label>
|
|
4131
|
+
<div [title]="title ? title : ''">
|
|
4132
|
+
{{ title ? title : '' }}
|
|
4133
|
+
</div>
|
|
4134
|
+
</div>
|
|
4135
|
+
</ng-container>
|
|
4136
|
+
</div>
|
|
4132
4137
|
`,
|
|
4133
4138
|
providers: [
|
|
4134
4139
|
{ provide: DateAdapter, useClass: NsDateAdapter },
|
|
@@ -4465,6 +4470,13 @@ class CvaMultiSelectAutocomplete {
|
|
|
4465
4470
|
}
|
|
4466
4471
|
}, 300);
|
|
4467
4472
|
}
|
|
4473
|
+
else {
|
|
4474
|
+
// Khi đóng mat-select thì clear searchInput
|
|
4475
|
+
if (this.searchInputRef?.nativeElement) {
|
|
4476
|
+
this.searchInputRef.nativeElement.value = '';
|
|
4477
|
+
this.filterItem('');
|
|
4478
|
+
}
|
|
4479
|
+
}
|
|
4468
4480
|
}
|
|
4469
4481
|
getItemSize() {
|
|
4470
4482
|
return this.sizeOfItemsInListByPixels;
|
|
@@ -4479,96 +4491,96 @@ class CvaMultiSelectAutocomplete {
|
|
|
4479
4491
|
}
|
|
4480
4492
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4481
4493
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
|
|
4534
|
-
|
|
4535
|
-
|
|
4536
|
-
|
|
4537
|
-
|
|
4538
|
-
|
|
4539
|
-
|
|
4540
|
-
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4494
|
+
<!-- css labelOutside trong base.theme-->
|
|
4495
|
+
<div class="cva-multi-select-autocomplete"
|
|
4496
|
+
[ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
|
|
4497
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
4498
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
4499
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4500
|
+
<div class="label">
|
|
4501
|
+
<div>
|
|
4502
|
+
{{ (label ? label : placeholder) | translate }}<span
|
|
4503
|
+
class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
|
|
4504
|
+
</div>
|
|
4505
|
+
</div>
|
|
4506
|
+
</mat-label>
|
|
4507
|
+
<mat-form-field *ngIf="isShowControl()"
|
|
4508
|
+
appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
|
|
4509
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
4510
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4511
|
+
<mat-label
|
|
4512
|
+
*ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
|
|
4513
|
+
</mat-label>
|
|
4514
|
+
<mat-select [disabled]="disabled"
|
|
4515
|
+
[placeholder]="placeholder | translate"
|
|
4516
|
+
[multiple]="multiple"
|
|
4517
|
+
[(ngModel)]="selectedValue"
|
|
4518
|
+
[required]="getRequired()"
|
|
4519
|
+
(selectionChange)="matSelectionChange($event)"
|
|
4520
|
+
(openedChange)="openChange($event)">
|
|
4521
|
+
<div class="box-search">
|
|
4522
|
+
<mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
|
|
4523
|
+
[(ngModel)]="selectAllChecked"
|
|
4524
|
+
(change)="toggleSelectAll($event)"></mat-checkbox>
|
|
4525
|
+
<input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
|
|
4526
|
+
(keydown.space)="$event.stopPropagation()"
|
|
4527
|
+
(input)="filterItem(searchInput.value)"
|
|
4528
|
+
placeholder="{{'btnSearch' | translate}}...">
|
|
4529
|
+
<div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
|
|
4530
|
+
<button mat-icon-button class="search-button">
|
|
4531
|
+
<mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
|
|
4532
|
+
</button>
|
|
4533
|
+
</div>
|
|
4534
|
+
</div>
|
|
4535
|
+
<mat-select-trigger title="{{titleString|translate}}">
|
|
4536
|
+
{{ displayString | translate }}
|
|
4537
|
+
</mat-select-trigger>
|
|
4538
|
+
<cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
|
|
4539
|
+
[style.height.px]="getViewPortHeight()">
|
|
4540
|
+
<mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
|
|
4541
|
+
[attr.data-optionIndex]="i"
|
|
4542
|
+
[disabled]="option.disabled" [value]="option.value"
|
|
4543
|
+
[ngClass]="{'tree-mat-option': isTree}"
|
|
4544
|
+
title="{{option.displayValue|translate}}"
|
|
4545
|
+
(onSelectionChange)="onSelectionChange($event)">
|
|
4546
|
+
<div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
|
|
4547
|
+
<div *ngIf="!!isTree" class="tree-multiline-mat-option">
|
|
4548
|
+
<div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
|
|
4549
|
+
<p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
|
|
4550
|
+
</div>
|
|
4551
|
+
</mat-option>
|
|
4552
|
+
</cdk-virtual-scroll-viewport>
|
|
4553
|
+
<ng-container *ngIf="multiple">
|
|
4554
|
+
<ng-container *ngFor="let option of selectedValue; let i = index">
|
|
4555
|
+
<mat-option class="selected-options" [value]="option" *ngIf="i===0">
|
|
4556
|
+
{{ option }}
|
|
4557
|
+
</mat-option>
|
|
4558
|
+
</ng-container>
|
|
4559
|
+
</ng-container>
|
|
4560
|
+
<ng-container *ngIf="!multiple">
|
|
4561
|
+
<mat-option class="selected-options" *ngIf="!!selectedValue"
|
|
4562
|
+
[value]="selectedValue">{{ selectedValue }}
|
|
4563
|
+
</mat-option>
|
|
4564
|
+
</ng-container>
|
|
4565
|
+
</mat-select>
|
|
4566
|
+
<mat-icon matSuffix>expand_more</mat-icon>
|
|
4567
|
+
<mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
|
|
4568
|
+
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4569
|
+
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4570
|
+
</mat-hint>
|
|
4571
|
+
</mat-form-field>
|
|
4572
|
+
<ng-container *ngIf="!isShowControl()">
|
|
4573
|
+
<div class="cva-style-disable-text">
|
|
4574
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4575
|
+
{{ (label ? label : placeholder) | translate }}
|
|
4576
|
+
</mat-label>
|
|
4577
|
+
<div [title]="titleString | translate">
|
|
4578
|
+
{{ displayString | translate }}
|
|
4579
|
+
</div>
|
|
4580
|
+
</div>
|
|
4546
4581
|
</ng-container>
|
|
4547
|
-
</ng-container>
|
|
4548
|
-
<ng-container *ngIf="!multiple">
|
|
4549
|
-
<mat-option class="selected-options" *ngIf="!!selectedValue"
|
|
4550
|
-
[value]="selectedValue">{{ selectedValue }}
|
|
4551
|
-
</mat-option>
|
|
4552
|
-
</ng-container>
|
|
4553
|
-
</mat-select>
|
|
4554
|
-
<mat-icon matSuffix>expand_more</mat-icon>
|
|
4555
|
-
<mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
|
|
4556
|
-
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4557
|
-
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4558
|
-
</mat-hint>
|
|
4559
|
-
</mat-form-field>
|
|
4560
|
-
<ng-container *ngIf="!isShowControl()">
|
|
4561
|
-
<div class="cva-style-disable-text">
|
|
4562
|
-
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4563
|
-
{{ (label ? label : placeholder) | translate }}
|
|
4564
|
-
</mat-label>
|
|
4565
|
-
<div [title]="titleString | translate">
|
|
4566
|
-
{{ displayString | translate }}
|
|
4567
|
-
</div>
|
|
4568
4582
|
</div>
|
|
4569
|
-
|
|
4570
|
-
</div>
|
|
4571
|
-
`, isInline: true, 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$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"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
4583
|
+
`, isInline: true, 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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: i10.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i10.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i10.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i8$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"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
4572
4584
|
}
|
|
4573
4585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, decorators: [{
|
|
4574
4586
|
type: Component,
|
|
@@ -4576,96 +4588,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
4576
4588
|
selector: 'cva-multi-select-autocomplete',
|
|
4577
4589
|
standalone: false,
|
|
4578
4590
|
template: `
|
|
4579
|
-
|
|
4580
|
-
|
|
4581
|
-
|
|
4582
|
-
|
|
4583
|
-
|
|
4584
|
-
|
|
4585
|
-
|
|
4586
|
-
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
|
|
4606
|
-
|
|
4607
|
-
|
|
4608
|
-
|
|
4609
|
-
|
|
4610
|
-
|
|
4611
|
-
|
|
4612
|
-
|
|
4613
|
-
|
|
4614
|
-
|
|
4615
|
-
|
|
4616
|
-
|
|
4617
|
-
|
|
4618
|
-
|
|
4619
|
-
|
|
4620
|
-
|
|
4621
|
-
|
|
4622
|
-
|
|
4623
|
-
|
|
4624
|
-
|
|
4625
|
-
|
|
4626
|
-
|
|
4627
|
-
|
|
4628
|
-
|
|
4629
|
-
|
|
4630
|
-
|
|
4631
|
-
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4591
|
+
<!-- css labelOutside trong base.theme-->
|
|
4592
|
+
<div class="cva-multi-select-autocomplete"
|
|
4593
|
+
[ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
|
|
4594
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
4595
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
4596
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4597
|
+
<div class="label">
|
|
4598
|
+
<div>
|
|
4599
|
+
{{ (label ? label : placeholder) | translate }}<span
|
|
4600
|
+
class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
|
|
4601
|
+
</div>
|
|
4602
|
+
</div>
|
|
4603
|
+
</mat-label>
|
|
4604
|
+
<mat-form-field *ngIf="isShowControl()"
|
|
4605
|
+
appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
|
|
4606
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
4607
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
4608
|
+
<mat-label
|
|
4609
|
+
*ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
|
|
4610
|
+
</mat-label>
|
|
4611
|
+
<mat-select [disabled]="disabled"
|
|
4612
|
+
[placeholder]="placeholder | translate"
|
|
4613
|
+
[multiple]="multiple"
|
|
4614
|
+
[(ngModel)]="selectedValue"
|
|
4615
|
+
[required]="getRequired()"
|
|
4616
|
+
(selectionChange)="matSelectionChange($event)"
|
|
4617
|
+
(openedChange)="openChange($event)">
|
|
4618
|
+
<div class="box-search">
|
|
4619
|
+
<mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
|
|
4620
|
+
[(ngModel)]="selectAllChecked"
|
|
4621
|
+
(change)="toggleSelectAll($event)"></mat-checkbox>
|
|
4622
|
+
<input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
|
|
4623
|
+
(keydown.space)="$event.stopPropagation()"
|
|
4624
|
+
(input)="filterItem(searchInput.value)"
|
|
4625
|
+
placeholder="{{'btnSearch' | translate}}...">
|
|
4626
|
+
<div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
|
|
4627
|
+
<button mat-icon-button class="search-button">
|
|
4628
|
+
<mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
|
|
4629
|
+
</button>
|
|
4630
|
+
</div>
|
|
4631
|
+
</div>
|
|
4632
|
+
<mat-select-trigger title="{{titleString|translate}}">
|
|
4633
|
+
{{ displayString | translate }}
|
|
4634
|
+
</mat-select-trigger>
|
|
4635
|
+
<cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
|
|
4636
|
+
[style.height.px]="getViewPortHeight()">
|
|
4637
|
+
<mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
|
|
4638
|
+
[attr.data-optionIndex]="i"
|
|
4639
|
+
[disabled]="option.disabled" [value]="option.value"
|
|
4640
|
+
[ngClass]="{'tree-mat-option': isTree}"
|
|
4641
|
+
title="{{option.displayValue|translate}}"
|
|
4642
|
+
(onSelectionChange)="onSelectionChange($event)">
|
|
4643
|
+
<div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
|
|
4644
|
+
<div *ngIf="!!isTree" class="tree-multiline-mat-option">
|
|
4645
|
+
<div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
|
|
4646
|
+
<p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
|
|
4647
|
+
</div>
|
|
4648
|
+
</mat-option>
|
|
4649
|
+
</cdk-virtual-scroll-viewport>
|
|
4650
|
+
<ng-container *ngIf="multiple">
|
|
4651
|
+
<ng-container *ngFor="let option of selectedValue; let i = index">
|
|
4652
|
+
<mat-option class="selected-options" [value]="option" *ngIf="i===0">
|
|
4653
|
+
{{ option }}
|
|
4654
|
+
</mat-option>
|
|
4655
|
+
</ng-container>
|
|
4656
|
+
</ng-container>
|
|
4657
|
+
<ng-container *ngIf="!multiple">
|
|
4658
|
+
<mat-option class="selected-options" *ngIf="!!selectedValue"
|
|
4659
|
+
[value]="selectedValue">{{ selectedValue }}
|
|
4660
|
+
</mat-option>
|
|
4661
|
+
</ng-container>
|
|
4662
|
+
</mat-select>
|
|
4663
|
+
<mat-icon matSuffix>expand_more</mat-icon>
|
|
4664
|
+
<mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
|
|
4665
|
+
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4666
|
+
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4667
|
+
</mat-hint>
|
|
4668
|
+
</mat-form-field>
|
|
4669
|
+
<ng-container *ngIf="!isShowControl()">
|
|
4670
|
+
<div class="cva-style-disable-text">
|
|
4671
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4672
|
+
{{ (label ? label : placeholder) | translate }}
|
|
4673
|
+
</mat-label>
|
|
4674
|
+
<div [title]="titleString | translate">
|
|
4675
|
+
{{ displayString | translate }}
|
|
4676
|
+
</div>
|
|
4677
|
+
</div>
|
|
4643
4678
|
</ng-container>
|
|
4644
|
-
</ng-container>
|
|
4645
|
-
<ng-container *ngIf="!multiple">
|
|
4646
|
-
<mat-option class="selected-options" *ngIf="!!selectedValue"
|
|
4647
|
-
[value]="selectedValue">{{ selectedValue }}
|
|
4648
|
-
</mat-option>
|
|
4649
|
-
</ng-container>
|
|
4650
|
-
</mat-select>
|
|
4651
|
-
<mat-icon matSuffix>expand_more</mat-icon>
|
|
4652
|
-
<mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
|
|
4653
|
-
<mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
|
|
4654
|
-
{{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
4655
|
-
</mat-hint>
|
|
4656
|
-
</mat-form-field>
|
|
4657
|
-
<ng-container *ngIf="!isShowControl()">
|
|
4658
|
-
<div class="cva-style-disable-text">
|
|
4659
|
-
<mat-label *ngIf="!isLabelOutside && isFloatLabel">
|
|
4660
|
-
{{ (label ? label : placeholder) | translate }}
|
|
4661
|
-
</mat-label>
|
|
4662
|
-
<div [title]="titleString | translate">
|
|
4663
|
-
{{ displayString | translate }}
|
|
4664
|
-
</div>
|
|
4665
4679
|
</div>
|
|
4666
|
-
|
|
4667
|
-
</div>
|
|
4668
|
-
`,
|
|
4680
|
+
`,
|
|
4669
4681
|
}]
|
|
4670
4682
|
}], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
|
|
4671
4683
|
type: Self
|
|
@@ -5351,6 +5363,7 @@ class CvaSmartTableComponent {
|
|
|
5351
5363
|
<cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
|
|
5352
5364
|
#cellComponentRef
|
|
5353
5365
|
class="inputNumber" #nsCounterInput
|
|
5366
|
+
[placeholder]="moduleName + '.table.placeholder.input.counter'"
|
|
5354
5367
|
[isFormControl]="false"
|
|
5355
5368
|
[alignNumber]="getAlign(column)"
|
|
5356
5369
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5364,6 +5377,7 @@ class CvaSmartTableComponent {
|
|
|
5364
5377
|
</cva-counter-input>
|
|
5365
5378
|
<cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
|
|
5366
5379
|
#cellComponentRef
|
|
5380
|
+
[placeholder]="moduleName + '.table.placeholder.input'"
|
|
5367
5381
|
[isFormControl]="false"
|
|
5368
5382
|
[alignText]="getAlign(column)"
|
|
5369
5383
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5372,10 +5386,13 @@ class CvaSmartTableComponent {
|
|
|
5372
5386
|
[maxLength]="column.max ? column.max(result) : undefined"
|
|
5373
5387
|
[required]="TableService.getRequired(column)"
|
|
5374
5388
|
[errorMessages]="getErrorMessageMap(column)"
|
|
5375
|
-
(onChange)="onCellValueChange(result, column, $event);"
|
|
5389
|
+
(onChange)="onCellValueChange(result, column, $event);"
|
|
5390
|
+
[pattern]="column.pattern ? column.pattern : undefined"
|
|
5391
|
+
[patternFilter]="column.patternFilter ? column.patternFilter : ''">
|
|
5376
5392
|
</cva-input>
|
|
5377
5393
|
<cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
|
|
5378
|
-
#cellComponentRef
|
|
5394
|
+
type="number" #cellComponentRef
|
|
5395
|
+
[placeholder]="moduleName + '.table.placeholder.input.currency'"
|
|
5379
5396
|
[isFormControl]="false"
|
|
5380
5397
|
[alignText]="getAlign(column)"
|
|
5381
5398
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5385,7 +5402,8 @@ class CvaSmartTableComponent {
|
|
|
5385
5402
|
[required]="TableService.getRequired(column)"
|
|
5386
5403
|
[errorMessages]="getErrorMessageMap(column)"
|
|
5387
5404
|
(onChange)="onCellValueChange(result, column, $event);"
|
|
5388
|
-
[pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
|
|
5405
|
+
[pattern]="column.pattern ? column.pattern : (getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$')"
|
|
5406
|
+
[patternFilter]="column.patternFilter ? column.patternFilter : ''"
|
|
5389
5407
|
[formatFunc]="formatFunc">
|
|
5390
5408
|
</cva-input>
|
|
5391
5409
|
<cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
|
|
@@ -5403,6 +5421,7 @@ class CvaSmartTableComponent {
|
|
|
5403
5421
|
#cellComponentRef
|
|
5404
5422
|
*ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
|
|
5405
5423
|
class="multiSelectAutocomplete"
|
|
5424
|
+
[placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
|
|
5406
5425
|
[isTree]="column.isTree??false"
|
|
5407
5426
|
[value]="result[column.columnDef]"
|
|
5408
5427
|
[errorMessages]="getErrorMessageMap(column)"
|
|
@@ -5621,6 +5640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5621
5640
|
<cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
|
|
5622
5641
|
#cellComponentRef
|
|
5623
5642
|
class="inputNumber" #nsCounterInput
|
|
5643
|
+
[placeholder]="moduleName + '.table.placeholder.input.counter'"
|
|
5624
5644
|
[isFormControl]="false"
|
|
5625
5645
|
[alignNumber]="getAlign(column)"
|
|
5626
5646
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5634,6 +5654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5634
5654
|
</cva-counter-input>
|
|
5635
5655
|
<cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
|
|
5636
5656
|
#cellComponentRef
|
|
5657
|
+
[placeholder]="moduleName + '.table.placeholder.input'"
|
|
5637
5658
|
[isFormControl]="false"
|
|
5638
5659
|
[alignText]="getAlign(column)"
|
|
5639
5660
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5642,10 +5663,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5642
5663
|
[maxLength]="column.max ? column.max(result) : undefined"
|
|
5643
5664
|
[required]="TableService.getRequired(column)"
|
|
5644
5665
|
[errorMessages]="getErrorMessageMap(column)"
|
|
5645
|
-
(onChange)="onCellValueChange(result, column, $event);"
|
|
5666
|
+
(onChange)="onCellValueChange(result, column, $event);"
|
|
5667
|
+
[pattern]="column.pattern ? column.pattern : undefined"
|
|
5668
|
+
[patternFilter]="column.patternFilter ? column.patternFilter : ''">
|
|
5646
5669
|
</cva-input>
|
|
5647
5670
|
<cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
|
|
5648
|
-
#cellComponentRef
|
|
5671
|
+
type="number" #cellComponentRef
|
|
5672
|
+
[placeholder]="moduleName + '.table.placeholder.input.currency'"
|
|
5649
5673
|
[isFormControl]="false"
|
|
5650
5674
|
[alignText]="getAlign(column)"
|
|
5651
5675
|
[disabled]="column.disabled ? column.disabled(result) : false"
|
|
@@ -5655,7 +5679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5655
5679
|
[required]="TableService.getRequired(column)"
|
|
5656
5680
|
[errorMessages]="getErrorMessageMap(column)"
|
|
5657
5681
|
(onChange)="onCellValueChange(result, column, $event);"
|
|
5658
|
-
[pattern]="getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$'"
|
|
5682
|
+
[pattern]="column.pattern ? column.pattern : (getIsDecimal(column) ? '^\\d{0,15}(\\.\\d*)?$' : '^\\d{0,15}$')"
|
|
5683
|
+
[patternFilter]="column.patternFilter ? column.patternFilter : ''"
|
|
5659
5684
|
[formatFunc]="formatFunc">
|
|
5660
5685
|
</cva-input>
|
|
5661
5686
|
<cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
|
|
@@ -5673,6 +5698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
5673
5698
|
#cellComponentRef
|
|
5674
5699
|
*ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
|
|
5675
5700
|
class="multiSelectAutocomplete"
|
|
5701
|
+
[placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
|
|
5676
5702
|
[isTree]="column.isTree??false"
|
|
5677
5703
|
[value]="result[column.columnDef]"
|
|
5678
5704
|
[errorMessages]="getErrorMessageMap(column)"
|
|
@@ -6121,56 +6147,56 @@ class CvaRangeDatePickerComponent {
|
|
|
6121
6147
|
useValue: APP_DATE_FORMATS,
|
|
6122
6148
|
},
|
|
6123
6149
|
], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: `
|
|
6124
|
-
|
|
6125
|
-
|
|
6126
|
-
|
|
6127
|
-
|
|
6128
|
-
|
|
6129
|
-
|
|
6130
|
-
|
|
6131
|
-
|
|
6132
|
-
|
|
6133
|
-
|
|
6134
|
-
|
|
6135
|
-
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6139
|
-
|
|
6140
|
-
|
|
6141
|
-
|
|
6142
|
-
|
|
6143
|
-
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6147
|
-
|
|
6148
|
-
|
|
6149
|
-
|
|
6150
|
-
|
|
6151
|
-
|
|
6152
|
-
|
|
6153
|
-
|
|
6154
|
-
|
|
6155
|
-
|
|
6150
|
+
<div class="cva-range-date-picker"
|
|
6151
|
+
[ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
|
|
6152
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
6153
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
6154
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
6155
|
+
<div class="label">
|
|
6156
|
+
<div>
|
|
6157
|
+
{{ (label ? label : '') | translate }}<span
|
|
6158
|
+
class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
|
|
6159
|
+
</div>
|
|
6160
|
+
</div>
|
|
6161
|
+
</mat-label>
|
|
6162
|
+
<mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
|
|
6163
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
6164
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
6165
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
|
|
6166
|
+
<mat-date-range-input [min]="getMinDate()"
|
|
6167
|
+
[max]="getMaxDate()"
|
|
6168
|
+
[rangePicker]="picker"
|
|
6169
|
+
[disabled]="getDisabled(disabledAll)"
|
|
6170
|
+
[title]="title">
|
|
6171
|
+
<input matStartDate
|
|
6172
|
+
[(ngModel)]="fromDateValue"
|
|
6173
|
+
readonly="readonly"
|
|
6174
|
+
[placeholder]="placeholderFromDate|translate"
|
|
6175
|
+
(click)="openRangePicker($event)">
|
|
6176
|
+
<input matEndDate
|
|
6177
|
+
[(ngModel)]="toDateValue"
|
|
6178
|
+
readOnly="true"
|
|
6179
|
+
[placeholder]="placeholderToDate|translate"
|
|
6180
|
+
(click)="openRangePicker($event)">
|
|
6181
|
+
</mat-date-range-input>
|
|
6156
6182
|
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
|
|
6183
|
+
<mat-datepicker-toggle matPrefix [for]="picker"
|
|
6184
|
+
[disabled]="getDisabled(disabledAll)">
|
|
6185
|
+
</mat-datepicker-toggle>
|
|
6186
|
+
<button mat-icon-button matSuffix
|
|
6187
|
+
color="warn" class="btnDatePicker"
|
|
6188
|
+
(click)="clearRange($event)"
|
|
6189
|
+
[disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
|
|
6190
|
+
type="button">
|
|
6191
|
+
<mat-icon>clear</mat-icon>
|
|
6192
|
+
</button>
|
|
6167
6193
|
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6194
|
+
<mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
|
|
6195
|
+
<mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
|
|
6196
|
+
{{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
6197
|
+
</mat-hint>
|
|
6198
|
+
</mat-form-field>
|
|
6199
|
+
</div>
|
|
6174
6200
|
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i5$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i5$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i5$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$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"] }, { kind: "directive", type: i8$1.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.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: "pipe", type: i1.TranslatePipe, name: "translate" }] });
|
|
6175
6201
|
}
|
|
6176
6202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, decorators: [{
|
|
@@ -6179,56 +6205,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
6179
6205
|
selector: 'cva-range-date-picker',
|
|
6180
6206
|
standalone: false,
|
|
6181
6207
|
template: `
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
|
|
6192
|
-
|
|
6193
|
-
|
|
6194
|
-
|
|
6195
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
6198
|
-
|
|
6199
|
-
|
|
6200
|
-
|
|
6201
|
-
|
|
6202
|
-
|
|
6203
|
-
|
|
6204
|
-
|
|
6205
|
-
|
|
6206
|
-
|
|
6207
|
-
|
|
6208
|
-
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
|
|
6208
|
+
<div class="cva-range-date-picker"
|
|
6209
|
+
[ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
|
|
6210
|
+
fxLayout="row" fxLayout.lt-sm="row wrap">
|
|
6211
|
+
<mat-label *ngIf="isLabelOutside" class="label_width"
|
|
6212
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
6213
|
+
<div class="label">
|
|
6214
|
+
<div>
|
|
6215
|
+
{{ (label ? label : '') | translate }}<span
|
|
6216
|
+
class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
|
|
6217
|
+
</div>
|
|
6218
|
+
</div>
|
|
6219
|
+
</mat-label>
|
|
6220
|
+
<mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
|
|
6221
|
+
[hideRequiredMarker]="!isFloatLabel"
|
|
6222
|
+
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
|
|
6223
|
+
<mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
|
|
6224
|
+
<mat-date-range-input [min]="getMinDate()"
|
|
6225
|
+
[max]="getMaxDate()"
|
|
6226
|
+
[rangePicker]="picker"
|
|
6227
|
+
[disabled]="getDisabled(disabledAll)"
|
|
6228
|
+
[title]="title">
|
|
6229
|
+
<input matStartDate
|
|
6230
|
+
[(ngModel)]="fromDateValue"
|
|
6231
|
+
readonly="readonly"
|
|
6232
|
+
[placeholder]="placeholderFromDate|translate"
|
|
6233
|
+
(click)="openRangePicker($event)">
|
|
6234
|
+
<input matEndDate
|
|
6235
|
+
[(ngModel)]="toDateValue"
|
|
6236
|
+
readOnly="true"
|
|
6237
|
+
[placeholder]="placeholderToDate|translate"
|
|
6238
|
+
(click)="openRangePicker($event)">
|
|
6239
|
+
</mat-date-range-input>
|
|
6214
6240
|
|
|
6215
|
-
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6220
|
-
|
|
6221
|
-
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6241
|
+
<mat-datepicker-toggle matPrefix [for]="picker"
|
|
6242
|
+
[disabled]="getDisabled(disabledAll)">
|
|
6243
|
+
</mat-datepicker-toggle>
|
|
6244
|
+
<button mat-icon-button matSuffix
|
|
6245
|
+
color="warn" class="btnDatePicker"
|
|
6246
|
+
(click)="clearRange($event)"
|
|
6247
|
+
[disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
|
|
6248
|
+
type="button">
|
|
6249
|
+
<mat-icon>clear</mat-icon>
|
|
6250
|
+
</button>
|
|
6225
6251
|
|
|
6226
|
-
|
|
6227
|
-
|
|
6228
|
-
|
|
6229
|
-
|
|
6230
|
-
|
|
6231
|
-
|
|
6252
|
+
<mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
|
|
6253
|
+
<mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
|
|
6254
|
+
{{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
|
|
6255
|
+
</mat-hint>
|
|
6256
|
+
</mat-form-field>
|
|
6257
|
+
</div>
|
|
6232
6258
|
`,
|
|
6233
6259
|
providers: [
|
|
6234
6260
|
{ provide: DateAdapter, useClass: NsDateAdapter },
|
|
@@ -6457,7 +6483,7 @@ class CvaMultiUploadComponent {
|
|
|
6457
6483
|
<div class="uploadArea"
|
|
6458
6484
|
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
|
|
6459
6485
|
appDragDrop (onFileDropped)="onFileDroppedAction($event)">
|
|
6460
|
-
<input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
|
|
6486
|
+
<input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
|
|
6461
6487
|
[disabled]="disabled"
|
|
6462
6488
|
accept="{{accept ? accept.join() : '*/*'}}">
|
|
6463
6489
|
<mat-card>
|
|
@@ -6492,7 +6518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
|
|
|
6492
6518
|
<div class="uploadArea"
|
|
6493
6519
|
fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
|
|
6494
6520
|
appDragDrop (onFileDropped)="onFileDroppedAction($event)">
|
|
6495
|
-
<input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
|
|
6521
|
+
<input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
|
|
6496
6522
|
[disabled]="disabled"
|
|
6497
6523
|
accept="{{accept ? accept.join() : '*/*'}}">
|
|
6498
6524
|
<mat-card>
|
|
@@ -8474,7 +8500,7 @@ class CvaFlatTreeComponent {
|
|
|
8474
8500
|
children: [],
|
|
8475
8501
|
};
|
|
8476
8502
|
if (!node.children || !FlatTreeService.hasChild(node)) {
|
|
8477
|
-
node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
|
|
8503
|
+
node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
|
|
8478
8504
|
&& this.getDisplayInputFunc(node);
|
|
8479
8505
|
if (node.display) {
|
|
8480
8506
|
copiedData.push(node);
|
|
@@ -8483,7 +8509,7 @@ class CvaFlatTreeComponent {
|
|
|
8483
8509
|
else {
|
|
8484
8510
|
this.getDisplayTreeDataSource(node.children, copiedNode.children ? copiedNode.children : []);
|
|
8485
8511
|
// parent display
|
|
8486
|
-
node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
|
|
8512
|
+
node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
|
|
8487
8513
|
|| node.children?.some(childNode => childNode.display)) && this.getDisplayInputFunc(node);
|
|
8488
8514
|
node.checked = node.children.filter(child => child.display).length > 0 &&
|
|
8489
8515
|
node.children.filter(child => child.display).every(childNode => childNode.checked);
|