@dereekb/dbx-form 14.0.0 → 14.1.0

package/fesm2022/dereekb-dbx-form.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { forwardRef, inject, input, Directive, effect, Service, signal, computed, Injectable, untracked, viewChild, Component, output, InjectionToken, DestroyRef, ElementRef, ViewContainerRef, NgModule, model, makeEnvironmentProviders } from '@angular/core';
 import * as i1$1 from '@dereekb/dbx-web';
-import { DbxActionTransitionSafetyDirective, AbstractDialogDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, AbstractPopoverDirective, DbxPopoverService, DbxAnchorComponent, DbxLoadingModule, DbxButtonComponent, DbxLoadingComponent, dbxValueListItemDecisionFunction, DbxListModifierModule, CompactContextStore, mapCompactModeObs, DbxChipDirective, DbxButtonSpacerDirective } from '@dereekb/dbx-web';
+import { DbxActionTransitionSafetyDirective, AbstractDialogDirective, DbxActionSnackbarErrorDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, AbstractPopoverDirective, DbxPopoverService, DbxAnchorComponent, DbxLoadingModule, DbxButtonComponent, DbxLoadingComponent, dbxValueListItemDecisionFunction, DbxListModifierModule, CompactContextStore, mapCompactModeObs, DbxChipDirective, DbxButtonSpacerDirective } from '@dereekb/dbx-web';
 import { isPast, addSeconds, startOfDay, addMinutes, addDays, isBefore } from 'date-fns';
 import { map, of, shareReplay, switchMap, first, exhaustMap, catchError, delay, filter, combineLatest, distinctUntilChanged, BehaviorSubject, scan, skip, EMPTY, throttleTime, startWith, Subject, interval, combineLatestWith as combineLatestWith$1, timer, withLatestFrom, debounceTime as debounceTime$1, mergeMap, tap as tap$1 } from 'rxjs';
 import * as i1 from '@dereekb/dbx-core';
@@ -1604,7 +1604,7 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: DbxForgeActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideDbxForgeFormContext()], usesInheritance: true, ngImport: i0, template: `
-    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
+    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header" dbxActionSnackbarError>
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <div>
@@ -1612,13 +1612,13 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
         <dbx-button dbxActionButton [buttonDisplay]="submitButtonConfig" [buttonStyle]="submitButtonConfig" [raised]="true"></dbx-button>
       </div>
     </dbx-dialog-content>
-  `, isInline: true, dependencies: [{ kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }, { kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$1.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
+    <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header" dbxActionSnackbarError>
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
       <div>
@@ -1628,7 +1628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     </dbx-dialog-content>
   `,
                     providers: [provideDbxForgeFormContext()],
-                    imports: [DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, DbxForgeFormComponent, DbxFormSourceDirective, DbxActionFormDirective]
+                    imports: [DbxActionSnackbarErrorDirective, DbxDialogContentDirective, DbxActionModule, DbxButtonModule, DbxDialogContentCloseComponent, DbxForgeFormComponent, DbxFormSourceDirective, DbxActionFormDirective]
                 }]
         }] });
 
@@ -5333,13 +5333,13 @@ class DbxForgeDateTimeFieldComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeDateTimeFieldComponent, isStandalone: true, selector: "dbx-forge-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequiredSignal()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (resolvedShowClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeModeSignal() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeDateTimeFieldComponent, isStandalone: true, selector: "dbx-forge-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input\n            matInput\n            [disabled]=\"isDisabledSignal()\"\n            [required]=\"isDateRequiredSignal()\"\n            [min]=\"dateInputMinSignal()\"\n            [max]=\"dateInputMaxSignal()\"\n            [matDatepicker]=\"picker\"\n            [matDatepickerFilter]=\"pickerFilterSignal()\"\n            (dateChange)=\"onDatePicked($event)\"\n            [value]=\"dateValueSignal()\"\n            (click)=\"onDateInputClick(picker)\"\n            (keydown)=\"onDateKeydown($event)\"\n            [attr.aria-invalid]=\"ariaInvalidSignal()\"\n            [attr.aria-required]=\"ariaRequiredSignal()\"\n            [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (resolvedShowClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeModeSignal() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeDateTimeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-datetime-field', imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, MatMenuModule, MatDividerModule, ReactiveFormsModule, FormsModule, NgTemplateOutlet, DatePipe, DateDistancePipe, TimeDistancePipe, GetValuePipe], host: {
                         '[class]': 'className()'
-                    }, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequiredSignal()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (resolvedShowClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeModeSignal() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"] }]
+                    }, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabelSignal()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabelSignal() }}\n      @if (isRequiredSignal()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (resolvedShowDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnlySignal()\">\n        <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabelSignal() }}</mat-label>\n          <input\n            matInput\n            [disabled]=\"isDisabledSignal()\"\n            [required]=\"isDateRequiredSignal()\"\n            [min]=\"dateInputMinSignal()\"\n            [max]=\"dateInputMaxSignal()\"\n            [matDatepicker]=\"picker\"\n            [matDatepickerFilter]=\"pickerFilterSignal()\"\n            (dateChange)=\"onDatePicked($event)\"\n            [value]=\"dateValueSignal()\"\n            (click)=\"onDateInputClick(picker)\"\n            (keydown)=\"onDateKeydown($event)\"\n            [attr.aria-invalid]=\"ariaInvalidSignal()\"\n            [attr.aria-required]=\"ariaRequiredSignal()\"\n            [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n          @if (!hideDatePickerSignal()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (resolvedShowClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeModeSignal() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearanceSignal()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabelSignal() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequiredSignal()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorIdSignal()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHintSignal()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintIdSignal()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabelSignal() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabelSignal() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (descriptionSignal()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ descriptionSignal() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezoneSignal()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
 // MARK: Mapper
 /**
@@ -5985,7 +5985,9 @@ class DbxForgeFixedDateRangeFieldComponent {
         // The old switchMap pattern re-subscribed to dateRangeSelection (which has shareReplay(1))
         // whenever the field value changed externally, causing the cached user selection to replay
         // and overwrite the external value.
-        this._sub.subscription = dateRangeSelection.pipe(skipAllInitialMaybe(), withLatestFrom(this.valueInSystemTimezone$, this.timezoneInstance$.pipe(map((timezoneInstance) => fixedDateRangeOutputValueFactory(this.valueModeSignal(), timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true })).subscribe(([rawValue, currentValue, valueFactory]) => {
+        this._sub.subscription = dateRangeSelection
+            .pipe(skipAllInitialMaybe(), withLatestFrom(this.valueInSystemTimezone$, this.timezoneInstance$.pipe(map((timezoneInstance) => fixedDateRangeOutputValueFactory(this.valueModeSignal(), timezoneInstance)))), throttleTime(TIME_OUTPUT_THROTTLE_TIME, undefined, { leading: false, trailing: true }))
+            .subscribe(([rawValue, currentValue, valueFactory]) => {
             const value = rawValue ? valueFactory(rawValue) : null;
             const isSameRange = dbxDateRangeIsSameDateRangeFieldValue(value, currentValue);
             if (!isSameRange) {
@@ -6512,11 +6514,11 @@ class DbxDurationPickerPopoverComponent extends AbstractPopoverDirective {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxDurationPickerPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxDurationPickerPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('increment', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canIncrement(unit)\"\n        aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('decrement', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canDecrement(unit)\"\n        aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MatIconModule, MatButtonModule], template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n" }]
+            args: [{ imports: [MatIconModule, MatButtonModule], template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('increment', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canIncrement(unit)\"\n        aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button\n        mat-icon-button\n        type=\"button\"\n        (mousedown)=\"onHoldStart('decrement', unit, $event)\"\n        (mouseup)=\"stopHold()\"\n        (mouseleave)=\"stopHold()\"\n        (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\"\n        (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\"\n        (keyup)=\"onKeyUp($event)\"\n        [disabled]=\"!canDecrement(unit)\"\n        aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
@@ -7945,11 +7947,11 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeSearchableChipFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-chip-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholderSignal()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeSearchableChipFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-chip-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      #textInput\n      class=\"dbx-forge-bare-input\"\n      [class.dbx-warn]=\"inputErrorMessage\"\n      [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"addChip($event)\"\n      [placeholder]=\"searchInputPlaceholderSignal()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"tabPressedOnInput($event)\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\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$4.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.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$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-forge-searchable-chip-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatChipsModule, MatOptionModule, MatIconModule, DbxLoadingModule, DbxSearchableFieldAutocompleteItemComponent], template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholderSignal()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\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" }]
+            args: [{ selector: 'dbx-forge-searchable-chip-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatChipsModule, MatOptionModule, MatIconModule, DbxLoadingModule, DbxSearchableFieldAutocompleteItemComponent], template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input\n      #textInput\n      class=\"dbx-forge-bare-input\"\n      [class.dbx-warn]=\"inputErrorMessage\"\n      [formControl]=\"inputCtrl\"\n      [matAutocomplete]=\"auto\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n      (matChipInputTokenEnd)=\"addChip($event)\"\n      [placeholder]=\"searchInputPlaceholderSignal()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"tabPressedOnInput($event)\"\n      [attr.aria-invalid]=\"ariaInvalidSignal()\"\n      [attr.aria-describedby]=\"ariaDescribedBySignal()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\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" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
 
 var searchableChip_field_component = /*#__PURE__*/Object.freeze({
@@ -8781,16 +8783,16 @@ class DbxForgeSourceSelectFieldComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" dbxActionSnackbarError>\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "directive", type: DbxActionSnackbarErrorDirective, selector: "[dbxActionSnackbarError]", inputs: ["dbxActionSnackbarError"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dbx-forge-source-select-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, MatHint, MatError, MatSuffix, FormField, DynamicTextPipe, AsyncPipe, DbxButtonComponent, DbxActionModule, DbxLoadingComponent], host: {
+            args: [{ selector: 'dbx-forge-source-select-field', imports: [DbxActionSnackbarErrorDirective, MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, MatHint, MatError, MatSuffix, FormField, DynamicTextPipe, AsyncPipe, DbxButtonComponent, DbxActionModule, DbxLoadingComponent], host: {
                         '[id]': '`${key()}`',
                         '[attr.data-testid]': 'key()',
                         '[class]': 'className()',
                         '[attr.hidden]': 'field()().hidden() || null'
-                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n" }]
+                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" dbxActionSnackbarError>\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }], buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 var sourceselect_field_component = /*#__PURE__*/Object.freeze({