@c10t/nice-component-library 0.0.25 → 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.
@@ -3,5 +3,5 @@ export declare class NumericInputFormat {
3
3
  decimalMarker: string;
4
4
  constructor();
5
5
  unformatValue(value: any): any;
6
- formatValue(value: any): string;
6
+ formatValue(value: string | number | null | undefined): string;
7
7
  }
@@ -2654,7 +2654,7 @@ class CvaTableComponent {
2654
2654
  this.buttonColspan = TableService.getHeaderButtonColspan(this.buttons, this.results.data);
2655
2655
  }
2656
2656
  onChangeGoToPageNumber($event) {
2657
- if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event)) {
2657
+ if ($event === null || Number.isNaN($event) || !Number.isSafeInteger($event) || this.goToPageNumber < 1) {
2658
2658
  this.goToPageNumber = 1;
2659
2659
  return;
2660
2660
  }
@@ -3135,15 +3135,14 @@ class NumericInputFormat {
3135
3135
  if (value === null || value === undefined) {
3136
3136
  return '';
3137
3137
  }
3138
- value += '';
3138
+ const raw = value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 10, useGrouping: false });
3139
3139
  const [thousandSeparator, decimalMarker] = formatNumber(1000.99, this.locale).replace(/\d/g, '');
3140
3140
  this.decimalMarker = decimalMarker;
3141
3141
  // Here value should always come with . as decimal marker thus any other behavior is bug
3142
- const [integer, decimal] = value.toString().split('.');
3143
- // console.log('4');
3142
+ const [integer, decimal] = raw.split('.');
3144
3143
  // Group every three elements, and add thousandSeparator after them
3145
- const v = (Number(integer) + '').replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
3146
- return Number(decimal) ? v.concat('.', decimal) : (integer === '' ? '' : v);
3144
+ const v = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
3145
+ return typeof decimal !== 'undefined' ? v + '.' + decimal : v;
3147
3146
  }
3148
3147
  }
3149
3148
 
@@ -4023,56 +4022,58 @@ class CvaDatePickerComponent {
4023
4022
  useValue: APP_DATE_FORMATS,
4024
4023
  },
4025
4024
  ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["xDatepicker"], descendants: true }], ngImport: i0, template: `
4026
- <!-- css labelOutside trong base.theme-->
4027
- <div class="cva-date-picker"
4028
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4029
- fxLayout="row" fxLayout.lt-sm="row wrap">
4030
- <mat-label *ngIf="isLabelOutside" class="label_width"
4031
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4032
- <div class="label">
4033
- <div>
4034
- {{ (label ? label : placeholder) | translate }}<span
4035
- class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4036
- </div>
4037
- </div>
4038
- </mat-label>
4039
- <mat-form-field *ngIf="isShowControl()"
4040
- appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4041
- [hideRequiredMarker]="!isFloatLabel"
4042
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4043
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</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()" [disabled]="disabled">
4056
- <mat-icon>clear</mat-icon>
4057
- </button>
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>
4058
4059
 
4059
- <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4060
- {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4061
- </mat-hint>
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>
4062
4063
 
4063
- </mat-form-field>
4064
+ </mat-form-field>
4064
4065
 
4065
- <ng-container *ngIf="!isShowControl()">
4066
- <div class="cva-style-disable-text">
4067
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4068
- {{ (label ? label : placeholder) | translate }}
4069
- </mat-label>
4070
- <div [title]="title ? title : ''">
4071
- {{ title ? title : '' }}
4072
- </div>
4073
- </div>
4074
- </ng-container>
4075
- </div>
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>
4076
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" }] });
4077
4078
  }
4078
4079
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, decorators: [{
@@ -4081,56 +4082,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4081
4082
  selector: 'cva-date-picker',
4082
4083
  standalone: false,
4083
4084
  template: `
4084
- <!-- css labelOutside trong base.theme-->
4085
- <div class="cva-date-picker"
4086
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
4087
- fxLayout="row" fxLayout.lt-sm="row wrap">
4088
- <mat-label *ngIf="isLabelOutside" class="label_width"
4089
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4090
- <div class="label">
4091
- <div>
4092
- {{ (label ? label : placeholder) | translate }}<span
4093
- class="required-label-outside">{{ !!required ? '*' : '' }}</span>
4094
- </div>
4095
- </div>
4096
- </mat-label>
4097
- <mat-form-field *ngIf="isShowControl()"
4098
- appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
4099
- [hideRequiredMarker]="!isFloatLabel"
4100
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4101
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : placeholder) | translate }}</mat-label>
4102
- <input matInput [matDatepicker]="xDatepicker"
4103
- [placeholder]="placeholder|translate"
4104
- [(ngModel)]="datepickerValue"
4105
- [disabled]="disabled"
4106
- [readonly]="true"
4107
- [required]="checkRequired(required)"
4108
- [title]="title ? title : ''"
4109
- [min]="getMinDate()" [max]="getMaxDate()"
4110
- (click)="openDatepicker($event)">
4111
- <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
4112
- <mat-datepicker #xDatepicker></mat-datepicker>
4113
- <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
4114
- <mat-icon>clear</mat-icon>
4115
- </button>
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>
4116
4119
 
4117
- <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4118
- {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4119
- </mat-hint>
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>
4120
4123
 
4121
- </mat-form-field>
4124
+ </mat-form-field>
4122
4125
 
4123
- <ng-container *ngIf="!isShowControl()">
4124
- <div class="cva-style-disable-text">
4125
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4126
- {{ (label ? label : placeholder) | translate }}
4127
- </mat-label>
4128
- <div [title]="title ? title : ''">
4129
- {{ title ? title : '' }}
4130
- </div>
4131
- </div>
4132
- </ng-container>
4133
- </div>
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>
4134
4137
  `,
4135
4138
  providers: [
4136
4139
  { provide: DateAdapter, useClass: NsDateAdapter },
@@ -5360,7 +5363,7 @@ class CvaSmartTableComponent {
5360
5363
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5361
5364
  #cellComponentRef
5362
5365
  class="inputNumber" #nsCounterInput
5363
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5366
+ [placeholder]="moduleName + '.table.placeholder.input.counter'"
5364
5367
  [isFormControl]="false"
5365
5368
  [alignNumber]="getAlign(column)"
5366
5369
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5374,7 +5377,7 @@ class CvaSmartTableComponent {
5374
5377
  </cva-counter-input>
5375
5378
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5376
5379
  #cellComponentRef
5377
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5380
+ [placeholder]="moduleName + '.table.placeholder.input'"
5378
5381
  [isFormControl]="false"
5379
5382
  [alignText]="getAlign(column)"
5380
5383
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5388,8 +5391,8 @@ class CvaSmartTableComponent {
5388
5391
  [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5389
5392
  </cva-input>
5390
5393
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5391
- #cellComponentRef
5392
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5394
+ type="number" #cellComponentRef
5395
+ [placeholder]="moduleName + '.table.placeholder.input.currency'"
5393
5396
  [isFormControl]="false"
5394
5397
  [alignText]="getAlign(column)"
5395
5398
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5399,7 +5402,8 @@ class CvaSmartTableComponent {
5399
5402
  [required]="TableService.getRequired(column)"
5400
5403
  [errorMessages]="getErrorMessageMap(column)"
5401
5404
  (onChange)="onCellValueChange(result, column, $event);"
5402
- [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 : ''"
5403
5407
  [formatFunc]="formatFunc">
5404
5408
  </cva-input>
5405
5409
  <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
@@ -5417,7 +5421,7 @@ class CvaSmartTableComponent {
5417
5421
  #cellComponentRef
5418
5422
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5419
5423
  class="multiSelectAutocomplete"
5420
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5424
+ [placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
5421
5425
  [isTree]="column.isTree??false"
5422
5426
  [value]="result[column.columnDef]"
5423
5427
  [errorMessages]="getErrorMessageMap(column)"
@@ -5636,7 +5640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5636
5640
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5637
5641
  #cellComponentRef
5638
5642
  class="inputNumber" #nsCounterInput
5639
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5643
+ [placeholder]="moduleName + '.table.placeholder.input.counter'"
5640
5644
  [isFormControl]="false"
5641
5645
  [alignNumber]="getAlign(column)"
5642
5646
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5650,7 +5654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5650
5654
  </cva-counter-input>
5651
5655
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5652
5656
  #cellComponentRef
5653
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5657
+ [placeholder]="moduleName + '.table.placeholder.input'"
5654
5658
  [isFormControl]="false"
5655
5659
  [alignText]="getAlign(column)"
5656
5660
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5664,8 +5668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5664
5668
  [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5665
5669
  </cva-input>
5666
5670
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5667
- #cellComponentRef
5668
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5671
+ type="number" #cellComponentRef
5672
+ [placeholder]="moduleName + '.table.placeholder.input.currency'"
5669
5673
  [isFormControl]="false"
5670
5674
  [alignText]="getAlign(column)"
5671
5675
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5675,7 +5679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5675
5679
  [required]="TableService.getRequired(column)"
5676
5680
  [errorMessages]="getErrorMessageMap(column)"
5677
5681
  (onChange)="onCellValueChange(result, column, $event);"
5678
- [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 : ''"
5679
5684
  [formatFunc]="formatFunc">
5680
5685
  </cva-input>
5681
5686
  <cva-date-picker *ngSwitchCase="ColumnTypeEnum.DATE_PICKER"
@@ -5693,7 +5698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5693
5698
  #cellComponentRef
5694
5699
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5695
5700
  class="multiSelectAutocomplete"
5696
- [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5701
+ [placeholder]="moduleName + '.table.placeholder.multi.select.autocomplete'"
5697
5702
  [isTree]="column.isTree??false"
5698
5703
  [value]="result[column.columnDef]"
5699
5704
  [errorMessages]="getErrorMessageMap(column)"
@@ -6142,56 +6147,56 @@ class CvaRangeDatePickerComponent {
6142
6147
  useValue: APP_DATE_FORMATS,
6143
6148
  },
6144
6149
  ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: `
6145
- <div class="cva-range-date-picker"
6146
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6147
- fxLayout="row" fxLayout.lt-sm="row wrap">
6148
- <mat-label *ngIf="isLabelOutside" class="label_width"
6149
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6150
- <div class="label">
6151
- <div>
6152
- {{ (label ? label : '') | translate }}<span
6153
- class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6154
- </div>
6155
- </div>
6156
- </mat-label>
6157
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6158
- [hideRequiredMarker]="!isFloatLabel"
6159
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6160
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6161
- <mat-date-range-input [min]="getMinDate()"
6162
- [max]="getMaxDate()"
6163
- [rangePicker]="picker"
6164
- [disabled]="getDisabled(disabledAll)"
6165
- [title]="title">
6166
- <input matStartDate
6167
- [(ngModel)]="fromDateValue"
6168
- readonly="readonly"
6169
- [placeholder]="placeholderFromDate|translate"
6170
- (click)="openRangePicker($event)">
6171
- <input matEndDate
6172
- [(ngModel)]="toDateValue"
6173
- readOnly="true"
6174
- [placeholder]="placeholderToDate|translate"
6175
- (click)="openRangePicker($event)">
6176
- </mat-date-range-input>
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>
6177
6182
 
6178
- <mat-datepicker-toggle matPrefix [for]="picker"
6179
- [disabled]="getDisabled(disabledAll)">
6180
- </mat-datepicker-toggle>
6181
- <button mat-icon-button matSuffix
6182
- color="warn" class="btnDatePicker"
6183
- (click)="clearRange($event)"
6184
- [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6185
- >
6186
- <mat-icon>clear</mat-icon>
6187
- </button>
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>
6188
6193
 
6189
- <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6190
- <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6191
- {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6192
- </mat-hint>
6193
- </mat-form-field>
6194
- </div>
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>
6195
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" }] });
6196
6201
  }
6197
6202
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, decorators: [{
@@ -6200,56 +6205,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6200
6205
  selector: 'cva-range-date-picker',
6201
6206
  standalone: false,
6202
6207
  template: `
6203
- <div class="cva-range-date-picker"
6204
- [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
6205
- fxLayout="row" fxLayout.lt-sm="row wrap">
6206
- <mat-label *ngIf="isLabelOutside" class="label_width"
6207
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6208
- <div class="label">
6209
- <div>
6210
- {{ (label ? label : '') | translate }}<span
6211
- class="required-label-outside">{{ !!(requiredFromDate || requiredToDate) ? '*' : '' }}</span>
6212
- </div>
6213
- </div>
6214
- </mat-label>
6215
- <mat-form-field appearance="outline" [floatLabel]="isFloatLabel ? 'always' : 'auto'"
6216
- [hideRequiredMarker]="!isFloatLabel"
6217
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
6218
- <mat-label *ngIf="!isLabelOutside && isFloatLabel">{{ (label ? label : '') | translate }}</mat-label>
6219
- <mat-date-range-input [min]="getMinDate()"
6220
- [max]="getMaxDate()"
6221
- [rangePicker]="picker"
6222
- [disabled]="getDisabled(disabledAll)"
6223
- [title]="title">
6224
- <input matStartDate
6225
- [(ngModel)]="fromDateValue"
6226
- readonly="readonly"
6227
- [placeholder]="placeholderFromDate|translate"
6228
- (click)="openRangePicker($event)">
6229
- <input matEndDate
6230
- [(ngModel)]="toDateValue"
6231
- readOnly="true"
6232
- [placeholder]="placeholderToDate|translate"
6233
- (click)="openRangePicker($event)">
6234
- </mat-date-range-input>
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>
6235
6240
 
6236
- <mat-datepicker-toggle matPrefix [for]="picker"
6237
- [disabled]="getDisabled(disabledAll)">
6238
- </mat-datepicker-toggle>
6239
- <button mat-icon-button matSuffix
6240
- color="warn" class="btnDatePicker"
6241
- (click)="clearRange($event)"
6242
- [disabled]="getDisabled(disabledAll) || (checkRequired(requiredFromDate) && checkRequired(requiredToDate))"
6243
- >
6244
- <mat-icon>clear</mat-icon>
6245
- </button>
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>
6246
6251
 
6247
- <mat-date-range-picker #picker (opened)="openPicker(picker)"></mat-date-range-picker>
6248
- <mat-hint style="color: red" *ngIf="NsValiator.invalid(formControl)">
6249
- {{ NsValiator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValiator.getErrorMessageV1(formControl, errorMessages).params }}
6250
- </mat-hint>
6251
- </mat-form-field>
6252
- </div>
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>
6253
6258
  `,
6254
6259
  providers: [
6255
6260
  { provide: DateAdapter, useClass: NsDateAdapter },
@@ -6478,7 +6483,7 @@ class CvaMultiUploadComponent {
6478
6483
  <div class="uploadArea"
6479
6484
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6480
6485
  appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6481
- <input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
6486
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6482
6487
  [disabled]="disabled"
6483
6488
  accept="{{accept ? accept.join() : '*/*'}}">
6484
6489
  <mat-card>
@@ -6513,7 +6518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
6513
6518
  <div class="uploadArea"
6514
6519
  fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%"
6515
6520
  appDragDrop (onFileDropped)="onFileDroppedAction($event)">
6516
- <input type="file" multiple #fileUpload (change)="onFileChangeAction($event)"
6521
+ <input type="file" [multiple]="multiple" #fileUpload (change)="onFileChangeAction($event)"
6517
6522
  [disabled]="disabled"
6518
6523
  accept="{{accept ? accept.join() : '*/*'}}">
6519
6524
  <mat-card>