tin-spa 20.8.2 → 20.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tin-spa",
-  "version": "20.8.2",
+  "version": "20.11.3",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",

package/src/tin-styles.css

@@ -647,6 +647,24 @@ th.mat-mdc-header-cell {
   align-items: center;
 }
 
+/* Changed: Material gives every dialog-action button after the first a margin-left of 8px. On a wrapped row that
+   margin lands on the button that starts the new line, indenting it 8px past Submit. The gap above already spaces
+   them, so zero the margin and every row starts flush on the left. */
+.mat-mdc-dialog-actions .mat-button-base + .mat-button-base,
+.mat-mdc-dialog-actions .mat-mdc-button-base + .mat-mdc-button-base,
+.mat-dialog-actions .mat-button-base + .mat-button-base {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+/* Changed: Material's invisible 48px tap area (.mat-mdc-button-touch-target) is wider than the 40px/32px icon
+   buttons this app renders, so a button sitting flush against the right edge of a scroll container (e.g. a table's
+   refresh icon inside a tab) pushed 4px of nothing past the edge and summoned a phantom horizontal scrollbar.
+   Capping it at the button's own width keeps the tap area but lets scrollbars appear only for real content. */
+.mat-mdc-button-touch-target {
+  max-width: 100%;
+}
+
 /* Override for spa-groups chip icons - maintain larger size */
 spa-groups .chip-icon,
 spa-groups .chip-additional-icon {
@@ -663,3 +681,55 @@ spa-groups mat-chip .mat-icon {
   height: inherit !important;
 
 }
+
+/* Read-only field styling: make readonly inputs look like Material disabled controls.
+   Applied via [class.spa-readonly] on mat-form-field in text/number/money/text-mask/
+   text-area/text-single/text-multi/email/date/datetime components, matching the
+   disabled look mat-select and mat-checkbox already get. Uses MDC disabled tokens. */
+.mat-mdc-form-field.spa-readonly .mdc-text-field--filled {
+  background-color: rgba(0, 0, 0, 0.06); /* slightly darker than MDC's 0.04 so the disabled state is unmistakable */
+}
+.mat-mdc-form-field.spa-readonly .mdc-text-field--outlined .mdc-notched-outline__leading,
+.mat-mdc-form-field.spa-readonly .mdc-text-field--outlined .mdc-notched-outline__notch,
+.mat-mdc-form-field.spa-readonly .mdc-text-field--outlined .mdc-notched-outline__trailing {
+  border-color: rgba(0, 0, 0, 0.12) !important; /* faded outline like a disabled outlined field */
+}
+.mat-mdc-form-field.spa-readonly .mat-mdc-input-element,
+.mat-mdc-form-field.spa-readonly textarea.mat-mdc-input-element {
+  color: rgba(0, 0, 0, 0.55) !important; /* dimmed value text — still legible but clearly not editable */
+  cursor: default;
+}
+.mat-mdc-form-field.spa-readonly .mat-mdc-floating-label,
+.mat-mdc-form-field.spa-readonly .mdc-floating-label {
+  color: rgba(0, 0, 0, 0.38) !important; /* MDC disabled label color */
+}
+.mat-mdc-form-field.spa-readonly .mat-mdc-form-field-focus-overlay {
+  display: none; /* no hover/focus highlight — the field should not invite interaction */
+}
+.mat-mdc-form-field.spa-readonly .mdc-line-ripple::before,
+.mat-mdc-form-field.spa-readonly .mdc-line-ripple::after {
+  border-bottom-style: dotted; /* dotted underline mirrors MDC's disabled filled-field underline */
+  border-bottom-color: rgba(0, 0, 0, 0.38) !important;
+}
+/* Dim prefix/suffix content (currency symbols, etc.) but keep info/copy icons usable */
+.mat-mdc-form-field.spa-readonly .mat-mdc-form-field-text-prefix,
+.mat-mdc-form-field.spa-readonly [matPrefix] {
+  color: rgba(0, 0, 0, 0.38);
+}
+/* Chip inputs (text-multi/email): gray out chips in readonly mode */
+.mat-mdc-form-field.spa-readonly .mat-mdc-chip {
+  opacity: 0.65;
+}
+/* Rich-text editor: gray out the editing surface when readonly */
+.spa-editor-wrap.spa-readonly .angular-editor-textarea {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+  color: rgba(0, 0, 0, 0.55) !important;
+  cursor: default;
+}
+.spa-editor-wrap.spa-readonly .angular-editor-toolbar {
+  opacity: 0.5;
+  pointer-events: none; /* toolbar buttons are meaningless when the surface is not editable */
+}
+.spa-editor-wrap.spa-readonly .spa-editor-label label {
+  color: rgba(0, 0, 0, 0.38);
+}