@c10t/nice-component-library 0.0.24 → 0.0.25

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.
Files changed (5) hide show
  1. package/fesm2022/c10t-nice-component-library.mjs +202 -181
  2. package/fesm2022/c10t-nice-component-library.mjs.map +1 -1
  3. package/models/components/column.model.d.ts +2 -0
  4. package/package.json +1 -1
  5. package/services/validator.service.d.ts +2 -2
package/fesm2022/c10t-nice-component-library.mjs CHANGED
@@ -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) {
@@ -4465,6 +4467,13 @@ class CvaMultiSelectAutocomplete {
4465
4467
  }
4466
4468
  }, 300);
4467
4469
  }
4470
+ else {
4471
+ // Khi đóng mat-select thì clear searchInput
4472
+ if (this.searchInputRef?.nativeElement) {
4473
+ this.searchInputRef.nativeElement.value = '';
4474
+ this.filterItem('');
4475
+ }
4476
+ }
4468
4477
  }
4469
4478
  getItemSize() {
4470
4479
  return this.sizeOfItemsInListByPixels;
@@ -4479,96 +4488,96 @@ class CvaMultiSelectAutocomplete {
4479
4488
  }
4480
4489
  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
4490
  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
- <!-- css labelOutside trong base.theme-->
4483
- <div class="cva-multi-select-autocomplete"
4484
- [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
4485
- fxLayout="row" fxLayout.lt-sm="row wrap">
4486
- <mat-label *ngIf="isLabelOutside" class="label_width"
4487
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4488
- <div class="label">
4489
- <div>
4490
- {{ (label ? label : placeholder) | translate }}<span
4491
- class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
4492
- </div>
4493
- </div>
4494
- </mat-label>
4495
- <mat-form-field *ngIf="isShowControl()"
4496
- appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4497
- [hideRequiredMarker]="!isFloatLabel"
4498
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4499
- <mat-label
4500
- *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
4501
- </mat-label>
4502
- <mat-select [disabled]="disabled"
4503
- [placeholder]="placeholder | translate"
4504
- [multiple]="multiple"
4505
- [(ngModel)]="selectedValue"
4506
- [required]="getRequired()"
4507
- (selectionChange)="matSelectionChange($event)"
4508
- (openedChange)="openChange($event)">
4509
- <div class="box-search">
4510
- <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
4511
- [(ngModel)]="selectAllChecked"
4512
- (change)="toggleSelectAll($event)"></mat-checkbox>
4513
- <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
4514
- (keydown.space)="$event.stopPropagation()"
4515
- (input)="filterItem(searchInput.value)"
4516
- placeholder="{{'btnSearch' | translate}}...">
4517
- <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
4518
- <button mat-icon-button class="search-button">
4519
- <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
4520
- </button>
4521
- </div>
4522
- </div>
4523
- <mat-select-trigger title="{{titleString|translate}}">
4524
- {{ displayString | translate }}
4525
- </mat-select-trigger>
4526
- <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
4527
- [style.height.px]="getViewPortHeight()">
4528
- <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
4529
- [attr.data-optionIndex]="i"
4530
- [disabled]="option.disabled" [value]="option.value"
4531
- [ngClass]="{'tree-mat-option': isTree}"
4532
- title="{{option.displayValue|translate}}"
4533
- (onSelectionChange)="onSelectionChange($event)">
4534
- <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
4535
- <div *ngIf="!!isTree" class="tree-multiline-mat-option">
4536
- <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
4537
- <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
4538
- </div>
4539
- </mat-option>
4540
- </cdk-virtual-scroll-viewport>
4541
- <ng-container *ngIf="multiple">
4542
- <ng-container *ngFor="let option of selectedValue; let i = index">
4543
- <mat-option class="selected-options" [value]="option" *ngIf="i===0">
4544
- {{ option }}
4545
- </mat-option>
4491
+ <!-- css labelOutside trong base.theme-->
4492
+ <div class="cva-multi-select-autocomplete"
4493
+ [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
4494
+ fxLayout="row" fxLayout.lt-sm="row wrap">
4495
+ <mat-label *ngIf="isLabelOutside" class="label_width"
4496
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4497
+ <div class="label">
4498
+ <div>
4499
+ {{ (label ? label : placeholder) | translate }}<span
4500
+ class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
4501
+ </div>
4502
+ </div>
4503
+ </mat-label>
4504
+ <mat-form-field *ngIf="isShowControl()"
4505
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4506
+ [hideRequiredMarker]="!isFloatLabel"
4507
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4508
+ <mat-label
4509
+ *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
4510
+ </mat-label>
4511
+ <mat-select [disabled]="disabled"
4512
+ [placeholder]="placeholder | translate"
4513
+ [multiple]="multiple"
4514
+ [(ngModel)]="selectedValue"
4515
+ [required]="getRequired()"
4516
+ (selectionChange)="matSelectionChange($event)"
4517
+ (openedChange)="openChange($event)">
4518
+ <div class="box-search">
4519
+ <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
4520
+ [(ngModel)]="selectAllChecked"
4521
+ (change)="toggleSelectAll($event)"></mat-checkbox>
4522
+ <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
4523
+ (keydown.space)="$event.stopPropagation()"
4524
+ (input)="filterItem(searchInput.value)"
4525
+ placeholder="{{'btnSearch' | translate}}...">
4526
+ <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
4527
+ <button mat-icon-button class="search-button">
4528
+ <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
4529
+ </button>
4530
+ </div>
4531
+ </div>
4532
+ <mat-select-trigger title="{{titleString|translate}}">
4533
+ {{ displayString | translate }}
4534
+ </mat-select-trigger>
4535
+ <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
4536
+ [style.height.px]="getViewPortHeight()">
4537
+ <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
4538
+ [attr.data-optionIndex]="i"
4539
+ [disabled]="option.disabled" [value]="option.value"
4540
+ [ngClass]="{'tree-mat-option': isTree}"
4541
+ title="{{option.displayValue|translate}}"
4542
+ (onSelectionChange)="onSelectionChange($event)">
4543
+ <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
4544
+ <div *ngIf="!!isTree" class="tree-multiline-mat-option">
4545
+ <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
4546
+ <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
4547
+ </div>
4548
+ </mat-option>
4549
+ </cdk-virtual-scroll-viewport>
4550
+ <ng-container *ngIf="multiple">
4551
+ <ng-container *ngFor="let option of selectedValue; let i = index">
4552
+ <mat-option class="selected-options" [value]="option" *ngIf="i===0">
4553
+ {{ option }}
4554
+ </mat-option>
4555
+ </ng-container>
4556
+ </ng-container>
4557
+ <ng-container *ngIf="!multiple">
4558
+ <mat-option class="selected-options" *ngIf="!!selectedValue"
4559
+ [value]="selectedValue">{{ selectedValue }}
4560
+ </mat-option>
4561
+ </ng-container>
4562
+ </mat-select>
4563
+ <mat-icon matSuffix>expand_more</mat-icon>
4564
+ <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
4565
+ <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4566
+ {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4567
+ </mat-hint>
4568
+ </mat-form-field>
4569
+ <ng-container *ngIf="!isShowControl()">
4570
+ <div class="cva-style-disable-text">
4571
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4572
+ {{ (label ? label : placeholder) | translate }}
4573
+ </mat-label>
4574
+ <div [title]="titleString | translate">
4575
+ {{ displayString | translate }}
4576
+ </div>
4577
+ </div>
4546
4578
  </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
4579
  </div>
4569
- </ng-container>
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" }] });
4580
+ `, 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
4581
  }
4573
4582
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, decorators: [{
4574
4583
  type: Component,
@@ -4576,96 +4585,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
4576
4585
  selector: 'cva-multi-select-autocomplete',
4577
4586
  standalone: false,
4578
4587
  template: `
4579
- <!-- css labelOutside trong base.theme-->
4580
- <div class="cva-multi-select-autocomplete"
4581
- [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
4582
- fxLayout="row" fxLayout.lt-sm="row wrap">
4583
- <mat-label *ngIf="isLabelOutside" class="label_width"
4584
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4585
- <div class="label">
4586
- <div>
4587
- {{ (label ? label : placeholder) | translate }}<span
4588
- class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
4589
- </div>
4590
- </div>
4591
- </mat-label>
4592
- <mat-form-field *ngIf="isShowControl()"
4593
- appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4594
- [hideRequiredMarker]="!isFloatLabel"
4595
- fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4596
- <mat-label
4597
- *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
4598
- </mat-label>
4599
- <mat-select [disabled]="disabled"
4600
- [placeholder]="placeholder | translate"
4601
- [multiple]="multiple"
4602
- [(ngModel)]="selectedValue"
4603
- [required]="getRequired()"
4604
- (selectionChange)="matSelectionChange($event)"
4605
- (openedChange)="openChange($event)">
4606
- <div class="box-search">
4607
- <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
4608
- [(ngModel)]="selectAllChecked"
4609
- (change)="toggleSelectAll($event)"></mat-checkbox>
4610
- <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
4611
- (keydown.space)="$event.stopPropagation()"
4612
- (input)="filterItem(searchInput.value)"
4613
- placeholder="{{'btnSearch' | translate}}...">
4614
- <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
4615
- <button mat-icon-button class="search-button">
4616
- <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
4617
- </button>
4618
- </div>
4619
- </div>
4620
- <mat-select-trigger title="{{titleString|translate}}">
4621
- {{ displayString | translate }}
4622
- </mat-select-trigger>
4623
- <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
4624
- [style.height.px]="getViewPortHeight()">
4625
- <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
4626
- [attr.data-optionIndex]="i"
4627
- [disabled]="option.disabled" [value]="option.value"
4628
- [ngClass]="{'tree-mat-option': isTree}"
4629
- title="{{option.displayValue|translate}}"
4630
- (onSelectionChange)="onSelectionChange($event)">
4631
- <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
4632
- <div *ngIf="!!isTree" class="tree-multiline-mat-option">
4633
- <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
4634
- <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
4635
- </div>
4636
- </mat-option>
4637
- </cdk-virtual-scroll-viewport>
4638
- <ng-container *ngIf="multiple">
4639
- <ng-container *ngFor="let option of selectedValue; let i = index">
4640
- <mat-option class="selected-options" [value]="option" *ngIf="i===0">
4641
- {{ option }}
4642
- </mat-option>
4588
+ <!-- css labelOutside trong base.theme-->
4589
+ <div class="cva-multi-select-autocomplete"
4590
+ [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
4591
+ fxLayout="row" fxLayout.lt-sm="row wrap">
4592
+ <mat-label *ngIf="isLabelOutside" class="label_width"
4593
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4594
+ <div class="label">
4595
+ <div>
4596
+ {{ (label ? label : placeholder) | translate }}<span
4597
+ class="required-label-outside">{{ !!getRequired() ? '*' : '' }}</span>
4598
+ </div>
4599
+ </div>
4600
+ </mat-label>
4601
+ <mat-form-field *ngIf="isShowControl()"
4602
+ appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
4603
+ [hideRequiredMarker]="!isFloatLabel"
4604
+ fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
4605
+ <mat-label
4606
+ *ngIf="!isLabelOutside && !!isFloatLabel">{{ (label ? label : placeholder) | translate }}
4607
+ </mat-label>
4608
+ <mat-select [disabled]="disabled"
4609
+ [placeholder]="placeholder | translate"
4610
+ [multiple]="multiple"
4611
+ [(ngModel)]="selectedValue"
4612
+ [required]="getRequired()"
4613
+ (selectionChange)="matSelectionChange($event)"
4614
+ (openedChange)="openChange($event)">
4615
+ <div class="box-search">
4616
+ <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all"
4617
+ [(ngModel)]="selectAllChecked"
4618
+ (change)="toggleSelectAll($event)"></mat-checkbox>
4619
+ <input #searchInput type="text" [ngClass]="{'pl-1': !multiple}"
4620
+ (keydown.space)="$event.stopPropagation()"
4621
+ (input)="filterItem(searchInput.value)"
4622
+ placeholder="{{'btnSearch' | translate}}...">
4623
+ <div class="box-search-icon" (click)="filterItem(''); searchInput.value = ''">
4624
+ <button mat-icon-button class="search-button">
4625
+ <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
4626
+ </button>
4627
+ </div>
4628
+ </div>
4629
+ <mat-select-trigger title="{{titleString|translate}}">
4630
+ {{ displayString | translate }}
4631
+ </mat-select-trigger>
4632
+ <cdk-virtual-scroll-viewport [itemSize]="getItemSize()"
4633
+ [style.height.px]="getViewPortHeight()">
4634
+ <mat-option *cdkVirtualFor="let option of filteredOptions; let i = index"
4635
+ [attr.data-optionIndex]="i"
4636
+ [disabled]="option.disabled" [value]="option.value"
4637
+ [ngClass]="{'tree-mat-option': isTree}"
4638
+ title="{{option.displayValue|translate}}"
4639
+ (onSelectionChange)="onSelectionChange($event)">
4640
+ <div *ngIf="!isTree">{{ option.displayValue | translate }}</div>
4641
+ <div *ngIf="!!isTree" class="tree-multiline-mat-option">
4642
+ <div mat-line>{{ onDisplayTreeData(option.displayValue, true) }}</div>
4643
+ <p mat-line>{{ onDisplayTreeData(option.displayValue, false) }}</p>
4644
+ </div>
4645
+ </mat-option>
4646
+ </cdk-virtual-scroll-viewport>
4647
+ <ng-container *ngIf="multiple">
4648
+ <ng-container *ngFor="let option of selectedValue; let i = index">
4649
+ <mat-option class="selected-options" [value]="option" *ngIf="i===0">
4650
+ {{ option }}
4651
+ </mat-option>
4652
+ </ng-container>
4653
+ </ng-container>
4654
+ <ng-container *ngIf="!multiple">
4655
+ <mat-option class="selected-options" *ngIf="!!selectedValue"
4656
+ [value]="selectedValue">{{ selectedValue }}
4657
+ </mat-option>
4658
+ </ng-container>
4659
+ </mat-select>
4660
+ <mat-icon matSuffix>expand_more</mat-icon>
4661
+ <mat-hint *ngIf="!NsValidator.invalid(formControl)">{{ hint | translate }}</mat-hint>
4662
+ <mat-hint style="color: red" *ngIf="NsValidator.invalid(formControl)">
4663
+ {{ NsValidator.getErrorMessageV1(formControl, errorMessages).msg | translate: NsValidator.getErrorMessageV1(formControl, errorMessages).params }}
4664
+ </mat-hint>
4665
+ </mat-form-field>
4666
+ <ng-container *ngIf="!isShowControl()">
4667
+ <div class="cva-style-disable-text">
4668
+ <mat-label *ngIf="!isLabelOutside && isFloatLabel">
4669
+ {{ (label ? label : placeholder) | translate }}
4670
+ </mat-label>
4671
+ <div [title]="titleString | translate">
4672
+ {{ displayString | translate }}
4673
+ </div>
4674
+ </div>
4643
4675
  </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
4676
  </div>
4666
- </ng-container>
4667
- </div>
4668
- `,
4677
+ `,
4669
4678
  }]
4670
4679
  }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
4671
4680
  type: Self
@@ -5351,6 +5360,7 @@ class CvaSmartTableComponent {
5351
5360
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5352
5361
  #cellComponentRef
5353
5362
  class="inputNumber" #nsCounterInput
5363
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5354
5364
  [isFormControl]="false"
5355
5365
  [alignNumber]="getAlign(column)"
5356
5366
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5364,6 +5374,7 @@ class CvaSmartTableComponent {
5364
5374
  </cva-counter-input>
5365
5375
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5366
5376
  #cellComponentRef
5377
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5367
5378
  [isFormControl]="false"
5368
5379
  [alignText]="getAlign(column)"
5369
5380
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5372,10 +5383,13 @@ class CvaSmartTableComponent {
5372
5383
  [maxLength]="column.max ? column.max(result) : undefined"
5373
5384
  [required]="TableService.getRequired(column)"
5374
5385
  [errorMessages]="getErrorMessageMap(column)"
5375
- (onChange)="onCellValueChange(result, column, $event);">
5386
+ (onChange)="onCellValueChange(result, column, $event);"
5387
+ [pattern]="column.pattern ? column.pattern : undefined"
5388
+ [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5376
5389
  </cva-input>
5377
5390
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5378
5391
  #cellComponentRef
5392
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5379
5393
  [isFormControl]="false"
5380
5394
  [alignText]="getAlign(column)"
5381
5395
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5403,6 +5417,7 @@ class CvaSmartTableComponent {
5403
5417
  #cellComponentRef
5404
5418
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5405
5419
  class="multiSelectAutocomplete"
5420
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5406
5421
  [isTree]="column.isTree??false"
5407
5422
  [value]="result[column.columnDef]"
5408
5423
  [errorMessages]="getErrorMessageMap(column)"
@@ -5621,6 +5636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5621
5636
  <cva-counter-input *ngSwitchCase="ColumnTypeEnum.INPUT_COUNTER"
5622
5637
  #cellComponentRef
5623
5638
  class="inputNumber" #nsCounterInput
5639
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5624
5640
  [isFormControl]="false"
5625
5641
  [alignNumber]="getAlign(column)"
5626
5642
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5634,6 +5650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5634
5650
  </cva-counter-input>
5635
5651
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT"
5636
5652
  #cellComponentRef
5653
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5637
5654
  [isFormControl]="false"
5638
5655
  [alignText]="getAlign(column)"
5639
5656
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5642,10 +5659,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5642
5659
  [maxLength]="column.max ? column.max(result) : undefined"
5643
5660
  [required]="TableService.getRequired(column)"
5644
5661
  [errorMessages]="getErrorMessageMap(column)"
5645
- (onChange)="onCellValueChange(result, column, $event);">
5662
+ (onChange)="onCellValueChange(result, column, $event);"
5663
+ [pattern]="column.pattern ? column.pattern : undefined"
5664
+ [patternFilter]="column.patternFilter ? column.patternFilter : ''">
5646
5665
  </cva-input>
5647
5666
  <cva-input *ngSwitchCase="ColumnTypeEnum.INPUT_CURRENCY"
5648
5667
  #cellComponentRef
5668
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5649
5669
  [isFormControl]="false"
5650
5670
  [alignText]="getAlign(column)"
5651
5671
  [disabled]="column.disabled ? column.disabled(result) : false"
@@ -5673,6 +5693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
5673
5693
  #cellComponentRef
5674
5694
  *ngSwitchCase="ColumnTypeEnum.MULTI_SELECT_AUTOCOMPLETE"
5675
5695
  class="multiSelectAutocomplete"
5696
+ [placeholder]="moduleName + '.table.placeholder.' + column.columnDef"
5676
5697
  [isTree]="column.isTree??false"
5677
5698
  [value]="result[column.columnDef]"
5678
5699
  [errorMessages]="getErrorMessageMap(column)"
@@ -8474,7 +8495,7 @@ class CvaFlatTreeComponent {
8474
8495
  children: [],
8475
8496
  };
8476
8497
  if (!node.children || !FlatTreeService.hasChild(node)) {
8477
- node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
8498
+ node.display = node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
8478
8499
  && this.getDisplayInputFunc(node);
8479
8500
  if (node.display) {
8480
8501
  copiedData.push(node);
@@ -8483,7 +8504,7 @@ class CvaFlatTreeComponent {
8483
8504
  else {
8484
8505
  this.getDisplayTreeDataSource(node.children, copiedNode.children ? copiedNode.children : []);
8485
8506
  // parent display
8486
- node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase())
8507
+ node.display = (node.displayValue.toLowerCase().includes(this.searchText.toLowerCase().trim())
8487
8508
  || node.children?.some(childNode => childNode.display)) && this.getDisplayInputFunc(node);
8488
8509
  node.checked = node.children.filter(child => child.display).length > 0 &&
8489
8510
  node.children.filter(child => child.display).every(childNode => childNode.checked);