@c10t/nice-component-library 0.0.21-d → 0.0.21-f

package/components/datepicker/cva-date-picker.component.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter, Injector, OnInit } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, NgControl } from '@angular/forms';
+import { MatDatepicker } from '@angular/material/datepicker';
 import { DateUtilService } from '../../services/date-util.service';
 import { NiceComponentLibraryConfig } from '../../models/nice-component-library.config';
 import { ValidatorService } from '../../services/validator.service';
@@ -23,6 +24,7 @@ export declare class CvaDatePickerComponent implements ControlValueAccessor, OnI
     config: NiceComponentLibraryConfig;
     isFormControl: boolean;
     formControl: AbstractControl | undefined;
+    datepicker: MatDatepicker<any> | undefined;
     constructor(dateServiceUtil: DateUtilService, ngControl: NgControl, injector: Injector);
     get NsValidator(): typeof ValidatorService;
     get datepickerValue(): any;
@@ -39,6 +41,7 @@ export declare class CvaDatePickerComponent implements ControlValueAccessor, OnI
     getMaxDate(): Date;
     isString(inputValue: any): boolean;
     isShowControl(): boolean;
+    openDatepicker(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CvaDatePickerComponent, [null, { optional: true; self: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CvaDatePickerComponent, "cva-date-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "isLabelOutside": { "alias": "isLabelOutside"; "required": false; }; "isFloatLabel": { "alias": "isFloatLabel"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; "isFormControl": { "alias": "isFormControl"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/components/datepicker/cva-range-date-picker.component.d.ts

@@ -38,6 +38,7 @@ export declare class CvaRangeDatePickerComponent implements ControlValueAccessor
     isFormControl: boolean;
     formControl: AbstractControl | undefined;
     defaultFromDate: any;
+    picker: MatDateRangePicker<any> | undefined;
     constructor(dateServiceUtil: DateUtilService, ngControl: NgControl, injector: Injector);
     get NsValiator(): typeof ValidatorService;
     get fromDateValue(): any;
@@ -59,6 +60,7 @@ export declare class CvaRangeDatePickerComponent implements ControlValueAccessor
     checkRequired(isRequired: boolean | (() => boolean)): boolean;
     clearRange(event: Event): void;
     openPicker(picker: MatDateRangePicker<any>): void;
+    openRangePicker(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CvaRangeDatePickerComponent, [null, { optional: true; self: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CvaRangeDatePickerComponent, "cva-range-date-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholderFromDate": { "alias": "placeholderFromDate"; "required": false; }; "placeholderToDate": { "alias": "placeholderToDate"; "required": false; }; "disabledAll": { "alias": "disabledAll"; "required": false; }; "disabledFromDate": { "alias": "disabledFromDate"; "required": false; }; "value": { "alias": "value"; "required": false; }; "requiredFromDate": { "alias": "requiredFromDate"; "required": false; }; "requiredToDate": { "alias": "requiredToDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "isLabelOutside": { "alias": "isLabelOutside"; "required": false; }; "isFloatLabel": { "alias": "isFloatLabel"; "required": false; }; "percentOfLabelOutside": { "alias": "percentOfLabelOutside"; "required": false; }; "fromDateControlName": { "alias": "fromDateControlName"; "required": false; }; "toDateControlName": { "alias": "toDateControlName"; "required": false; }; "isFormControl": { "alias": "isFormControl"; "required": false; }; }, { "onChange": "onChange"; "onOpenPicker": "onOpenPicker"; }, never, never, false, never>;
 }

package/fesm2022/c10t-nice-component-library.mjs

@@ -3772,6 +3772,7 @@ class CvaDatePickerComponent {
     // Chỉ bằng false khi trong NsSmartTable thôi @@
     isFormControl = true;
     formControl;
+    datepicker;
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -3912,6 +3913,12 @@ class CvaDatePickerComponent {
     isShowControl() {
         return !this.disabled || (this.disabled && this.config && this.config.STYLE_DISABLE === 'CONTROL');
     }
+    openDatepicker(event) {
+        if (!this.disabled && this.datepicker) {
+            event.stopPropagation();
+            this.datepicker.open();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaDatePickerComponent, deps: [{ token: DateUtilService }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaDatePickerComponent, isStandalone: false, selector: "cva-date-picker", inputs: { label: "label", placeholder: "placeholder", value: "value", disabled: "disabled", required: "required", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { onChange: "onChange" }, providers: [
             { provide: DateAdapter, useClass: NsDateAdapter },
@@ -3919,7 +3926,7 @@ class CvaDatePickerComponent {
                 provide: MAT_DATE_FORMATS,
                 useValue: APP_DATE_FORMATS,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["xDatepicker"], descendants: true }], ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-date-picker"
          [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
@@ -3945,7 +3952,8 @@ class CvaDatePickerComponent {
                [readonly]="true"
                [required]="checkRequired(required)"
                [title]="title ? title : ''"
-               [min]="getMinDate()" [max]="getMaxDate()">
+               [min]="getMinDate()" [max]="getMaxDate()"
+               (click)="openDatepicker($event)">
         <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
         <mat-datepicker #xDatepicker></mat-datepicker>
         <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
@@ -4002,7 +4010,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                [readonly]="true"
                [required]="checkRequired(required)"
                [title]="title ? title : ''"
-               [min]="getMinDate()" [max]="getMaxDate()">
+               [min]="getMinDate()" [max]="getMaxDate()"
+               (click)="openDatepicker($event)">
         <mat-datepicker-toggle matPrefix [for]="xDatepicker" [disabled]="disabled"></mat-datepicker-toggle>
         <mat-datepicker #xDatepicker></mat-datepicker>
         <button mat-icon-button color="warn" class="btnDatePicker" matSuffix (click)="onClear()" [disabled]="disabled">
@@ -4065,6 +4074,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], datepicker: [{
+                type: ViewChild,
+                args: ['xDatepicker']
             }] } });
 
 class CvaMultiSelectAutocomplete {
@@ -5291,7 +5303,7 @@ class CvaSmartTableComponent {
                      class="{{TableService.getColumnClassName(column, result)}}"
                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                      (click)="$event.stopPropagation()">
-                  <button mat-icon-button
+                  <button mat-icon-button type="button"
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
@@ -5393,7 +5405,7 @@ class CvaSmartTableComponent {
                 [attr.colspan]="buttonColspan">
               <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
               <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
+                <button mat-icon-button type="button"
                         class="{{button.className}}"
                         color="{{$any(btnHeader).color}}"
                         (click)="onClick($any(btnHeader).click, null, null)"
@@ -5419,7 +5431,7 @@ class CvaSmartTableComponent {
             <td mat-cell [ngClass]="button.className"
                 *ngIf="TableService.onDisplayButtonCell(button, cell)"
                 (click)="$event.stopPropagation()">
-              <button mat-icon-button
+              <button mat-icon-button type="button"
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
@@ -5538,7 +5550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                      class="{{TableService.getColumnClassName(column, result)}}"
                      fxLayout="row" [fxLayoutAlign]="TableService.alignCellContent(column)"
                      (click)="$event.stopPropagation()">
-                  <button mat-icon-button
+                  <button mat-icon-button type="button"
                           color="{{column.button.color}}"
                           [ngClass]="column.button.className"
                           (click)="onClick(column.button.click, result, i)"
@@ -5640,7 +5652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 [attr.colspan]="buttonColspan">
               <!--                        [fxFlex]="getHeaderButtonWidth(i) + 'px' "-->
               <ng-container *ngIf="TableService.getButtonHeader(button) as btnHeader">
-                <button mat-icon-button
+                <button mat-icon-button type="button"
                         class="{{button.className}}"
                         color="{{$any(btnHeader).color}}"
                         (click)="onClick($any(btnHeader).click, null, null)"
@@ -5666,7 +5678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             <td mat-cell [ngClass]="button.className"
                 *ngIf="TableService.onDisplayButtonCell(button, cell)"
                 (click)="$event.stopPropagation()">
-              <button mat-icon-button
+              <button mat-icon-button type="button"
                       color="{{button.color}}"
                       [ngClass]="button.className"
                       (click)="onClick(button.click, cell, i)"
@@ -5792,6 +5804,7 @@ class CvaRangeDatePickerComponent {
     isFormControl = true;
     formControl;
     defaultFromDate; // lưu giá trị khởi tạo ban đầu khi truyền từ bên ngoài vào
+    picker;
     constructor(dateServiceUtil, ngControl, injector) {
         this.dateServiceUtil = dateServiceUtil;
         this.injector = injector;
@@ -6002,6 +6015,12 @@ class CvaRangeDatePickerComponent {
             this.onOpenPicker.emit(picker);
         }
     }
+    openRangePicker(event) {
+        if (!this.getDisabled(this.disabledAll) && this.picker) {
+            event.stopPropagation();
+            this.picker.open();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRangeDatePickerComponent, deps: [{ token: DateUtilService }, { token: i1$2.NgControl, optional: true, self: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaRangeDatePickerComponent, isStandalone: false, selector: "cva-range-date-picker", inputs: { label: "label", placeholderFromDate: "placeholderFromDate", placeholderToDate: "placeholderToDate", disabledAll: "disabledAll", disabledFromDate: "disabledFromDate", value: "value", requiredFromDate: "requiredFromDate", requiredToDate: "requiredToDate", minDate: "minDate", maxDate: "maxDate", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", fromDateControlName: "fromDateControlName", toDateControlName: "toDateControlName", isFormControl: "isFormControl" }, outputs: { onChange: "onChange", onOpenPicker: "onOpenPicker" }, providers: [
             { provide: DateAdapter, useClass: NsDateAdapter },
@@ -6009,7 +6028,7 @@ class CvaRangeDatePickerComponent {
                 provide: MAT_DATE_FORMATS,
                 useValue: APP_DATE_FORMATS,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: `
     <div class="cva-range-date-picker"
          [ngClass]="{'labelOutside': isLabelOutside, 'float_label': isFloatLabel && !isLabelOutside}"
          fxLayout="row" fxLayout.lt-sm="row wrap">
@@ -6034,11 +6053,13 @@ class CvaRangeDatePickerComponent {
           <input matStartDate
                  [(ngModel)]="fromDateValue"
                  readonly="readonly"
-                 [placeholder]="placeholderFromDate|translate">
+                 [placeholder]="placeholderFromDate|translate"
+                 (click)="openRangePicker($event)">
           <input matEndDate
                  [(ngModel)]="toDateValue"
                  readOnly="true"
-                 [placeholder]="placeholderToDate|translate">
+                 [placeholder]="placeholderToDate|translate"
+                 (click)="openRangePicker($event)">
         </mat-date-range-input>
 
         <mat-datepicker-toggle matPrefix [for]="picker"
@@ -6090,11 +6111,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
           <input matStartDate
                  [(ngModel)]="fromDateValue"
                  readonly="readonly"
-                 [placeholder]="placeholderFromDate|translate">
+                 [placeholder]="placeholderFromDate|translate"
+                 (click)="openRangePicker($event)">
           <input matEndDate
                  [(ngModel)]="toDateValue"
                  readOnly="true"
-                 [placeholder]="placeholderToDate|translate">
+                 [placeholder]="placeholderToDate|translate"
+                 (click)="openRangePicker($event)">
         </mat-date-range-input>
 
         <mat-datepicker-toggle matPrefix [for]="picker"
@@ -6165,6 +6188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Input
             }], isFormControl: [{
                 type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
             }] } });
 
 class DragDropDirective {