@mmlogic/components 0.3.6 → 0.3.8

package/dist/collection/components/mrd-table/mrd-table.scss

@@ -0,0 +1,809 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ── Scroll container (paginated mode) ─────────────────────────────────── */
+.mrd-table__scroll {
+  overflow-y: auto;
+  overflow-x: auto;
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  /* Voorkomt dat de browser scrollTop automatisch aanpast wanneer de
+     top-spacer groeit (scroll anchoring feedbackloop). */
+  overflow-anchor: none;
+}
+
+/* ── Inner wrapper: horizontal scroll in non-paginated mode ────────────── */
+/* Only used in non-paginated path; paginated mode scrolls via .mrd-table__scroll */
+.mrd-table {
+  overflow-x: auto;
+}
+
+/* ── Table ─────────────────────────────────────────────────────────────── */
+.mrd-table__table {
+  width: auto;
+  min-width: 100%;
+  border-collapse: collapse;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-900);
+}
+
+/* When table-layout: fixed is applied (after col widths are locked), allow
+   horizontal overflow so the scroll container can scroll. */
+.mrd-table__scroll .mrd-table__table {
+  min-width: max-content;
+}
+
+/* ── Sticky header ─────────────────────────────────────────────────────── */
+.mrd-table__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--mrd-color-white);
+  text-align: left;
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 2px solid var(--mrd-border-color);
+  color: var(--mrd-color-neutral-600);
+  font-weight: var(--mrd-font-weight-medium);
+  white-space: nowrap;
+  font-size: var(--mrd-font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.mrd-table__header--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.mrd-table__header--sortable:hover {
+  background: var(--mrd-color-neutral-50);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__header--sorted-asc,
+.mrd-table__header--sorted-desc {
+  color: var(--mrd-color-primary);
+  border-bottom-color: var(--mrd-color-primary);
+}
+
+.mrd-table__header-label {
+  margin-right: var(--mrd-space-1);
+}
+
+.mrd-table__sort-icon {
+  font-size: 0.85rem;
+  opacity: 0.4;
+  vertical-align: middle;
+}
+
+.mrd-table__header--sorted-asc .mrd-table__sort-icon,
+.mrd-table__header--sorted-desc .mrd-table__sort-icon {
+  opacity: 1;
+  color: var(--mrd-color-primary);
+}
+
+.mrd-table__filter-icon {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin-left: var(--mrd-space-1);
+  color: var(--mrd-color-primary);
+}
+
+/* ── Data rows ─────────────────────────────────────────────────────────── */
+/* Background is set via inline style based on absolute row index,
+   so zebra striping stays correct even with virtual spacer rows. */
+.mrd-table__row {
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+/* !important overrides the inline zebra background on hover */
+.mrd-table__row:hover {
+  background: var(--mrd-color-neutral-200) !important;
+}
+
+.mrd-table__row--clickable {
+  cursor: pointer;
+}
+
+/* ── Spacer rows (virtual scroll padding above/below render window) ─────── */
+.mrd-table__spacer {
+  border: none;
+}
+
+.mrd-table__spacer td {
+  padding: 0;
+  border: none;
+}
+
+/* ── Cells ─────────────────────────────────────────────────────────────── */
+.mrd-table__cell {
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.mrd-table__cell--numeric {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Loading placeholder row ───────────────────────────────────────────── */
+.mrd-table__row--loading {
+  background: transparent;
+}
+
+.mrd-table__cell--placeholder {
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__placeholder-bar {
+  display: block;
+  height: 0.75rem;
+  width: 55%;
+  border-radius: var(--mrd-border-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--mrd-color-neutral-200) 25%,
+    var(--mrd-color-neutral-100) 50%,
+    var(--mrd-color-neutral-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: mrd-shimmer 1.4s ease infinite;
+}
+
+@keyframes mrd-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Toolbar ───────────────────────────────────────────────────────────── */
+.mrd-table__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--mrd-space-2);
+}
+
+.mrd-table__toolbar-left,
+.mrd-table__toolbar-right {
+  display: flex;
+  gap: var(--mrd-space-2);
+  align-items: center;
+}
+
+.mrd-table__toolbar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+/* ── View switcher ───────────────────────────────────────────────────────── */
+.mrd-table__view-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__view-arrow {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0 var(--mrd-space-1);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-xs);
+  line-height: 1;
+}
+
+.mrd-table__view-arrow:hover {
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__view-title-wrap {
+  position: relative;
+}
+
+.mrd-table__view-title {
+  font-size: var(--mrd-font-size-sm);
+  font-weight: 600;
+  color: var(--mrd-color-neutral-800);
+  font-family: var(--mrd-font-family);
+  background: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0 var(--mrd-space-1);
+  max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mrd-table__view-title:hover {
+  color: var(--mrd-color-primary);
+}
+
+.mrd-table__view-popover {
+  position: absolute;
+  top: calc(100% + var(--mrd-space-1));
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-color-neutral-200);
+  border-radius: var(--mrd-radius-md);
+  box-shadow: var(--mrd-shadow-md);
+  z-index: 100;
+  min-width: 160px;
+  padding: var(--mrd-space-1) 0;
+}
+
+.mrd-table__view-popover-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-700);
+  white-space: nowrap;
+}
+
+.mrd-table__view-popover-item:hover {
+  background: var(--mrd-color-neutral-50);
+}
+
+.mrd-table__view-popover-item--active {
+  font-weight: 600;
+  color: var(--mrd-color-primary);
+}
+
+.mrd-table__action {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  color: var(--mrd-color-neutral-400);
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.mrd-table__action:hover {
+  background-color: var(--mrd-color-neutral-100);
+  border-color: var(--mrd-color-neutral-300);
+  color: var(--mrd-color-neutral-700);
+}
+
+.mrd-table__action:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Primary: slightly more prominent than regular at rest; primary fill on hover */
+.mrd-table__action--primary {
+  color: var(--mrd-color-neutral-500);
+}
+
+.mrd-table__action--primary:hover {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__action--danger {
+  color: var(--mrd-color-error);
+}
+
+.mrd-table__action--danger:hover {
+  background-color: var(--mrd-color-error-light, #fef2f2);
+  border-color: var(--mrd-color-error);
+}
+
+.mrd-table__action-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+/* CSS tooltip — appears above the button on hover */
+.mrd-table__action-tooltip {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  font-size: var(--mrd-font-size-xs);
+  white-space: nowrap;
+  background: var(--mrd-color-tooltip, #fffce1);
+  color: var(--mrd-color-neutral-900);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius-sm, var(--mrd-border-radius));
+  pointer-events: none;
+  z-index: 10;
+}
+
+.mrd-table__action:hover .mrd-table__action-tooltip {
+  display: block;
+}
+
+/* ── Create-type picker ──────────────────────────────────────────────────── */
+.mrd-table__create-picker-wrap {
+  position: relative;
+}
+
+.mrd-table__create-picker {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  background: var(--mrd-color-white, #fff);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
+  z-index: 10;
+  min-width: 10rem;
+  padding: var(--mrd-space-1) 0;
+}
+
+.mrd-table__create-picker-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__create-picker-item:hover {
+  background: var(--mrd-color-neutral-50);
+  color: var(--mrd-color-neutral-900);
+}
+
+/* ── Filter toggle active state ────────────────────────────────────────── */
+.mrd-table__filter-toggle--active {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-toggle--active:hover {
+  background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  color: var(--mrd-color-white);
+}
+
+/* Badge showing count of active filters */
+.mrd-table__filter-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 3px;
+  background: var(--mrd-color-error, #e53e3e);
+  color: var(--mrd-color-white);
+  border-radius: 9999px;
+  font-size: 0.65rem;
+  font-weight: var(--mrd-font-weight-medium);
+  line-height: 1.25rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ── Header: filtered indicator ─────────────────────────────────────────── */
+.mrd-table__header--filtered {
+  color: var(--mrd-color-primary);
+  border-bottom-color: var(--mrd-color-primary);
+}
+
+/* ── Filter popup ───────────────────────────────────────────────────────── */
+.mrd-table__filter-popup {
+  position: fixed;
+  width: 280px;
+  background: var(--mrd-color-white);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  box-shadow: var(--mrd-shadow-md, 0 4px 12px rgba(0,0,0,.12));
+  z-index: var(--mrd-z-dropdown, 200);
+  font-size: var(--mrd-font-size-sm);
+}
+
+.mrd-table__filter-popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-bottom: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__filter-popup-title {
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-800);
+  font-size: var(--mrd-font-size-sm);
+}
+
+.mrd-table__filter-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--mrd-color-neutral-500);
+  font-size: 0.9rem;
+  padding: 2px 4px;
+  border-radius: 3px;
+  line-height: 1;
+}
+
+.mrd-table__filter-close:hover {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__filter-section {
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+}
+
+.mrd-table__filter-section-label {
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--mrd-color-neutral-500);
+  margin-bottom: var(--mrd-space-2);
+}
+
+.mrd-table__filter-sort-buttons {
+  display: flex;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-sort-btn {
+  flex: 1;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  background: transparent;
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-700);
+}
+
+.mrd-table__filter-sort-btn:hover {
+  background: var(--mrd-color-neutral-100);
+}
+
+.mrd-table__filter-sort-btn--active {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-divider {
+  height: 1px;
+  background: var(--mrd-border-color);
+  margin: 0;
+}
+
+/* ── Filter editors ─────────────────────────────────────────────────────── */
+.mrd-table__filter-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-select,
+.mrd-table__filter-input {
+  width: 100%;
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  border: 1px solid var(--mrd-border-color);
+  border-radius: var(--mrd-border-radius);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-900);
+  background: var(--mrd-color-white);
+  box-sizing: border-box;
+}
+
+.mrd-table__filter-select:focus,
+.mrd-table__filter-input:focus {
+  outline: none;
+  border-color: var(--mrd-color-primary);
+  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
+}
+
+.mrd-table__filter-range {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__filter-range .mrd-table__filter-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.mrd-table__filter-range-sep {
+  color: var(--mrd-color-neutral-400);
+  flex-shrink: 0;
+}
+
+.mrd-table__filter-range--stacked {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--mrd-space-2);
+}
+
+.mrd-table__filter-range-label {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+  margin-bottom: 2px;
+}
+
+/* Radio group */
+.mrd-table__filter-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+}
+
+.mrd-table__filter-radio-group--inline {
+  flex-direction: row;
+  gap: var(--mrd-space-3);
+}
+
+.mrd-table__filter-radio-label {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+}
+
+/* List (enum) checkboxes */
+.mrd-table__filter-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-1);
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.mrd-table__filter-list-controls {
+  display: flex;
+  gap: var(--mrd-space-2);
+  margin-bottom: var(--mrd-space-1);
+}
+
+.mrd-table__filter-list-btn {
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.mrd-table__filter-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  cursor: pointer;
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-800);
+}
+
+.mrd-table__filter-no-support {
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-500);
+  margin: 0;
+  font-style: italic;
+}
+
+/* ── Popup footer ───────────────────────────────────────────────────────── */
+.mrd-table__filter-popup-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mrd-space-2);
+  padding: var(--mrd-space-2) var(--mrd-space-3);
+  border-top: 1px solid var(--mrd-border-color);
+}
+
+.mrd-table__filter-btn {
+  padding: var(--mrd-space-1) var(--mrd-space-3);
+  border-radius: var(--mrd-border-radius);
+  border: 1px solid var(--mrd-border-color);
+  font-size: var(--mrd-font-size-sm);
+  cursor: pointer;
+}
+
+.mrd-table__filter-btn--clear {
+  background: transparent;
+  color: var(--mrd-color-neutral-600);
+}
+
+.mrd-table__filter-btn--clear:hover {
+  background: var(--mrd-color-neutral-100);
+}
+
+.mrd-table__filter-btn--apply {
+  background: var(--mrd-color-primary);
+  border-color: var(--mrd-color-primary);
+  color: var(--mrd-color-white);
+}
+
+.mrd-table__filter-btn--apply:hover {
+  background: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+  border-color: var(--mrd-color-primary-dark, var(--mrd-color-primary));
+}
+
+/* ── Totals row ─────────────────────────────────────────────────────────── */
+.mrd-table__totals-row {
+  border-top: 2px solid var(--mrd-border-color);
+}
+
+.mrd-table__totals-cell {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  padding: var(--mrd-space-2) var(--mrd-space-4);
+  background: var(--mrd-color-white);
+  font-weight: var(--mrd-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  border-top: 2px solid var(--mrd-border-color);
+}
+
+.mrd-table__totals-cell--numeric {
+  text-align: right;
+}
+
+/* ── Pagination footer ─────────────────────────────────────────────────── */
+.mrd-table__footer {
+  padding: var(--mrd-space-1) var(--mrd-space-2);
+  font-size: var(--mrd-font-size-xs);
+  color: var(--mrd-color-neutral-500);
+  text-align: right;
+}
+
+/* ── Empty state ───────────────────────────────────────────────────────── */
+.mrd-table__empty {
+  padding: var(--mrd-space-4) var(--mrd-space-3);
+  color: var(--mrd-color-neutral-500);
+  font-size: var(--mrd-font-size-sm);
+  text-align: center;
+  margin: 0;
+}
+
+/* ── File / image download cell ─────────────────────────────────────────── */
+.mrd-table__file-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--mrd-color-primary);
+  font-size: var(--mrd-font-size-sm);
+  font-family: inherit;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.mrd-table__file-btn:hover {
+  text-decoration: underline;
+  color: var(--mrd-color-primary-dark);
+}
+
+.mrd-table__file-icon {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ── TEXTBLOCK expand button ────────────────────────────────────────────── */
+.mrd-table__textblock-btn {
+  display: inline;
+  background: none;
+  border: none;
+  padding: 0 0 0 var(--mrd-space-1);
+  cursor: pointer;
+  color: var(--mrd-color-primary);
+  font-size: var(--mrd-font-size-sm);
+  font-family: inherit;
+  line-height: inherit;
+  vertical-align: middle;
+}
+
+.mrd-table__textblock-btn:hover {
+  color: var(--mrd-color-primary-dark);
+}
+
+/* ── TEXTBLOCK modal ────────────────────────────────────────────────────── */
+.mrd-table__modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: var(--mrd-z-modal, 300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mrd-table__modal {
+  background: #fff;
+  border-radius: var(--mrd-radius-md, 0.5rem);
+  padding: var(--mrd-space-6);
+  max-width: min(600px, 90vw);
+  max-height: 70vh;
+  overflow-y: auto;
+  position: relative;
+  box-shadow: var(--mrd-shadow-lg);
+}
+
+.mrd-table__modal-close {
+  position: absolute;
+  top: var(--mrd-space-3);
+  right: var(--mrd-space-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--mrd-color-text-muted, #6b7280);
+  padding: 0;
+}
+
+.mrd-table__modal-close:hover {
+  color: var(--mrd-color-text, #111827);
+}
+
+.mrd-table__modal-text {
+  margin: 0;
+  padding-right: var(--mrd-space-6);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: var(--mrd-font-size-sm);
+  line-height: 1.6;
+}
+
+.mrd-table__json-preview {
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: calc(100% - 1.5rem);
+  vertical-align: middle;
+}
+
+.mrd-table__modal-json {
+  margin: 0;
+  padding-right: var(--mrd-space-6);
+  font-family: var(--mrd-font-family-mono);
+  font-size: var(--mrd-font-size-xs);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.6;
+  background: none;
+  border: none;
+}
+