ng-hub-ui-forms 22.1.1 → 22.2.0

package/README.md

@@ -84,7 +84,8 @@ The required `email` field reveals its error automatically on submit — no manu
 `ng-hub-ui-forms` unifies a set of accessible form fields behind one contract:
 bind them with **Reactive Forms** and the matching validation errors appear
 **automatically** at the control, group and form level. Fields are standalone,
-`OnPush` and signal-native; the select is a maintained fork of ng-select; the
+`OnPush` and signal-native; the select is a maintained fork of
+[ng-select](https://github.com/ng-select/ng-select) (see [Credits](#-credits)); the
 datepicker is built from scratch on native `Date` and the Angular CDK overlay.
 Everything is themed through canonical `--hub-*` CSS variables with runtime dark
 mode — no Bootstrap dependency.
@@ -98,6 +99,30 @@ mode — no Bootstrap dependency.
 - **Validators & helpers** — `hubAreEqual` cross-field validator, `hubValidationError` / `hubFormText` projection directives, and a set of utility pipes.
 - **Signal Forms ready** — an opt-in [`ng-hub-ui-forms/signals`](#-signal-forms-opt-in) secondary entry point integrates Angular Signal Forms; the core stays Reactive-Forms-based and Angular-21-safe.
 - **Theming** — every colour, border, radius and spacing is a `--hub-*` CSS custom property; ships shared SCSS tokens for consumers.
+- **Cross-library adapter** — `hubFormControlAdapter` lets other libraries render `hub-input` / `hub-select` on demand without hard-depending on this package (see below).
+
+---
+
+## 🔌 Cross-library adapter (`hubFormControlAdapter`)
+
+Other ng-hub-ui libraries can host the forms controls **without taking a hard
+dependency** on `ng-hub-ui-forms`. They expose an optional token; you wire the
+ready-made `hubFormControlAdapter` once and their primitive controls upgrade to
+`hub-input` / `hub-select`. For example, the `ng-hub-ui-paginable` table:
+
+```ts
+import { provideHubPaginableFormControls } from 'ng-hub-ui-paginable';
+import { hubFormControlAdapter } from 'ng-hub-ui-forms';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideHubPaginableFormControls(hubFormControlAdapter)]
+};
+```
+
+The adapter creates components dynamically and bridges value-in / change-out; it
+needs `provideHubForms()` or the default config in the environment. See the
+ecosystem-wide [Synergies & agnosticism](../../README.md#synergies--agnosticism)
+section.
 
 ---
 
@@ -284,6 +309,14 @@ See [CHANGELOG.md](./CHANGELOG.md).
 
 ---
 
+## 🙏 Credits
+
+`hub-select` is a maintained **fork of [ng-select](https://github.com/ng-select/ng-select)** by the ng-select contributors. The upstream `src/ng-select` sources are vendored in place and re-themed with `--hub-*` tokens — pinned to upstream **`v23.0.1`** (tracked in [`src/lib/select/UPSTREAM`](./src/lib/select/UPSTREAM); deviations documented in [`src/lib/select/PATCHES.md`](./src/lib/select/PATCHES.md)). ng-select is distributed under the [MIT License](https://github.com/ng-select/ng-select/blob/master/LICENSE.md), and the original copyright notices are retained in the vendored files.
+
+The datepicker, inputs and validation layer are original to `ng-hub-ui-forms`.
+
+---
+
 ## 📄 License
 
 MIT © [Carlos Morcillo](https://www.carlosmorcillo.com)

package/fesm2022/ng-hub-ui-forms.mjs

@@ -5908,6 +5908,65 @@ function hubAreEqual(primaryControlName, secondaryControlName) {
     };
 }
 
+/**
+ * Ready-made {@link HubFormControlAdapter} backed by `HubInputComponent` /
+ * `HubSelectComponent`.
+ *
+ * Wire it into any ng-hub-ui primitive that exposes an optional form-controls
+ * token, e.g. `provideHubPaginableFormControls(hubFormControlAdapter)`. The host
+ * library keeps **zero hard dependency** on `ng-hub-ui-forms`; only an app that
+ * opts in pulls these components.
+ *
+ * Requires `provideHubForms()` (or the default config) to be available in the
+ * environment so the field components can resolve their configuration.
+ */
+const hubFormControlAdapter = {
+    create(container, config) {
+        if (config.kind === 'select') {
+            const ref = container.createComponent(HubSelectComponent);
+            ref.setInput('items', (config.options ?? []).map((option) => ({ ...option })));
+            ref.setInput('bindLabel', 'label');
+            ref.setInput('bindValue', 'value');
+            ref.setInput('clearable', false);
+            ref.setInput('searchable', false);
+            if (config.placeholder) {
+                ref.setInput('placeholder', config.placeholder);
+            }
+            if (config.cssClass) {
+                ref.setInput('classlist', config.cssClass);
+            }
+            ref.instance.writeValue(config.value);
+            const subscription = ref.instance.valueChange.subscribe((value) => config.onValueChange(value));
+            ref.changeDetectorRef.detectChanges();
+            return {
+                setValue: (value) => ref.instance.writeValue(value),
+                destroy: () => {
+                    subscription.unsubscribe();
+                    ref.destroy();
+                }
+            };
+        }
+        const ref = container.createComponent(HubInputComponent);
+        ref.setInput('type', config.type ?? 'text');
+        if (config.placeholder) {
+            ref.setInput('placeholder', config.placeholder);
+        }
+        if (config.cssClass) {
+            ref.setInput('classlist', config.cssClass);
+        }
+        ref.instance.writeValue(config.value);
+        const subscription = ref.instance.valueChange.subscribe((value) => config.onValueChange(value));
+        ref.changeDetectorRef.detectChanges();
+        return {
+            setValue: (value) => ref.instance.writeValue(value),
+            destroy: () => {
+                subscription.unsubscribe();
+                ref.destroy();
+            }
+        };
+    }
+};
+
 /*
  * Public API Surface of ng-hub-ui-forms
  */
@@ -5917,5 +5976,5 @@ function hubAreEqual(primaryControlName, secondaryControlName) {
  * Generated bundle index. Do not edit.
  */
 
-export { FormTextTypes, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFormsConfig, defaultInvalidFeedback, get, getActiveElement, getMinOrMaxValueFromValidator, hubAreEqual, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
+export { FormTextTypes, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSelectComponent, HubSelectFormats, HubSliderComponent, HubSnakeUpperPipe, HubTextareaComponent, HubUcfirstPipe, HubValidationErrorDirective, NgClearButtonTemplateDirective, NgFooterTemplateDirective, NgHeaderTemplateDirective, NgLabelTemplateDirective, NgLoadingSpinnerTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgNotFoundTemplateDirective, NgOptgroupTemplateDirective, NgOptionComponent, NgOptionTemplateDirective, NgSelectConfig, NgTagTemplateDirective, NgTypeToSearchTemplateDirective, applyMask, areEqual, camelToSnakeUpper, controlHasMinOrMaxValidator, defaultHubDatepickerConfig, defaultHubDatepickerLabels, defaultHubFormsConfig, defaultInvalidFeedback, get, getActiveElement, getMinOrMaxValueFromValidator, hubAreEqual, hubFormControlAdapter, isDefined$1 as isDefined, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
 //# sourceMappingURL=ng-hub-ui-forms.mjs.map