@mmlogic/components 0.3.4 → 0.3.6

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

@@ -1,742 +0,0 @@
-: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 title ──────────────────────────────────────────────────────────── */
-/* ── View switcher ───────────────────────────────────────────────────────── */
-.mrd-table__view-select {
-  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;
-  max-width: 220px;
-}
-
-.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;
-}
-