@ngx-stoui/core 21.0.5 → 21.0.7

package/toolbox-grid.css

@@ -0,0 +1,541 @@
+@charset "UTF-8";
+/**
+ * EDS (Equinor Design System) Theme for @toolbox-web/grid
+ *
+ * Styles the toolbox grid to match Equinor's design system.
+ * Supports light/dark modes via the light-dark() CSS function.
+ * Uses EDS CSS variables (--eds_*) when available, with light-dark() fallbacks.
+ *
+ * Reference: https://eds.equinor.com/
+ * Grid Theming: https://toolboxjs.com/?path=/docs/grid-theming--docs
+ * Requires @toolbox-web/grid v1.3.1+
+ *
+ * Usage: "@ngx-stoui/core/toolbox-grid.css" in project.json styles array
+ */
+/* ================================================================
+ * 1. Theme Variables
+ *
+ * Shared by tbw-grid and body-level panels (.tbw-filter-panel).
+ * Internal aliases (--_*) reduce repetition of EDS token + fallback pairs.
+ *
+ * NOTE: As of v1.3.1, the grid copies theme classes to filter panels
+ * rendered in document.body, so these variables cascade properly.
+ * ================================================================ */
+tbw-grid,
+.tbw-filter-panel {
+  /* --- EDS Token Aliases (cascade to all children) --- */
+  --_bg: var(--eds_ui_background__default, light-dark(#ffffff, #132634));
+  --_fg: var(--eds_text_static_icons__default, light-dark(#3d3d3d, #ffffff));
+  --_fg-muted: var(
+    --eds_text_static_icons__tertiary,
+    light-dark(#6f6f6f, #9ca6ac)
+  );
+  --_border: var(--eds_ui_background__medium, light-dark(#dcdcdc, #3e4f5c));
+  --_surface: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
+  --_accent: var(
+    --eds_interactive_primary__resting,
+    light-dark(#007079, #97cace)
+  );
+  --_accent-fg: var(
+    --eds_text_static_icons__primary_white,
+    light-dark(#ffffff, #000000)
+  );
+  --_hover: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --_focus: var(--eds_interactive_focus, light-dark(#007079, #97cace));
+  --_radius: var(--eds_shape_button_border_radius, 4px);
+  /* --- Typography --- */
+  --tbw-font-family: Equinor, sans-serif;
+  --tbw-font-size: var(--sto-base-font-size, 13px);
+  --tbw-font-size-header: var(--sto-base-font-size, 13px);
+  --tbw-font-weight-header: 700;
+  /* --- Colors --- */
+  --tbw-color-bg: var(--_bg);
+  --tbw-color-fg: var(--_fg);
+  --tbw-color-fg-muted: var(--_fg-muted);
+  --tbw-color-panel-bg: var(--_surface);
+  /* --- Borders --- */
+  --tbw-color-border: var(--_border);
+  --tbw-color-border-strong: var(--_border);
+  --tbw-row-divider: 1px solid var(--_border);
+  --tbw-color-border-cell: transparent;
+  --tbw-color-border-header: var(--_border);
+  --tbw-border-radius: var(--_radius);
+  --tbw-selection-border-style: dashed;
+  --tbw-selection-border-width: 1px;
+  /* --- Header --- */
+  --tbw-color-header-bg: var(
+    --eds_interactive_table__header__fill_resting,
+    light-dark(#f7f7f7, #2e3f4d)
+  );
+  --tbw-color-header-fg: var(--_fg);
+  --tbw-header-text-transform: none;
+  --tbw-header-letter-spacing: normal;
+  /* --- Row & Cell States --- */
+  --tbw-color-row-alt: var(--_bg);
+  --tbw-color-row-hover: var(--_hover);
+  --tbw-color-selection: var(
+    --eds_interactive_primary__selected_highlight,
+    light-dark(#e6faec, #007079)
+  );
+  --tbw-color-active-row-bg: var(
+    --eds_interactive_table__cell__fill_activated,
+    light-dark(#e6faec, #243746)
+  );
+  --tbw-editing-row-outline-width: 1px;
+  /* --- Accent --- */
+  --tbw-color-accent: var(--_accent);
+  --tbw-color-accent-fg: var(--_accent-fg);
+  /* --- Dimensions --- */
+  --tbw-row-height: var(
+    --eds_clickbound_default__base,
+    calc(var(--sto-base-font-size, 13px) * 2.923)
+  );
+  --tbw-header-height: var(
+    --eds_clickbound_default__base,
+    calc(var(--sto-base-font-size, 13px) * 2.923)
+  );
+  --tbw-cell-padding: 0 var(--eds_spacing_medium, 8px);
+  --tbw-cell-padding-header: 0 var(--eds_spacing_medium, 8px);
+  --tbw-button-padding: 0.375rem 0.625rem;
+  /* --- Focus --- */
+  --tbw-focus-outline: 0.5px dotted var(--_focus);
+  --tbw-focus-outline-offset: -1px;
+  /* --- Resize Handle --- */
+  --tbw-resize-handle-color: transparent;
+  --tbw-resize-handle-color-hover: var(--_accent);
+  /* --- Sort & Filter Display (v1.5.0+) --- */
+  --tbw-sort-indicator-color: var(--_fg-muted);
+  --tbw-sort-indicator-active-color: var(--_accent);
+  --tbw-filter-btn-display: none;
+  --tbw-sort-indicator-display: none;
+  /* --- Shadows --- */
+  --tbw-color-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
+  /* --- Filter Panel Variables --- */
+  --tbw-filter-panel-bg: var(--_bg);
+  --tbw-filter-panel-fg: var(--_fg);
+  --tbw-filter-panel-border: var(--_border);
+  --tbw-filter-panel-radius: var(--_radius);
+  --tbw-filter-panel-shadow: light-dark(
+    rgba(0, 0, 0, 0.15),
+    rgba(0, 0, 0, 0.4)
+  );
+  --tbw-filter-input-bg: var(--_bg);
+  --tbw-filter-input-border: var(--_border);
+  --tbw-filter-input-radius: var(--_radius);
+  --tbw-filter-input-focus: var(--_focus);
+  --tbw-filter-accent: var(--_accent);
+  --tbw-filter-accent-fg: var(--_accent-fg);
+  --tbw-filter-hover: var(--_surface);
+  --tbw-filter-muted: var(--_fg-muted);
+  --tbw-filter-divider: var(--_border);
+  --tbw-filter-active-color: var(--_accent);
+  /* --- Filter Button (v1.3.1+) --- */
+  --tbw-filter-btn-padding: 8px 16px;
+  --tbw-filter-btn-font-weight: 500;
+  --tbw-filter-btn-min-height: var(--eds_clickbound_default__base, 48px);
+  --tbw-filter-search-padding: 6px 8px;
+  --tbw-filter-item-height: 36px;
+  /* --- Panel Layout --- */
+  --tbw-panel-padding: var(--eds_spacing_medium_small, 12px);
+  --tbw-panel-gap: var(--eds_spacing_small, 8px);
+  --tbw-animation-duration: 150ms;
+}
+
+/* ================================================================
+ * 2. Grid Styles
+ *
+ * All tbw-grid-scoped rules: compact mode, cell styling,
+ * editor hosts, and Angular Material overrides.
+ * ================================================================ */
+tbw-grid {
+  /* --- Compact Mode --- */
+}
+tbw-grid.eds-compact {
+  --tbw-row-height: calc(var(--sto-base-font-size, 13px) * 1.385);
+  --tbw-header-height: calc(var(--sto-base-font-size, 13px) * 1.769);
+}
+tbw-grid {
+  /* --- Angular Material overrides for in-grid editors --- */
+  --mat-checkbox-state-layer-size: 20px;
+  --mdc-filled-text-field-container-color: transparent;
+  --mdc-filled-text-field-active-indicator-color: transparent;
+  --mdc-filled-text-field-hover-active-indicator-color: transparent;
+  --mdc-filled-text-field-focus-active-indicator-color: transparent;
+  --mdc-outlined-text-field-outline-color: transparent;
+  --mdc-outlined-text-field-focus-outline-color: transparent;
+  --mdc-outlined-text-field-hover-outline-color: transparent;
+}
+tbw-grid .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 28px;
+  --mat-icon-button-state-layer-size: 28px;
+}
+tbw-grid {
+  /* --- Toolbar --- */
+}
+tbw-grid .tbw-toolbar-content-slot {
+  display: flex;
+  place-items: center;
+}
+tbw-grid {
+  /* --- Filter button icon --- */
+}
+tbw-grid .tbw-filter-btn .material-icons-outlined {
+  font-size: 1.2em;
+  width: 1.2em;
+  height: 1.2em;
+}
+tbw-grid {
+  /* --- Cell defaults --- */
+}
+tbw-grid .cell {
+  line-height: 1em;
+}
+tbw-grid {
+  /* --- Numeric alignment --- */
+}
+tbw-grid .cell[data-type=number] {
+  text-align: right;
+}
+tbw-grid {
+  /* --- Data cell styling & editor host --- */
+}
+tbw-grid [part=cell], tbw-grid .data-grid-row .cell {
+  font-weight: 500;
+  height: var(--tbw-row-height);
+}
+tbw-grid [part=cell].editing, tbw-grid .data-grid-row .cell.editing {
+  padding: 2px 1px;
+  position: relative;
+}
+tbw-grid [part=cell].cell-focus, tbw-grid .data-grid-row .cell.cell-focus {
+  background: rgba(from var(--tbw-color-accent) r g b/8%);
+}
+tbw-grid [part=cell], tbw-grid .data-grid-row .cell {
+  /* Editor host — visual boundary for all editor types */
+}
+tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
+  border: 1px solid var(--_border);
+  background: var(--eds_ui_background__default, light-dark(#ffffff, #243746));
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--tbw-cell-padding, 0 6px);
+}
+tbw-grid [part=cell] .tbw-editor-host:has(.mat-form-field-invalid), tbw-grid .data-grid-row .cell .tbw-editor-host:has(.mat-form-field-invalid) {
+  border-color: var(--tbw-invalid-border-color);
+}
+tbw-grid [part=cell] .tbw-editor-host:focus-within, tbw-grid .data-grid-row .cell .tbw-editor-host:focus-within {
+  box-shadow: inset 0 -2px 0 0 var(--_accent);
+  outline: none;
+}
+tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
+  /* Framework component hosts: transparent for flex layout.
+     :where() for zero specificity so component :host styles can override.
+     Excludes form elements and custom editor boxes. */
+}
+tbw-grid [part=cell] .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)), tbw-grid .data-grid-row .cell .tbw-editor-host > :where(:not(input, select, textarea, [contenteditable], .tbw-editor-box)) {
+  display: contents;
+}
+tbw-grid [part=cell] .tbw-editor-host > .tbw-editor-box, tbw-grid .data-grid-row .cell .tbw-editor-host > .tbw-editor-box {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
+  /* Simple text/number inputs */
+}
+tbw-grid [part=cell] .tbw-editor-host > input[type=text], tbw-grid [part=cell] .tbw-editor-host > input[type=number], tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=text], tbw-grid .data-grid-row .cell .tbw-editor-host > input[type=number] {
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  padding: 0 4px;
+  outline: none;
+  width: 100%;
+  height: 100%;
+}
+tbw-grid [part=cell] .tbw-editor-host, tbw-grid .data-grid-row .cell .tbw-editor-host {
+  /* Native select */
+}
+tbw-grid [part=cell] .tbw-editor-host > select, tbw-grid .data-grid-row .cell .tbw-editor-host > select {
+  appearance: base-select;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  padding: 0 4px;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  place-items: center;
+}
+tbw-grid [part=cell] .tbw-editor-host > select::picker(select), tbw-grid .data-grid-row .cell .tbw-editor-host > select::picker(select) {
+  appearance: base-select;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 0;
+  overscroll-behavior: contain;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+tbw-grid [part=cell] .tbw-editor-host > select option, tbw-grid .data-grid-row .cell .tbw-editor-host > select option {
+  font: inherit;
+  padding: 8px 16px;
+  min-height: 36px;
+  display: flex;
+  align-items: center;
+  border-radius: 0;
+}
+tbw-grid [part=cell] .tbw-editor-host > select option:hover, tbw-grid .data-grid-row .cell .tbw-editor-host > select option:hover {
+  background-color: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08));
+}
+tbw-grid [part=cell] .tbw-editor-host > select option:checked, tbw-grid .data-grid-row .cell .tbw-editor-host > select option:checked {
+  background-color: light-dark(rgba(0, 112, 121, 0.12), rgba(151, 202, 206, 0.2));
+  color: inherit;
+}
+tbw-grid {
+  /* --- Material form field stripping inside editor hosts ---
+     Lower specificity than cell-scoped rules above; strips
+     Angular Material chrome so .tbw-editor-host provides visuals. */
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field {
+  width: 100%;
+  height: 100%;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-text-field-wrapper {
+  padding: 0 4px;
+  background: transparent;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-flex {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-focus-overlay {
+  display: none;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mdc-line-ripple {
+  display: none;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-form-field-infix {
+  padding: 0;
+  min-height: unset;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 0;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field input.mat-mdc-input-element {
+  height: auto;
+  line-height: normal;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-trigger {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field .mat-mdc-select-value {
+  display: flex;
+  align-items: center;
+}
+tbw-grid .tbw-editor-host .mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
+tbw-grid .tbw-editor-host .editor-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+tbw-grid .tbw-editor-host .mat-mdc-option.mdc-list-item {
+  background: var(--mat-autocomplete-background-color, var(--mat-sys-surface-container));
+}
+
+/* Compact mode when applied from a parent element */
+.eds-compact tbw-grid {
+  --tbw-row-height: calc(var(--sto-base-font-size, 13px) * 1.385);
+  --tbw-header-height: calc(var(--sto-base-font-size, 13px) * 1.769);
+}
+
+/* ================================================================
+ * 3. Filter Panel Styles
+ * ================================================================ */
+.tbw-filter-panel {
+  max-width: none;
+  max-height: none;
+  /* EDS underline inputs */
+}
+.tbw-filter-panel .tbw-filter-search-input, .tbw-filter-panel .tbw-filter-range-input, .tbw-filter-panel .tbw-filter-date-input {
+  height: var(--tbw-row-height);
+  border: none;
+  border-radius: 0;
+  box-shadow: inset 0px -1px 0px 0px var(--_fg-muted);
+  background: var(--_surface);
+  outline: 1px solid transparent;
+  outline-offset: 0px;
+}
+.tbw-filter-panel {
+  /* EDS-styled checkboxes */
+}
+.tbw-filter-panel .tbw-filter-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--_fg-muted);
+  border-radius: 2px;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+  transition: background-color 150ms, border-color 150ms;
+}
+.tbw-filter-panel .tbw-filter-checkbox:checked {
+  background-color: var(--_accent);
+  border-color: var(--_accent);
+}
+.tbw-filter-panel .tbw-filter-checkbox:checked::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--_accent-fg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.tbw-filter-panel .tbw-filter-checkbox:indeterminate {
+  background-color: var(--_accent);
+  border-color: var(--_accent);
+}
+.tbw-filter-panel .tbw-filter-checkbox:indeterminate::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 6px;
+  width: 10px;
+  height: 2px;
+  background: var(--_accent-fg);
+}
+.tbw-filter-panel .tbw-filter-checkbox:hover {
+  border-color: var(--eds_interactive_primary__hover, light-dark(#004f55, #ade2e6));
+}
+.tbw-filter-panel .tbw-filter-checkbox:focus-visible {
+  outline: 2px solid var(--_focus);
+  outline-offset: 2px;
+}
+.tbw-filter-panel .tbw-filter-value-item {
+  gap: 8px;
+}
+
+/* Search input with specificity escalation for filter panel context */
+.tbw-filter-search-input,
+.tbw-filter-panel .tbw-filter-search-input {
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: 0.025em;
+  line-height: 1.5em;
+  min-height: 36px;
+  box-sizing: border-box;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  background: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
+}
+
+/* ================================================================
+ * 4. Context Menu
+ *
+ * Appended to document.body (outside tbw-grid).
+ * CSS variables are copied from tbw-grid at render time.
+ * ================================================================ */
+.tbw-context-menu {
+  --tbw-context-menu-bg: var(
+    --eds_ui_background__default,
+    light-dark(#ffffff, #132634)
+  );
+  --tbw-context-menu-fg: var(
+    --eds_text_static_icons__default,
+    light-dark(#3d3d3d, #ffffff)
+  );
+  --tbw-context-menu-border: var(
+    --eds_ui_background__medium,
+    light-dark(#dcdcdc, #3e4f5c)
+  );
+  --tbw-context-menu-hover: var(
+    --eds_interactive_table__cell__fill_hover,
+    light-dark(#eaeaea, #324d62)
+  );
+  --tbw-context-menu-danger: var(--eds_interactive_danger__resting, #eb0000);
+  --tbw-context-menu-muted: var(
+    --eds_text_static_icons__tertiary,
+    light-dark(#6f6f6f, #9ca6ac)
+  );
+  --tbw-context-menu-font-size: 0.873rem;
+  --tbw-context-menu-font-family: Equinor, sans-serif;
+  --tbw-context-menu-icon-size: 1.2rem;
+  --tbw-context-menu-item-padding: 8px 16px;
+  --tbw-context-menu-item-gap: 8px;
+  --tbw-context-menu-radius: var(--eds_shape_button_border_radius, 4px);
+  --tbw-context-menu-shadow: 0 2px 8px
+    light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3));
+}
+.tbw-context-menu .tbw-context-menu-shortcut kbd {
+  background: var(--eds_ui_background__light, light-dark(#f7f7f7, #2e3f4d));
+  border: 1px solid var(--eds_ui_background__medium, light-dark(#dcdcdc, #3e4f5c));
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-family: "Equinor Mono", "Consolas", "Courier New", monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+.tbw-context-menu .tbw-context-menu-icon .material-icons {
+  font-size: var(--tbw-context-menu-icon-size, 20px);
+  line-height: 1;
+  vertical-align: middle;
+}
+.tbw-context-menu .tbw-context-menu-item.danger .tbw-context-menu-icon .material-icons {
+  color: inherit;
+}
+
+/* ================================================================
+ * 5. Overlay Panel (BaseOverlayEditor)
+ * ================================================================ */
+.tbw-overlay-panel {
+  --tbw-overlay-bg: var(
+    --eds_ui_background__default,
+    light-dark(#ffffff, #132634)
+  );
+  --tbw-overlay-border: var(
+    --eds_ui_background__medium,
+    light-dark(#dcdcdc, #3e4f5c)
+  );
+  --tbw-overlay-shadow: 0 4px 12px
+    light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
+  color: var(--eds_text_static_icons__default, light-dark(#3d3d3d, #ffffff));
+}
+
+/* ================================================================
+ * 6. Dark Mode
+ * ================================================================ */
+body.sto-dark-theme tbw-grid,
+body.sto-dark-theme .tbw-filter-panel,
+body.sto-dark-theme .tbw-context-menu,
+body.sto-dark-theme .tbw-overlay-panel {
+  color-scheme: dark;
+}