ng-hub-ui-forms 22.28.0 → 22.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.28.0",
+  "version": "22.30.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)",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/carlos-morcillo/ng-hub-ui-forms.git"
   },
-  "homepage": "https://hubui.dev/",
+  "homepage": "https://hubui.dev/en/forms/overview/",
   "keywords": [
     "angular",
     "forms",

package/styles/_field.scss

@@ -236,3 +236,72 @@ hub-timepicker {
 		border-color: var(--hub-form-invalid-border-color);
 	}
 }
+
+/**
+ * Plain-text fields: the value with no field around it.
+ *
+ * The other half of read-only, and the difference is who the field is for.
+ * `--readonly` still belongs to somebody filling a form in — it keeps the box so the
+ * field holds its place in the row and looks like the editable ones beside it, only
+ * shut. `--plaintext` is for the value that is simply being *shown*: a record open for
+ * consultation, a figure the server settled, a field a plan has locked. There the box
+ * is noise, and a screen full of them reads as a form that refuses to work.
+ *
+ * Modelled on Bootstrap's `.form-control-plaintext`, deliberately: it is the shape
+ * every reader already knows, and it solves the hard part — the control stays a real
+ * `<input>`/`<textarea>`, so the `<label for>` still points at something labelable and
+ * the text stays selectable. A `<span>` would have broken both.
+ *
+ * The horizontal padding goes and the border turns transparent **without losing its
+ * width**. That is the whole trick: the text lands on the same baseline as an editable
+ * neighbour in the same grid, so a form mixing the two does not stagger.
+ */
+.hub-field--plaintext {
+	.hub-field__control,
+	.hub-input__control,
+	.hub-textarea__control,
+	.hub-select__control {
+		padding-inline: 0;
+		padding-block: var(--hub-input-plaintext-padding-block);
+		font-weight: var(--hub-input-plaintext-font-weight);
+		color: var(--hub-input-plaintext-color);
+		background-color: transparent;
+		border-color: transparent;
+		border-width: var(--hub-input-border-width) 0;
+		box-shadow: none;
+		cursor: text;
+	}
+
+	// Nothing here answers to being focused, but the control still takes focus — it is
+	// still an input, and taking it away would strand keyboard users mid-form.
+	.hub-field__control:focus,
+	.hub-field__control:focus-visible,
+	.hub-input__control:focus,
+	.hub-textarea__control:focus,
+	.hub-select__control.ng-select-focused {
+		border-color: transparent;
+		box-shadow: none;
+		outline: none;
+	}
+
+	// A textarea shown as plain text is a paragraph, not a box you can drag open.
+	.hub-textarea__control {
+		resize: none;
+	}
+
+	// Every affordance promises a choice that is not on offer here.
+	.hub-select__control {
+		.ng-arrow-wrapper,
+		.ng-clear-wrapper {
+			display: none;
+		}
+	}
+
+	.hub-datepicker__icon {
+		display: none;
+	}
+
+	// Unlike read-only, no exception for the invalid border: a field with no box is not
+	// being filled in, so there is no input to reject. If the value is wrong, that is
+	// the record's problem and not this screen's.
+}

package/styles/_tokens.scss

@@ -106,6 +106,26 @@
 	--hub-input-readonly-border-color: transparent;
 	--hub-input-readonly-color: var(--hub-input-color);
 	--hub-input-readonly-cursor: default;
+
+	// Plain-text fields. The label is left exactly as every other field's - same tokens, same
+	// weight - because a form's labels have to keep one rhythm whatever state each field is
+	// in. It is the value that steps back a shade: measured, label and value came out the
+	// same colour, and inside a box that is fine because the box separates them. With no box
+	// the value carries the signal on its own, and a touch lighter says "this is not being
+	// edited" without breaking the column.
+	--hub-input-plaintext-color: var(--hub-ref-color-gray-700, #495057);
+
+	// The block padding a plain-text control keeps: none above, the field's whole vertical
+	// padding below. Two things at once, and neither is negotiable on its own. Nothing above
+	// puts the value right under its label, because a label and its value are one thing and
+	// should read as a pair. Twice the padding below keeps the total height exactly an
+	// editable field's, so a grid mixing the two still lines up - by construction rather than
+	// by a number that would drift the moment `--hub-input-padding-y` moved.
+	--hub-input-plaintext-padding-block: 0 calc(var(--hub-input-padding-y) * 2);
+
+	// A shade lighter than an editable value, and a step lighter in weight. A value nobody is
+	// typing is being read, not filled, and it should not shout over its own label.
+	--hub-input-plaintext-font-weight: 300;
 	--hub-input-transition: var(--hub-form-transition);
 	--hub-input-wrapper-gap: var(--hub-ref-space-2, 0.5rem);
 

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

@@ -796,6 +796,19 @@ declare class HubInputComponent extends HubFieldControl {
     readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Whether the input is read-only. */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Render the value as plain text, with no field styling around it.
+     *
+     * For the value that belongs in a form but is not the reader's to change: a figure
+     * the server settled, a field a plan has locked, the whole of a record shown for
+     * consultation. It stays a real `<input>` — so the label keeps pointing at a control
+     * and the text stays selectable — and only loses the box, which on something that
+     * refuses input was a promise it could not keep.
+     *
+     * Implies `readonly`: a field with no box that still accepted typing would be an
+     * invisible input.
+     */
+    readonly plaintext: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Helper text shown below the control. */
     readonly formText: _angular_core.InputSignal<string>;
     /** Helper text placement. Only `bottom` is supported. */
@@ -834,6 +847,13 @@ declare class HubInputComponent extends HubFieldControl {
     readonly indeterminate: _angular_core.ModelSignal<boolean>;
     /** Mixed state as the native checkbox should actually receive it. */
     protected readonly isIndeterminate: _angular_core.Signal<boolean>;
+    /**
+     * Read-only as the control actually behaves, which is what the template binds to.
+     *
+     * `plaintext` implies it, so the two never have to be passed together and cannot be
+     * passed in disagreement.
+     */
+    protected readonly _isReadonly: _angular_core.Signal<boolean>;
     /** Whether the internal clear button should be shown right now. */
     protected readonly showClear: _angular_core.Signal<boolean>;
     /** Whether an inline-start affix (projected prefix) is present. */
@@ -943,7 +963,7 @@ declare class HubInputComponent extends HubFieldControl {
     /** Clears the selected file(s). */
     protected clearFile(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubInputComponent, "hub-input", never, { "passwordRevealed": { "alias": "passwordRevealed"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "hideOnBlur": { "alias": "hideOnBlur"; "required": false; "isSignal": true; }; "capsLockWarning": { "alias": "capsLockWarning"; "required": false; "isSignal": true; }; "passwordStrength": { "alias": "passwordStrength"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "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; }; "autocomplete": { "alias": "autocomplete"; "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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "unmaskValue": { "alias": "unmaskValue"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; }, { "passwordRevealed": "passwordRevealedChange"; "labelType": "labelTypeChange"; "placeholder": "placeholderChange"; "min": "minChange"; "max": "maxChange"; "indeterminate": "indeterminateChange"; "valueChange": "valueChange"; "enter": "enter"; "search": "search"; }, ["prefixDir", "suffixDir", "_prependTpl", "_appendTpl"], ["[hubInputPrefix]", "[hubInputSuffix]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubInputComponent, "hub-input", never, { "passwordRevealed": { "alias": "passwordRevealed"; "required": false; "isSignal": true; }; "passwordToggle": { "alias": "passwordToggle"; "required": false; "isSignal": true; }; "hideOnBlur": { "alias": "hideOnBlur"; "required": false; "isSignal": true; }; "capsLockWarning": { "alias": "capsLockWarning"; "required": false; "isSignal": true; }; "passwordStrength": { "alias": "passwordStrength"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "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; }; "autocomplete": { "alias": "autocomplete"; "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; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "required": false; "isSignal": true; }; "formText": { "alias": "formText"; "required": false; "isSignal": true; }; "formTextType": { "alias": "formTextType"; "required": false; "isSignal": true; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "classlist": { "alias": "classlist"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; "unmaskValue": { "alias": "unmaskValue"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; }, { "passwordRevealed": "passwordRevealedChange"; "labelType": "labelTypeChange"; "placeholder": "placeholderChange"; "min": "minChange"; "max": "maxChange"; "indeterminate": "indeterminateChange"; "valueChange": "valueChange"; "enter": "enter"; "search": "search"; }, ["prefixDir", "suffixDir", "_prependTpl", "_appendTpl"], ["[hubInputPrefix]", "[hubInputSuffix]"], true, never>;
 }
 
 /** Character set accepted by the OTP field. */
@@ -1061,6 +1081,15 @@ declare class HubTextareaComponent extends HubFieldControl {
     readonly counter: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the textarea is read-only. */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Render the value as plain text, with no field styling around it.
+     *
+     * The multi-line half of the same idea `HubInputComponent.plaintext` carries: a value
+     * that belongs in the form but is not the reader's to change. It stays a real
+     * `<textarea>`, so the label keeps pointing at a control and the text stays
+     * selectable, and it only loses the box. Implies `readonly`.
+     */
+    readonly plaintext: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Helper text shown below the control. */
     readonly formText: _angular_core.InputSignal<string>;
     /** Helper text placement. Only `bottom` is supported in the MVP. */
@@ -1079,7 +1108,7 @@ declare class HubTextareaComponent extends HubFieldControl {
      */
     setValue(value: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubTextareaComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTextareaComponent, "hub-textarea", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "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; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "autoresize": { "alias": "autoresize"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubTextareaComponent, "hub-textarea", never, { "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "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; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "autoresize": { "alias": "autoresize"; "required": false; "isSignal": true; }; "counter": { "alias": "counter"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "plaintext": { "alias": "plaintext"; "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"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
 }
 
 /** Value of `<hub-slider>`: a number in single mode, a `[lower, upper]` tuple in range mode. */
@@ -1845,6 +1874,18 @@ declare class HubDatepickerComponent extends HubFieldControl {
     readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number | undefined, unknown>;
     /** Weekday header width. Falls back to the global config. */
     readonly weekdayFormat: _angular_core.InputSignal<"short" | "narrow" | "long" | undefined>;
+    /**
+     * How the month is written in the panel's header.
+     *
+     * `short` by default, and that default is what keeps the panel still: the panel is as
+     * wide as its widest child, and with the month spelled out that child was the header —
+     * so the calendar grew and shrank as you paged through the year while the day grid it
+     * frames never moved. Measured in Spanish at 1rem: «Septiembre de 2026» needs 152px
+     * against the 104px the header has left over once the two nav groups have taken theirs,
+     * so nothing but an abbreviation fits. Ask for `long` where the panel has room and the
+     * spelled-out month is worth the movement.
+     */
+    readonly monthFormat: _angular_core.InputSignal<"short" | "long">;
     /**
      * How the selected value is displayed in the input. Accepts `Intl` options (the original
      * contract), an Angular date pattern such as `'dd/MM/yyyy HH:mm'`, or a formatting function.
@@ -2054,7 +2095,7 @@ declare class HubDatepickerComponent extends HubFieldControl {
     /** Moves the period grid's focus without selecting. */
     protected onPeriodFocusMove(date: Date): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HubDatepickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubDatepickerComponent, "hub-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "parse": { "alias": "parse"; "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; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "weekdayFormat": { "alias": "weekdayFormat"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; "viewChange": "viewChange"; "cleared": "cleared"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HubDatepickerComponent, "hub-datepicker", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "granularity": { "alias": "granularity"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "parse": { "alias": "parse"; "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; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "weekdayFormat": { "alias": "weekdayFormat"; "required": false; "isSignal": true; }; "monthFormat": { "alias": "monthFormat"; "required": false; "isSignal": true; }; "displayFormat": { "alias": "displayFormat"; "required": false; "isSignal": true; }; "timeDisplayFormat": { "alias": "timeDisplayFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "hourFormat": { "alias": "hourFormat"; "required": false; "isSignal": true; }; "rangeSeparator": { "alias": "rangeSeparator"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabledDates": { "alias": "disabledDates"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "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; }; "prepend": { "alias": "prepend"; "required": false; "isSignal": true; }; "append": { "alias": "append"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; "viewChange": "viewChange"; "cleared": "cleared"; }, ["_prependTpl", "_appendTpl"], never, true, never>;
 }
 
 /**