@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-table/dropi-table.css

@@ -1,76 +1,516 @@
-:host { display: block; width: 100%; }
+:host { display: block; width: 100%; min-width: 0; }
 *, *::before, *::after { box-sizing: border-box; }
 
-.table-wrap {
+/* ── Contenedor principal ─────────────────────────────────────────── */
+.table-container {
   width: 100%;
+  min-width: 0;
+  border-radius: var(--Border-3);
+  padding: 0 var(--Size-4) var(--Size-4) var(--Size-4);
+  background-color: var(--Neutral-White);
+}
+
+/* ── Search / toolbar ─────────────────────────────────────────────── */
+.search-container {
+  margin-block: var(--Size-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-4);
+}
+
+.table-title {
+  padding-block: var(--Size-2);
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-bold);
+  color: var(--Gray-Gray-700);
+  margin: 0;
+}
+
+.search-actions {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--Size-3);
+  width: 100%;
+}
+
+.search-actions dropi-input { flex: 1; }
+
+.search-actions.only-filter { justify-content: flex-end; }
+
+.table-tools { display: flex; justify-content: flex-end; }
+
+.column-selector-container { position: relative; }
+
+.column-selector-btn {
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.column-selector-btn:hover { background: var(--Gray-Gray-50); }
+
+.column-selector-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: min(320px, 88vw);
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Border-2);
+  background: var(--Neutral-White);
+  box-shadow: var(--Shadow-medium);
+  z-index: 20;
+  padding: var(--Size-1);
+}
+
+.column-selector-footer {
+  border-top: 1px solid var(--Gray-Gray-100);
+  margin-top: var(--Size-1);
+  padding: var(--Size-2) var(--Size-4);
+  display: flex;
+  align-items: center;
+}
+
+.column-selector-all {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Size-2);
+  color: var(--Gray-Gray-700);
+  font-size: var(--font-size-s);
+  cursor: pointer;
+  user-select: none;
+}
+
+.column-selector-option {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2);
+  padding: var(--Size-2) var(--Size-3);
+  font-size: var(--font-size-s);
+  color: var(--Gray-Gray-700);
+  cursor: pointer;
+  border-radius: var(--Border-1);
+}
+.column-selector-option:hover { background: var(--Gray-Gray-50); }
+
+/* ── Table wrapper ────────────────────────────────────────────────── */
+.table-wrapper {
   overflow-x: auto;
-  border: 1px solid var(--Gray-Gray-100, #eceef4);
-  border-radius: var(--Border-2, 8px);
+  width: 100%;
+  position: relative;
 }
 
-.table {
+/* Cuando hay acciones, el wrapper es más angosto igual que el host Angular
+   para que la columna sticky quede siempre visible sin tapar contenido */
+.table-wrapper.has-sticky-actions { width: 100%; }
+
+.table-wrapper::-webkit-scrollbar        { height: 6px; }
+.table-wrapper::-webkit-scrollbar-track  { background: transparent; }
+.table-wrapper::-webkit-scrollbar-thumb  { background: var(--Gray-Gray-200, #c3c9d9); border-radius: 3px; }
+.table-wrapper::-webkit-scrollbar-thumb:hover { background: var(--Gray-Gray-400, #858ea6); }
+
+/* ── Table ────────────────────────────────────────────────────────── */
+.custom-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
-  background: var(--Neutral-White, #fff);
-}
-
-/* Header */
-.table__th {
-  padding: var(--Size-3, 12px) var(--Size-3, 12px);
-  background: var(--Gray-Gray-50, #f7f8fa);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  white-space: nowrap;
-  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+}
+
+
+/* th/td shared separator via ::after */
+.custom-table th,
+.custom-table td {
+  position: relative;
+  padding: var(--Size-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--Gray-Gray-700);
+}
+
+.custom-table th::after,
+.custom-table td::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--Gray-Gray-100);
+}
+
+/* th */
+.custom-table th {
+  height: 55px;
   user-select: none;
 }
-.table__th--check { width: 40px; }
-.table__th--sortable { cursor: pointer; }
-.table__th--sortable:hover { background: var(--Gray-Gray-100, #eceef4); }
 
-.table__th-inner {
-  display: inline-flex;
+.custom-table th.sortable { cursor: pointer; }
+
+/* td */
+.custom-table td {
+  height: 80px;
+  min-width: 100px;
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+}
+
+/* Headers inner */
+.headers-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-1);
+}
+
+.headers-container.align-left  { align-items: flex-start; }
+.headers-container.align-right { align-items: flex-end; }
+
+.headers {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
   align-items: center;
   gap: 4px;
 }
 
-/* Body */
-.table__tr {
-  cursor: pointer;
-  transition: background 0.15s;
+.headers span {
+  font-weight: var(--font-weight-bold);
+  color: var(--Gray-Gray-600);
+  font-size: var(--font-size-xs);
+  text-align: center;
+}
+
+.headers.align-left  span { text-align: left; }
+.headers.align-right span { text-align: right; }
+
+.order-icons {
+  display: flex;
+  flex-direction: column;
+}
+
+.order-icons dropi-icon {
+  height: 6px;
+  display: flex;
+}
+
+/* Checkbox column */
+.checkbox-header {
+  width: fit-content;
+  min-width: fit-content;
+  max-width: fit-content;
+  text-align: center;
+  padding: var(--Size-3) !important;
+}
+
+.custom-table.has-checkbox td:first-child {
+  width: fit-content;
+  min-width: fit-content;
+  max-width: fit-content;
+  text-align: center;
+  padding: 8px !important;
 }
-.table__tr:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-.table__tr--selected { background: var(--Primary-Primary-50, #fff5eb); }
 
-.table--striped .table__tr:nth-child(even) { background: var(--Gray-Gray-50, #f7f8fa); }
-.table--striped .table__tr:nth-child(even):hover { background: var(--Gray-Gray-100, #eceef4); }
+/* Row */
+.table-row:hover { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }
+.table-row:hover td:last-child { background-color: var(--Gray-Gray-50); transition: background-color 0.3s ease; }
+.table-row.sub-row td:first-child { padding-left: 2rem !important; }
 
-.table__td {
-  padding: var(--Size-3, 12px);
-  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+/* Cell content */
+.cell-content {
+  display: inline-block;
+  width: 100%;
+  text-align: left;
+}
+
+/* ── Actions column (sticky) ─────────────────────────────────── */
+td.actions,
+th.actions {
+  position: sticky;
+  right: 0;
+  z-index: 2;
+  background-color: var(--Neutral-White);
+  width: 120px;
+  min-width: 120px;
+  max-width: 120px;
+  text-align: center;
+}
+
+td.actions {
   vertical-align: middle;
 }
-.table__td--check { width: 40px; }
 
-.table__td--empty {
+/* Forzar que el interior de la celda de acciones se centre siempre */
+td.actions > div {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 100%;
+  height: 100%;
+}
+
+.table-row:hover td.actions {
+  background-color: var(--Gray-Gray-50);
+  transition: background-color 0.3s ease;
+}
+
+.actions-header {
+  width: 100%;
   text-align: center;
-  padding: var(--Size-8, 48px) var(--Size-4, 16px);
-  color: var(--Gray-Gray-400, #858ea6);
+  user-select: none;
+}
+
+.short-actions {
+  display: flex;
+  gap: var(--Size-2);
+  align-items: center;
+  justify-content: center;
 }
-.table__td--empty p { margin: var(--Size-2, 8px) 0 0; }
 
-/* Skeleton */
+.action-icon { cursor: pointer; }
+
+.action-button { position: relative; }
+
+.actions-menu {
+  position: absolute;
+  top: 0;
+  right: 80px;
+  padding: var(--Size-2);
+  border-radius: var(--Border-2);
+  background-color: var(--Neutral-White);
+  box-shadow: var(--Shadow-medium);
+  z-index: 10;
+  animation: fadeIn 0.3s ease-in-out forwards;
+}
+
+.action-item {
+  padding: var(--Size-2);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-600);
+  height: 45px;
+  width: 190px;
+  display: flex;
+  gap: var(--Size-4);
+  align-items: center;
+  justify-content: left;
+  cursor: pointer;
+  border-radius: var(--Border-1);
+}
+.action-item:hover { background-color: var(--Gray-Gray-50); }
+
+/* ── Cell types ───────────────────────────────────────────────────── */
+.table-labels {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+  white-space: nowrap;
+}
+
+.table-labels.multiline {
+  white-space: pre;
+  line-height: 1.6;
+}
+
+.text-wrap-label {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+  white-space: normal;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.5;
+}
+
+.date-label {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.date-label span {
+  font-weight: var(--font-weight-regular);
+  color: var(--Gray-Gray-600);
+  white-space: nowrap;
+  font-size: var(--font-size-s);
+}
+
+.flag-container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--Size-3);
+}
+
+.flag-container span {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+}
+
+.text-icon-label {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: var(--Size-2);
+  align-items: center;
+}
+
+.text-icon-label span {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+}
+
+.image-label {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.img-container {
+  display: flex;
+  width: 24px;
+  padding-bottom: var(--Size-1);
+  align-items: center;
+}
+
+.img-container img {
+  border-radius: 60px;
+  height: 24px;
+  width: 24px;
+  object-fit: cover;
+}
+
+.container-cell {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.status-label {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Size-1);
+}
+
+.status-dot {
+  display: flex;
+  gap: var(--Size-2);
+  align-items: center;
+}
+
+.status-text {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-700);
+}
+
+.status-description {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+  color: var(--Gray-Gray-600);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dot-low    { background-color: var(--Success-Success-500); }
+.dot-medium { background-color: var(--Warning-Warning-500); }
+.dot-high   { background-color: var(--Error-Error-500); }
+
+.low-opacity    { opacity: 0.5; }
+.highlight-column { background: var(--Primary-Primary-50); }
+
+.text-link-label {
+  display: flex;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  gap: var(--Size-1);
+}
+
+.text-link-label span {
+  color: var(--Gray-Gray-600);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+}
+
+.text-link-label a {
+  color: var(--Info-Info-500);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
+}
+
+/* ── Empty state ──────────────────────────────────────────────────── */
+.empty-table {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  min-height: 400px;
+}
+
+.empty-message-container {
+  display: flex;
+  width: 420px;
+  padding: var(--Size-4);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Size-4);
+  text-align: center;
+  color: var(--Gray-Gray-500);
+  font-size: var(--font-size-s);
+}
+
+/* ── Pagination ───────────────────────────────────────────────────── */
+.pagination {
+  margin-top: var(--Size-4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page-size-selector {
+  display: flex;
+  gap: 5px;
+  align-items: baseline;
+}
+
+.page-size-selector label {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-700);
+}
+
+.page-size-selector select {
+  width: fit-content;
+  height: 29px;
+  border-radius: var(--Border-2);
+  padding: var(--Size-1);
+  border: 1px solid var(--Gray-Gray-200);
+  color: var(--Gray-Gray-500);
+  background: var(--Neutral-White);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+}
+
+.total-results {
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-600);
+}
+
+/* ── Skeleton ─────────────────────────────────────────────────────── */
 .skeleton {
   height: 14px;
-  background: linear-gradient(90deg, var(--Gray-Gray-100, #eceef4) 25%, var(--Gray-Gray-50, #f7f8fa) 50%, var(--Gray-Gray-100, #eceef4) 75%);
+  background: linear-gradient(90deg, var(--Gray-Gray-100) 25%, var(--Gray-Gray-50) 50%, var(--Gray-Gray-100) 75%);
   background-size: 200% 100%;
   animation: shimmer 1.4s infinite;
-  border-radius: var(--Border-1, 4px);
+  border-radius: var(--Border-1);
 }
 .skeleton--sm { width: 20px; }
 
@@ -78,3 +518,23 @@
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Responsive ───────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .search-actions { flex-direction: column; align-items: stretch; }
+  .column-selector-menu { left: 0; right: 0; width: 100%; max-height: 45vh; overflow-y: auto; }
+  .pagination { flex-direction: column; align-items: center; gap: var(--Size-3); }
+
+  td.actions,
+  th.actions {
+    width: 60px;
+    min-width: 60px;
+  }
+
+  .table-wrapper.has-sticky-actions { width: calc(100% - 60px); }
+}