@dereekb/dbx-form 13.10.2 → 13.10.4
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.
|
@@ -2619,52 +2619,54 @@ function _finalizeValidation(instance, fieldDef) {
|
|
|
2619
2619
|
}
|
|
2620
2620
|
function _finalizeValidators(instance, fieldDef, validation) {
|
|
2621
2621
|
const validators = validation.validators;
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
else {
|
|
2635
|
-
const { fn, reusableDefinition: _reusableDefinition, ...rest } = entry;
|
|
2636
|
-
const functionName = rest.functionName ?? _generateValidatorFunctionName();
|
|
2637
|
-
hasOneOrMoreValidatorFunctions = true;
|
|
2638
|
-
switch (entry.type) {
|
|
2639
|
-
case 'custom':
|
|
2640
|
-
validatorCustomFnConfig.validators[functionName] = fn;
|
|
2641
|
-
break;
|
|
2642
|
-
case 'async':
|
|
2643
|
-
validatorCustomFnConfig.asyncValidators[functionName] = fn;
|
|
2644
|
-
break;
|
|
2645
|
-
default:
|
|
2646
|
-
break;
|
|
2622
|
+
if (validators) {
|
|
2623
|
+
let hasOneOrMoreValidatorFunctions = false;
|
|
2624
|
+
const validatorCustomFnConfig = { validators: {}, asyncValidators: {} };
|
|
2625
|
+
let validatorFnNameCount = 0;
|
|
2626
|
+
function _generateValidatorFunctionName() {
|
|
2627
|
+
validatorFnNameCount += 1;
|
|
2628
|
+
return `__vfn__${fieldDef.key}_${validatorFnNameCount}`;
|
|
2629
|
+
}
|
|
2630
|
+
const finalizedValidators = validators.map((entry) => {
|
|
2631
|
+
let result;
|
|
2632
|
+
if (!('fn' in entry)) {
|
|
2633
|
+
result = entry;
|
|
2647
2634
|
}
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
customFnConfig: validatorFormConfig
|
|
2635
|
+
else {
|
|
2636
|
+
const { fn, reusableDefinition: _reusableDefinition, ...rest } = entry;
|
|
2637
|
+
const functionName = rest.functionName ?? _generateValidatorFunctionName();
|
|
2638
|
+
hasOneOrMoreValidatorFunctions = true;
|
|
2639
|
+
switch (entry.type) {
|
|
2640
|
+
case 'custom':
|
|
2641
|
+
validatorCustomFnConfig.validators[functionName] = fn;
|
|
2642
|
+
break;
|
|
2643
|
+
case 'async':
|
|
2644
|
+
validatorCustomFnConfig.asyncValidators[functionName] = fn;
|
|
2645
|
+
break;
|
|
2646
|
+
default:
|
|
2647
|
+
break;
|
|
2648
|
+
}
|
|
2649
|
+
// Return a clean ValidatorConfig without fn or reusableDefinition
|
|
2650
|
+
result = { ...rest, functionName };
|
|
2651
|
+
}
|
|
2652
|
+
return result;
|
|
2667
2653
|
});
|
|
2654
|
+
instance.setValidation({
|
|
2655
|
+
validators: finalizedValidators,
|
|
2656
|
+
validationMessages: validation.validationMessages
|
|
2657
|
+
});
|
|
2658
|
+
if (hasOneOrMoreValidatorFunctions) {
|
|
2659
|
+
const validatorFormConfig = {};
|
|
2660
|
+
if (Object.keys(validatorCustomFnConfig.validators).length > 0) {
|
|
2661
|
+
validatorFormConfig.validators = validatorCustomFnConfig.validators;
|
|
2662
|
+
}
|
|
2663
|
+
if (Object.keys(validatorCustomFnConfig.asyncValidators).length > 0) {
|
|
2664
|
+
validatorFormConfig.asyncValidators = validatorCustomFnConfig.asyncValidators;
|
|
2665
|
+
}
|
|
2666
|
+
instance.addFormConfig({
|
|
2667
|
+
customFnConfig: validatorFormConfig
|
|
2668
|
+
});
|
|
2669
|
+
}
|
|
2668
2670
|
}
|
|
2669
2671
|
}
|
|
2670
2672
|
// MARK: Utils
|
|
@@ -8630,11 +8632,11 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
|
|
|
8630
8632
|
}
|
|
8631
8633
|
}
|
|
8632
8634
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8633
|
-
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 });
|
|
8634
8636
|
}
|
|
8635
8637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
|
|
8636
8638
|
type: Component,
|
|
8637
|
-
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" }]
|
|
8638
8640
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], textInputRef: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }] } });
|
|
8639
8641
|
|
|
8640
8642
|
var searchableText_field_component = /*#__PURE__*/Object.freeze({
|
|
@@ -10537,12 +10539,19 @@ class DbxForgeFormFieldWrapperComponent {
|
|
|
10537
10539
|
errorId = computed(() => `${this.keySignal()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
|
|
10538
10540
|
hintId = computed(() => `${this.keySignal()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
|
|
10539
10541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "
|
|
10542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "dbx-forge-form-field mat-form-field-animations-enabled" }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n <div class=\"dbx-forge-form-field-outline\">\n <div class=\"dbx-forge-form-field-outline-leading\"></div>\n <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n @if (label(); as labelText) {\n <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n {{ labelText | dynamicText | async }}\n @if (isRequired()) {\n <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n }\n </span>\n }\n </div>\n <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n </div>\n <div class=\"dbx-forge-form-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n @if (showErrors()) {\n <div class=\"mat-mdc-form-field-error-wrapper\">\n <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n </div>\n } @else if (hintSignal(); as hint) {\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n </div>\n }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10541
10543
|
}
|
|
10542
10544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
|
|
10543
10545
|
type: Component,
|
|
10544
10546
|
args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
|
|
10545
|
-
|
|
10547
|
+
// `mat-form-field-animations-enabled` is intentionally retained: it gates
|
|
10548
|
+
// the 300ms subscript fade animation via Material's
|
|
10549
|
+
// `.mat-form-field-animations-enabled .mat-mdc-form-field-hint-wrapper { animation-duration: 300ms; }`
|
|
10550
|
+
// rule and does not cause the `.mat-mdc-form-field` style leak. The
|
|
10551
|
+
// `mat-mdc-form-field` host class was removed because Material lazy-loads
|
|
10552
|
+
// `display: inline-flex; line-height: 24px; ...` onto that selector once
|
|
10553
|
+
// any real `mat-form-field` is instantiated, which distorted this wrapper.
|
|
10554
|
+
class: 'dbx-forge-form-field mat-form-field-animations-enabled',
|
|
10546
10555
|
'[class]': 'classNameSignal()'
|
|
10547
10556
|
}, template: "<div class=\"dbx-forge-form-field-wrapper\" [class.dbx-forge-form-field-wrapper-error]=\"hasError()\" [class.dbx-forge-form-field-wrapper-disabled]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n <div class=\"dbx-forge-form-field-outline\">\n <div class=\"dbx-forge-form-field-outline-leading\"></div>\n <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n @if (label(); as labelText) {\n <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n {{ labelText | dynamicText | async }}\n @if (isRequired()) {\n <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n }\n </span>\n }\n </div>\n <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n </div>\n <div class=\"dbx-forge-form-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n @if (showErrors()) {\n <div class=\"mat-mdc-form-field-error-wrapper\">\n <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n </div>\n } @else if (hintSignal(); as hint) {\n <div class=\"mat-mdc-form-field-hint-wrapper\">\n <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n </div>\n }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"] }]
|
|
10548
10557
|
}], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
@@ -13784,11 +13793,11 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
|
|
|
13784
13793
|
}
|
|
13785
13794
|
}
|
|
13786
13795
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
13787
|
-
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 });
|
|
13788
13797
|
}
|
|
13789
13798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
|
|
13790
13799
|
type: Component,
|
|
13791
|
-
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" }]
|
|
13792
13801
|
}] });
|
|
13793
13802
|
|
|
13794
13803
|
const importsAndExports$c = [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent];
|