ng-hub-ui-forms 22.5.0 → 22.7.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ng-hub-ui-forms",
-  "version": "22.5.0",
+  "version": "22.7.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/styles/_tokens.scss

@@ -90,6 +90,123 @@
 	// 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. The prompt is a row by default (invitation and browse action side by
+	// side); `--hub-file-input-prompt-direction: column` stacks them, which is what a
+	// dropzone carrying a `dropSubtext` wants.
+	--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-prompt-direction: row;
+	// `baseline` aligns a row of text; a column prompt wants `center`.
+	--hub-file-input-prompt-align: baseline;
+	--hub-file-input-prompt-gap: 0.25em;
+	--hub-file-input-drop-text-color: inherit;
+	--hub-file-input-drop-text-font-size: inherit;
+	--hub-file-input-drop-text-font-weight: inherit;
+	--hub-file-input-drop-subtext-color: var(--hub-file-input-hint-color);
+	--hub-file-input-drop-subtext-font-size: var(--hub-file-input-hint-font-size);
+	--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);
+
+	// Browse action — a transparent, underlined text affordance by default. Give it a
+	// background, padding and a radius to render it as a button instead.
+	--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-browse-font-size: inherit;
+	--hub-file-input-browse-text-decoration: underline;
+	--hub-file-input-browse-bg: transparent;
+	--hub-file-input-browse-hover-bg: var(--hub-file-input-browse-bg);
+	--hub-file-input-browse-padding-x: 0;
+	--hub-file-input-browse-padding-y: 0;
+	--hub-file-input-browse-radius: 0;
+	--hub-file-input-browse-gap: var(--hub-ref-space-2, 0.5rem);
+	--hub-file-input-browse-margin-top: 0;
+	// Optional leading glyph of the browse action — OFF until `-display` is switched on and
+	// a mask is supplied, mirroring the leading-icon contract of the rest of the family.
+	--hub-file-input-browse-icon: none;
+	--hub-file-input-browse-icon-display: none;
+	--hub-file-input-browse-icon-size: 1.125em;
+
+	// 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);
+	// The glyph can sit on a medallion: a tinted, rounded surface behind it. Off by default
+	// (transparent, square, exactly the glyph's box), so the dropzone renders unchanged.
+	--hub-file-input-icon-bg: transparent;
+	--hub-file-input-icon-chip-size: var(--hub-file-input-icon-size);
+	--hub-file-input-icon-chip-radius: 0;
+	--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);

package/styles/index.scss

@@ -13,6 +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; `hub-segmented-theme` tunes `<hub-segmented>`.
+// `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