valtech-components 2.0.787 → 2.0.795

package/src/lib/components/organisms/data-table/data-table.component.scss

@@ -0,0 +1,919 @@
+@import '../../styles/mixins.scss';
+
+// ============================================
+// DataTable - Material Modern Design
+// ============================================
+
+:host {
+  display: block;
+}
+
+// === CSS Variables for theming ===
+
+.data-table-container {
+  // Elevation levels
+  --dt-elevation-none: none;
+  --dt-elevation-low: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --dt-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --dt-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+  // Colors
+  --dt-primary: var(--ion-color-primary, #4f46e5);
+  --dt-primary-rgb: var(--ion-color-primary-rgb, 79, 70, 229);
+  --dt-surface: var(--ion-background-color, #ffffff);
+  --dt-surface-variant: #f8fafc;
+  --dt-border: #e2e8f0;
+  --dt-text-primary: #1e293b;
+  --dt-text-secondary: #64748b;
+  --dt-text-muted: #94a3b8;
+
+  // Gradient for header accent
+  --dt-gradient-start: #6366f1;
+  --dt-gradient-end: #8b5cf6;
+
+  // Spacing
+  --dt-border-radius: 16px;
+  --dt-cell-padding-x: 16px;
+  --dt-cell-padding-y: 14px;
+  --dt-header-padding-y: 12px;
+}
+
+// === Container ===
+
+.data-table-container {
+  position: relative;
+  background: var(--dt-surface);
+  border-radius: var(--dt-border-radius);
+  box-shadow: var(--dt-elevation-medium);
+  border: 1px solid var(--dt-border);
+  overflow: hidden;
+
+  // Elevation variants
+  &.elevation-none {
+    box-shadow: var(--dt-elevation-none);
+  }
+
+  &.elevation-low {
+    box-shadow: var(--dt-elevation-low);
+  }
+
+  &.elevation-high {
+    box-shadow: var(--dt-elevation-high);
+  }
+
+  // Header gradient accent
+  &.header-gradient {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--dt-gradient-start), var(--dt-gradient-end));
+      border-radius: var(--dt-border-radius) var(--dt-border-radius) 0 0;
+      z-index: 2;
+    }
+  }
+}
+
+// === Loading overlay ===
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(2px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  z-index: 10;
+
+  ion-spinner {
+    --color: var(--dt-primary);
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.loading-message {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--dt-text-secondary);
+}
+
+.table-wrapper {
+  overflow-x: auto;
+  max-height: var(--max-height);
+
+  &.is-loading {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  // Custom scrollbar
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--dt-surface-variant);
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--dt-border);
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--dt-text-muted);
+    }
+  }
+}
+
+// === Table base styles ===
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+th,
+td {
+  padding: var(--dt-cell-padding-y) var(--dt-cell-padding-x);
+  text-align: left;
+  vertical-align: middle;
+}
+
+// === Header ===
+
+thead {
+  background: var(--dt-surface-variant);
+
+  th {
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--dt-text-secondary);
+    white-space: nowrap;
+    position: relative;
+    border-bottom: 1px solid var(--dt-border);
+    padding: var(--dt-header-padding-y) var(--dt-cell-padding-x);
+    transition: all 0.2s ease;
+
+    &.sortable {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.03);
+        color: var(--dt-text-primary);
+      }
+    }
+
+    &.sorted {
+      color: var(--dt-primary);
+      background: rgba(var(--dt-primary-rgb), 0.04);
+    }
+  }
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sort-icons {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+
+  .sortable:hover & {
+    opacity: 0.7;
+  }
+
+  .sorted & {
+    opacity: 1;
+  }
+
+  ion-icon {
+    font-size: 12px;
+    color: var(--dt-text-muted);
+    margin: -3px 0;
+    transition: all 0.2s ease;
+
+    &.active {
+      color: var(--dt-primary);
+      transform: scale(1.2);
+    }
+  }
+}
+
+// === Body ===
+
+tbody {
+  tr {
+    border-bottom: 1px solid var(--dt-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.clickable {
+      cursor: pointer;
+    }
+
+    // Simple selection - just background color
+    &.selected {
+      background: rgba(var(--dt-primary-rgb), 0.06);
+    }
+  }
+
+  td {
+    color: var(--dt-text-primary);
+    font-size: 14px;
+  }
+}
+
+// === Hoverable variant ===
+
+.hoverable {
+  tbody tr:hover:not(.empty-row) {
+    background: var(--dt-surface-variant);
+
+    &.selected {
+      background: rgba(var(--dt-primary-rgb), 0.08);
+    }
+  }
+}
+
+// === Alignment ===
+
+.align-left {
+  text-align: left;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-right {
+  text-align: right;
+}
+
+// === Selection cell with modern checkboxes ===
+
+.selection-cell {
+  width: 52px;
+  min-width: 52px;
+  max-width: 52px;
+  text-align: center;
+  padding: 8px 12px;
+  box-sizing: border-box;
+
+  ion-checkbox {
+    --size: 20px;
+    --border-radius: 50%;
+    --border-width: 2px;
+    --border-color: var(--dt-border);
+    --border-color-checked: var(--dt-primary);
+    --background: transparent;
+    --background-checked: var(--dt-primary);
+    --checkmark-color: white;
+    --checkmark-width: 2px;
+    margin: 0;
+    display: block;
+
+    &::part(container) {
+      border-radius: 50%;
+    }
+  }
+
+  input[type='radio'] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: var(--dt-primary);
+    margin: 0;
+    display: block;
+  }
+}
+
+// Circular checkbox variant
+.checkbox-circular {
+  .selection-cell ion-checkbox {
+    --border-radius: 50%;
+
+    &::part(container) {
+      border-radius: 50%;
+    }
+  }
+}
+
+.row-number-cell {
+  width: 60px;
+  text-align: center;
+  color: var(--dt-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.actions-cell {
+  text-align: center;
+  white-space: nowrap;
+}
+
+// === Sticky columns ===
+
+.sticky-start {
+  position: sticky;
+  left: 0;
+  background: inherit;
+  z-index: 1;
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.sticky-end {
+  position: sticky;
+  right: 0;
+  background: inherit;
+  z-index: 1;
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+// === Empty state ===
+
+.empty-row td {
+  padding: 64px 16px;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: var(--dt-text-secondary);
+}
+
+.empty-icon {
+  font-size: 56px;
+  margin-bottom: 20px;
+  opacity: 0.4;
+  color: var(--dt-text-muted);
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: var(--dt-text-primary);
+}
+
+.empty-description {
+  font-size: 14px;
+  margin: 0;
+  max-width: 320px;
+  color: var(--dt-text-secondary);
+  line-height: 1.5;
+}
+
+// === Pagination - Modern Design ===
+
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-top: 1px solid var(--dt-border);
+  background: var(--dt-surface);
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 14px;
+  color: var(--dt-text-secondary);
+
+  span {
+    font-weight: 500;
+  }
+}
+
+.page-size-select {
+  --padding-start: 12px;
+  --padding-end: 12px;
+  font-size: 14px;
+  min-width: 140px;
+  --background: var(--dt-surface-variant);
+  --border-radius: 8px;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  ion-button {
+    --padding-start: 10px;
+    --padding-end: 10px;
+    --border-radius: 8px;
+    --background: var(--dt-surface-variant);
+    --background-hover: var(--dt-border);
+    --color: var(--dt-text-secondary);
+    --color-hover: var(--dt-text-primary);
+    margin: 0;
+    height: 36px;
+    min-width: 36px;
+
+    &:disabled {
+      opacity: 0.4;
+    }
+
+    ion-icon {
+      font-size: 16px;
+    }
+  }
+}
+
+.page-indicator {
+  padding: 0 16px;
+  font-size: 14px;
+  color: var(--dt-text-primary);
+  font-weight: 600;
+  background: var(--dt-surface-variant);
+  border-radius: 8px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+  justify-content: center;
+}
+
+// === Bordered variant ===
+
+.bordered {
+  th,
+  td {
+    border: 1px solid var(--dt-border);
+  }
+}
+
+// === Striped variant ===
+
+.striped {
+  tbody tr:nth-child(even) {
+    background: var(--dt-surface-variant);
+
+    &.selected {
+      background: rgba(var(--dt-primary-rgb), 0.08);
+    }
+  }
+}
+
+// === Sticky header ===
+
+.sticky-header {
+  .table-wrapper {
+    overflow-y: auto;
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    box-shadow: 0 1px 0 var(--dt-border);
+  }
+}
+
+// === Size variants ===
+
+.size-small {
+  --dt-cell-padding-x: 12px;
+  --dt-cell-padding-y: 10px;
+  --dt-header-padding-y: 10px;
+
+  th,
+  td {
+    font-size: 13px;
+  }
+
+  thead th {
+    font-size: 12px;
+  }
+
+  .selection-cell {
+    width: 44px;
+    padding: 6px 8px;
+
+    ion-checkbox {
+      --size: 18px;
+    }
+  }
+
+  .row-number-cell {
+    width: 48px;
+    font-size: 11px;
+  }
+
+  .pagination-container {
+    padding: 12px 16px;
+  }
+
+  .pagination-info,
+  .page-indicator {
+    font-size: 13px;
+  }
+
+  .pagination-controls ion-button {
+    height: 32px;
+    min-width: 32px;
+  }
+
+  .page-indicator {
+    height: 32px;
+    min-width: 70px;
+  }
+}
+
+.size-large {
+  --dt-cell-padding-x: 20px;
+  --dt-cell-padding-y: 18px;
+  --dt-header-padding-y: 16px;
+
+  th,
+  td {
+    font-size: 15px;
+  }
+
+  thead th {
+    font-size: 14px;
+  }
+
+  .selection-cell {
+    width: 60px;
+    padding: 12px 16px;
+
+    ion-checkbox {
+      --size: 24px;
+    }
+  }
+
+  .row-number-cell {
+    width: 72px;
+    font-size: 14px;
+  }
+
+  .pagination-container {
+    padding: 20px 24px;
+  }
+
+  .pagination-info,
+  .page-indicator {
+    font-size: 15px;
+  }
+
+  .pagination-controls ion-button {
+    height: 40px;
+    min-width: 40px;
+  }
+
+  .page-indicator {
+    height: 40px;
+    min-width: 90px;
+  }
+}
+
+// === Accessibility ===
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// === Responsive ===
+
+@media (max-width: 768px) {
+  .data-table-container {
+    --dt-border-radius: 12px;
+  }
+
+  .pagination-container {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .pagination-info {
+    justify-content: space-between;
+  }
+
+  .pagination-controls {
+    justify-content: center;
+  }
+}
+
+// === Toolbar ===
+
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px;
+  border-bottom: 1px solid var(--dt-border);
+  background: var(--dt-surface);
+  flex-wrap: wrap;
+
+  &:empty {
+    display: none;
+  }
+
+  @media (max-width: 576px) {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 16px;
+  }
+}
+
+// === Status Badges - Modern Design ===
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  letter-spacing: 0.025em;
+
+  // Soft variant (default)
+  &--success {
+    background: #dcfce7;
+    color: #15803d;
+  }
+
+  &--warning {
+    background: #fef3c7;
+    color: #b45309;
+  }
+
+  &--danger {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+
+  &--primary {
+    background: #e0e7ff;
+    color: #4338ca;
+  }
+
+  &--secondary {
+    background: #f1f5f9;
+    color: #475569;
+  }
+
+  &--medium {
+    background: #f1f5f9;
+    color: #64748b;
+  }
+
+  &--tertiary {
+    background: #f3e8ff;
+    color: #7c3aed;
+  }
+
+  // Filled variant
+  &--filled {
+    &.status-badge--success {
+      background: #22c55e;
+      color: white;
+    }
+
+    &.status-badge--warning {
+      background: #f59e0b;
+      color: white;
+    }
+
+    &.status-badge--danger {
+      background: #ef4444;
+      color: white;
+    }
+
+    &.status-badge--primary {
+      background: var(--dt-primary);
+      color: white;
+    }
+  }
+
+  // Outlined variant
+  &--outlined {
+    background: transparent;
+    border: 1.5px solid currentColor;
+
+    &.status-badge--success {
+      color: #16a34a;
+    }
+
+    &.status-badge--warning {
+      color: #d97706;
+    }
+
+    &.status-badge--danger {
+      color: #dc2626;
+    }
+
+    &.status-badge--primary {
+      color: var(--dt-primary);
+    }
+  }
+}
+
+// === Action Buttons ===
+
+.action-buttons {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+
+  ion-button {
+    --padding-start: 8px;
+    --padding-end: 8px;
+    --border-radius: 8px;
+    margin: 0;
+
+    ion-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+// === Card View (Responsive) ===
+
+.card-list {
+  display: none;
+  padding: 12px;
+  gap: 12px;
+}
+
+.data-card {
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-border);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: all 0.2s ease;
+
+  &.selected {
+    border-color: var(--dt-primary);
+    background: rgba(var(--dt-primary-rgb), 0.04);
+    box-shadow: 0 0 0 1px var(--dt-primary);
+  }
+
+  &.clickable {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: var(--dt-elevation-medium);
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--dt-border);
+}
+
+.card-selection {
+  display: flex;
+  align-items: center;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.card-field {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--dt-text-muted);
+    flex-shrink: 0;
+  }
+
+  &__value {
+    font-size: 14px;
+    color: var(--dt-text-primary);
+    text-align: right;
+    word-break: break-word;
+    font-weight: 500;
+  }
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--dt-border);
+}
+
+// === Responsive Card Mode ===
+
+.responsive-cards {
+  @media (max-width: 768px) {
+    .table-wrapper {
+      display: none;
+    }
+
+    .card-list {
+      display: block;
+    }
+  }
+}
+
+// === Dark Mode Support ===
+
+:host-context(body.dark) .data-table-container,
+:host-context(.dark) .data-table-container,
+:host-context(.ion-palette-dark) .data-table-container,
+:host-context(html.ion-palette-dark) .data-table-container,
+:host-context([data-theme='dark']) .data-table-container {
+  --dt-surface: #1e293b;
+  --dt-surface-variant: #334155;
+  --dt-border: #475569;
+  --dt-text-primary: #f1f5f9;
+  --dt-text-secondary: #94a3b8;
+  --dt-text-muted: #64748b;
+}
+
+:host-context(body.dark) .loading-overlay,
+:host-context(.dark) .loading-overlay,
+:host-context(.ion-palette-dark) .loading-overlay,
+:host-context(html.ion-palette-dark) .loading-overlay,
+:host-context([data-theme='dark']) .loading-overlay {
+  background: rgba(30, 41, 59, 0.9);
+}
+
+:host-context(body.dark) .status-badge,
+:host-context(.dark) .status-badge,
+:host-context(.ion-palette-dark) .status-badge,
+:host-context(html.ion-palette-dark) .status-badge,
+:host-context([data-theme='dark']) .status-badge {
+  &--success {
+    background: rgba(34, 197, 94, 0.2);
+    color: #4ade80;
+  }
+
+  &--warning {
+    background: rgba(245, 158, 11, 0.2);
+    color: #fbbf24;
+  }
+
+  &--danger {
+    background: rgba(239, 68, 68, 0.2);
+    color: #f87171;
+  }
+
+  &--primary {
+    background: rgba(99, 102, 241, 0.2);
+    color: #a5b4fc;
+  }
+}