@ieeesa-npm/shared-styles 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ieeesa-npm/shared-styles",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "peerDependencies": {
     "@angular/common": "^16.1.0",
     "@angular/core": "^16.1.0"

package/styles/mixins.scss

@@ -110,3 +110,99 @@
   border-right: $right;
   border-left: $left;
 }
+
+// ── Create / edit form shells ────────────────────────────────────────────────
+//
+// A create/edit form has a fixed set of fields. It does not grow with data, so
+// it is sized to its content and the page is the single scroll surface. Its
+// navigation chrome (tab strip / stepper header) and action bar are pinned
+// instead, which keeps them reachable without shrinking the field area.
+//
+// Capping these shells to a slice of the viewport was tried and rejected: it
+// left the field area as short as ~167px on a 1366x600 screen (about one field
+// out of ~25), produced a page scrollbar alongside the inner one, and detached
+// open Material dropdown panels from fields that had scrolled out of the pane.
+// Regions that DO grow with data are bounded individually — see
+// `bounded-record-region`.
+@mixin create-form-dynamic-shell() {
+  display: flex;
+  flex-direction: column;
+  max-height: none;
+  min-height: 0;
+}
+
+// Field area of a dynamic-height form. Grows to fit its fields and never
+// introduces its own scrollbar.
+@mixin create-form-dynamic-surface() {
+  flex: 0 0 auto;
+  min-height: 0;
+  overflow: visible;
+  background: none;
+  background-color: $ieeesa-white;
+}
+
+// ── Sticky form chrome ───────────────────────────────────────────────────────
+
+// Pins a form's navigation chrome (tab strip or stepper header) to the top of
+// the viewport while long content scrolls underneath.
+//
+// The host app publishes the heights of anything already pinned above the routed
+// content, and this chrome stacks below the total:
+//   --ieeesa-sticky-header-offset     the fixed global header
+//   --ieeesa-sticky-subheader-offset  a pinned breadcrumb / sub-header, if any
+// Both are live measurements, so chrome that wraps taller on narrow screens is
+// followed automatically, and both resolve to 0 when the host pins nothing —
+// which is why these are additive rather than a single value.
+@mixin sticky-form-nav() {
+  position: sticky;
+  top: calc(
+    var(--ieeesa-sticky-header-offset, 0px) +
+      var(--ieeesa-sticky-subheader-offset, 0px)
+  );
+  z-index: 6;
+  background-color: $ieeesa-white;
+  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.18);
+}
+
+// Pins a form's action bar to the bottom of the viewport so the primary and
+// secondary buttons stay reachable without scrolling to the end of the form.
+// When the content is shorter than the viewport the bar simply sits at the end
+// of the content.
+@mixin sticky-form-actions() {
+  position: sticky;
+  bottom: 0;
+  z-index: 5;
+  background-color: $ieeesa-white;
+  border-top: 1px solid $ieeesa-disabled-border-color;
+  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.12);
+}
+
+// Applied to the page scroll container of a form that uses `sticky-form-nav`
+// and `sticky-form-actions`. Programmatic scrolls — focusing the first invalid
+// field on submit, anchor navigation — would otherwise land the target behind
+// the fixed app header, the sticky nav chrome or the sticky action bar.
+// `$nav-height` is the height of that nav chrome and `$actions-height` the
+// height of the action bar.
+@mixin sticky-form-scroll-padding($nav-height: 64px, $actions-height: 72px) {
+  scroll-padding-top: calc(
+    var(--ieeesa-sticky-header-offset, 0px) +
+      var(--ieeesa-sticky-subheader-offset, 0px) + #{$nav-height}
+  );
+  scroll-padding-bottom: $actions-height;
+}
+
+// ── Record regions ───────────────────────────────────────────────────────────
+
+// Bounds a region that grows with the number of records it displays (a
+// timeslot/agenda/meeting list) so adding records scrolls the region instead of
+// lengthening the page. This is the case the "must not expand indefinitely as
+// additional records are displayed" requirement is about.
+//
+// `auto` on both axes means a scrollbar appears only when the content actually
+// overflows, so short lists stay scrollbar-free, and wide rows scroll sideways
+// rather than being wrapped or clipped.
+@mixin bounded-record-region($max-height) {
+  max-height: $max-height;
+  overflow-y: auto;
+  overflow-x: auto;
+}