tin-spa 20.13.0 → 20.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tin-spa",
-  "version": "20.13.0",
+  "version": "20.14.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tnyagato/ng-space.git"

package/src/tin-styles.css

@@ -454,9 +454,26 @@ table mat-icon,
 }
 
 .mat-mdc-text-field-wrapper {
-  
+
   padding-top: 0px !important; /* Remove extra padding above input */
   padding-bottom: 0px !important; /* Remove extra padding below input */
+
+  /* FORM-4 — restore the horizontal inset on BOTH sides, always.
+     Material zeroes padding-right when a field has an icon suffix, and padding-left when it has a prefix,
+     because it assumes the adjacent control is a stock 48px mat-icon-button whose own padding supplies the
+     visual gap. This library breaks that assumption on purpose: `.suffix-icons .mat-mdc-icon-button` is forced
+     to 20x20 with `padding: 0` so the icons read as small. The gap Material handed over therefore never came
+     back, and every measured field had its trailing icon sitting EXACTLY 0.0px from the border — the select
+     arrows, the bitwise action icons, the password toggle, and the money field's "USD" prefix hard against
+     the left edge.
+     It affected every field, not only the ones with visible icons: all 13 components render their
+     `<div matSuffix class="suffix-icons">` unconditionally, so `mat-mdc-form-field-has-icon-suffix` is
+     present even when spa-suffix draws nothing, and plain text fields were left with a 4px right inset
+     against a 16px left one.
+     16px matches the inset Material already applies on the unadorned side, so adorned and unadorned fields
+     line up with each other instead of each having its own margin. */
+  padding-left: 16px !important;
+  padding-right: 16px !important;
 }
 
 /* Center floating label vertically only when empty and not focused */
@@ -470,6 +487,70 @@ table mat-icon,
   margin-bottom: 5px !important; /* Minimal top margin from hint area */
 }
 
+/* ---------------------------------------------------------------------------
+   FORM FIELD ALIGNMENT (FORM-1/2/3)
+
+   Every form row is a .tin-grid cell, and the cells are top-aligned. That keeps
+   the CONTROL BAND (the boxed part of a mat-form-field) of two neighbours level
+   only while both cells start at the same offset — which is why any component
+   that is not a mat-form-field, and any change in a field's own height, shows up
+   as a misaligned row.
+
+   Two numbers govern the whole thing, measured off the rendered form rather than
+   assumed: the control band is 40px (infix 8px + input 24px + 8px above), and a
+   hint or error adds exactly 20px of subscript beneath it.
+   --------------------------------------------------------------------------- */
+:root {
+  --tin-field-band: 40px;      /* height of a mat-form-field's boxed control area */
+  --tin-field-subscript: 20px; /* height one line of hint/error text occupies */
+}
+
+/* FORM-2 — a hint must not change a field's height.
+
+   subscriptSizing="dynamic" (used by all 13 field components) collapses the
+   subscript to 0 when there is no hint and expands it to 20px when there is, so a
+   hinted field is 20px taller than the plain field beside it. The tops still line
+   up, but the row grows and every following row is pushed down, which is what
+   reads as "the form is misaligned".
+
+   Reserving the band unconditionally makes every field exactly the same height
+   whether or not it has a hint — and, more valuably, stops the form jumping when a
+   validation error appears mid-typing. The 5px margin above is dropped in the same
+   breath, so a plain field grows by 15px rather than 20 and a hinted field
+   actually loses 5px. Scoped to spa-form so filters and toolbars keep their
+   current compact height. */
+spa-form .mat-mdc-form-field-subscript-wrapper {
+  min-height: var(--tin-field-subscript) !important;
+  margin-bottom: 0 !important;
+}
+
+/* FORM-1 / FORM-3 — components that are NOT mat-form-fields must still centre
+   themselves on the control band of the field beside them.
+
+   spa-label rendered as a bare text block anchored to the top of its cell, so a
+   read-only label sat several pixels above the input text it was paired with (the
+   reported "Balance : USD 500.00" row). spa-check happens to be 40px today and so
+   lines up by coincidence; pinning it to the same variable makes that a rule
+   rather than a coincidence, and keeps it true if Material's density changes.
+
+   Scoped to spa-form ON PURPOSE. Both components are also used outside forms —
+   spa-check in table-row, title-actions and page toolbars, spa-label in the
+   profile and tenant-settings pages — where a 40px floor and a flex host would
+   inflate table rows and change inline flow for no benefit. */
+spa-form spa-label,
+spa-form spa-check {
+  display: flex;
+  align-items: center;
+  min-height: var(--tin-field-band);
+}
+
+/* Composite subfields share a row via flex, which defaults to align-items:stretch —
+   a checkbox or label among boxed inputs would stretch instead of sitting on the
+   band. Match the grid's top alignment so composites align by the same rule. */
+.composite-field-group {
+  align-items: flex-start;
+}
+
 /* Set default white background for all Material cards */
 .mat-mdc-card,
 mat-card {
@@ -733,3 +814,446 @@ spa-groups mat-chip .mat-icon {
 .spa-editor-wrap.spa-readonly .spa-editor-label label {
   color: rgba(0, 0, 0, 0.38);
 }
+
+/* ══════════════════════════════════════════════════════════════════════════════════════════════════════
+   MODERN DIALOGS — opt-in via appConfig.dialogStyle = 'modern'
+   ══════════════════════════════════════════════════════════════════════════════════════════════════════
+   Dialogs add the `tin-dialog-modern` panel class to their own overlay pane when the app opts in. These
+   rules live here, globally, because the Material dialog SURFACE is an ancestor of every dialog component's
+   view — component CSS can style downwards but never up to its own container.
+
+   Design intent: this is a dense line-of-business app, so "modern" means a calmer, more deliberate surface —
+   softer corners, layered depth instead of a flat drop shadow, a clear header band, and dialog actions that
+   read as a footer rather than as loose buttons. It stays inside Material's language; the point is to make
+   the app feel considered, not to make dialogs look like they came from a different product.
+   Nothing below applies unless the panel class is present, so default apps are untouched. */
+
+/* Band colour is a VARIABLE, not a hard-coded grey, so an app can retheme every dialog band from one place:
+     :root { --tin-dlg-band: #ede9f6; --tin-dlg-band-text: rgba(16,24,40,0.92); }
+
+   The default is a faintly violet neutral rather than the blue-grey used almost everywhere else in the shell
+   (page background, table rows, hover states). Those were all near-neighbours, so the band read as "more of
+   the same surface" instead of as chrome — at this level of subtlety it has to differ in HUE, not just in
+   lightness, to register at all.
+
+   It is deliberately SOLID. A translucent band lets table rows and text show through, and the header becomes
+   unreadable over busy content.
+
+   On following the navigation colour: that is one line — set --tin-dlg-band to your navColor. But navColor is
+   frequently near-black (test-spa uses rgba(0,0,0,0.78)), and a dark band with dark text is unreadable, so
+   --tin-dlg-band-text exists to be flipped to white in that case. It is NOT derived automatically, because
+   silently inverting text based on a colour an app set for a different purpose is how you end up with a
+   dialog nobody can read on exactly one deployment. */
+:root {
+  --tin-dlg-band: #f2f1f7;
+  --tin-dlg-band-border: rgba(31, 27, 61, 0.13);
+  --tin-dlg-band-text: rgba(16, 24, 40, 0.92);
+  --tin-dlg-band-muted: rgba(16, 24, 40, 0.55);
+}
+
+.tin-dialog-modern .mat-mdc-dialog-surface {
+  border-radius: 14px;
+  /* Two layered shadows rather than one: a tight contact shadow to seat the dialog, and a wide soft one for
+     depth. A single large blur reads as haze and makes the edge look undefined against a busy table. */
+  box-shadow:
+    0 1px 2px rgba(16, 24, 40, 0.10),
+    0 12px 32px -8px rgba(16, 24, 40, 0.28) !important;
+  overflow: hidden; /* lets the header band and footer meet the rounded corners cleanly */
+}
+
+/* Header band — separates "what this dialog is" from its content without a heavy rule. */
+.tin-dialog-modern .tin-dlg-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 20px;
+  /* A flat tint rather than a gradient. The gradient was too faint to read as a band at all, which left the
+     dialog looking exactly as plain as before — the whole point of the band is that the eye can tell where the
+     chrome ends and the record begins. */
+  background: var(--tin-dlg-band);
+  border-bottom: 1px solid var(--tin-dlg-band-border);
+}
+
+.tin-dialog-modern .tin-dlg-title {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--tin-dlg-band-text);
+  line-height: 1.3;
+}
+
+/* NOTE: the .tin-dlg-sub subtitle was REMOVED from the details dialog on request — the record reference under
+   the title was noise rather than information. The variable --tin-dlg-band-muted remains for any future
+   secondary text inside a band; do not reintroduce a subtitle without being asked. */
+
+/* The header's action icons (edit, refresh, close) are chrome, not content — grouping them on a subtle
+   surface stops them competing with the title for attention and gives the band a right-hand anchor. */
+.tin-dialog-modern .tin-dlg-head .mat-mdc-icon-button {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+}
+
+/* Footer — a seated action bar. Buttons stay Material; the band is what makes them read as a footer. */
+.tin-dialog-modern .mat-mdc-dialog-actions {
+  padding: 12px 20px;
+  background: var(--tin-dlg-band);
+  border-top: 1px solid var(--tin-dlg-band-border);
+  margin: 0;
+  min-height: unset;
+}
+
+.tin-dialog-modern .mat-mdc-dialog-content {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/* Tabs inside a modern dialog: a lighter, tighter bar. The default Material tab header is tall enough to
+   dominate a dialog whose whole purpose is the form underneath it. */
+/* Tinted so the tab strip reads as a divider between the record's own fields above and its related lists
+   below. On a plain white surface the tabs float, and a long form runs into its child tables with nothing
+   marking the boundary — which is most of why this dialog reads as "plain". */
+.tin-dialog-modern .mat-mdc-tab-header {
+  background: var(--tin-dlg-band);
+  border-top: 1px solid var(--tin-dlg-band-border);
+  border-bottom: 1px solid var(--tin-dlg-band-border);
+  --mat-tab-header-divider-height: 0;
+}
+
+.tin-dialog-modern .mat-mdc-tab .mdc-tab__text-label {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+@media (max-width: 480px) {
+  .tin-dialog-modern .mat-mdc-dialog-surface { border-radius: 12px; }
+  .tin-dialog-modern .tin-dlg-head { padding: 12px 16px; }
+  .tin-dialog-modern .mat-mdc-dialog-actions { padding: 10px 16px; }
+}
+
+/* ---------------------------------------------------------------------------
+   QUIET LOADING — SKELETON FOUNDATION
+
+   Shared placeholder primitives for the opt-in Quiet Loading style: table ghost
+   rows, tile value chips and the details-dialog form skeleton all build out of
+   these two classes so they shimmer as one system rather than three.
+
+   Colours are color-mix over the Material 3 system tokens, never hardcoded
+   greys, so a skeleton themes itself in light, dark and any branded palette.
+   Heights reuse --tin-field-band (declared with the form-field alignment rules
+   above) so a form skeleton occupies exactly the space the real control band
+   will, and nothing jumps when the data arrives.
+   --------------------------------------------------------------------------- */
+:root {
+  --tin-skel-base: color-mix(in srgb, var(--mat-sys-on-surface, #000) 8%, transparent);   /* resting band */
+  --tin-skel-sheen: color-mix(in srgb, var(--mat-sys-on-surface, #000) 14%, transparent); /* moving highlight */
+  --tin-skel-radius: 4px;
+  --tin-skel-speed: 1.4s;
+}
+
+/* Base chip. The 200% background is what the sweep translates across; without it the
+   gradient has nowhere to travel and the animation renders as a static band. */
+.tin-skel {
+  display: block;
+  border-radius: var(--tin-skel-radius);
+  background-color: var(--tin-skel-base);
+  background-image: linear-gradient(90deg, transparent 0%, var(--tin-skel-sheen) 50%, transparent 100%);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  background-position: -100% 0;
+  animation: tin-skel-sweep var(--tin-skel-speed) ease-in-out infinite;
+  /* a skeleton is decoration around content that has not arrived — never selectable or interactive */
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Inline variant for text-shaped placeholders (labels, captions, tile values):
+   sits on the text baseline and takes its height from the surrounding font size. */
+.tin-skel-text {
+  display: inline-block;
+  height: 1em;
+  vertical-align: middle;
+  border-radius: var(--tin-skel-radius);
+}
+
+@keyframes tin-skel-sweep {
+  from { background-position: -100% 0; }
+  to   { background-position: 100% 0; }
+}
+
+/* Reduced motion: the placeholder still communicates "content is coming" by occupying
+   the space, but nothing moves. The sheen is dropped rather than paused so the chip
+   does not freeze mid-sweep with a bright band stuck across it. */
+@media (prefers-reduced-motion: reduce) {
+  .tin-skel {
+    animation: none;
+    background-image: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   QUIET LOADING — TABLE STAGE (PHASE 2, FSD D3/D4)
+
+   Two loading states for a table, and only ever one of them at a time:
+
+     .tin-load-stage  first load, nothing on screen yet — an eased progress bar
+                      with a counting percentage, a caption, and ghost rows that
+                      hold the exact space the real rows will fill.
+     .tin-load-line   refresh, rows already on screen — a 2px line under the
+                      header and a spinning refresh icon, nothing else. Rows
+                      are never dimmed or covered; they stay live.
+
+   Lives here rather than in table.component.css because .tin-spin is shared
+   with the filter component (which owns the refresh button) and the palette
+   has to match the skeleton primitives declared directly above.
+   --------------------------------------------------------------------------- */
+
+.tin-load-stage {
+  padding: 8px 0 4px 0;
+}
+
+/* Progress module — bar and percentage on one baseline */
+.tin-load-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.tin-load-bar {
+  position: relative;
+  flex: 1 1 auto;
+  height: 3px;
+  border-radius: 999px;
+  background-color: var(--tin-skel-base);
+  overflow: hidden;
+}
+
+/* The fill is driven from the component (width %, PerceivedProgress curve). The transition only smooths the
+   gap between animation frames — the easing itself is in the curve, not here. */
+.tin-load-bar-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  display: block;
+  width: 0;
+  border-radius: 999px;
+  background-color: var(--mat-sys-primary, #1976d2);
+  transition: width 120ms linear;
+}
+
+/* Soft sheen travelling along the filled portion, so a stalled backend still looks alive */
+.tin-load-bar-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--mat-sys-on-primary, #fff) 45%, transparent) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: tin-skel-sweep var(--tin-skel-speed) ease-in-out infinite;
+}
+
+/* Tabular numerals: without them the width of the digits changes as the value counts up and the caption jitters. */
+.tin-load-percent {
+  flex: 0 0 auto;
+  min-width: 4ch;
+  text-align: right;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1;
+  color: color-mix(in srgb, var(--mat-sys-on-surface, #000) 60%, transparent);
+}
+
+.tin-load-caption {
+  margin-top: 6px;
+  font-size: 12px;
+  color: color-mix(in srgb, var(--mat-sys-on-surface, #000) 55%, transparent);
+}
+
+/* Ghost rows — one cell per visible column, so the stage is the same shape as the table that replaces it */
+.tin-load-ghosts {
+  margin-top: 12px;
+}
+
+.tin-load-ghost-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 10px;
+  height: var(--tin-field-band, 40px);
+  border-bottom: 1px solid color-mix(in srgb, var(--mat-sys-on-surface, #000) 6%, transparent);
+}
+
+.tin-load-ghost-cell {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.tin-load-ghost-cell .tin-skel {
+  height: 12px;
+}
+
+/* Refresh: a 2px line flush under the table header. Deliberately thinner and quieter than the initial bar —
+   the user already has content to read, this is peripheral. */
+.tin-load-line {
+  position: relative;
+  height: 2px;
+  margin-bottom: 4px;
+  background-color: var(--tin-skel-base);
+  overflow: hidden;
+}
+
+.tin-load-line-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  display: block;
+  width: 0;
+  background-color: color-mix(in srgb, var(--mat-sys-primary, #1976d2) 70%, transparent);
+  transition: width 120ms linear;
+}
+
+/* Hand-off: the real rows arrive where the ghosts were, so they fade and settle rather than snapping in. The
+   animation fires once, when the table element is created — a refresh never re-runs it because the element is
+   already in the DOM (D4: rows are never re-mounted on refresh). */
+.tin-load-in {
+  animation: tin-load-fade-in 180ms ease-out;
+}
+
+@keyframes tin-load-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* Shared spin, applied to the header refresh icon while a quiet refresh is in flight */
+.tin-spin {
+  animation: tin-spin-rotate 1.2s linear infinite;
+}
+
+@keyframes tin-spin-rotate {
+  to { transform: rotate(360deg); }
+}
+
+/* Reduced motion: the stage still reports progress (the bar grows, the percentage counts — both are value
+   changes, not motion), but nothing sweeps, pulses or rotates. */
+@media (prefers-reduced-motion: reduce) {
+  .tin-load-bar-fill::after {
+    animation: none;
+    background-image: none;
+  }
+
+  .tin-spin,
+  .tin-load-in {
+    animation: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   QUIET LOADING — ghost furniture for the NON-table view types.
+
+   The table's ghost rows are column-shaped, which is exactly wrong for a card
+   grid or a capsule strip: a placeholder should promise the layout that is
+   about to arrive, and a row of cells promises a table. Each view therefore
+   gets its own shape. They all reuse the shared .tin-skel shimmer, so there is
+   one animation and one palette across every surface.
+   --------------------------------------------------------------------------- */
+
+/* Capsules — a wrapping strip of pills. Varied widths so it reads as labels
+   rather than as a progress meter; deterministic, so it looks the same each time. */
+.tin-load-ghost-capsules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.tin-load-ghost-capsule {
+  height: 32px;
+  width: 96px;
+  border-radius: 16px;
+}
+
+.tin-load-ghost-capsules .tin-load-ghost-capsule:nth-child(2) { width: 132px; }
+.tin-load-ghost-capsules .tin-load-ghost-capsule:nth-child(3) { width: 78px; }
+.tin-load-ghost-capsules .tin-load-ghost-capsule:nth-child(4) { width: 116px; }
+.tin-load-ghost-capsules .tin-load-ghost-capsule:nth-child(5) { width: 88px; }
+
+/* Cards — the same auto-fit grid the real card view uses, so the ghosts occupy
+   the space the cards will land in rather than reflowing when they arrive. */
+.tin-load-ghost-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
+  gap: 16px;
+  margin-top: 14px;
+}
+
+.tin-load-ghost-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface, #000) 8%, transparent);
+}
+
+.tin-load-ghost-card-title {
+  height: 1.15em;
+  width: 55%;
+}
+
+.tin-load-ghost-card-short {
+  width: 40%;
+}
+
+/* Grouped — a heading bar over a few rows, twice. Mirrors the group-card header
+   whose alignment was fixed in WS-8, so the stage lines up with what replaces it. */
+.tin-load-ghost-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-top: 14px;
+}
+
+.tin-load-ghost-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 14px;
+  border-radius: 8px;
+  border: 1px solid color-mix(in srgb, var(--mat-sys-on-surface, #000) 8%, transparent);
+}
+
+.tin-load-ghost-group-head {
+  height: 20px;
+  width: 34%;
+  margin-bottom: 4px;
+}
+
+.tin-load-ghost-group-row {
+  width: 100%;
+}
+
+.tin-load-ghost-groups .tin-load-ghost-group-row:last-child { width: 62%; }
+
+/* Grouped ghosts sit on the same white card surface the real group cards use — an outline alone read as a
+   flat bar against the page tint and did not look like a card at all. */
+.tin-load-ghost-group {
+  background: var(--mat-sys-surface, #fff);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--mat-sys-on-surface, #000) 10%, transparent);
+  border-color: transparent;
+}
+
+.tin-load-ghost-group-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+/* Card ghosts get the same surface treatment as the grouped ones, and for the same reason: a 8%-opacity
+   outline on a tinted page reads as a flat band, not as a card. The real card view is a white raised
+   surface, so the placeholder should be too. */
+.tin-load-ghost-card {
+  background: var(--mat-sys-surface, #fff);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--mat-sys-on-surface, #000) 10%, transparent);
+  border-color: transparent;
+}