valtech-components 2.0.795 → 2.0.797

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

@@ -1,919 +0,0 @@
-@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;
-  }
-}