@dereekb/dbx-form 13.6.1 → 13.6.3
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.
|
@@ -3636,6 +3636,34 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
|
|
|
3636
3636
|
groupedOptions$ = this.options$.pipe(map((x) => x.groupedValues));
|
|
3637
3637
|
nonGroupedValuesSignal = toSignal(this.nonGroupedValues$);
|
|
3638
3638
|
groupedOptionsSignal = toSignal(this.groupedOptions$);
|
|
3639
|
+
// MARK: Filterable
|
|
3640
|
+
_filterText$ = new BehaviorSubject('');
|
|
3641
|
+
filterInputElement = viewChild('filterInput', { ...(ngDevMode ? { debugName: "filterInputElement" } : /* istanbul ignore next */ {}), read: (ElementRef) });
|
|
3642
|
+
filteredOptions$ = combineLatest([this.options$, this._filterText$, this.values$]).pipe(map(([options, filterText, currentValues]) => {
|
|
3643
|
+
let result;
|
|
3644
|
+
if (!filterText) {
|
|
3645
|
+
result = options;
|
|
3646
|
+
}
|
|
3647
|
+
else {
|
|
3648
|
+
const lowerFilter = filterText.toLowerCase();
|
|
3649
|
+
const selectedSet = new Set(currentValues);
|
|
3650
|
+
const matches = (dv) => selectedSet.has(dv.value) || dv.label.toLowerCase().includes(lowerFilter);
|
|
3651
|
+
const filterGroups = this.filterableGroups;
|
|
3652
|
+
result = {
|
|
3653
|
+
nonGroupedValues: options.nonGroupedValues.filter(matches),
|
|
3654
|
+
groupedValues: options.groupedValues
|
|
3655
|
+
.map((g) => {
|
|
3656
|
+
const groupLabelMatches = filterGroups && g.label.toLowerCase().includes(lowerFilter);
|
|
3657
|
+
const filteredValues = groupLabelMatches ? g.values : g.values.filter(matches);
|
|
3658
|
+
return { label: g.label, values: filteredValues };
|
|
3659
|
+
})
|
|
3660
|
+
.filter((g) => g.values.length > 0)
|
|
3661
|
+
};
|
|
3662
|
+
}
|
|
3663
|
+
return result;
|
|
3664
|
+
}), shareReplay(1));
|
|
3665
|
+
filteredNonGroupedValuesSignal = toSignal(this.filteredOptions$.pipe(map((x) => x.nonGroupedValues)));
|
|
3666
|
+
filteredGroupedOptionsSignal = toSignal(this.filteredOptions$.pipe(map((x) => x.groupedValues)));
|
|
3639
3667
|
get sourceSelectField() {
|
|
3640
3668
|
return this.props;
|
|
3641
3669
|
}
|
|
@@ -3663,6 +3691,15 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
|
|
|
3663
3691
|
get multiple() {
|
|
3664
3692
|
return this.props.multiple || false;
|
|
3665
3693
|
}
|
|
3694
|
+
get filterable() {
|
|
3695
|
+
return this.props.filterable !== false;
|
|
3696
|
+
}
|
|
3697
|
+
get filterableGroups() {
|
|
3698
|
+
return this.props.filterableGroups !== false;
|
|
3699
|
+
}
|
|
3700
|
+
get selectPanelClass() {
|
|
3701
|
+
return this.filterable ? 'dbx-source-select-filterable-panel' : '';
|
|
3702
|
+
}
|
|
3666
3703
|
get refreshDisplayValues$() {
|
|
3667
3704
|
return this.props.refreshDisplayValues$;
|
|
3668
3705
|
}
|
|
@@ -3727,6 +3764,28 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
|
|
|
3727
3764
|
}));
|
|
3728
3765
|
}
|
|
3729
3766
|
context = loadingStateContext({ obs: this.allOptionGroupsState$ });
|
|
3767
|
+
onSelectOpenedChange(opened) {
|
|
3768
|
+
if (opened) {
|
|
3769
|
+
setTimeout(() => {
|
|
3770
|
+
const inputEl = this.filterInputElement();
|
|
3771
|
+
if (inputEl) {
|
|
3772
|
+
inputEl.nativeElement.focus();
|
|
3773
|
+
}
|
|
3774
|
+
});
|
|
3775
|
+
}
|
|
3776
|
+
else {
|
|
3777
|
+
this._filterText$.next('');
|
|
3778
|
+
}
|
|
3779
|
+
}
|
|
3780
|
+
onFilterInput(event) {
|
|
3781
|
+
const input = event.target;
|
|
3782
|
+
this._filterText$.next(input.value);
|
|
3783
|
+
}
|
|
3784
|
+
onFilterKeydown(event) {
|
|
3785
|
+
if (event.key !== 'Escape' && event.key !== 'Tab') {
|
|
3786
|
+
event.stopPropagation();
|
|
3787
|
+
}
|
|
3788
|
+
}
|
|
3730
3789
|
ngOnInit() {
|
|
3731
3790
|
const { loadSources } = this;
|
|
3732
3791
|
this._loadSources.next(loadSources?.() || of([]));
|
|
@@ -3749,6 +3808,7 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
|
|
|
3749
3808
|
this._formControlObs.complete();
|
|
3750
3809
|
this._fromOpenSource.complete();
|
|
3751
3810
|
this._loadSources.complete();
|
|
3811
|
+
this._filterText$.complete();
|
|
3752
3812
|
this.context.destroy();
|
|
3753
3813
|
}
|
|
3754
3814
|
handleSelectOptions = (_, context) => {
|
|
@@ -3804,12 +3864,12 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
|
|
|
3804
3864
|
this.formControl.markAsTouched();
|
|
3805
3865
|
}
|
|
3806
3866
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3807
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-source-select-field\">\n <div class=\"dbx-source-select-field-content\">\n <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\">\n @for (value of
|
|
3867
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.3", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-source-select-field\">\n <div class=\"dbx-source-select-field-content\">\n <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n @if (filterable) {\n <div class=\"dbx-source-select-filter-container\">\n <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n </div>\n }\n @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n <mat-option [value]=\"value.value\">\n {{ value.label }}\n </mat-option>\n }\n @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n <mat-optgroup [label]=\"optionGroup.label\">\n @for (value of optionGroup.values; track value.value) {\n <mat-option [value]=\"value.value\">\n {{ value.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n </mat-select>\n @if (showOpenSourceButton) {\n <dbx-button-spacer></dbx-button-spacer>\n <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n </dbx-action>\n }\n </div>\n <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n", dependencies: [{ kind: "component", type: 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: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "allowClickPropagation", "mode"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i2.DbxActionButtonDirective, selector: "[dbxActionButton]" }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3808
3868
|
}
|
|
3809
3869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
|
|
3810
3870
|
type: Component,
|
|
3811
|
-
args: [{ selector: 'dbx-form-sourceselectfield', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelect, MatOption, FormsModule, ReactiveFormsModule, DbxButtonComponent, MatOptgroup, DbxButtonSpacerDirective, DbxActionModule, DbxLoadingComponent], standalone: true, template: "<div class=\"dbx-source-select-field\">\n <div class=\"dbx-source-select-field-content\">\n <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\">\n @for (value of
|
|
3812
|
-
}], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
|
|
3871
|
+
args: [{ selector: 'dbx-form-sourceselectfield', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelect, MatOption, FormsModule, ReactiveFormsModule, DbxButtonComponent, MatOptgroup, DbxButtonSpacerDirective, DbxActionModule, DbxLoadingComponent], standalone: true, template: "<div class=\"dbx-source-select-field\">\n <div class=\"dbx-source-select-field-content\">\n <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n @if (filterable) {\n <div class=\"dbx-source-select-filter-container\">\n <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n </div>\n }\n @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n <mat-option [value]=\"value.value\">\n {{ value.label }}\n </mat-option>\n }\n @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n <mat-optgroup [label]=\"optionGroup.label\">\n @for (value of optionGroup.values; track value.value) {\n <mat-option [value]=\"value.value\">\n {{ value.label }}\n </mat-option>\n }\n </mat-optgroup>\n }\n </mat-select>\n @if (showOpenSourceButton) {\n <dbx-button-spacer></dbx-button-spacer>\n <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n </dbx-action>\n }\n </div>\n <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n" }]
|
|
3872
|
+
}], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
|
|
3813
3873
|
|
|
3814
3874
|
/**
|
|
3815
3875
|
* Creates a Formly field configuration for a source-select field that loads and
|
|
@@ -6889,6 +6949,8 @@ class DbxPhoneFieldComponent extends FieldType$1 {
|
|
|
6889
6949
|
}), distinctUntilChanged())
|
|
6890
6950
|
.subscribe((x) => {
|
|
6891
6951
|
this.formControl.setValue(x);
|
|
6952
|
+
this.formControl.markAsDirty();
|
|
6953
|
+
this.formControl.markAsTouched();
|
|
6892
6954
|
});
|
|
6893
6955
|
/*
|
|
6894
6956
|
* The phoneCtrl's errors are being used to drive the error matcher for this. Sync any invalid states with errors to phoneCtrl.
|