@dereekb/dbx-form 9.18.5 → 9.19.0
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/esm2020/lib/formly/field/selection/searchable/searchable.field.directive.mjs +12 -1
- package/esm2020/lib/formly/field/selection/searchable/searchable.text.field.component.mjs +3 -3
- package/fesm2015/dereekb-dbx-form.mjs +14 -2
- package/fesm2015/dereekb-dbx-form.mjs.map +1 -1
- package/fesm2020/dereekb-dbx-form.mjs +13 -2
- package/fesm2020/dereekb-dbx-form.mjs.map +1 -1
- package/lib/formly/field/selection/searchable/searchable.field.directive.d.ts +13 -0
- package/mapbox/package.json +4 -4
- package/package.json +4 -4
|
@@ -2192,6 +2192,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
|
|
|
2192
2192
|
this.inputCtrl = new FormControl('');
|
|
2193
2193
|
this._formControlObs = new BehaviorSubject(undefined);
|
|
2194
2194
|
this.formControl$ = this._formControlObs.pipe(filterMaybe());
|
|
2195
|
+
this._clearDisplayHashMapSub = new SubscriptionObject();
|
|
2195
2196
|
this._displayHashMap = new BehaviorSubject(new Map());
|
|
2196
2197
|
this.inputValue$ = this.inputCtrl.valueChanges.pipe(startWith(this.inputCtrl.value), map((x) => x || ''));
|
|
2197
2198
|
this.inputValueString$ = this.inputValue$.pipe(debounceTime(200), distinctUntilChanged());
|
|
@@ -2254,6 +2255,12 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
|
|
|
2254
2255
|
get showClearValue() {
|
|
2255
2256
|
return this.searchableField.showClearValue ?? true;
|
|
2256
2257
|
}
|
|
2258
|
+
get searchLabel() {
|
|
2259
|
+
return this.searchableField.searchLabel ?? 'Search';
|
|
2260
|
+
}
|
|
2261
|
+
get refreshDisplayValues$() {
|
|
2262
|
+
return this.searchableField.refreshDisplayValues$;
|
|
2263
|
+
}
|
|
2257
2264
|
loadDisplayValuesForValues(values) {
|
|
2258
2265
|
return this.loadDisplayValuesForFieldValues(values.map((value) => ({ value })));
|
|
2259
2266
|
}
|
|
@@ -2304,6 +2311,9 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
|
|
|
2304
2311
|
}
|
|
2305
2312
|
ngOnInit() {
|
|
2306
2313
|
this._formControlObs.next(this.formControl);
|
|
2314
|
+
if (this.refreshDisplayValues$ != null) {
|
|
2315
|
+
this._clearDisplayHashMapSub.subscription = this.refreshDisplayValues$.subscribe(() => this._displayHashMap.next(new Map()));
|
|
2316
|
+
}
|
|
2307
2317
|
if (this.searchableField.textInputValidator) {
|
|
2308
2318
|
this.inputCtrl.setValidators(this.searchableField.textInputValidator);
|
|
2309
2319
|
}
|
|
@@ -2325,6 +2335,7 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType$1 {
|
|
|
2325
2335
|
super.ngOnDestroy();
|
|
2326
2336
|
this._displayHashMap.complete();
|
|
2327
2337
|
this._formControlObs.complete();
|
|
2338
|
+
this._clearDisplayHashMapSub.destroy();
|
|
2328
2339
|
this.searchContext.destroy();
|
|
2329
2340
|
}
|
|
2330
2341
|
/**
|
|
@@ -2564,10 +2575,10 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
|
|
|
2564
2575
|
}
|
|
2565
2576
|
}
|
|
2566
2577
|
DbxSearchableTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2567
|
-
DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n </div>\n <div class=\"dbx-searchable-text-field-input\">\n <div class=\"dbx-label\">
|
|
2578
|
+
DbxSearchableTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxSearchableTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n </div>\n <div class=\"dbx-searchable-text-field-input\">\n <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n <div class=\"searchable-field-form-loading\">\n <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n </div>\n </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n <!-- Add/Pick String Value -->\n <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n </mat-option>\n <!-- Show clear value -->\n <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n</mat-autocomplete>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.DbxLoadingComponent, selector: "dbx-loading", inputs: ["show", "text", "mode", "color", "diameter", "linear", "context", "loading", "error"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
|
|
2568
2579
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
|
|
2569
2580
|
type: Component,
|
|
2570
|
-
args: [{ template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n </div>\n <div class=\"dbx-searchable-text-field-input\">\n <div class=\"dbx-label\">
|
|
2581
|
+
args: [{ template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': (hasValue$ | async), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\" *ngIf=\"showSelectedDisplayValue$ | async\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"(selectedDisplayValue$ | async)!\"></dbx-searchable-field-autocomplete-item>\n </div>\n <div class=\"dbx-searchable-text-field-input\">\n <div *ngIf=\"searchLabel\" class=\"dbx-label\">{{ searchLabel }}</div>\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly\" autocomplete=\"{{ autocomplete }}\" />\n <div class=\"searchable-field-form-loading\">\n <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n </div>\n </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n <mat-option *ngFor=\"let displayValue of searchResults$ | async\" [value]=\"displayValue\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n <!-- Add/Pick String Value -->\n <mat-option *ngIf=\"allowStringValues && (inputValue$ | async)\" [value]=\"{ value: (inputValue$ | async) }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValue$ | async }}\"</p>\n </mat-option>\n <!-- Show clear value -->\n <mat-option *ngIf=\"showClearValue && (hasValue$ | async)\" value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n</mat-autocomplete>\n" }]
|
|
2571
2582
|
}] });
|
|
2572
2583
|
|
|
2573
2584
|
class DbxFormFormlySearchableFieldModule {
|