@dereekb/dbx-form 13.11.14 → 13.11.15

package/fesm2022/{dereekb-dbx-form-info.wrapper.component-DxmZz3Dw.mjs → dereekb-dbx-form-info.wrapper.component-ChSBMxgm.mjs}

@@ -15,9 +15,9 @@ class DbxForgeInfoWrapperComponent {
     fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });
     onInfoClick = input(...(ngDevMode ? [undefined, { debugName: "onInfoClick" }] : /* istanbul ignore next */ []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    ariaLabelValue = computed(() => {
+    ariaLabelValueSignal = computed(() => {
         return this.ariaLabel() ?? 'More information';
-    }, ...(ngDevMode ? [{ debugName: "ariaLabelValue" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "ariaLabelValueSignal" }] : /* istanbul ignore next */ []));
     onClick() {
         this.onInfoClick()?.();
     }
@@ -28,7 +28,7 @@ class DbxForgeInfoWrapperComponent {
         <ng-container #fieldComponent></ng-container>
       </div>
       <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
-        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValue()">
+        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValueSignal()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
@@ -45,7 +45,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         <ng-container #fieldComponent></ng-container>
       </div>
       <div class="dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center">
-        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValue()">
+        <button mat-icon-button type="button" (click)="onClick()" [attr.aria-label]="ariaLabelValueSignal()">
           <mat-icon>info</mat-icon>
         </button>
       </div>
@@ -58,4 +58,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], onInfoClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "onInfoClick", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 export { DbxForgeInfoWrapperComponent };
-//# sourceMappingURL=dereekb-dbx-form-info.wrapper.component-DxmZz3Dw.mjs.map
+//# sourceMappingURL=dereekb-dbx-form-info.wrapper.component-ChSBMxgm.mjs.map

package/fesm2022/dereekb-dbx-form-info.wrapper.component-ChSBMxgm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dereekb-dbx-form-info.wrapper.component-ChSBMxgm.mjs","sources":["../../../../packages/dbx-form/src/lib/forge/field/wrapper/info/info.wrapper.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, viewChild, ViewContainerRef } from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { type FieldWrapper } from '@ng-forge/dynamic-forms';\n\n/**\n * Forge wrapper component that renders child fields inside a flex layout\n * with an info icon button beside them.\n *\n * Implements {@link FieldWrapper} and receives configuration\n * via component inputs.\n */\n@Component({\n  selector: 'dbx-forge-info-wrapper',\n  template: `\n    <div class=\"dbx-form-info-wrapper dbx-flex-bar\">\n      <div class=\"dbx-form-info-wrapper-content dbx-flex-grow\">\n        <ng-container #fieldComponent></ng-container>\n      </div>\n      <div class=\"dbx-form-info-wrapper-info dbx-flex-noshrink dbx-flex-column dbx-flex-center\">\n        <button mat-icon-button type=\"button\" (click)=\"onClick()\" [attr.aria-label]=\"ariaLabelValueSignal()\">\n          <mat-icon>info</mat-icon>\n        </button>\n      </div>\n    </div>\n  `,\n  imports: [MatIconButton, MatIconModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true\n})\nexport class DbxForgeInfoWrapperComponent implements FieldWrapper {\n  readonly fieldComponent = viewChild.required('fieldComponent', { read: ViewContainerRef });\n\n  readonly onInfoClick = input<() => void>();\n  readonly ariaLabel = input<string>();\n\n  readonly ariaLabelValueSignal = computed(() => {\n    return this.ariaLabel() ?? 'More information';\n  });\n\n  onClick(): void {\n    this.onInfoClick()?.();\n  }\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/dereekb-dbx-form-mapbox.mjs

@@ -29,12 +29,14 @@ import { FormlyModule } from '@ngx-formly/core';
 import { DEFAULT_PROPS, DEFAULT_VALIDATION_MESSAGES, provideDynamicForm } from '@ng-forge/dynamic-forms';
 import { setupMetaTracking, resolveValueFieldContext, buildValueFieldInputs } from '@ng-forge/dynamic-forms/integration';
 
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy formly mapbox factory; references deprecated config interfaces and is itself deprecated in favor of dbxForgeMapboxLatLngField() */
 /**
  * Creates a Formly field configuration for a Mapbox-powered latitude/longitude picker with optional map display.
  *
+ * @param config - Optional field configuration overrides.
+ * @returns A validated Formly field configuration for the Mapbox lat/lng picker.
+ *
  * @deprecated Use dbxForgeMapboxLatLngField() from the forge API instead.
- * @param config - Optional field configuration overrides
- * @returns A validated Formly field configuration for the Mapbox lat/lng picker
  */
 function mapboxLatLngField(config = {}) {
     const { key = 'latLng', latLngConfig, showMap, zoom, recenterTime, showCenterButton, setCenterOnLocationSet, selectLocationOnMapDrag, selectLocationOnMapClick, markerConfig } = config;
@@ -69,6 +71,7 @@ function mapboxLatLngField(config = {}) {
     return fieldConfig;
 }
 
+/* eslint-disable @typescript-eslint/no-deprecated -- marker component injects the deprecated DbxFormMapboxLatLngFieldComponent; both belong to the legacy mapbox formly layer being replaced by forge */
 class DbxFormMapboxLatLngFieldMarkerComponent {
     fieldComponent = inject(DbxFormMapboxLatLngFieldComponent);
     marker$ = combineLatest([this.fieldComponent.latLng$, this.fieldComponent.markerConfig$]).pipe(map(([latLng, markerConfig]) => {
@@ -92,6 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                 }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy DbxFormMapboxLatLngFieldComponent retained for backward compatibility; replacement is DbxForgeMapboxLatLngFieldComponent and intra-file references are part of the deprecated layer */
 const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_FIELD_INJECTION_KEY = 'DbxFormMapboxLatLngFieldComponent';
 const DEFAULT_DBX_FORM_MAPBOX_LAT_LNG_MARKER_CONFIG = {
     icon: 'pin_drop'
@@ -325,6 +329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
   `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, MapComponent, MarkerComponent, ReactiveFormsModule, MatIconModule, DbxMapboxModule, MatButtonModule, MatFormFieldModule, MatInputModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"] }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy NgModule that wraps the deprecated DbxFormMapboxLatLngFieldComponent; replacement is provideDbxForgeMapboxFieldDeclarations() */
 const importsAndExports$1 = [DbxFormMapboxLatLngFieldComponent];
 /**
  * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
@@ -358,8 +363,8 @@ const FORGE_MAPBOX_LATLNG_FIELD_TYPE = 'dbx-forge-mapbox-latlng';
  *
  * This is the forge equivalent of {@link mapboxLatLngField}.
  *
- * @param config - Optional field configuration overrides
- * @returns A validated forge field definition for the Mapbox lat/lng picker
+ * @param config - Optional field configuration overrides.
+ * @returns A validated forge field definition for the Mapbox lat/lng picker.
  */
 function dbxForgeMapboxLatLngField(config = {}) {
     const { key = 'latLng', label, description, required, readonly: isReadonly, showMap, zoom, latLngConfig, recenterTime, showCenterButton, setCenterOnLocationSet, selectLocationOnMapDrag, selectLocationOnMapClick, markerConfig } = config;
@@ -465,26 +470,32 @@ class DbxForgeMapboxLatLngFieldComponent {
     _useCurrentLocationDisabled = completeOnDestroy(new BehaviorSubject(false));
     useCurrentLocationDisabled$ = this._useCurrentLocationDisabled.asObservable();
     // Field value signal (double-call pattern)
-    fieldValue = computed(() => {
+    fieldValueSignal = computed(() => {
         const state = this.field()?.();
         return state?.value?.();
-    }, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => {
+    }, ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = computed(() => {
         const state = this.field()?.();
         return state?.disabled?.() ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isReadonlyOrDisabledSignal = computed(() => this.props()?.readonly || this.isDisabled(), ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    isReadonlyOrDisabledSignal = computed(() => {
+        const isDisabled = this.isDisabledSignal();
+        return this.props()?.readonly || isDisabled;
+    }, ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
     // Computed props from field definition
     showMapSignal = computed(() => this.props()?.showMap ?? true, ...(ngDevMode ? [{ debugName: "showMapSignal" }] : /* istanbul ignore next */ []));
     selectLocationOnMapDragSignal = computed(() => this.props()?.selectLocationOnMapDrag ?? true, ...(ngDevMode ? [{ debugName: "selectLocationOnMapDragSignal" }] : /* istanbul ignore next */ []));
     selectLocationOnMapClickSignal = computed(() => this.props()?.selectLocationOnMapClick ?? false, ...(ngDevMode ? [{ debugName: "selectLocationOnMapClickSignal" }] : /* istanbul ignore next */ []));
     setCenterOnLocationSetSignal = computed(() => this.props()?.setCenterOnLocationSet ?? true, ...(ngDevMode ? [{ debugName: "setCenterOnLocationSetSignal" }] : /* istanbul ignore next */ []));
-    showCenterButtonSignal = computed(() => !this.selectLocationOnMapDragSignal() && this.props()?.showCenterButton !== false, ...(ngDevMode ? [{ debugName: "showCenterButtonSignal" }] : /* istanbul ignore next */ []));
+    showCenterButtonSignal = computed(() => {
+        const props = this.props();
+        return !this.selectLocationOnMapDragSignal() && props?.showCenterButton !== false;
+    }, ...(ngDevMode ? [{ debugName: "showCenterButtonSignal" }] : /* istanbul ignore next */ []));
     recenterTimeSignal = computed(() => this.props()?.recenterTime || 10 * 1000, ...(ngDevMode ? [{ debugName: "recenterTimeSignal" }] : /* istanbul ignore next */ []));
     placeholderTextSignal = computed(() => this.props()?.placeholder, ...(ngDevMode ? [{ debugName: "placeholderTextSignal" }] : /* istanbul ignore next */ []));
     // Observables for map store sync
     latLngValueSignal = computed(() => {
-        const value = this.fieldValue();
+        const value = this.fieldValueSignal();
         const fn = this.latLngPointFunctionSignal();
         return value == null ? defaultLatLngPoint() : fn(value);
     }, ...(ngDevMode ? [{ debugName: "latLngValueSignal" }] : /* istanbul ignore next */ []));
@@ -563,7 +574,7 @@ class DbxForgeMapboxLatLngFieldComponent {
         });
         // Sync field value → text control (inbound)
         effect(() => {
-            const value = this.fieldValue();
+            const value = this.fieldValueSignal();
             if (!this._syncing) {
                 this._syncing = true;
                 this.textCtrl.setValue(value ?? '', { emitEvent: false });
@@ -663,9 +674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /**
  * Custom mapper for the forge mapbox lat/lng field.
  *
- * @param fieldDef - Field definition configuration
- * @param fieldDef.key - Form model key for the field
- * @returns Signal containing a Record of input names to values for ngComponentOutlet
+ * @param fieldDef - Field definition configuration.
+ * @param fieldDef.key - Form model key for the field.
+ * @returns Signal containing a Record of input names to values for ngComponentOutlet.
  */
 function mapboxLatLngFieldMapper(fieldDef) {
     const ctx = resolveValueFieldContext();
@@ -689,12 +700,14 @@ var latlng_forge_field_component = /*#__PURE__*/Object.freeze({
     mapboxLatLngFieldMapper: mapboxLatLngFieldMapper
 });
 
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy formly mapbox factory; references deprecated config interfaces and is itself deprecated in favor of dbxForgeMapboxZoomField() */
 /**
  * Creates a Formly field configuration for a Mapbox-powered zoom level picker with optional map preview.
  *
+ * @param config - Optional field configuration overrides.
+ * @returns A validated Formly field configuration for the Mapbox zoom picker.
+ *
  * @deprecated Use dbxForgeMapboxZoomField() from the forge API instead.
- * @param config - Optional field configuration overrides
- * @returns A validated Formly field configuration for the Mapbox zoom picker
  */
 function mapboxZoomField(config = {}) {
     const { key = 'zoom', showMap, center, minZoom, maxZoom, zoomStep } = config;
@@ -846,6 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
   `, providers: [provideMapboxStoreIfParentIsUnavailable()], imports: [NgClass, DbxMapboxModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".dbx-mapbox-input-field .dbx-mapbox-input-field-map{height:220px;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-map mgl-map{height:100%;width:100%}.dbx-mapbox-input-field .dbx-mapbox-input-field-input{display:flex;align-items:center}.dbx-mapbox-input-field .dbx-mapbox-input-field-input .dbx-mapbox-input-field-input-field{width:calc(100% - 40px)}.dbx-mapbox-input-field-compact .dbx-latlng-field-input{min-height:120px;height:300px;max-height:calc(var(--vh100) * .5)}\n"] }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-deprecated -- legacy NgModule that wraps the deprecated DbxFormMapboxZoomFieldComponent; replacement is provideDbxForgeMapboxFieldDeclarations() */
 const importsAndExports = [DbxFormMapboxZoomFieldComponent];
 /**
  * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
@@ -879,8 +893,8 @@ const FORGE_MAPBOX_ZOOM_FIELD_TYPE = 'dbx-forge-mapbox-zoom';
  *
  * This is the forge equivalent of {@link mapboxZoomField}.
  *
- * @param config - Optional field configuration overrides
- * @returns A validated forge field definition for the Mapbox zoom picker
+ * @param config - Optional field configuration overrides.
+ * @returns A validated forge field definition for the Mapbox zoom picker.
  */
 function dbxForgeMapboxZoomField(config = {}) {
     const { key = 'zoom', label, description, required, readonly: isReadonly, showMap, center, minZoom, maxZoom, zoomStep } = config;
@@ -940,22 +954,25 @@ class DbxForgeMapboxZoomFieldComponent {
     _sub = cleanSubscription();
     _center = completeOnDestroy(new BehaviorSubject(undefined));
     // Field value signal (double-call pattern)
-    fieldValue = computed(() => {
+    fieldValueSignal = computed(() => {
         const state = this.field()?.();
         return state?.value?.();
-    }, ...(ngDevMode ? [{ debugName: "fieldValue" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => {
+    }, ...(ngDevMode ? [{ debugName: "fieldValueSignal" }] : /* istanbul ignore next */ []));
+    isDisabledSignal = computed(() => {
         const state = this.field()?.();
         return state?.disabled?.() ?? false;
-    }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    isReadonlyOrDisabledSignal = computed(() => this.props()?.readonly || this.isDisabled(), ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "isDisabledSignal" }] : /* istanbul ignore next */ []));
+    isReadonlyOrDisabledSignal = computed(() => {
+        const isDisabled = this.isDisabledSignal();
+        return this.props()?.readonly || isDisabled;
+    }, ...(ngDevMode ? [{ debugName: "isReadonlyOrDisabledSignal" }] : /* istanbul ignore next */ []));
     // Computed props
     showMapSignal = computed(() => this.props()?.showMap ?? true, ...(ngDevMode ? [{ debugName: "showMapSignal" }] : /* istanbul ignore next */ []));
     lockMapToZoomLevelsSignal = computed(() => this.props()?.lockMapToZoomLevels ?? false, ...(ngDevMode ? [{ debugName: "lockMapToZoomLevelsSignal" }] : /* istanbul ignore next */ []));
     minZoomSignal = computed(() => mapboxZoomLevel(this.props()?.minZoom || MAPBOX_MIN_ZOOM_LEVEL), ...(ngDevMode ? [{ debugName: "minZoomSignal" }] : /* istanbul ignore next */ []));
     maxZoomSignal = computed(() => mapboxZoomLevel(this.props()?.maxZoom || MAPBOX_MAX_ZOOM_LEVEL), ...(ngDevMode ? [{ debugName: "maxZoomSignal" }] : /* istanbul ignore next */ []));
     zoomStepSignal = computed(() => mapboxZoomLevel(this.props()?.zoomStep || 1), ...(ngDevMode ? [{ debugName: "zoomStepSignal" }] : /* istanbul ignore next */ []));
-    fieldValue$ = toObservable(this.fieldValue);
+    fieldValue$ = toObservable(this.fieldValueSignal);
     zoom$ = this.fieldValue$.pipe(filterMaybe(), shareReplay(1));
     center$ = this._center.pipe(filterMaybe());
     _syncing = false;
@@ -1001,7 +1018,7 @@ class DbxForgeMapboxZoomFieldComponent {
         });
         // Sync field value → number control (inbound)
         effect(() => {
-            const value = this.fieldValue();
+            const value = this.fieldValueSignal();
             if (!this._syncing) {
                 this._syncing = true;
                 this.numberCtrl.setValue(value ?? null, { emitEvent: false });
@@ -1066,9 +1083,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 /**
  * Custom mapper for the forge mapbox zoom field.
  *
- * @param fieldDef - Field definition configuration
- * @param fieldDef.key - Form model key for the field
- * @returns Signal containing a Record of input names to values for ngComponentOutlet
+ * @param fieldDef - Field definition configuration.
+ * @param fieldDef.key - Form model key for the field.
+ * @returns Signal containing a Record of input names to values for ngComponentOutlet.
  */
 function mapboxZoomFieldMapper(fieldDef) {
     const ctx = resolveValueFieldContext();
@@ -1090,6 +1107,7 @@ var zoom_forge_field_component = /*#__PURE__*/Object.freeze({
     mapboxZoomFieldMapper: mapboxZoomFieldMapper
 });
 
+/* eslint-disable @typescript-eslint/no-deprecated -- aggregator NgModule for the deprecated mapbox formly modules; replacement is provideDbxForgeMapboxFieldDeclarations() */
 /**
  * @deprecated Use provideDbxForgeMapboxFieldDeclarations() instead.
  */
@@ -1130,7 +1148,7 @@ const DBX_FORGE_MAPBOX_FIELD_TYPES = [DbxForgeMapboxLatLngFieldType, DbxForgeMap
  *
  * Add this to your app's providers alongside provideDbxForgeFormFieldDeclarations().
  *
- * @returns An array of providers that register the mapbox forge field types with ng-forge
+ * @returns The providers that register the mapbox forge field types with ng-forge.
  */
 function provideDbxForgeMapboxFieldDeclarations() {
     return provideDynamicForm(...DBX_FORGE_MAPBOX_FIELD_TYPES);