ng-hub-ui-forms 22.4.0 → 22.6.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.4.0",
+  "version": "22.6.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.",
+  "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)",
   "repository": {
     "type": "git",
@@ -18,6 +18,10 @@
     "slider",
     "select",
     "datepicker",
+    "file-input",
+    "file-upload",
+    "drag-and-drop",
+    "dropzone",
     "validation",
     "reactive-forms",
     "signal-forms",

package/{src/lib/styles → styles}/_tokens.scss

@@ -90,6 +90,90 @@
 	// Input · color format
 	--hub-input-color-size: 2.5rem;
 
+	// ── File input ────────────────────────────────────────────────────────────
+	// Dropzone surface
+	--hub-file-input-bg: var(--hub-sys-surface-page, #fff);
+	--hub-file-input-color: var(--hub-sys-text-primary, #212529);
+	--hub-file-input-border-width: var(--hub-ref-border-width, 1px);
+	--hub-file-input-border-style: dashed;
+	--hub-file-input-border-color: var(--hub-sys-border-color-default, #dee2e6);
+	--hub-file-input-border-radius: var(--hub-input-border-radius);
+	--hub-file-input-padding-x: var(--hub-ref-space-3, 1rem);
+	--hub-file-input-padding-y: var(--hub-ref-space-4, 1.5rem);
+	--hub-file-input-min-height: 7rem;
+	--hub-file-input-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-transition: var(--hub-form-transition);
+	--hub-file-input-hover-border-color: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-input-hover-bg: var(--hub-sys-surface-elevated, #f8f9fa);
+	--hub-file-input-dragover-bg: color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 8%, transparent);
+	--hub-file-input-dragover-border-color: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-input-focus-border-color: var(--hub-input-focus-border-color);
+	--hub-file-input-focus-box-shadow: var(--hub-input-focus-box-shadow);
+
+	// Dropzone copy
+	--hub-file-input-prompt-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-prompt-font-size: var(--hub-ref-font-size-base, 1rem);
+	--hub-file-input-browse-color: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-input-browse-font-weight: var(--hub-ref-font-weight-medium, 500);
+	--hub-file-input-hint-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-hint-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+
+	// Glyphs — every icon is a swappable mask, tinted by its `-color` token. Replace the
+	// `url(…)` to change the drawing without touching the template; project an
+	// `<ng-template hubFileIcon>` to replace the per-file glyph with a component.
+	--hub-file-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5'/%3E%3Cpath fill='black' d='M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708z'/%3E%3C/svg%3E");
+	--hub-file-input-icon-size: 2rem;
+	--hub-file-input-icon-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-file-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414A1.5 1.5 0 0 0 13.56 3.35L10.65.44A1.5 1.5 0 0 0 9.586 0zm5.5 1.5v2a1 1 0 0 0 1 1h2z'/%3E%3C/svg%3E");
+	--hub-file-input-file-icon-size: 1.5rem;
+	--hub-file-input-file-icon-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-remove-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
+	--hub-file-input-cancel-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M5 3.5h6a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5'/%3E%3C/svg%3E");
+	--hub-file-input-retry-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z'/%3E%3Cpath fill='black' d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466'/%3E%3C/svg%3E");
+	--hub-file-input-done-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
+	--hub-file-input-done-color: var(--hub-sys-color-success, #198754);
+
+	// Per-file action buttons
+	--hub-file-input-action-size: 1rem;
+	--hub-file-input-action-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-action-hover-color: var(--hub-sys-text-primary, #212529);
+	--hub-file-input-remove-hover-color: var(--hub-sys-color-danger, #dc3545);
+
+	// File list
+	--hub-file-input-list-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-list-margin-top: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-item-bg: var(--hub-sys-surface-elevated, #f8f9fa);
+	--hub-file-input-item-color: var(--hub-sys-text-primary, #212529);
+	--hub-file-input-item-border-color: var(--hub-sys-border-color-default, #dee2e6);
+	--hub-file-input-item-border-radius: var(--hub-ref-radius-sm, 0.25rem);
+	--hub-file-input-item-padding-x: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-item-padding-y: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-item-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-name-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+	--hub-file-input-size-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-size-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+	--hub-file-input-error-color: var(--hub-sys-color-danger, #dc3545);
+	--hub-file-input-error-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+	--hub-file-input-clear-color: var(--hub-sys-text-muted, #6c757d);
+	--hub-file-input-clear-font-size: var(--hub-ref-font-size-sm, 0.875rem);
+
+	// Thumbnail
+	--hub-file-input-thumb-size: 2.5rem;
+	--hub-file-input-thumb-radius: var(--hub-ref-radius-sm, 0.25rem);
+	--hub-file-input-thumb-bg: var(--hub-sys-surface-page, #fff);
+
+	// Grid preview
+	--hub-file-input-grid-min-width: 8rem;
+	--hub-file-input-grid-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-grid-thumb-height: 6rem;
+
+	// Upload progress
+	--hub-file-input-progress-height: 0.25rem;
+	--hub-file-input-progress-radius: var(--hub-ref-radius-pill, 50rem);
+	--hub-file-input-progress-track-bg: var(--hub-sys-border-color-default, #dee2e6);
+	--hub-file-input-progress-bar-bg: var(--hub-sys-color-primary, #0d6efd);
+	--hub-file-input-progress-indeterminate-duration: 1.2s;
+
 	// ── Textarea (inherits input) ──────────────────────────────────────────────
 	--hub-textarea-padding-x: var(--hub-input-padding-x);
 	--hub-textarea-padding-y: var(--hub-input-padding-y);
@@ -221,11 +305,11 @@
 
 	// ── Segmented ───────────────────────────────────────────────────────────────
 	--hub-segmented-bg: var(--hub-sys-surface-elevated, #f8f9fa);
-	// Optional single-slot accent. Its default (transparent) contributes nothing, so the selected
-	// pill keeps the neutral white surface below; set it — or apply a `[color]` / `data-variant` —
-	// to tint the pill. A custom variant re-bases `--hub-segmented-selected-bg` (mirrors the
-	// `--hub-table-accent` model), which both the sliding indicator and the multiple-mode pill read.
-	--hub-segmented-accent: transparent;
+	// Single-slot accent (mirrors `--hub-table-accent` / `--hub-btn-accent`). When a `[color]` is
+	// applied it is set — from a ds token or a literal colour — and the selected pill derives its
+	// surface and contrast text from it (see the `[data-variant]` rule in the component styles).
+	// With no `[color]` the neutral defaults below keep the white-pill look.
+	--hub-segmented-accent: var(--hub-sys-color-primary, #0d6efd);
 	--hub-segmented-selected-bg: var(--hub-sys-surface-page, #fff);
 	--hub-segmented-selected-color: var(--hub-sys-text-primary, #212529);
 	--hub-segmented-radius: var(--hub-ref-radius-md, 0.375rem);

package/{src/lib/styles → styles}/index.scss

@@ -13,4 +13,7 @@
 @use 'field';
 
 // One-call theming mixins (opt-in; forwarded so consumers can `@use` them from the package root).
+// `hub-forms-theme` themes the shared field chrome; the others tune a single control.
+@forward 'mixins/forms-theme';
 @forward 'mixins/segmented-theme';
+@forward 'mixins/file-input-theme';

package/styles/mixins/_file-input-theme.scss

@@ -0,0 +1,199 @@
+// ─────────────────────────────────────────────────────────────────────────
+// hub-file-input-theme — one-call theming for `<hub-file-input>`
+// ─────────────────────────────────────────────────────────────────────────
+//
+// Override any of the `--hub-file-input-*` design tokens in a single include.
+// Every parameter is OPTIONAL and defaults to `null`: only the parameters you
+// pass are emitted, so the rest keep the component's defaults. Token-based and
+// self-contained (no Bootstrap dependencies).
+//
+// The glyph parameters take a CSS `<image>` — typically a `url("data:image/svg+xml,…")`
+// — used as a MASK, so the drawing is tinted by its matching colour token and needs
+// no fill of its own. To render a real icon component instead, project an
+// `<ng-template hubFileIcon>` into the field.
+//
+// Apply it inside any selector that wraps the field — the host element, a
+// container, a route, or `:root` for a global theme.
+//
+// @example — a brand-accented dropzone with a solid border and a custom upload glyph:
+//
+//   @use 'ng-hub-ui-forms/styles' as *;
+//
+//   .attachments {
+//     @include hub-file-input-theme(
+//       $border-style: solid,
+//       $border-radius: 0.75rem,
+//       $dragover-border-color: var(--hub-sys-color-brand),
+//       $browse-color: var(--hub-sys-color-brand),
+//       $icon: url('/assets/upload.svg'),
+//       $icon-color: var(--hub-sys-color-brand),
+//       $progress-bar-bg: var(--hub-sys-color-brand)
+//     );
+//   }
+//
+// scss-docs-start hub-file-input-theme
+@mixin hub-file-input-theme(
+	// ── Dropzone surface ──
+	$bg: null,                        // dropzone background
+	$color: null,                     // dropzone text colour
+	$border-width: null,              // dropzone border width
+	$border-style: null,              // dropzone border style (defaults to `dashed`)
+	$border-color: null,              // dropzone border colour at rest
+	$border-radius: null,             // dropzone corner radius
+	$padding-x: null,                 // dropzone horizontal padding
+	$padding-y: null,                 // dropzone vertical padding
+	$min-height: null,                // dropzone minimum height
+	$gap: null,                       // gutter between icon, prompt and hint
+	// ── States ──
+	$hover-bg: null,                  // background on hover
+	$hover-border-color: null,        // border colour on hover
+	$dragover-bg: null,               // background while a drag hovers the zone
+	$dragover-border-color: null,     // border colour while a drag hovers the zone
+	// ── Copy ──
+	$prompt-color: null,              // "drag files here" colour
+	$browse-color: null,              // "browse files" colour
+	$hint-color: null,                // constraints-hint colour
+	// ── Glyphs (CSS masks) ──
+	$icon: null,                      // upload glyph shown in the dropzone
+	$icon-size: null,                 // upload glyph size
+	$icon-color: null,                // upload glyph tint
+	$file-icon: null,                 // per-file glyph, for files with no thumbnail
+	$file-icon-color: null,           // per-file glyph tint
+	$remove-icon: null,               // remove-button glyph
+	$cancel-icon: null,               // cancel-upload glyph
+	$retry-icon: null,                // retry-upload glyph
+	$done-icon: null,                 // finished-upload tick
+	$done-color: null,                // finished-upload tick + item border colour
+	// ── File list ──
+	$item-bg: null,                   // background of a file row / tile
+	$item-border-color: null,         // border of a file row / tile
+	$item-border-radius: null,        // corner radius of a file row / tile
+	$thumb-size: null,                // thumbnail size in list preview
+	$grid-min-width: null,            // minimum tile width in grid preview
+	$grid-thumb-height: null,         // thumbnail height in grid preview
+	// ── Upload progress ──
+	$progress-height: null,           // progress-bar thickness
+	$progress-track-bg: null,         // progress-bar track colour
+	$progress-bar-bg: null            // progress-bar fill colour
+) {
+	// Dropzone surface
+	@if $bg != null {
+		--hub-file-input-bg: #{$bg};
+	}
+	@if $color != null {
+		--hub-file-input-color: #{$color};
+	}
+	@if $border-width != null {
+		--hub-file-input-border-width: #{$border-width};
+	}
+	@if $border-style != null {
+		--hub-file-input-border-style: #{$border-style};
+	}
+	@if $border-color != null {
+		--hub-file-input-border-color: #{$border-color};
+	}
+	@if $border-radius != null {
+		--hub-file-input-border-radius: #{$border-radius};
+	}
+	@if $padding-x != null {
+		--hub-file-input-padding-x: #{$padding-x};
+	}
+	@if $padding-y != null {
+		--hub-file-input-padding-y: #{$padding-y};
+	}
+	@if $min-height != null {
+		--hub-file-input-min-height: #{$min-height};
+	}
+	@if $gap != null {
+		--hub-file-input-gap: #{$gap};
+	}
+
+	// States
+	@if $hover-bg != null {
+		--hub-file-input-hover-bg: #{$hover-bg};
+	}
+	@if $hover-border-color != null {
+		--hub-file-input-hover-border-color: #{$hover-border-color};
+	}
+	@if $dragover-bg != null {
+		--hub-file-input-dragover-bg: #{$dragover-bg};
+	}
+	@if $dragover-border-color != null {
+		--hub-file-input-dragover-border-color: #{$dragover-border-color};
+	}
+
+	// Copy
+	@if $prompt-color != null {
+		--hub-file-input-prompt-color: #{$prompt-color};
+	}
+	@if $browse-color != null {
+		--hub-file-input-browse-color: #{$browse-color};
+	}
+	@if $hint-color != null {
+		--hub-file-input-hint-color: #{$hint-color};
+	}
+
+	// Glyphs
+	@if $icon != null {
+		--hub-file-input-icon: #{$icon};
+	}
+	@if $icon-size != null {
+		--hub-file-input-icon-size: #{$icon-size};
+	}
+	@if $icon-color != null {
+		--hub-file-input-icon-color: #{$icon-color};
+	}
+	@if $file-icon != null {
+		--hub-file-input-file-icon: #{$file-icon};
+	}
+	@if $file-icon-color != null {
+		--hub-file-input-file-icon-color: #{$file-icon-color};
+	}
+	@if $remove-icon != null {
+		--hub-file-input-remove-icon: #{$remove-icon};
+	}
+	@if $cancel-icon != null {
+		--hub-file-input-cancel-icon: #{$cancel-icon};
+	}
+	@if $retry-icon != null {
+		--hub-file-input-retry-icon: #{$retry-icon};
+	}
+	@if $done-icon != null {
+		--hub-file-input-done-icon: #{$done-icon};
+	}
+	@if $done-color != null {
+		--hub-file-input-done-color: #{$done-color};
+	}
+
+	// File list
+	@if $item-bg != null {
+		--hub-file-input-item-bg: #{$item-bg};
+	}
+	@if $item-border-color != null {
+		--hub-file-input-item-border-color: #{$item-border-color};
+	}
+	@if $item-border-radius != null {
+		--hub-file-input-item-border-radius: #{$item-border-radius};
+	}
+	@if $thumb-size != null {
+		--hub-file-input-thumb-size: #{$thumb-size};
+	}
+	@if $grid-min-width != null {
+		--hub-file-input-grid-min-width: #{$grid-min-width};
+	}
+	@if $grid-thumb-height != null {
+		--hub-file-input-grid-thumb-height: #{$grid-thumb-height};
+	}
+
+	// Upload progress
+	@if $progress-height != null {
+		--hub-file-input-progress-height: #{$progress-height};
+	}
+	@if $progress-track-bg != null {
+		--hub-file-input-progress-track-bg: #{$progress-track-bg};
+	}
+	@if $progress-bar-bg != null {
+		--hub-file-input-progress-bar-bg: #{$progress-bar-bg};
+	}
+}
+// scss-docs-end hub-file-input-theme

package/styles/mixins/_forms-theme.scss

@@ -0,0 +1,67 @@
+// ─────────────────────────────────────────────────────────────────────────
+// hub-forms-theme — one-call theming for the shared `ng-hub-ui-forms` chrome
+// ─────────────────────────────────────────────────────────────────────────
+//
+// Sets the cross-cutting `--hub-form-*` tokens that EVERY form control reads
+// (focus ring, validation accents, disabled state, motion) in a single include.
+// Every parameter is OPTIONAL and defaults to `null`: only the parameters you
+// pass are emitted, so the rest keep the library defaults. Token-based and
+// self-contained (no Bootstrap dependencies). For a specific control, layer the
+// matching component mixin on top (e.g. `hub-segmented-theme`).
+//
+// Apply it inside any selector that wraps the fields — a form, a container, a
+// route, or `:root` for a global theme.
+//
+// @example — brand focus ring + softer disabled state, globally:
+//
+//   @use 'ng-hub-ui-forms/styles' as *;
+//
+//   :root {
+//     @include hub-forms-theme(
+//       $focus-ring-color: var(--hub-sys-color-info-subtle),
+//       $disabled-opacity: 0.5
+//     );
+//   }
+//
+// scss-docs-start hub-forms-theme
+@mixin hub-forms-theme(
+	// ── Focus ring (shared by every control) ──
+	$focus-ring-color: null,   // focus-ring colour
+	$focus-ring-width: null,   // focus-ring width
+	// ── Validation accents ──
+	$invalid-color: null,      // invalid text + border colour
+	$valid-color: null,        // valid text + border colour
+	// ── State ──
+	$disabled-opacity: null,   // opacity applied to a disabled control
+	// ── Motion ──
+	$transition: null          // border/box-shadow transition shared by inputs
+) {
+	// Focus ring
+	@if $focus-ring-color != null {
+		--hub-form-focus-ring-color: #{$focus-ring-color};
+	}
+	@if $focus-ring-width != null {
+		--hub-form-focus-ring-width: #{$focus-ring-width};
+	}
+
+	// Validation accents (text + border move together)
+	@if $invalid-color != null {
+		--hub-form-invalid-color: #{$invalid-color};
+		--hub-form-invalid-border-color: #{$invalid-color};
+	}
+	@if $valid-color != null {
+		--hub-form-valid-color: #{$valid-color};
+		--hub-form-valid-border-color: #{$valid-color};
+	}
+
+	// State
+	@if $disabled-opacity != null {
+		--hub-form-disabled-opacity: #{$disabled-opacity};
+	}
+
+	// Motion
+	@if $transition != null {
+		--hub-form-transition: #{$transition};
+	}
+}
+// scss-docs-end hub-forms-theme

package/{src/lib/styles → styles}/mixins/_segmented-theme.scss

@@ -12,7 +12,7 @@
 //
 // @example — a compact, brand-accented bar with a rounded frame:
 //
-//   @use 'ng-hub-ui-forms/styles/mixins/segmented-theme' as *;
+//   @use 'ng-hub-ui-forms/styles' as *;
 //
 //   .view-switch {
 //     @include hub-segmented-theme(