@webilix/ngx-form-m3 0.0.16 → 0.0.18
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.
- package/fesm2022/webilix-ngx-form-m3.mjs +44 -11
- package/fesm2022/webilix-ngx-form-m3.mjs.map +1 -1
- package/lib/inputs/multi-select/input-multi-select.component.d.ts +2 -0
- package/lib/inputs/multi-select/input-multi-select.interface.d.ts +5 -0
- package/lib/ngx-form.config.d.ts +2 -0
- package/ngx-form-m3.css +26 -1
- package/package.json +2 -2
|
@@ -19,6 +19,8 @@ import * as i1$2 from '@webilix/ngx-calendar-m3';
|
|
|
19
19
|
import { JalaliDateTime } from '@webilix/jalali-date-time';
|
|
20
20
|
import * as i4 from '@angular/cdk/bidi';
|
|
21
21
|
import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
|
|
22
|
+
import * as i4$1 from '@angular/material/menu';
|
|
23
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
22
24
|
import * as i3$2 from '@angular/material/select';
|
|
23
25
|
import { MatSelectModule } from '@angular/material/select';
|
|
24
26
|
import * as i1$3 from '@angular/router';
|
|
@@ -437,10 +439,13 @@ class InputDateComponent {
|
|
|
437
439
|
setDate() {
|
|
438
440
|
if (this.formControl.disabled)
|
|
439
441
|
return;
|
|
440
|
-
const minDate = this.input.minDate === 'NOW' ? new Date() : this.input.minDate;
|
|
441
|
-
const maxDate = this.input.maxDate === 'NOW' ? new Date() : this.input.maxDate;
|
|
442
442
|
this.ngxCalendarService
|
|
443
|
-
.getDate({
|
|
443
|
+
.getDate({
|
|
444
|
+
title: this.input.title || 'تاریخ',
|
|
445
|
+
value: this.formControl.value,
|
|
446
|
+
minDate: this.input.minDate,
|
|
447
|
+
maxDate: this.input.maxDate,
|
|
448
|
+
})
|
|
444
449
|
.dialog((data) => {
|
|
445
450
|
this.formControl.setValue(data.date);
|
|
446
451
|
this.formControl.markAsTouched();
|
|
@@ -805,10 +810,13 @@ class InputMomentComponent {
|
|
|
805
810
|
setMoment() {
|
|
806
811
|
if (this.formControl.disabled)
|
|
807
812
|
return;
|
|
808
|
-
const minDate = this.input.minDate === 'NOW' ? new Date() : this.input.minDate;
|
|
809
|
-
const maxDate = this.input.maxDate === 'NOW' ? new Date() : this.input.maxDate;
|
|
810
813
|
this.ngxCalendarService
|
|
811
|
-
.getMoment({
|
|
814
|
+
.getMoment({
|
|
815
|
+
title: this.input.title || 'زمان',
|
|
816
|
+
value: this.formControl.value,
|
|
817
|
+
minDate: this.input.minDate,
|
|
818
|
+
maxDate: this.input.maxDate,
|
|
819
|
+
})
|
|
812
820
|
.dialog((moment) => {
|
|
813
821
|
this.formControl.setValue(moment.moment);
|
|
814
822
|
this.formControl.markAsTouched();
|
|
@@ -862,6 +870,20 @@ class InputMultiSelectComponent {
|
|
|
862
870
|
ngOnInit() {
|
|
863
871
|
this.listHeight = `${this.input.listMaxHeight || 310}px`;
|
|
864
872
|
}
|
|
873
|
+
select(type) {
|
|
874
|
+
this.ids = type === 'NONE' ? [] : this.input.options.map((option) => option.id);
|
|
875
|
+
this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
|
|
876
|
+
this.formControl.markAsTouched();
|
|
877
|
+
}
|
|
878
|
+
selectGroup(index) {
|
|
879
|
+
const group = this.input.groups?.[index];
|
|
880
|
+
if (!group)
|
|
881
|
+
return;
|
|
882
|
+
const ids = this.input.options.map((option) => option.id);
|
|
883
|
+
this.ids = group.ids.filter((id) => ids.includes(id));
|
|
884
|
+
this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
|
|
885
|
+
this.formControl.markAsTouched();
|
|
886
|
+
}
|
|
865
887
|
toggleValue(id) {
|
|
866
888
|
if (!this.ids.includes(id))
|
|
867
889
|
this.ids.push(id);
|
|
@@ -871,11 +893,21 @@ class InputMultiSelectComponent {
|
|
|
871
893
|
this.formControl.markAsTouched();
|
|
872
894
|
}
|
|
873
895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <div class=\"title\">{{ input.title }}</div>\n <div class=\"options\">\n @for (item of input.options; track $index) {\n <div>\n <div class=\"option\" (click)=\"toggleValue(item.id)\">\n <mat-icon
|
|
896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMultiSelectComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-multi-select" }, properties: { "style.--listHeight": "this.listHeight" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <div class=\"header\">\n <div class=\"title\">\n {{ input.title }}\n @if (input.minCount) { <span class=\"asterisk\">*</span> }\n </div>\n <!-- SELECT BUTTONS -->\n @if (input.selectButtons) {\n <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n }\n <!-- GROUPS -->\n @if ((input.groups || []).length !== 0) {\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n @for (item of input.groups || []; track $index) {\n <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n }\n </mat-menu>\n }\n </div>\n <div class=\"options\">\n @for (item of input.options; track $index) {\n <div>\n <div class=\"option\" (click)=\"toggleValue(item.id)\">\n <mat-icon [class.selected]=\"ids.includes(item.id)\">\n {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.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: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
875
897
|
}
|
|
876
898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMultiSelectComponent, decorators: [{
|
|
877
899
|
type: Component,
|
|
878
|
-
args: [{ host: { selector: 'input-multi-select' }, imports: [
|
|
900
|
+
args: [{ host: { selector: 'input-multi-select' }, imports: [
|
|
901
|
+
ReactiveFormsModule,
|
|
902
|
+
MatButton,
|
|
903
|
+
MatFormField,
|
|
904
|
+
MatIcon,
|
|
905
|
+
MatIconButton,
|
|
906
|
+
MatInputModule,
|
|
907
|
+
MatMenuModule,
|
|
908
|
+
InputErrorPipe,
|
|
909
|
+
MultiLinePipe,
|
|
910
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <div class=\"ngx-helper-form-m3-multi-select-input\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <div class=\"header\">\n <div class=\"title\">\n {{ input.title }}\n @if (input.minCount) { <span class=\"asterisk\">*</span> }\n </div>\n <!-- SELECT BUTTONS -->\n @if (input.selectButtons) {\n <button mat-button type=\"button\" (click)=\"select('ALL')\">\u0647\u0645\u0647</button>\n <button mat-button type=\"button\" (click)=\"select('NONE')\">\u0647\u06CC\u0686</button>\n }\n <!-- GROUPS -->\n @if ((input.groups || []).length !== 0) {\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"groupMenu\">\u0627\u0646\u062A\u062E\u0627\u0628</button>\n <mat-menu #groupMenu=\"matMenu\" [xPosition]=\"'before'\" class=\"ngx-helper-form-m3-multi-select-input-menu\">\n @for (item of input.groups || []; track $index) {\n <button mat-menu-item (click)=\"selectGroup($index)\">{{ item.title }}</button>\n }\n </mat-menu>\n }\n </div>\n <div class=\"options\">\n @for (item of input.options; track $index) {\n <div>\n <div class=\"option\" (click)=\"toggleValue(item.id)\">\n <mat-icon [class.selected]=\"ids.includes(item.id)\">\n {{ ids.includes(item.id) ? 'check_box' : 'check_box_outline_blank' }}\n </mat-icon>\n <div class=\"message\" [class.ngx-form-m3-en]=\"!!input.english\">{{ item.title }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: ["::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-content{padding:0!important;direction:rtl;text-align:right}::ng-deep .ngx-helper-form-m3-multi-select-input-menu .mat-mdc-menu-item{direction:rtl;text-align:right}\n"] }]
|
|
879
911
|
}], propDecorators: { listHeight: [{
|
|
880
912
|
type: HostBinding,
|
|
881
913
|
args: ['style.--listHeight']
|
|
@@ -1376,7 +1408,7 @@ class NgxFormComponent {
|
|
|
1376
1408
|
});
|
|
1377
1409
|
// INPUT CONFIG
|
|
1378
1410
|
this.inputConfig = {
|
|
1379
|
-
appearance: this.ngxForm.appearance || 'fill',
|
|
1411
|
+
appearance: this.ngxForm.appearance || this.config?.appearance || 'fill',
|
|
1380
1412
|
autoFocus,
|
|
1381
1413
|
};
|
|
1382
1414
|
// REGISTER VALUE CHANGE
|
|
@@ -1525,9 +1557,10 @@ class NgxFormComponent {
|
|
|
1525
1557
|
}
|
|
1526
1558
|
setInput(input) {
|
|
1527
1559
|
const name = input.name;
|
|
1528
|
-
const optional = 'optional' in input && !!input.optional;
|
|
1529
1560
|
const readonly = 'readonly' in input && !!input.readonly;
|
|
1530
|
-
const validators =
|
|
1561
|
+
const validators = input.type === 'CHECKBOX' || input.type === 'MULTI-SELECT' || input.optional || readonly
|
|
1562
|
+
? []
|
|
1563
|
+
: [Validators.required];
|
|
1531
1564
|
this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
|
|
1532
1565
|
}
|
|
1533
1566
|
checkInputs() {
|