@3kles/kles-material-dynamicforms 17.8.8 → 17.9.1

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 (12) hide show
  1. package/esm2022/lib/fields/clear.component.mjs +8 -3
  2. package/esm2022/lib/fields/field.abstract.mjs +11 -1
  3. package/esm2022/lib/fields/input.component.mjs +6 -5
  4. package/esm2022/lib/fields/select.component.mjs +5 -3
  5. package/esm2022/lib/fields/select.search.component.mjs +5 -3
  6. package/esm2022/lib/interfaces/field.config.interface.mjs +1 -1
  7. package/fesm2022/3kles-kles-material-dynamicforms.mjs +30 -10
  8. package/fesm2022/3kles-kles-material-dynamicforms.mjs.map +1 -1
  9. package/lib/fields/clear.component.d.ts +1 -0
  10. package/lib/fields/field.abstract.d.ts +2 -0
  11. package/lib/interfaces/field.config.interface.d.ts +2 -0
  12. package/package.json +1 -1
package/fesm2022/3kles-kles-material-dynamicforms.mjs CHANGED
@@ -166,9 +166,14 @@ class KlesFormClearComponent {
166
166
  event.stopPropagation();
167
167
  this.group.controls[this.field.name].reset();
168
168
  }
169
+ isDisable() {
170
+ return this.group.get(this.field.name).disabled
171
+ || !this.group.get(this.field.name).value
172
+ || (Array.isArray(this.group.get(this.field.name).value) && !this.group.get(this.field.name).value.length);
173
+ }
169
174
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
170
175
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: KlesFormClearComponent, selector: "kles-form-clear", ngImport: i0, template: `
171
- <button [disabled]="!group.get(field.name).value || group.get(field.name).disabled" mat-icon-button aria-label="Clear" type="button"
176
+ <button [disabled]="isDisable()" mat-icon-button aria-label="Clear" type="button"
172
177
  (click)="clear($event)">
173
178
  <mat-icon>close</mat-icon>
174
179
  </button>
@@ -179,7 +184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
179
184
  args: [{
180
185
  selector: 'kles-form-clear',
181
186
  template: `
182
- <button [disabled]="!group.get(field.name).value || group.get(field.name).disabled" mat-icon-button aria-label="Clear" type="button"
187
+ <button [disabled]="isDisable()" mat-icon-button aria-label="Clear" type="button"
183
188
  (click)="clear($event)">
184
189
  <mat-icon>close</mat-icon>
185
190
  </button>
@@ -888,6 +893,16 @@ class KlesFieldAbstract {
888
893
  isPending() {
889
894
  return (this.group.controls[this.field.name].pending || this.field.pending);
890
895
  }
896
+ onFocus() {
897
+ if (this.field?.onFocus) {
898
+ this.field.onFocus(this.field, this.group);
899
+ }
900
+ }
901
+ onBlur() {
902
+ if (this.field?.onBlur) {
903
+ this.field.onBlur(this.field, this.group);
904
+ }
905
+ }
891
906
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
892
907
  static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: KlesFieldAbstract, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
893
908
  }
@@ -1040,6 +1055,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
1040
1055
  if (this.field.autocomplete && this.field.lazy) {
1041
1056
  this.isFocused.next(true);
1042
1057
  }
1058
+ super.onFocus();
1043
1059
  }
1044
1060
  filterData(value, options) {
1045
1061
  let filterValue;
@@ -1079,7 +1095,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
1079
1095
  <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
1080
1096
  [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
1081
1097
  [matAutocomplete]="auto"
1082
- (focus)="onFocus()">
1098
+ (focus)="onFocus()" (blur)="onBlur()" >
1083
1099
 
1084
1100
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
1085
1101
  @if(filteredOption$ | async; as filteredOption){
@@ -1113,7 +1129,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
1113
1129
  }
1114
1130
  @else {
1115
1131
  <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
1116
- [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
1132
+ [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step" (focus)="onFocus()" (blur)="onBlur()">
1117
1133
  }
1118
1134
  @if (field.hint) {
1119
1135
  <mat-hint>{{field.hint}}</mat-hint>
@@ -1151,7 +1167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1151
1167
  <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
1152
1168
  [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
1153
1169
  [matAutocomplete]="auto"
1154
- (focus)="onFocus()">
1170
+ (focus)="onFocus()" (blur)="onBlur()" >
1155
1171
 
1156
1172
  <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
1157
1173
  @if(filteredOption$ | async; as filteredOption){
@@ -1185,7 +1201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1185
1201
  }
1186
1202
  @else {
1187
1203
  <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
1188
- [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
1204
+ [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step" (focus)="onFocus()" (blur)="onBlur()">
1189
1205
  }
1190
1206
  @if (field.hint) {
1191
1207
  <mat-hint>{{field.hint}}</mat-hint>
@@ -1338,7 +1354,8 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
1338
1354
  }
1339
1355
  <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
1340
1356
  (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
1341
- [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
1357
+ [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple"
1358
+ (focus)="onFocus()" (blur)="onBlur()">
1342
1359
 
1343
1360
  @if (field.triggerComponent) {
1344
1361
  <mat-select-trigger>
@@ -1455,7 +1472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
1455
1472
  }
1456
1473
  <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
1457
1474
  (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
1458
- [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
1475
+ [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple"
1476
+ (focus)="onFocus()" (blur)="onBlur()">
1459
1477
 
1460
1478
  @if (field.triggerComponent) {
1461
1479
  <mat-select-trigger>
@@ -3057,7 +3075,8 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
3057
3075
 
3058
3076
  <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
3059
3077
  (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
3060
- [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple" (selectionChange)="selectionChange($event)">
3078
+ [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple" (selectionChange)="selectionChange($event)"
3079
+ (focus)="onFocus()" (blur)="onBlur()">
3061
3080
  @if (field.triggerComponent) {
3062
3081
  <mat-select-trigger>
3063
3082
  <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3190,7 +3209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3190
3209
 
3191
3210
  <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
3192
3211
  (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
3193
- [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple" (selectionChange)="selectionChange($event)">
3212
+ [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple" (selectionChange)="selectionChange($event)"
3213
+ (focus)="onFocus()" (blur)="onBlur()">
3194
3214
  @if (field.triggerComponent) {
3195
3215
  <mat-select-trigger>
3196
3216
  <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>