ng-hub-ui-forms 22.1.1 → 22.2.0

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.1.1",
+  "version": "22.2.0",
   "license": "MIT",
   "description": "Accessible, signal-based form fields for Angular (input, textarea, slider, select, datepicker) with automatic error display for controls, FormGroups and FormArrays. Reactive Forms today, Signal Forms ready. Part of the ng-hub-ui family.",
   "author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
   "repository": {
     "type": "git",
-    "url": "https://github.com/carlos-morcillo/ng-hub-ui-forms.git"
+    "url": "git+https://github.com/carlos-morcillo/ng-hub-ui-forms.git"
   },
   "homepage": "https://hubui.dev/",
   "keywords": [

package/src/lib/styles/_tokens.scss

@@ -140,7 +140,9 @@
 	--hub-select-option-padding-y: var(--hub-ref-space-2, 0.5rem);
 	--hub-select-option-marked-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-select-option-selected-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-select-option-selected-color: var(--hub-ref-color-white, #fff);
+	// Text on the selected option sits on the primary accent — read the derived
+	// contrast token so a light/custom primary keeps the label legible.
+	--hub-select-option-selected-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
 	--hub-select-optgroup-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-select-value-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-select-value-color: var(--hub-sys-text-primary, #212529);
@@ -168,10 +170,12 @@
 	--hub-daterangepicker-cell-border-radius: var(--hub-ref-radius-sm, 0.25rem);
 	--hub-daterangepicker-cell-hover-bg: var(--hub-sys-surface-elevated, #f8f9fa);
 	--hub-daterangepicker-active-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-daterangepicker-active-color: var(--hub-ref-color-white, #fff);
-	// Light primary tint (theme-aware): `--hub-sys-color-primary-subtle` is a *dark* navy in
-	// this design system, so derive a soft tint from the primary instead.
-	--hub-daterangepicker-in-range-bg: color-mix(in srgb, var(--hub-sys-color-primary, #0d6efd) 14%, transparent);
+	// Text on the active day sits on the primary accent — derived contrast token.
+	--hub-daterangepicker-active-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
+	// Soft primary tint for the in-range band. Mixed in OKLCH (perceptually even)
+	// rather than sRGB; kept independent of `-subtle` (which mixes over the page
+	// surface, not transparent) so the band reads as a translucent overlay.
+	--hub-daterangepicker-in-range-bg: color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent);
 	--hub-daterangepicker-off-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-daterangepicker-nav-arrow-color: var(--hub-sys-text-muted, #6c757d);
 	--hub-daterangepicker-nav-arrow-hover-color: var(--hub-sys-text-primary, #212529);
@@ -184,6 +188,7 @@
 	--hub-select-button-padding-y: var(--hub-ref-space-2, 0.5rem);
 	--hub-select-button-gap: var(--hub-ref-space-2, 0.5rem);
 	--hub-select-button-selected-bg: var(--hub-sys-color-primary, #0d6efd);
-	--hub-select-button-selected-color: var(--hub-ref-color-white, #fff);
+	// Text on the selected button sits on the primary accent — derived contrast token.
+	--hub-select-button-selected-color: var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff));
 	--hub-select-button-selected-border-color: var(--hub-sys-color-primary, #0d6efd);
 }

package/types/ng-hub-ui-forms.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, AfterContentInit, OnDestroy, TemplateRef, ElementRef, InjectionToken, EnvironmentProviders, PipeTransform, NgZone } from '@angular/core';
+import { OnInit, AfterContentInit, OnDestroy, TemplateRef, ElementRef, InjectionToken, EnvironmentProviders, PipeTransform, NgZone, ViewContainerRef } from '@angular/core';
 import { NgControl, ControlContainer, ControlValueAccessor, ValidationErrors, AbstractControl, ValidatorFn } from '@angular/forms';
 import { Subject, OperatorFunction } from 'rxjs';
 import * as ng_hub_ui_forms from 'ng-hub-ui-forms';
@@ -1478,5 +1478,52 @@ declare function isMaskActive(mask: string | null | undefined): boolean;
  */
 declare function applyMask(value: string | null | undefined, mask: string): HubMaskResult;
 
-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, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
-export type { FormTextType, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerLabels, HubDatepickerMode, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubSelectFormat, HubSliderValue };
+/** A `{ value, label }` option for select-kind controls. */
+interface HubFormControlOption {
+    value: unknown;
+    label: string;
+}
+/**
+ * Framework-neutral description of a primitive control to render dynamically.
+ *
+ * The shape mirrors (structurally) the contract other ng-hub-ui libraries expose
+ * for optional control hosting (e.g. `ng-hub-ui-paginable`'s table), so this
+ * adapter can be wired into them without either package importing the other.
+ */
+interface HubFormControlConfig {
+    kind: 'input' | 'select';
+    value: unknown;
+    type?: string;
+    placeholder?: string;
+    ariaLabel?: string;
+    cssClass?: string;
+    options?: ReadonlyArray<HubFormControlOption>;
+    onValueChange: (value: unknown) => void;
+}
+/** Live handle to a control created by {@link hubFormControlAdapter}. */
+interface HubFormControlHandle {
+    /** Pushes a new value into the control (external updates). */
+    setValue(value: unknown): void;
+    /** Destroys the control and releases its resources. */
+    destroy(): void;
+}
+/** Adapter that renders primitive controls with the ng-hub-ui-forms components. */
+interface HubFormControlAdapter {
+    create(container: ViewContainerRef, config: HubFormControlConfig): HubFormControlHandle;
+}
+/**
+ * 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.
+ */
+declare const hubFormControlAdapter: HubFormControlAdapter;
+
+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, isMaskActive, isString, joinButLast, provideHubForms, runInZone, uuid };
+export type { FormTextType, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerLabels, HubDatepickerMode, HubFormControlAdapter, HubFormControlConfig, HubFormControlHandle, HubFormControlOption, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubSelectFormat, HubSliderValue };