@dereekb/dbx-form 13.10.3 → 13.10.5

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.
@@ -8632,11 +8632,11 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
8632
8632
  }
8633
8633
  }
8634
8634
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8635
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableTextFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textInputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n @if (showSelectedDisplayValueSignal()) {\n @let sv = selectedDisplayValueSignal();\n @if (sv) {\n <div class=\"dbx-searchable-text-field-value\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabelSignal()) {\n <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n }\n <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @if (showClearValueSignal() && hasValueSignal()) {\n <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n }\n @for (result of searchResultsSignal(); track $index) {\n <mat-option [value]=\"result\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8635
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableTextFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textInputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n @if (showSelectedDisplayValueSignal()) {\n @let sv = selectedDisplayValueSignal();\n @if (sv) {\n <div class=\"dbx-searchable-text-field-value\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabelSignal()) {\n <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n }\n <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @if (showClearValueSignal() && hasValueSignal()) {\n <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n }\n @for (result of searchResultsSignal(); track $index) {\n <mat-option [value]=\"result\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8636
8636
  }
8637
8637
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
8638
8638
  type: Component,
8639
- args: [{ selector: 'dbx-forge-searchable-text-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatOptionModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n @if (showSelectedDisplayValueSignal()) {\n @let sv = selectedDisplayValueSignal();\n @if (sv) {\n <div class=\"dbx-searchable-text-field-value\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabelSignal()) {\n <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n }\n <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @if (showClearValueSignal() && hasValueSignal()) {\n <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n }\n @for (result of searchResultsSignal(); track $index) {\n <mat-option [value]=\"result\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n</mat-autocomplete>\n" }]
8639
+ args: [{ selector: 'dbx-forge-searchable-text-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatOptionModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n @if (showSelectedDisplayValueSignal()) {\n @let sv = selectedDisplayValueSignal();\n @if (sv) {\n <div class=\"dbx-searchable-text-field-value\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabelSignal()) {\n <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n }\n <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n @if (showClearValueSignal() && hasValueSignal()) {\n <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n }\n @for (result of searchResultsSignal(); track $index) {\n <mat-option [value]=\"result\" [class.dbx-searchable-field-anchor-option]=\"!!result.anchor\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n</mat-autocomplete>\n" }]
8640
8640
  }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], textInputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }] } });
8641
8641
 
8642
8642
  var searchableText_field_component = /*#__PURE__*/Object.freeze({
@@ -13793,11 +13793,11 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
13793
13793
  }
13794
13794
  }
13795
13795
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
13796
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxSearchableTextFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n @if (showSelectedDisplayValueSignal()) {\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabel) {\n <div class=\"dbx-label\">{{ searchLabel }}</div>\n }\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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 @for (displayValue of searchResultsSignal(); track displayValue.value) {\n <mat-option [value]=\"displayValue\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n <!-- If No Results -->\n @if (searchResultsSignal()?.length === 0) {\n @if (!isLoadingSearchResultsSignal()) {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">No results found.</p>\n </mat-option>\n } @else {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">Loading...</p>\n </mat-option>\n }\n }\n <!-- Add/Pick String Value -->\n @if (allowStringValues && inputValueSignal()) {\n <mat-option [value]=\"{ value: inputValueSignal() }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n </mat-option>\n }\n <!-- Show clear value -->\n @if (showClearValue && hasValueSignal()) {\n <mat-option value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13796
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxSearchableTextFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n @if (showSelectedDisplayValueSignal()) {\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabel) {\n <div class=\"dbx-label\">{{ searchLabel }}</div>\n }\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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 @for (displayValue of searchResultsSignal(); track displayValue.value) {\n <mat-option [value]=\"displayValue\" [class.dbx-searchable-field-anchor-option]=\"!!displayValue.anchor\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n <!-- If No Results -->\n @if (searchResultsSignal()?.length === 0) {\n @if (!isLoadingSearchResultsSignal()) {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">No results found.</p>\n </mat-option>\n } @else {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">Loading...</p>\n </mat-option>\n }\n }\n <!-- Add/Pick String Value -->\n @if (allowStringValues && inputValueSignal()) {\n <mat-option [value]=\"{ value: inputValueSignal() }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n </mat-option>\n }\n <!-- Show clear value -->\n @if (showClearValue && hasValueSignal()) {\n <mat-option value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
13797
13797
  }
13798
13798
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
13799
13799
  type: Component,
13800
- args: [{ imports: [FormsModule, MatInput, NgClass, ReactiveFormsModule, DbxLoadingModule, MatOptionModule, MatAutocompleteModule, MatChipsModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n @if (showSelectedDisplayValueSignal()) {\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabel) {\n <div class=\"dbx-label\">{{ searchLabel }}</div>\n }\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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 @for (displayValue of searchResultsSignal(); track displayValue.value) {\n <mat-option [value]=\"displayValue\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n <!-- If No Results -->\n @if (searchResultsSignal()?.length === 0) {\n @if (!isLoadingSearchResultsSignal()) {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">No results found.</p>\n </mat-option>\n } @else {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">Loading...</p>\n </mat-option>\n }\n }\n <!-- Add/Pick String Value -->\n @if (allowStringValues && inputValueSignal()) {\n <mat-option [value]=\"{ value: inputValueSignal() }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n </mat-option>\n }\n <!-- Show clear value -->\n @if (showClearValue && hasValueSignal()) {\n <mat-option value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n }\n</mat-autocomplete>\n" }]
13800
+ args: [{ imports: [FormsModule, MatInput, NgClass, ReactiveFormsModule, DbxLoadingModule, MatOptionModule, MatAutocompleteModule, MatChipsModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n <!-- Result View -->\n @if (showSelectedDisplayValueSignal()) {\n <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n </div>\n }\n <div class=\"dbx-searchable-text-field-input\">\n @if (searchLabel) {\n <div class=\"dbx-label\">{{ searchLabel }}</div>\n }\n <!-- View -->\n <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\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 @for (displayValue of searchResultsSignal(); track displayValue.value) {\n <mat-option [value]=\"displayValue\" [class.dbx-searchable-field-anchor-option]=\"!!displayValue.anchor\">\n <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n </mat-option>\n }\n <!-- If No Results -->\n @if (searchResultsSignal()?.length === 0) {\n @if (!isLoadingSearchResultsSignal()) {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">No results found.</p>\n </mat-option>\n } @else {\n <mat-option value=\"\" disabled>\n <p class=\"dbx-clear-hint text-center\">Loading...</p>\n </mat-option>\n }\n }\n <!-- Add/Pick String Value -->\n @if (allowStringValues && inputValueSignal()) {\n <mat-option [value]=\"{ value: inputValueSignal() }\">\n <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n </mat-option>\n }\n <!-- Show clear value -->\n @if (showClearValue && hasValueSignal()) {\n <mat-option value=\"\">\n <p class=\"dbx-clear-hint text-center\">Clear</p>\n </mat-option>\n }\n</mat-autocomplete>\n" }]
13801
13801
  }] });
13802
13802
 
13803
13803
  const importsAndExports$c = [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent];