ng-hub-ui-forms 22.7.0 → 22.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.7.0",
+  "version": "22.9.0",
   "license": "MIT",
   "description": "Accessible, signal-based form fields for Angular (input, textarea, slider, segmented, select, datepicker, file input with drag & drop and upload progress) 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)",

package/styles/_tokens.scss

@@ -294,6 +294,9 @@
 	// `.ng-dropdown-panel` — one below HubModal (`--hub-sys-zindex-modal`, 1055) — so a
 	// select opened inside a modal was clipped underneath it. Sit a few layers above
 	// the modal instead.
+	// DEPRECATED name (non-canonical `z-index` spelling), kept one cycle as the default
+	// carrier and override bridge; the canonical hook is `--hub-select-dropdown-zindex`,
+	// read first at the consumption point (select.component.scss).
 	--hub-select-dropdown-z-index: calc(var(--hub-sys-zindex-modal, 1055) + 5);
 
 	// ── Datepicker ──────────────────────────────────────────────────────────────

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

@@ -980,6 +980,47 @@ declare class HubSliderComponent extends HubFieldControl {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSliderComponent, "hub-slider", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
+/** Context handed to a projected `hubSegmentedOption` template. */
+interface HubSegmentedOptionContext {
+    /** The option being rendered. */
+    $implicit: HubSegmentedOption;
+    /** Whether the option is currently selected. */
+    selected: boolean;
+    /** Position of the option within the control. */
+    index: number;
+}
+/**
+ * Replaces the rendering of each option's content in `<hub-segmented>`.
+ *
+ * By default a segment renders its `label` as plain text; this template takes over the
+ * inside of the segment button (icons, badges, rich markup) while the component keeps
+ * owning selection state, keyboard navigation and ARIA semantics.
+ *
+ * @example
+ * ```html
+ * <hub-segmented formControlName="view" [options]="views">
+ *   <ng-template hubSegmentedOption let-option let-selected="selected">
+ *     <hub-icon [name]="option.value" [label]="option.label" />
+ *     {{ option.label }}
+ *   </ng-template>
+ * </hub-segmented>
+ * ```
+ */
+declare class HubSegmentedOptionDirective {
+    /** Template reference for the option content. */
+    readonly template: TemplateRef<HubSegmentedOptionContext>;
+    /**
+     * Narrows the context for the template type-checker.
+     *
+     * @param _directive - The directive instance.
+     * @param _context - The candidate context.
+     * @returns Always `true`; exists only to type `let-option` and the extra bindings.
+     */
+    static ngTemplateContextGuard(_directive: HubSegmentedOptionDirective, _context: unknown): _context is HubSegmentedOptionContext;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSegmentedOptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HubSegmentedOptionDirective, "[hubSegmentedOption]", never, {}, {}, never, never, true, never>;
+}
+
 /** A single choice rendered by {@link HubSegmentedComponent}. */
 interface HubSegmentedOption {
     /** Value written to the form control when this option is selected. */
@@ -1019,6 +1060,8 @@ declare class HubSegmentedComponent extends HubFieldControl {
     protected readonly _labelTypes: typeof HubLabelTypes;
     /** The selectable options, in render order. */
     readonly options: _angular_core.InputSignal<HubSegmentedOption[]>;
+    /** Optional `hubSegmentedOption` template replacing each option's content. */
+    protected readonly optionTpt: _angular_core.Signal<HubSegmentedOptionDirective | undefined>;
     /** Visual density. */
     readonly size: _angular_core.InputSignal<HubSegmentedSize>;
     /**
@@ -1085,7 +1128,7 @@ declare class HubSegmentedComponent extends HubFieldControl {
      */
     private updateIndicator;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSegmentedComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSegmentedComponent, "hub-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSegmentedComponent, "hub-segmented", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["optionTpt"], never, true, never>;
 }
 
 /**
@@ -1274,12 +1317,39 @@ declare class HubSelectComponent extends HubFieldControl {
      * render it inline within the component instead.
      */
     readonly appendTo: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Allows creating new items from the search term (dropdown format). `true`
+     * adds the term as-is; a function maps the term to a new item (sync or
+     * `Promise`).
+     */
+    readonly addTag: _angular_core.InputSignal<boolean | ((term: string) => any | Promise<any>)>;
+    /** Label of the "add item" row shown while typing when `addTag` is enabled. */
+    readonly addTagText: _angular_core.InputSignal<string>;
+    /** Minimum search-term length before filtering (or `typeahead`) kicks in. */
+    readonly minTermLength: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Subject that receives search-term changes for async/server-side loading
+     * (dropdown format). When provided, the control stops filtering client-side
+     * and pushes each term here; feed the results back through `items`.
+     *
+     * Note: the vendor also pushes `null` through the Subject when it clears the
+     * search box (e.g. right after a selection) — filter it out if you only
+     * expect strings.
+     */
+    readonly typeahead: _angular_core.InputSignal<Subject<string> | undefined>;
+    /**
+     * Custom equality between an item and the bound value (e.g. objects compared
+     * by id). When omitted, the vendor's built-in comparison applies.
+     */
+    readonly compareWith: _angular_core.InputSignal<((a: any, b: any) => boolean) | undefined>;
     /** Helper text shown below the control. */
     readonly formText: _angular_core.InputSignal<string>;
     /** Helper text placement. Only `bottom` is supported. */
     readonly formTextType: _angular_core.InputSignal<FormTextType>;
     /** Extra CSS classes applied to the host element. */
     readonly classlist: _angular_core.InputSignal<string>;
+    /** ARIA attributes forwarded to the vendor's combobox search input. */
+    protected readonly a11yInputAttrs: _angular_core.Signal<Record<string, string>>;
     /** Emits whenever the value changes. */
     readonly valueChange: _angular_core.OutputEmitterRef<any>;
     /** Emits when the control gains focus (dropdown format). */
@@ -1345,7 +1415,7 @@ declare class HubSelectComponent extends HubFieldControl {
      */
     protected toggleItem(item: any): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSelectComponent, "hub-select", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onOpen": "onOpen"; "onClose": "onClose"; "onClear": "onClear"; "onSearch": "onSearch"; "onAdd": "onAdd"; "onRemove": "onRemove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["_optionTpl", "_optgroupTpl", "_labelTpl", "_multiLabelTpl", "_headerTpl", "_footerTpl", "_notFoundTpl"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubSelectComponent, "hub-select", never, { "format": { "alias": "format"; "required": false; "isSignal": true; }; "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelType": { "alias": "labelType"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "fixedPlaceholder": { "alias": "fixedPlaceholder"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "appendTo": { "alias": "appendTo"; "required": false; "isSignal": true; }; "addTag": { "alias": "addTag"; "required": false; "isSignal": true; }; "addTagText": { "alias": "addTagText"; "required": false; "isSignal": true; }; "minTermLength": { "alias": "minTermLength"; "required": false; "isSignal": true; }; "typeahead": { "alias": "typeahead"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onOpen": "onOpen"; "onClose": "onClose"; "onClear": "onClear"; "onSearch": "onSearch"; "onAdd": "onAdd"; "onRemove": "onRemove"; "scroll": "scroll"; "scrollToEnd": "scrollToEnd"; }, ["_optionTpl", "_optgroupTpl", "_labelTpl", "_multiLabelTpl", "_headerTpl", "_footerTpl", "_notFoundTpl"], ["*"], true, never>;
 }
 
 /** A calendar cell enriched with its selection / range / disabled / focus state. */
@@ -2411,5 +2481,5 @@ interface HubFormControlAdapter {
  */
 declare const hubFormControlAdapter: HubFormControlAdapter;
 
-export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, 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, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
-export type { FormTextType, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerLabels, HubDatepickerMode, HubFileConstraints, HubFileIconContext, HubFileInputLabels, HubFileItem, HubFilePreview, HubFilePreviewContext, HubFileRejection, HubFileRejectionReason, HubFileStatus, HubFileUploadEvent, HubFileUploader, HubFileValue, HubFormControlAdapter, HubFormControlConfig, HubFormControlHandle, HubFormControlOption, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubSegmentedOption, HubSegmentedSize, HubSelectFormat, HubSliderValue };
+export { FormTextTypes, HUB_FILE_UPLOADER, HUB_FORMS_CONFIG, HubAutoresizeDirective, HubDatepickerComponent, HubFieldControl, HubFieldsetComponent, HubFileDropzoneNoticeDirective, HubFileIconDirective, HubFileInputComponent, HubFilePreviewDirective, HubFormComponent, HubFormControl, HubFormTextDirective, HubGroupControl, HubInputComponent, HubInputFormats, HubInputPrefixDirective, HubInputSuffixDirective, HubInvertColorPipe, HubJoinButLastPipe, HubLabelTypes, HubLegendComponent, HubLegendDirective, HubMapPipe, HubOtpInputComponent, HubSafeUrlPipe, HubSegmentedComponent, HubSegmentedOptionDirective, 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, defaultHubFileInputLabels, defaultHubFormsConfig, defaultInvalidFeedback, fileKey, formatFileSize, get, getActiveElement, getMinOrMaxValueFromValidator, hubAcceptedFiles, hubAreEqual, hubFormControlAdapter, hubMaxFileSize, hubMaxFiles, hubMaxTotalSize, hubMinFileSize, hubMinFiles, isDefined, isMaskActive, isString, joinButLast, matchesAccept, provideHubFileUploader, provideHubForms, runInZone, toFileArray, uuid };
+export type { FormTextType, HubDateRange, HubDateValue, HubDatepickerConfig, HubDatepickerLabels, HubDatepickerMode, HubFileConstraints, HubFileIconContext, HubFileInputLabels, HubFileItem, HubFilePreview, HubFilePreviewContext, HubFileRejection, HubFileRejectionReason, HubFileStatus, HubFileUploadEvent, HubFileUploader, HubFileValue, HubFormControlAdapter, HubFormControlConfig, HubFormControlHandle, HubFormControlOption, HubFormsConfig, HubGroupErrorTrigger, HubInputFormat, HubLabelType, HubMaskResult, HubOtpMode, HubSegmentedOption, HubSegmentedOptionContext, HubSegmentedSize, HubSelectFormat, HubSliderValue };