@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,540 +0,0 @@
-:host { display: block; width: 100%; min-width: 0; }
-*, *::before, *::after { box-sizing: border-box; }
-
-/* ── 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;
-  width: 100%;
-  position: relative;
-}
-
-/* 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;
-}
-
-
-/* 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;
-}
-
-.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;
-}
-
-.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;
-}
-
-/* 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; }
-
-/* 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;
-}
-
-/* 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;
-  user-select: none;
-}
-
-.short-actions {
-  display: flex;
-  gap: var(--Size-2);
-  align-items: center;
-  justify-content: center;
-}
-
-.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) 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);
-}
-.skeleton--sm { width: 20px; }
-
-@keyframes shimmer {
-  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); }
-}