@praxisui/dynamic-fields 8.0.0-beta.21 → 8.0.0-beta.23

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -1,14 +1,14 @@
 import * as i1$1 from '@angular/forms';
 import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormGroup, FormArray, FormsModule } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, ChangeDetectionStrategy, ViewChild, Injectable, LOCALE_ID, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
+import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, LOCALE_ID, Injectable, ChangeDetectionStrategy, ViewChild, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, DynamicFormService, classifyEntityLookupResult, ComponentMetadataRegistry, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
-import { BehaviorSubject, combineLatest, Subscription, of, EMPTY, fromEvent, take as take$1 } from 'rxjs';
+import { BehaviorSubject, combineLatest, of, Subscription, EMPTY, fromEvent, take as take$1 } from 'rxjs';
 import { Router } from '@angular/router';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import { take, startWith, debounceTime, distinctUntilChanged, switchMap, tap, catchError, filter } from 'rxjs/operators';
+import { take, startWith, debounceTime, map, catchError, distinctUntilChanged, switchMap, tap, filter } from 'rxjs/operators';
 import * as i4$1 from '@angular/material/select';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1 from '@angular/common';
@@ -28,7 +28,7 @@ import * as i1$2 from '@angular/material/button';
 import { MatIconButton, MatButtonModule } from '@angular/material/button';
 import * as i6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { DateAdapter, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
+import { NativeDateAdapter, DateAdapter, MatNativeDateModule, MAT_NATIVE_DATE_FORMATS, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i2$2 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i8 from '@angular/material/progress-spinner';
@@ -2847,6 +2847,11 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
             this.registerMatSelect(select);
         }
     }, ...(ngDevMode ? [{ debugName: "matSelectInitEffect" }] : []));
+    multipleControlNormalizationEffect = effect(() => {
+        this.formControl();
+        this.multiple();
+        queueMicrotask(() => this.normalizeMultipleControlValue());
+    }, ...(ngDevMode ? [{ debugName: "multipleControlNormalizationEffect" }] : []));
     /** CRUD service for remote option loading (optional) */
     crudService = inject(GenericCrudService, {
         optional: true,
@@ -2898,6 +2903,7 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         }
         const isMultiple = !!metadata.multiple;
         this.multiple.set(isMultiple);
+        this.normalizeMultipleControlValue();
         this.searchable.set(!!metadata.searchable);
         this.selectAll.set(!!metadata.selectAll);
         this.maxSelections.set(metadata.maxSelections ?? null);
@@ -2984,7 +2990,12 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         select.selectionChange
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
-            this.selectionChange.emit(event.value);
+            const value = event.value;
+            this.selectionChange.emit(value);
+            this.onChange(value);
+            this.valueChange.emit(value);
+            this.fieldState.update((state) => ({ ...state, value }));
+            this.markAsDirty();
         });
     }
     applySelectAttributes() {
@@ -3067,6 +3078,23 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
             this.isReadonlyEffective() ||
             !!this.presentationMode);
     }
+    normalizeMultipleControlValue() {
+        if (!this.multiple())
+            return;
+        const control = this.control();
+        const current = control.value;
+        if (Array.isArray(current))
+            return;
+        const normalized = current === null || current === undefined || current === ''
+            ? []
+            : [current];
+        control.setValue(normalized, { emitEvent: false });
+        this.fieldState.update((state) => ({ ...state, value: normalized }));
+    }
+    setExternalControl(control) {
+        super.setExternalControl(control);
+        this.normalizeMultipleControlValue();
+    }
     /** Whether to show the clear button (if enabled in metadata) */
     showClear() {
         const cfg = this.metadata()?.clearButton;
@@ -3274,10 +3302,10 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
             const current = Array.isArray(this.control().value)
                 ? [...this.control().value]
                 : [];
-            const exists = current.includes(option.value);
+            const exists = current.some((value) => this.areOptionValuesEqual(value, option.value));
             if (exists) {
                 // remove if already selected
-                const updated = current.filter((v) => v !== option.value);
+                const updated = current.filter((value) => !this.areOptionValuesEqual(value, option.value));
                 this.setValue(updated);
             }
             else {
@@ -3300,8 +3328,23 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
     isSelected(value) {
         const current = this.control().value;
         return this.multiple()
-            ? Array.isArray(current) && current.includes(value)
-            : current === value;
+            ? Array.isArray(current) && current.some((item) => this.areOptionValuesEqual(item, value))
+            : this.areOptionValuesEqual(current, value);
+    }
+    isOptionDisabled(option) {
+        if (option.disabled)
+            return true;
+        if (!this.multiple())
+            return false;
+        const max = this.maxSelections();
+        if (!max || this.isSelected(option.value))
+            return false;
+        const current = this.control().value;
+        const currentCount = Array.isArray(current) ? current.length : 0;
+        return currentCount >= max;
+    }
+    areOptionValuesEqual(left, right) {
+        return left === right;
     }
     /**
      * Toggles selection of all options when `selectAll` is enabled in multiple
@@ -6077,6 +6120,70 @@ function createMaterialCheckboxGroupComponentMetadata(locale = 'en-US') {
     return createWave1ComponentDocMeta(PDX_MATERIAL_CHECKBOX_GROUP_EDITORIAL_DESCRIPTOR, locale);
 }
 
+class PraxisNativeDateAdapter extends NativeDateAdapter {
+    praxisLocale;
+    constructor() {
+        super();
+        this.praxisLocale = inject(LOCALE_ID, { optional: true }) || 'en-US';
+        this.setLocale(this.praxisLocale);
+    }
+    parse(value) {
+        if (value == null || value === '') {
+            return null;
+        }
+        if (Object.prototype.toString.call(value) === '[object Date]') {
+            return value;
+        }
+        if (typeof value === 'number') {
+            return new Date(value);
+        }
+        if (typeof value !== 'string') {
+            return super.parse(value);
+        }
+        const text = value.trim();
+        if (!text) {
+            return null;
+        }
+        const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(text);
+        if (iso) {
+            return this.createValidatedDate(Number(iso[1]), Number(iso[2]) - 1, Number(iso[3]));
+        }
+        const localized = /^(\d{1,2})[\/.-](\d{1,2})[\/.-](\d{2}|\d{4})$/.exec(text);
+        if (localized) {
+            const first = Number(localized[1]);
+            const second = Number(localized[2]);
+            const year = this.normalizeYear(Number(localized[3]));
+            const dayFirst = !this.praxisLocale.toLowerCase().startsWith('en');
+            const day = dayFirst ? first : second;
+            const month = dayFirst ? second : first;
+            return this.createValidatedDate(year, month - 1, day);
+        }
+        return super.parse(text);
+    }
+    normalizeYear(year) {
+        if (year >= 100) {
+            return year;
+        }
+        return year >= 70 ? 1900 + year : 2000 + year;
+    }
+    createValidatedDate(year, month, day) {
+        if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+            return null;
+        }
+        const parsed = new Date(year, month, day);
+        return parsed.getFullYear() === year
+            && parsed.getMonth() === month
+            && parsed.getDate() === day
+            ? parsed
+            : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisNativeDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisNativeDateAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisNativeDateAdapter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class PraxisDateRangeShortcutsOverlayComponent {
     items = [];
     activeId = null;
@@ -6191,22 +6298,48 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
     }, ...(ngDevMode ? [{ debugName: "startAt" }] : []));
     // Overlay state
     overlayOpen = false;
+    shortcutOverlayViewportMargin = 12;
     pickerOpen = false;
     dateAdapter = inject(DateAdapter);
     picker;
+    endDateInput;
     shouldShowShortcuts = () => !!(this.metadata()?.showShortcuts);
     overlayPositions = () => {
-        const pos = this.metadata()?.shortcutsPosition ?? 'left';
-        return pos === 'left'
-            ? [
-                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
-                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
-            ]
-            : [
-                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
-                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
-            ];
+        const preferredPosition = this.metadata()?.shortcutsPosition ?? 'auto';
+        const below = this.shortcutOverlayBelowPositions();
+        const left = this.shortcutOverlayLeftPositions();
+        const right = this.shortcutOverlayRightPositions();
+        switch (preferredPosition) {
+            case 'left':
+                return [...left, ...right, ...below];
+            case 'right':
+                return [...right, ...left, ...below];
+            case 'below':
+            case 'auto':
+            default:
+                return [...below, ...right, ...left];
+        }
     };
+    shortcutOverlayBelowPositions() {
+        return [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+        ];
+    }
+    shortcutOverlayLeftPositions() {
+        return [
+            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+            { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom', offsetX: -8 },
+        ];
+    }
+    shortcutOverlayRightPositions() {
+        return [
+            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom', offsetX: 8 },
+        ];
+    }
     resolvedPresets = computed(() => {
         const md = this.metadata();
         return resolveBuiltinPresets(this.resolveAdapterLocale(), this.dateAdapter, {
@@ -6344,6 +6477,14 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
     shouldPropagateRangeGroupChanges() {
         return !this.pickerOpen;
     }
+    focusEndDateInput(event) {
+        const keyboardEvent = event;
+        if (keyboardEvent.shiftKey || this.isReadonlyEffective()) {
+            return;
+        }
+        keyboardEvent.preventDefault();
+        this.endDateInput?.nativeElement.focus();
+    }
     propagateRangeValue() {
         const { start, end } = this.rangeGroup.getRawValue();
         if (!start && !end) {
@@ -6552,12 +6693,14 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialDateRangeComponent, isStandalone: true, selector: "pdx-material-date-range", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode", metadataInput: ["metadata", "metadataInput"] }, outputs: { validationChange: "validationChange" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? \"block\" : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "style.width": "\"100%\"", "attr.data-field-type": "\"dateRange\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
+            { provide: DateAdapter, useClass: PraxisNativeDateAdapter },
+            { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaterialDateRangeComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, static: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <div class="pdx-date-range-wrap" cdkOverlayOrigin #origin="cdkOverlayOrigin">
     <mat-form-field
       [appearance]="materialAppearance()"
@@ -6601,8 +6744,10 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
               ? metadata()?.startPlaceholder
               : null)
           "
+          (keydown.tab)="focusEndDateInput($event)"
         />
         <input
+          #endDateInput
           matEndDate
           formControlName="end"
           [attr.placeholder]="
@@ -6641,6 +6786,7 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
         [startAt]="startAt()"
         [touchUi]="metadata()?.touchUi || false"
         [color]="materialColor()"
+        panelClass="pdx-datepicker-panel"
       ></mat-date-range-picker>
 
       
@@ -6682,6 +6828,8 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
         [cdkConnectedOverlayHasBackdrop]="true"
         [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
         [cdkConnectedOverlayPositions]="overlayPositions()"
+        [cdkConnectedOverlayPush]="true"
+        [cdkConnectedOverlayViewportMargin]="shortcutOverlayViewportMargin"
         (backdropClick)="closeShortcuts()"
         (detach)="onOverlayDetach()"
       >
@@ -6693,15 +6841,11 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
       </ng-template>
     }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PraxisDateRangeShortcutsOverlayComponent, selector: "pdx-date-range-shortcuts-overlay", inputs: ["items", "activeId"], outputs: ["selectPreset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PraxisDateRangeShortcutsOverlayComponent, selector: "pdx-date-range-shortcuts-overlay", inputs: ["items", "activeId"], outputs: ["selectPreset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialDateRangeComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pdx-material-date-range',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
+            args: [{ selector: 'pdx-material-date-range', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="pdx-date-range-wrap" cdkOverlayOrigin #origin="cdkOverlayOrigin">
     <mat-form-field
       [appearance]="materialAppearance()"
@@ -6745,8 +6889,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
               ? metadata()?.startPlaceholder
               : null)
           "
+          (keydown.tab)="focusEndDateInput($event)"
         />
         <input
+          #endDateInput
           matEndDate
           formControlName="end"
           [attr.placeholder]="
@@ -6785,6 +6931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [startAt]="startAt()"
         [touchUi]="metadata()?.touchUi || false"
         [color]="materialColor()"
+        panelClass="pdx-datepicker-panel"
       ></mat-date-range-picker>
 
       
@@ -6826,6 +6973,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [cdkConnectedOverlayHasBackdrop]="true"
         [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
         [cdkConnectedOverlayPositions]="overlayPositions()"
+        [cdkConnectedOverlayPush]="true"
+        [cdkConnectedOverlayViewportMargin]="shortcutOverlayViewportMargin"
         (backdropClick)="closeShortcuts()"
         (detach)="onOverlayDetach()"
       >
@@ -6837,8 +6986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       </ng-template>
     }
     </div>
-  `,
-                    imports: [
+  `, imports: [
                         CommonModule,
                         MatFormFieldModule,
                         MatInputModule,
@@ -6852,15 +7000,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         PraxisIconDirective,
                         ReactiveFormsModule,
                         PraxisDateRangeShortcutsOverlayComponent,
-                    ],
-                    providers: [
+                    ], providers: [
+                        { provide: DateAdapter, useClass: PraxisNativeDateAdapter },
+                        { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MaterialDateRangeComponent),
                             multi: true,
                         },
-                    ],
-                    host: {
+                    ], host: {
                         '[class]': 'componentCssClasses()',
                         '[class.praxis-disabled]': 'disabledMode',
                         '[style.display]': 'visible ? "block" : "none"',
@@ -6869,8 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         '[attr.data-field-type]': '"dateRange"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    },
-                }]
+                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -6885,6 +7032,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             }], picker: [{
                 type: ViewChild,
                 args: ['picker', { static: true }]
+            }], endDateInput: [{
+                type: ViewChild,
+                args: ['endDateInput']
             }] } });
 
 const PDX_MATERIAL_DATE_RANGE_EDITORIAL_DESCRIPTOR = {
@@ -7016,7 +7166,8 @@ class MaterialDatepickerComponent extends SimpleBaseInputComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialDatepickerComponent, isStandalone: true, selector: "pdx-material-datepicker", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, outputs: { validationChange: "validationChange" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"date\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
-            provideNativeDateAdapter(),
+            { provide: DateAdapter, useClass: PraxisNativeDateAdapter },
+            { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MaterialDatepickerComponent),
@@ -7109,7 +7260,7 @@ class MaterialDatepickerComponent extends SimpleBaseInputComponent {
         </mat-hint>
       }
     </mat-form-field>
-  `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
             type: Component,
@@ -7212,7 +7363,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         PraxisIconDirective,
                         ReactiveFormsModule,
                     ], providers: [
-                        provideNativeDateAdapter(),
+                        { provide: DateAdapter, useClass: PraxisNativeDateAdapter },
+                        { provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MaterialDatepickerComponent),
@@ -7226,7 +7378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         '[attr.data-field-type]': '"date"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}\n"] }]
+                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -8066,6 +8218,12 @@ function formatDisplayValue(field, value, options) {
         const trimmed = value.trim();
         if (!trimmed)
             return EMPTY_DISPLAY;
+        if (presentation && presentation.type !== 'string') {
+            return formatTypedValue(field, trimmed, presentation);
+        }
+        const documentIdentifier = formatDocumentIdentifierValue(field, trimmed);
+        if (documentIdentifier)
+            return documentIdentifier;
         if (presentation) {
             return formatTypedValue(field, trimmed, presentation);
         }
@@ -8171,6 +8329,77 @@ function formatCurrencyBoundary(field, value, options) {
         return `${currency} ${formatCompactNumber(value)}`;
     }
 }
+function formatDocumentIdentifierValue(field, value) {
+    if (/[a-z]/i.test(value))
+        return null;
+    const digits = value.replace(/\D/g, '');
+    const kind = inferDocumentIdentifierKind(field, digits.length);
+    if (kind === 'cpf' && digits.length === 11) {
+        return formatCpfIdentifier(digits);
+    }
+    if (kind === 'cnpj' && digits.length === 14) {
+        return formatCnpjIdentifier(digits);
+    }
+    return null;
+}
+function formatCpfIdentifier(digits) {
+    return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6, 9)}-${digits.slice(9)}`;
+}
+function formatCnpjIdentifier(digits) {
+    return `${digits.slice(0, 2)}.${digits.slice(2, 5)}.${digits.slice(5, 8)}/${digits.slice(8, 12)}-${digits.slice(12)}`;
+}
+function inferDocumentIdentifierKind(field, digitsLength) {
+    const controlType = normalizeComparableString(field?.controlType);
+    const valuePresentationType = normalizeComparableString(field?.valuePresentation?.type);
+    const documentKind = normalizeComparableString(field?.documentKind) ||
+        normalizeComparableString(field?.documentType) ||
+        normalizeComparableString(field?.identifierKind) ||
+        normalizeComparableString(field?.identifierType);
+    const signals = [
+        field?.name,
+        field?.id,
+        field?.key,
+        field?.label,
+        field?.placeholder,
+        field?.format,
+        field?.mask,
+        field?.inputMask,
+        field?.pattern,
+        field?.valuePresentation?.format,
+        field?.valuePresentation?.mask,
+    ]
+        .map(normalizeComparableString)
+        .filter(Boolean)
+        .join('|');
+    if (documentKind === 'cpf')
+        return 'cpf';
+    if (documentKind === 'cnpj')
+        return 'cnpj';
+    if (hasDocumentSignal(controlType, 'cpf') ||
+        hasDocumentSignal(valuePresentationType, 'cpf') ||
+        hasDocumentSignal(signals, 'cpf')) {
+        return 'cpf';
+    }
+    if (hasDocumentSignal(controlType, 'cnpj') ||
+        hasDocumentSignal(valuePresentationType, 'cnpj') ||
+        hasDocumentSignal(signals, 'cnpj')) {
+        return 'cnpj';
+    }
+    if (controlType === 'document' ||
+        controlType === 'documentidentifier' ||
+        controlType === 'documentid' ||
+        valuePresentationType === 'document' ||
+        valuePresentationType === 'documentidentifier') {
+        if (digitsLength === 11)
+            return 'cpf';
+        if (digitsLength === 14)
+            return 'cnpj';
+    }
+    return null;
+}
+function hasDocumentSignal(value, token) {
+    return Boolean(value?.includes(token));
+}
 /**
  * Formats a value for presentation and linkifies emails/URLs.
  * Rely on Angular's built-in sanitization when binding via [innerHTML].
@@ -8568,6 +8797,9 @@ function normalizeString(value) {
     const trimmed = value.trim();
     return trimmed ? trimmed : undefined;
 }
+function normalizeComparableString(value) {
+    return normalizeString(value)?.trim().toLowerCase().replace(/[\s_-]+/g, '');
+}
 function coerceDateValue(value, type) {
     if (value instanceof Date) {
         return value;
@@ -8607,6 +8839,210 @@ function coerceDateOnlyCalendarValue(value) {
     return coerceDateValue(value, 'date');
 }
 
+class OptionDisplayResolverService {
+    resolve(field, rawValue, crudService) {
+        if (!field || rawValue === null || rawValue === undefined || rawValue === '') {
+            return of(null);
+        }
+        const objectLabel = this.resolveObjectLabel(rawValue);
+        if (objectLabel) {
+            return of(objectLabel);
+        }
+        const local = this.resolveFromLocalOptions(field, rawValue);
+        if (local !== null) {
+            return of(local);
+        }
+        if (!crudService || !this.shouldResolveRemotely(field)) {
+            return of(null);
+        }
+        const ids = this.extractIds(field, rawValue);
+        if (!ids.length) {
+            return of(null);
+        }
+        const resourcePath = this.resolveResourcePath(field);
+        if (!resourcePath) {
+            return of(null);
+        }
+        try {
+            crudService.configure(resourcePath);
+        }
+        catch {
+            return of(null);
+        }
+        const optionSource = field.optionSource;
+        const request$ = optionSource?.key
+            ? crudService.getOptionSourceOptionsByIds(optionSource.key, ids)
+            : crudService.getOptionsByIds(ids);
+        return request$.pipe(map((options) => this.joinRemoteLabels(ids, options)), catchError(() => this.resolveRemoteByFilter(field, rawValue, ids, crudService)));
+    }
+    resolveFromLocalOptions(field, rawValue) {
+        const options = this.localOptions(field);
+        if (!options.length) {
+            return null;
+        }
+        const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+        const labels = values
+            .map((value) => {
+            const directLabel = this.resolveObjectLabel(value);
+            if (directLabel) {
+                return directLabel;
+            }
+            const option = options.find((candidate) => this.areValuesEqual(candidate.value, this.extractId(field, value)));
+            return option?.label?.trim() || '';
+        })
+            .filter(Boolean);
+        return labels.length ? labels.join(', ') : null;
+    }
+    resolveRemoteByFilter(field, rawValue, ids, crudService) {
+        const filter = {};
+        const labelKey = this.optionLabelKey(field);
+        const valueKey = this.optionValueKey(field);
+        const includeIds = ids.length ? { includeIds: ids } : undefined;
+        return crudService
+            .filter(filter, { pageNumber: 0, pageSize: Math.max(ids.length, 1) }, includeIds)
+            .pipe(map((page) => {
+            const content = Array.isArray(page?.content) ? page.content : [];
+            const options = content.map((item) => ({
+                id: item?.[valueKey],
+                label: item?.[labelKey],
+            }));
+            return this.joinRemoteLabels(ids, options);
+        }), catchError(() => of(this.resolveFromLocalOptions(field, rawValue))));
+    }
+    localOptions(field) {
+        const source = field.selectOptions ?? field.options;
+        if (!Array.isArray(source)) {
+            return [];
+        }
+        return source
+            .map((option) => {
+            const value = option?.value ?? option?.key ?? option?.id;
+            const label = option?.label ?? option?.text ?? option?.value;
+            return {
+                value,
+                label: label === null || label === undefined ? '' : String(label),
+            };
+        })
+            .filter((option) => option.label.trim().length > 0);
+    }
+    shouldResolveRemotely(field) {
+        if (field.optionSource) {
+            return true;
+        }
+        if (!this.isSelectionControl(field) && !this.hasOptionBinding(field)) {
+            return false;
+        }
+        return !!this.resolveResourcePath(field);
+    }
+    hasOptionBinding(field) {
+        return !!(field.endpoint ||
+            field.resourcePath ||
+            field.valueField ||
+            field.displayField ||
+            field.optionValueKey ||
+            field.optionLabelKey);
+    }
+    isSelectionControl(field) {
+        const controlType = String(field.controlType ?? '')
+            .trim()
+            .toLowerCase()
+            .replace(/_/g, '-');
+        return (controlType.includes('select') ||
+            controlType.includes('autocomplete') ||
+            controlType.includes('lookup') ||
+            controlType.includes('selection-list') ||
+            controlType.includes('transfer-list') ||
+            controlType.includes('checkbox-group') ||
+            controlType.includes('radio-group') ||
+            controlType.includes('chips') ||
+            controlType.includes('button-toggle'));
+    }
+    resolveResourcePath(field) {
+        const optionSource = field.optionSource;
+        const raw = optionSource?.resourcePath ??
+            field.resourcePath ??
+            field.endpoint ??
+            null;
+        if (!raw || typeof raw !== 'string') {
+            return null;
+        }
+        return raw
+            .trim()
+            .replace(/\/options\/filter\/?$/i, '')
+            .replace(/\/filter\/?$/i, '');
+    }
+    extractIds(field, rawValue) {
+        const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+        return values
+            .map((value) => this.extractId(field, value))
+            .filter((value) => typeof value === 'string' || typeof value === 'number')
+            .filter((value) => String(value).trim().length > 0);
+    }
+    extractId(field, value) {
+        if (value && typeof value === 'object') {
+            const obj = value;
+            const valueKey = this.optionValueKey(field);
+            return obj[valueKey] ?? obj['id'] ?? obj['value'];
+        }
+        return value;
+    }
+    resolveObjectLabel(value) {
+        if (Array.isArray(value)) {
+            const labels = value
+                .map((entry) => this.resolveObjectLabel(entry))
+                .filter((entry) => !!entry);
+            return labels.length ? labels.join(', ') : null;
+        }
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const obj = value;
+        const label = obj['label'] ?? obj['text'] ?? obj['name'] ?? obj['title'];
+        return label === null || label === undefined ? null : String(label);
+    }
+    joinRemoteLabels(ids, options) {
+        const labels = ids
+            .map((id) => {
+            const option = options.find((candidate) => this.areValuesEqual(candidate?.id, id));
+            const label = option?.label;
+            return label === null || label === undefined ? '' : String(label);
+        })
+            .filter((label) => label.trim().length > 0);
+        return labels.length ? labels.join(', ') : null;
+    }
+    optionLabelKey(field) {
+        return (field.optionLabelKey ??
+            field.displayField ??
+            'label');
+    }
+    optionValueKey(field) {
+        return (field.optionValueKey ??
+            field.valueField ??
+            'id');
+    }
+    areValuesEqual(left, right) {
+        if (left === right) {
+            return true;
+        }
+        if ((typeof left === 'string' || typeof left === 'number') &&
+            (typeof right === 'string' || typeof right === 'number')) {
+            return String(left) === String(right);
+        }
+        try {
+            return JSON.stringify(left) === JSON.stringify(right);
+        }
+        catch {
+            return false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OptionDisplayResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OptionDisplayResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: OptionDisplayResolverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Internal wrapper used by {@link DynamicFieldLoaderDirective}.
  *
@@ -8616,27 +9052,60 @@ function coerceDateOnlyCalendarValue(value) {
  */
 class FieldShellComponent {
     hostLocale = inject(LOCALE_ID, { optional: true }) ?? 'en-US';
+    cdr = inject(ChangeDetectorRef);
+    optionDisplayResolver = inject(OptionDisplayResolverService);
+    crudService = inject(GenericCrudService, {
+        optional: true,
+    });
+    valueSub;
+    resolveSub;
+    presentationDisplayValue = null;
+    _field;
+    _control;
+    _presentationMode = false;
     /** Metadata for the dynamic field being rendered. */
-    field;
+    set field(value) {
+        this._field = value;
+        this.refreshPresentationDisplayValue();
+    }
+    get field() {
+        return this._field;
+    }
     /** Index position of the field within the directive's list. */
     index;
     /** Controle reativo associado (injetado pela diretiva) */
-    control;
+    set control(value) {
+        this._control = value;
+        this.bindControlValueChanges();
+        this.refreshPresentationDisplayValue();
+    }
+    get control() {
+        return this._control;
+    }
     /** Estados – podem ser definidos externamente; caso contrário, derivam do metadata */
     readonlyMode = false;
     disabledMode = false;
     visible = true;
-    presentationMode = false;
+    set presentationMode(value) {
+        this._presentationMode = value;
+        this.refreshPresentationDisplayValue();
+    }
+    get presentationMode() {
+        return this._presentationMode;
+    }
     /** Special input to enable canvas mode interactions */
     canvasMode = false;
     canvasMouseEnter = new EventEmitter();
     canvasMouseLeave = new EventEmitter();
     canvasClick = new EventEmitter();
     get fieldNameAttr() {
-        return this.field.name;
+        return this._field?.name;
     }
     get fieldIdAttr() {
-        return this.field.id ?? undefined;
+        return this._field?.id ?? undefined;
+    }
+    fieldLabelText() {
+        return this._field?.label || this._field?.name;
     }
     get fieldControlTypeAttr() {
         const controlType = this.field?.controlType;
@@ -8679,6 +9148,10 @@ class FieldShellComponent {
     itemTemplate;
     /** View container used as the insertion point for the field component. */
     vc;
+    ngOnDestroy() {
+        this.valueSub?.unsubscribe();
+        this.resolveSub?.unsubscribe();
+    }
     /**
      * Defaults derivados dos metadados quando inputs não são explicitamente alterados.
      * - hidden/formHidden => visible=false
@@ -8726,7 +9199,7 @@ class FieldShellComponent {
         }
     }
     getPresentationValue() {
-        const raw = this.control?.value;
+        const raw = this.presentationDisplayValue ?? this.control?.value;
         try {
             const fn = this.field?.transformDisplayValue;
             const formatted = typeof fn === 'function'
@@ -8748,9 +9221,14 @@ class FieldShellComponent {
     }
     getPresentationHtml() {
         const raw = this.control?.value;
+        const displayValue = this.presentationDisplayValue;
         try {
             const fn = this.field?.transformDisplayValue;
-            const formatted = typeof fn === 'function' ? fn(raw) : null;
+            const formatted = displayValue !== null
+                ? displayValue
+                : typeof fn === 'function'
+                    ? fn(raw)
+                    : null;
             const val = formatted == null ? raw : formatted;
             return formatDisplayHtml(this.field, val, {
                 appLocale: this.hostLocale,
@@ -8766,12 +9244,121 @@ class FieldShellComponent {
             });
         }
     }
+    getPresentationPrefixIcon() {
+        const field = this.field;
+        const explicit = this.normalizeIconName(field?.prefixIcon);
+        if (explicit) {
+            return explicit;
+        }
+        if (this.isStartIconPosition(field?.iconPosition)) {
+            return this.normalizeIconName(field?.icon);
+        }
+        return '';
+    }
+    getPresentationSuffixIcon() {
+        const field = this.field;
+        const explicit = this.normalizeIconName(field?.suffixIcon);
+        if (explicit) {
+            return explicit;
+        }
+        if (this.isEndIconPosition(field?.iconPosition)) {
+            return this.normalizeIconName(field?.icon);
+        }
+        return '';
+    }
+    getPresentationIconPalette(position) {
+        const color = this.getPresentationIconColor(position);
+        return color === 'primary' || color === 'accent' || color === 'warn'
+            ? color
+            : undefined;
+    }
+    getPresentationIconCustomColor(position) {
+        const color = this.getPresentationIconColor(position);
+        return color && !this.getPresentationIconPalette(position) ? color : null;
+    }
+    getPresentationIconSize() {
+        const size = this.field?.iconFontSize ?? this.field?.iconSize;
+        if (typeof size === 'number') {
+            return `${size}px`;
+        }
+        if (typeof size === 'string' && size.trim().length) {
+            const trimmed = size.trim();
+            if (/^\d+(\.\d+)?$/.test(trimmed)) {
+                return `${trimmed}px`;
+            }
+            if (trimmed === 'small') {
+                return '1rem';
+            }
+            if (trimmed === 'medium') {
+                return '1.125rem';
+            }
+            if (trimmed === 'large') {
+                return '1.5rem';
+            }
+            return trimmed;
+        }
+        return null;
+    }
+    bindControlValueChanges() {
+        this.valueSub?.unsubscribe();
+        this.valueSub = undefined;
+        if (!this.control) {
+            return;
+        }
+        this.valueSub = this.control.valueChanges.subscribe(() => {
+            this.refreshPresentationDisplayValue();
+        });
+    }
+    getPresentationIconColor(position) {
+        const field = this.field;
+        const value = position === 'prefix'
+            ? field?.prefixIconColor ?? field?.iconColor
+            : field?.suffixIconColor ?? field?.iconColor;
+        return typeof value === 'string' && value.trim().length
+            ? value.trim()
+            : undefined;
+    }
+    normalizeIconName(icon) {
+        const raw = String(icon ?? '').trim();
+        if (!raw) {
+            return '';
+        }
+        if (raw.startsWith('mi:')) {
+            return raw.slice(3).trim();
+        }
+        return raw;
+    }
+    isStartIconPosition(position) {
+        const value = String(position ?? 'start').trim().toLowerCase();
+        return ['start', 'left', 'before', 'prefix', 'leading'].includes(value);
+    }
+    isEndIconPosition(position) {
+        const value = String(position ?? '').trim().toLowerCase();
+        return ['end', 'right', 'after', 'suffix', 'trailing'].includes(value);
+    }
+    refreshPresentationDisplayValue() {
+        this.resolveSub?.unsubscribe();
+        this.resolveSub = undefined;
+        this.presentationDisplayValue = null;
+        if (!this.field) {
+            return;
+        }
+        if (!this.effectivePresentationMode || this.renderContentInPresentation()) {
+            return;
+        }
+        this.resolveSub = this.optionDisplayResolver
+            .resolve(this.field, this.control?.value, this.crudService)
+            .subscribe((value) => {
+            this.presentationDisplayValue = value;
+            this.cdr.markForCheck();
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldShellComponent, isStandalone: true, selector: "praxis-field-shell", inputs: { field: "field", index: "index", control: "control", readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode", canvasMode: "canvasMode", itemTemplate: "itemTemplate" }, outputs: { canvasMouseEnter: "canvasMouseEnter", canvasMouseLeave: "canvasMouseLeave", canvasClick: "canvasClick" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "attr.data-field-name": "this.fieldNameAttr", "attr.data-field-id": "this.fieldIdAttr", "attr.data-control-type": "this.fieldControlTypeAttr", "attr.data-field-index": "this.fieldIndexAttr", "style.display": "this.hostDisplay", "class.canvas-element": "this.isCanvasElement", "attr.data-canvas-type": "this.canvasType" }, classAttribute: "pfx-field-shell" }, viewQueries: [{ propertyName: "vc", first: true, predicate: ["insertionPoint"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FieldShellComponent, isStandalone: true, selector: "praxis-field-shell", inputs: { field: "field", index: "index", control: "control", readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode", canvasMode: "canvasMode", itemTemplate: "itemTemplate" }, outputs: { canvasMouseEnter: "canvasMouseEnter", canvasMouseLeave: "canvasMouseLeave", canvasClick: "canvasClick" }, host: { listeners: { "mouseenter": "onMouseEnter($event)", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "attr.data-field-name": "this.fieldNameAttr", "attr.data-field-id": "this.fieldIdAttr", "attr.data-control-type": "this.fieldControlTypeAttr", "attr.data-field-index": "this.fieldIndexAttr", "style.display": "this.hostDisplay", "class.canvas-element": "this.isCanvasElement", "attr.data-canvas-type": "this.canvasType" }, classAttribute: "pfx-field-shell" }, providers: [GenericCrudService], viewQueries: [{ propertyName: "vc", first: true, predicate: ["insertionPoint"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
     <div
       class="pfx-field-shell-wrapper"
       [attr.data-field-index]="index"
-      [attr.data-field-id]="field.id"
+      [attr.data-field-id]="fieldIdAttr"
     >
       <div
         class="pfx-field-shell-host"
@@ -8784,14 +9371,40 @@ class FieldShellComponent {
       >
         <!-- Presentation block -->
         @if (effectivePresentationMode && !renderContentInPresentation()) {
-          <div class="praxis-presentation" [attr.data-field]="field.name">
+          <div class="praxis-presentation" [attr.data-field]="fieldNameAttr">
             <span class="praxis-presentation__label">{{
-              field.label || field.name
+              fieldLabelText()
             }}</span>
-            <span
-              class="praxis-presentation__value"
-              [innerHTML]="getPresentationHtml()"
-            ></span>
+            <span class="praxis-presentation__content">
+              @if (getPresentationPrefixIcon(); as prefixIcon) {
+                <mat-icon
+                  class="praxis-presentation__icon praxis-presentation__icon--prefix"
+                  aria-hidden="true"
+                  [praxisIcon]="prefixIcon"
+                  [color]="getPresentationIconPalette('prefix')"
+                  [style.color]="getPresentationIconCustomColor('prefix')"
+                  [style.font-size]="getPresentationIconSize()"
+                  [style.width]="getPresentationIconSize()"
+                  [style.height]="getPresentationIconSize()"
+                ></mat-icon>
+              }
+              <span
+                class="praxis-presentation__value"
+                [innerHTML]="getPresentationHtml()"
+              ></span>
+              @if (getPresentationSuffixIcon(); as suffixIcon) {
+                <mat-icon
+                  class="praxis-presentation__icon praxis-presentation__icon--suffix"
+                  aria-hidden="true"
+                  [praxisIcon]="suffixIcon"
+                  [color]="getPresentationIconPalette('suffix')"
+                  [style.color]="getPresentationIconCustomColor('suffix')"
+                  [style.font-size]="getPresentationIconSize()"
+                  [style.width]="getPresentationIconSize()"
+                  [style.height]="getPresentationIconSize()"
+                ></mat-icon>
+              }
+            </span>
           </div>
         }
 
@@ -8832,15 +9445,15 @@ class FieldShellComponent {
 
       </div>
     </div>
-  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FieldShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-field-shell', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+            args: [{ selector: 'praxis-field-shell', standalone: true, imports: [CommonModule, MatIconModule, PraxisIconDirective], providers: [GenericCrudService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
     <div
       class="pfx-field-shell-wrapper"
       [attr.data-field-index]="index"
-      [attr.data-field-id]="field.id"
+      [attr.data-field-id]="fieldIdAttr"
     >
       <div
         class="pfx-field-shell-host"
@@ -8853,14 +9466,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       >
         <!-- Presentation block -->
         @if (effectivePresentationMode && !renderContentInPresentation()) {
-          <div class="praxis-presentation" [attr.data-field]="field.name">
+          <div class="praxis-presentation" [attr.data-field]="fieldNameAttr">
             <span class="praxis-presentation__label">{{
-              field.label || field.name
+              fieldLabelText()
             }}</span>
-            <span
-              class="praxis-presentation__value"
-              [innerHTML]="getPresentationHtml()"
-            ></span>
+            <span class="praxis-presentation__content">
+              @if (getPresentationPrefixIcon(); as prefixIcon) {
+                <mat-icon
+                  class="praxis-presentation__icon praxis-presentation__icon--prefix"
+                  aria-hidden="true"
+                  [praxisIcon]="prefixIcon"
+                  [color]="getPresentationIconPalette('prefix')"
+                  [style.color]="getPresentationIconCustomColor('prefix')"
+                  [style.font-size]="getPresentationIconSize()"
+                  [style.width]="getPresentationIconSize()"
+                  [style.height]="getPresentationIconSize()"
+                ></mat-icon>
+              }
+              <span
+                class="praxis-presentation__value"
+                [innerHTML]="getPresentationHtml()"
+              ></span>
+              @if (getPresentationSuffixIcon(); as suffixIcon) {
+                <mat-icon
+                  class="praxis-presentation__icon praxis-presentation__icon--suffix"
+                  aria-hidden="true"
+                  [praxisIcon]="suffixIcon"
+                  [color]="getPresentationIconPalette('suffix')"
+                  [style.color]="getPresentationIconCustomColor('suffix')"
+                  [style.font-size]="getPresentationIconSize()"
+                  [style.width]="getPresentationIconSize()"
+                  [style.height]="getPresentationIconSize()"
+                ></mat-icon>
+              }
+            </span>
           </div>
         }
 
@@ -8901,7 +9540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
       </div>
     </div>
-  `, host: { class: 'pfx-field-shell' }, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value{text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"] }]
+  `, host: { class: 'pfx-field-shell' }, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], index: [{
@@ -10656,6 +11295,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         if (mappedOptions)
             this.options.set(mappedOptions);
         this.multiple.set(!!metadata.multiple);
+        this.normalizeMultipleControlValue();
         this.searchable.set(metadata.searchable ?? !isCategoricalBucket);
         this.selectAll.set(!!metadata.selectAll);
         this.maxSelections.set(metadata.maxSelections ?? null);
@@ -10982,7 +11622,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         enhanced.displayWith = (opt) => opt && typeof opt === 'object' && 'label' in opt
             ? String(opt.label ?? '')
             : '';
-        enhanced.compareWith = (a, b) => this.areRemoteOptionValuesEqual(a, b);
+        enhanced.compareWith = (a, b) => this.areOptionValuesEqual(a, b);
     }
     // ---------------------------------------------------------------------------
     // Phase 1: explicit reload API and dependency handling
@@ -11048,7 +11688,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         if (!selected.length) {
             return;
         }
-        const hasAllSelectedOptions = selected.every((value) => this.options().some((candidate) => this.areRemoteOptionValuesEqual(candidate.value, value)));
+        const hasAllSelectedOptions = selected.every((value) => this.options().some((candidate) => this.areOptionValuesEqual(candidate.value, value)));
         if (hasAllSelectedOptions) {
             return;
         }
@@ -11073,7 +11713,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
     resolveRemoteOptionDisabled(option) {
         return option.extra?.['selectable'] === false;
     }
-    areRemoteOptionValuesEqual(left, right) {
+    areOptionValuesEqual(left, right) {
         return this.normalizeRemoteOptionValue(left) === this.normalizeRemoteOptionValue(right);
     }
     normalizeRemoteOptionValue(value) {
@@ -11125,15 +11765,13 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -11236,15 +11874,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -12942,7 +13578,6 @@ class InlineEntityLookupComponent extends MaterialAsyncSelectComponent {
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -12950,8 +13585,7 @@ class InlineEntityLookupComponent extends MaterialAsyncSelectComponent {
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           @if (richLayoutEnabled()) {
             @if (optionLookupView(option); as item) {
@@ -13359,7 +13993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -13367,8 +14000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           @if (richLayoutEnabled()) {
             @if (optionLookupView(option); as item) {
@@ -15450,15 +16082,13 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
         <mat-option
           *ngIf="emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -15560,15 +16190,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -21020,7 +21648,7 @@ class MaterialPriceRangeComponent extends SimpleBaseInputComponent {
         <div class="mat-hint">{{ metadata()!.hint }}</div>
       }
     </div>
-  `, isInline: true, styles: [".price-range-container{display:flex;flex-direction:column}.range-label{display:block;margin:0 0 8px;font-size:14px;line-height:1.25;color:var(--md-sys-color-on-surface-variant)}.price-range-actions{display:flex;justify-content:flex-end;margin-top:4px}.range-inputs{display:flex;align-items:stretch}.range-inputs.layout-row{flex-direction:row}.range-inputs.layout-column{flex-direction:column}.range-inputs>pdx-material-currency{flex:1 1 0;width:100%;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MaterialCurrencyComponent, selector: "pdx-material-currency", inputs: ["metadata", "readonlyMode", "disabledMode", "visible", "presentationMode"], outputs: ["validationChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, styles: [".price-range-container{display:flex;flex-direction:column}.range-label{display:block;margin:0 0 6px;font-size:12px;line-height:16px;font-weight:500;color:var(--md-sys-color-on-surface-variant)}.mat-hint{display:block;margin-top:4px;font-size:12px;line-height:16px;font-weight:400;color:var(--mat-form-field-subscript-text-color, var(--md-sys-color-on-surface-variant))}.price-range-actions{display:flex;justify-content:flex-end;margin-top:4px}.range-inputs{display:flex;align-items:stretch}.range-inputs.layout-row{flex-direction:row}.range-inputs.layout-column{flex-direction:column}.range-inputs>pdx-material-currency{flex:1 1 0;width:100%;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MaterialCurrencyComponent, selector: "pdx-material-currency", inputs: ["metadata", "readonlyMode", "disabledMode", "visible", "presentationMode"], outputs: ["validationChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialPriceRangeComponent, decorators: [{
             type: Component,
@@ -21104,7 +21732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         '[attr.data-field-type]': '"priceRange"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: [".price-range-container{display:flex;flex-direction:column}.range-label{display:block;margin:0 0 8px;font-size:14px;line-height:1.25;color:var(--md-sys-color-on-surface-variant)}.price-range-actions{display:flex;justify-content:flex-end;margin-top:4px}.range-inputs{display:flex;align-items:stretch}.range-inputs.layout-row{flex-direction:row}.range-inputs.layout-column{flex-direction:column}.range-inputs>pdx-material-currency{flex:1 1 0;width:100%;min-width:0}\n"] }]
+                    }, styles: [".price-range-container{display:flex;flex-direction:column}.range-label{display:block;margin:0 0 6px;font-size:12px;line-height:16px;font-weight:500;color:var(--md-sys-color-on-surface-variant)}.mat-hint{display:block;margin-top:4px;font-size:12px;line-height:16px;font-weight:400;color:var(--mat-form-field-subscript-text-color, var(--md-sys-color-on-surface-variant))}.price-range-actions{display:flex;justify-content:flex-end;margin-top:4px}.range-inputs{display:flex;align-items:stretch}.range-inputs.layout-row{flex-direction:row}.range-inputs.layout-column{flex-direction:column}.range-inputs>pdx-material-currency{flex:1 1 0;width:100%;min-width:0}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -22270,7 +22898,6 @@ class InlineSelectComponent extends SimpleBaseSelectComponent {
         <mat-option
           *ngIf="emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -22278,8 +22905,7 @@ class InlineSelectComponent extends SimpleBaseSelectComponent {
         <mat-option
           *ngFor="let option of filteredOptions(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -22402,7 +23028,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -22410,8 +23035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngFor="let option of filteredOptions(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -22524,7 +23148,7 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
         return this.isReadonlyEffective() || this.presentationMode ? 'true' : null;
     }
     isOptionDisabled(option) {
-        return this.isInteractionDisabled() || option.disabled === true;
+        return this.isInteractionDisabled() || super.isOptionDisabled(option);
     }
     selectOption(option) {
         if (this.isInteractionDisabled()) {
@@ -22769,7 +23393,6 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
             *ngFor="let option of filteredOptions(); trackBy: trackByOption"
             [value]="option.value"
             [disabled]="isOptionDisabled(option)"
-            (click)="selectOption(option)"
           >
             {{ option.label }}
           </mat-option>
@@ -22815,7 +23438,6 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
             *ngIf="emptyOptionText()"
             [value]="null"
             [disabled]="isInteractionDisabled()"
-            (click)="selectOption({ label: emptyOptionText()!, value: null })"
           >
             {{ emptyOptionText() }}
           </mat-option>
@@ -22823,7 +23445,6 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
             *ngFor="let option of filteredOptions(); trackBy: trackByOption"
             [value]="option.value"
             [disabled]="isOptionDisabled(option)"
-            (click)="selectOption(option)"
           >
             {{ option.label }}
           </mat-option>
@@ -22932,7 +23553,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             *ngFor="let option of filteredOptions(); trackBy: trackByOption"
             [value]="option.value"
             [disabled]="isOptionDisabled(option)"
-            (click)="selectOption(option)"
           >
             {{ option.label }}
           </mat-option>
@@ -22978,7 +23598,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             *ngIf="emptyOptionText()"
             [value]="null"
             [disabled]="isInteractionDisabled()"
-            (click)="selectOption({ label: emptyOptionText()!, value: null })"
           >
             {{ emptyOptionText() }}
           </mat-option>
@@ -22986,7 +23605,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             *ngFor="let option of filteredOptions(); trackBy: trackByOption"
             [value]="option.value"
             [disabled]="isOptionDisabled(option)"
-            (click)="selectOption(option)"
           >
             {{ option.label }}
           </mat-option>
@@ -23402,7 +24020,6 @@ class InlineSearchableSelectComponent extends MaterialSearchableSelectComponent
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -23410,8 +24027,7 @@ class InlineSearchableSelectComponent extends MaterialSearchableSelectComponent
         <mat-option
           *ngFor="let option of filteredOptions(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -23550,7 +24166,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -23558,8 +24173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngFor="let option of filteredOptions(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -23989,7 +24603,6 @@ class InlineAsyncSelectComponent extends MaterialAsyncSelectComponent {
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -23997,8 +24610,7 @@ class InlineAsyncSelectComponent extends MaterialAsyncSelectComponent {
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>
@@ -24138,7 +24750,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngIf="!multiple() && emptyOptionText()"
           [value]="null"
-          (click)="selectOption({ label: emptyOptionText()!, value: null })"
         >
           {{ emptyOptionText() }}
         </mat-option>
@@ -24146,8 +24757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-option
           *ngFor="let option of options(); trackBy: trackByOption"
           [value]="option.value"
-          [disabled]="option.disabled"
-          (click)="selectOption(option)"
+          [disabled]="isOptionDisabled(option)"
         >
           {{ option.label }}
         </mat-option>