@kms-ngx-ui/presentational 20.3.0 → 20.3.1

package/fesm2022/kms-ngx-ui-presentational.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, InjectionToken, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -1253,6 +1253,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Token used by DynamicFieldDirective to provide the external FormControl
+ * to dynamically created components. This allows CVA components to access
+ * the parent control's validators and errors when NgControl is not available.
+ */
+const EXTERNAL_FORM_CONTROL = new InjectionToken('EXTERNAL_FORM_CONTROL');
+
 /**
  * @copyright KMS GmbH
  */
@@ -1291,6 +1298,10 @@ class FormControlParentComponent extends FormParentComponent {
         }
         return this._ngControl;
     }
+    /** The external FormControl — from NgControl (template usage) or the injection token (dynamic creation). */
+    get parentControl() {
+        return this.ngControl?.control ?? this._externalControl ?? null;
+    }
     constructor(renderer) {
         super();
         this.renderer = renderer;
@@ -1299,6 +1310,9 @@ class FormControlParentComponent extends FormParentComponent {
         this.internalValue = '';
         this.injector = inject(Injector);
         this._ngControl = undefined;
+        this._externalControl = inject(EXTERNAL_FORM_CONTROL, {
+            optional: true,
+        });
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = () => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1310,7 +1324,10 @@ class FormControlParentComponent extends FormParentComponent {
         super.ngOnInit();
     }
     ngDoCheck() {
-        if (this.ngControl?.control?.touched) {
+        const externalControl = this.parentControl;
+        if (!externalControl)
+            return;
+        if (externalControl.touched) {
             this.form?.markAllAsTouched();
         }
     }
@@ -1379,6 +1396,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
  */
 class DropdownFromDataComponent extends FormControlParentComponent {
+    /** Derives required state from the explicit input OR the bound control's validators. */
+    isRequired() {
+        if (this.required())
+            return true;
+        const validator = this.parentControl?.validator;
+        if (!validator)
+            return false;
+        return !!validator({ value: null })?.['required'];
+    }
     resolveBaseKeysAndValues() {
         const plainArray = this.optionsPlainArray();
         if (plainArray)
@@ -1574,7 +1600,7 @@ class DropdownFromDataComponent extends FormControlParentComponent {
                 useExisting: forwardRef(() => DropdownFromDataComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"required()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder()\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [multiple]=\"multiple()\"\n      [required]=\"required()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !disableOptions()) {\n      <mat-checkbox\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText() }}\n      </mat-checkbox>\n      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"isRequired()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder()\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [multiple]=\"multiple()\"\n      [required]=\"isRequired()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !disableOptions()) {\n      <mat-checkbox\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText() }}\n      </mat-checkbox>\n      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\n  </mat-form-field>\n</form>\n", dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
             type: Component,
@@ -1584,7 +1610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DropdownFromDataComponent),
                             multi: true,
                         },
-                    ], standalone: false, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"required()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder()\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [multiple]=\"multiple()\"\n      [required]=\"required()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !disableOptions()) {\n      <mat-checkbox\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText() }}\n      </mat-checkbox>\n      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\n  </mat-form-field>\n</form>\n" }]
+                    ], standalone: false, template: "<form [formGroup]=\"form\">\n  <mat-form-field\n    [attr.required]=\"isRequired()\"\n    [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n    subscriptSizing=\"dynamic\"\n  >\n    <mat-label>{{ label() }}</mat-label>\n    <mat-select\n      [placeholder]=\"placeholder()\"\n      disableOptionCentering\n      (selectionChange)=\"valueChanged($event?.value)\"\n      [value]=\"value\"\n      #child\n      [multiple]=\"multiple()\"\n      [required]=\"isRequired()\"\n      formControlName=\"dropdownData\"\n    >\n      @if (searchable()) {\n      <mat-option>\n        <ngx-mat-select-search\n          [formControl]=\"searchControl\"\n          [placeholderLabel]=\"'Search...'\"\n          [noEntriesFoundLabel]=\"'No matches found'\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      } @if (selectAllText() && multiple() && !disableOptions()) {\n      <mat-checkbox\n        color=\"accent\"\n        class=\"dropdown-from-data__checkbox\"\n        [indeterminate]=\"isCheckboxIndeterminate()\"\n        [checked]=\"allElementsChecked()\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"toggleAllSelection($event)\"\n      >\n        {{ selectAllText() }}\n      </mat-checkbox>\n      } @for (key of filteredKeys; track key; let i = $index) {\n      <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n        {{ setDisplayKey(key) || '\u2014' }}\n      </mat-option>\n      }\n    </mat-select>\n    @if (prefix()) {\n    <span matTextPrefix>{{ prefix() }}&nbsp;</span>\n    } @else if (prefixIcon()) {\n    <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @if (suffix()) {\n    <span matTextSuffix>&nbsp;{{ suffix() }}</span>\n    } @else if (suffixIcon()) {\n    <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n    } @else {\n    <kms-icon\n      icon=\"chevron-down\"\n      [size]=\"12\"\n      [color]=\"Color.SECONDARY\"\n      class=\"dropdown-from-data__arrow\"\n      aria-hidden=\"true\"\n      matSuffix\n    ></kms-icon>\n    } @if (errorMessage()) {\n    <mat-error>{{ errorMessage() }}</mat-error>\n    }\n  </mat-form-field>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsEnum", required: false }] }], optionsPlainArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsPlainArray", required: false }] }], optionsObjArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsObjArray", required: false }] }], mapKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapKey", required: false }] }], mapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapValue", required: false }] }], hasNullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNullOption", required: false }] }], preselectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedKeys", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], useEnumIndexAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnumIndexAsValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], disableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOptions", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
 
 class LoaderComponent {
@@ -3768,8 +3794,12 @@ class DynamicFieldDirective {
         const componentType = this.registry.resolve(config.type);
         if (!componentType)
             return;
+        const injector = Injector.create({
+            providers: [{ provide: EXTERNAL_FORM_CONTROL, useValue: control }],
+            parent: this.vcr.injector,
+        });
         this.vcr.clear();
-        this.componentRef = this.vcr.createComponent(componentType);
+        this.componentRef = this.vcr.createComponent(componentType, { injector });
         this.bridgeCVA(control);
         this.mapInputs(config);
     }