@webilix/ngx-form-m3 0.0.15 → 0.0.17
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 +32 -3
- 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/ngx-form-m3.css +26 -1
- package/package.json +1 -1
|
@@ -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';
|
|
@@ -862,6 +864,20 @@ class InputMultiSelectComponent {
|
|
|
862
864
|
ngOnInit() {
|
|
863
865
|
this.listHeight = `${this.input.listMaxHeight || 310}px`;
|
|
864
866
|
}
|
|
867
|
+
select(type) {
|
|
868
|
+
this.ids = type === 'NONE' ? [] : this.input.options.map((option) => option.id);
|
|
869
|
+
this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
|
|
870
|
+
this.formControl.markAsTouched();
|
|
871
|
+
}
|
|
872
|
+
selectGroup(index) {
|
|
873
|
+
const group = this.input.groups?.[index];
|
|
874
|
+
if (!group)
|
|
875
|
+
return;
|
|
876
|
+
const ids = this.input.options.map((option) => option.id);
|
|
877
|
+
this.ids = group.ids.filter((id) => ids.includes(id));
|
|
878
|
+
this.formControl.setValue(this.ids.length === 0 ? null : this.ids);
|
|
879
|
+
this.formControl.markAsTouched();
|
|
880
|
+
}
|
|
865
881
|
toggleValue(id) {
|
|
866
882
|
if (!this.ids.includes(id))
|
|
867
883
|
this.ids.push(id);
|
|
@@ -871,11 +887,21 @@ class InputMultiSelectComponent {
|
|
|
871
887
|
this.formControl.markAsTouched();
|
|
872
888
|
}
|
|
873
889
|
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
|
|
890
|
+
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
891
|
}
|
|
876
892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMultiSelectComponent, decorators: [{
|
|
877
893
|
type: Component,
|
|
878
|
-
args: [{ host: { selector: 'input-multi-select' }, imports: [
|
|
894
|
+
args: [{ host: { selector: 'input-multi-select' }, imports: [
|
|
895
|
+
ReactiveFormsModule,
|
|
896
|
+
MatButton,
|
|
897
|
+
MatFormField,
|
|
898
|
+
MatIcon,
|
|
899
|
+
MatIconButton,
|
|
900
|
+
MatInputModule,
|
|
901
|
+
MatMenuModule,
|
|
902
|
+
InputErrorPipe,
|
|
903
|
+
MultiLinePipe,
|
|
904
|
+
], 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
905
|
}], propDecorators: { listHeight: [{
|
|
880
906
|
type: HostBinding,
|
|
881
907
|
args: ['style.--listHeight']
|
|
@@ -1525,7 +1551,10 @@ class NgxFormComponent {
|
|
|
1525
1551
|
}
|
|
1526
1552
|
setInput(input) {
|
|
1527
1553
|
const name = input.name;
|
|
1528
|
-
const
|
|
1554
|
+
const readonly = 'readonly' in input && !!input.readonly;
|
|
1555
|
+
const validators = input.type === 'CHECKBOX' || input.type === 'MULTI-SELECT' || input.optional || readonly
|
|
1556
|
+
? []
|
|
1557
|
+
: [Validators.required];
|
|
1529
1558
|
this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
|
|
1530
1559
|
}
|
|
1531
1560
|
checkInputs() {
|