commons-shared-web-ui 0.0.55 → 0.0.57

package/src/lib/modules/smart-table/components/smart-table/smart-table.component.scss

@@ -1,685 +0,0 @@
-// Outer wrapper — holds card + pagination as a column
-.smart-table-outer {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.smart-table-wrapper {
-  font-family: var(--st-font-family, 'Roboto', sans-serif);
-  background: var(--st-table-bg, #fff);
-  border-radius: var(--st-border-radius, 8px);
-  box-shadow: var(--st-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0;
-  border: none;
-  margin-bottom: 1.5rem;
-  // No overflow:hidden — it creates a paint containment layer that traps position:fixed dropdown menus
-}
-
-/* Toolbar */
-.st-toolbar {
-  display: flex;
-  justify-content: flex-start; // Search + filters stack left; actions pushed right via margin-left: auto
-  align-items: center;
-  flex-wrap: wrap;
-  padding: var(--st-toolbar-padding, 1.2rem 0rem);
-  background: var(--st-toolbar-bg, #fff);
-  gap: var(--st-toolbar-gap, 1rem);
-  border-bottom: var(--st-toolbar-border-bottom, 1px solid rgba(0, 0, 0, 0.08));
-  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-
-  .st-search {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background: var(--st-search-bg, #f5f5f5);
-    border-radius: var(--st-search-radius, 8px);
-    padding: var(--st-search-wrapper-padding, 0 0.875rem);
-    height: var(--st-search-height, 36px);
-    min-width: var(--st-search-min-width, 200px);
-    width: var(--st-search-width, auto);
-
-    input {
-      padding: 0 0.5rem 0 1.5rem;
-      border: none;
-      background: transparent;
-      font-size: var(--st-font-size, 14px);
-      width: 100%;
-      color: var(--st-text-color, #333);
-      outline: none;
-      line-height: var(--st-search-height, 36px);
-
-      &::placeholder {
-        color: var(--st-search-placeholder-color, #999);
-      }
-    }
-
-    i {
-      position: absolute;
-      left: 0.875rem;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--st-search-icon-color, #888);
-      font-size: 13px;
-      pointer-events: none;
-    }
-  }
-
-  .st-filters {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-
-    .st-filter-item {
-      position: relative;
-    }
-
-    .st-filter-trigger {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: var(--st-filter-trigger-padding, 0 0.75rem);
-      height: var(--st-filter-height, 36px);
-      border: var(--st-filter-border, 1px solid #e0e0e0);
-      border-radius: var(--st-filter-radius, 8px);
-      cursor: pointer;
-      font-size: var(--st-filter-font-size, 14px);
-      color: var(--st-filter-color, #555);
-      background: var(--st-filter-bg, #fff);
-      transition: border-color 0.15s, background 0.15s;
-      white-space: nowrap;
-      user-select: none;
-
-      &:hover {
-        border-color: var(--st-filter-hover-border-color, #bbb);
-        background: var(--st-filter-hover-bg, #fafafa);
-      }
-
-      &.active {
-        border-color: var(--st-filter-active-border-color, #999);
-        background: var(--st-filter-hover-bg, #fafafa);
-
-        .st-filter-chevron {
-          transform: rotate(180deg);
-        }
-      }
-
-      &.has-value {
-        color: var(--st-filter-selected-color, #222);
-        font-weight: 500;
-        border-color: var(--st-filter-selected-border-color, #333);
-      }
-
-      .st-filter-trigger-label {
-        flex: 1;
-      }
-
-      .st-filter-chevron {
-        color: var(--st-filter-chevron-color, #999);
-        flex-shrink: 0;
-        transition: transform 0.15s ease;
-      }
-    }
-
-  }
-
-  .st-actions {
-    display: flex;
-    gap: 0.5rem;
-    margin-left: auto; // Always pin actions to the right edge
-  }
-}
-
-/* Filter panel portal — top-level so styles apply outside .st-filters nesting */
-.st-filter-panel {
-  min-width: var(--st-filter-panel-min-width, 180px);
-  background: var(--st-filter-panel-bg, #fff);
-  border: var(--st-filter-panel-border, 1px solid #ebebeb);
-  border-radius: var(--st-filter-panel-radius, 12px);
-  box-shadow: var(--st-filter-panel-shadow, 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06));
-  padding: var(--st-filter-panel-padding, 6px);
-}
-
-.st-filter-option {
-  display: flex;
-  align-items: center;
-  padding: var(--st-filter-option-padding, 8px 12px);
-  margin-bottom: 0.3rem;
-  border-radius: var(--st-filter-option-radius, 7px);
-  font-size: var(--st-filter-font-size, 14px);
-  color: var(--st-filter-color, #333);
-  cursor: pointer;
-  transition: background 0.1s;
-  white-space: nowrap;
-
-  &:hover {
-    background: var(--st-filter-option-hover-bg, #f5f5f5);
-  }
-
-  &.selected {
-    background: var(--st-filter-option-selected-bg, #f0f0f0);
-    font-weight: 500;
-    color: var(--st-filter-option-selected-color, #111);
-  }
-}
-
-/* Table */
-.st-table-container {
-  overflow-x: auto;
-  overflow-y: visible;
-  padding: 0; // Flush layout — no padding around the table
-
-  // Custom Scrollbar
-  &::-webkit-scrollbar {
-    width: var(--st-scrollbar-width, 8px);
-    height: var(--st-scrollbar-height, 8px);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--st-scrollbar-track-bg, #f1f1f1);
-    border-radius: var(--st-scrollbar-track-radius, 4px);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--st-scrollbar-thumb-bg, #c1c1c1);
-    border-radius: var(--st-scrollbar-thumb-radius, 4px);
-
-    &:hover {
-      background: var(--st-scrollbar-thumb-hover-bg, #a8a8a8);
-    }
-  }
-
-  &.has-sticky-header {
-    .st-table {
-      thead th {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        background: var(--st-header-bg, #f5f5f5);
-        box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-
-  table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    font-size: var(--st-font-size, 14px);
-
-    thead {
-      background: var(--st-header-bg, #f5f5f5);
-
-      th {
-        padding: 0.4rem 1rem;
-        text-align: left;
-        color: var(--st-header-color, #333);
-        font-weight: var(--st-header-weight, 500);
-        font-size: var(--st-header-size, 14px);
-        text-transform: var(--st-header-transform, none);
-        border-top: none;
-        border-bottom: none;
-        white-space: nowrap;
-
-        // Top-left corner radius on first header cell (replaces overflow:hidden clipping)
-        &:first-child {
-          border-top-left-radius: var(--st-border-radius, 8px);
-        }
-
-        // Top-right corner radius on last header cell
-        &:last-child {
-          border-top-right-radius: var(--st-border-radius, 8px);
-        }
-
-        &.sortable {
-          cursor: pointer;
-
-          &:hover {
-            opacity: 0.8;
-          }
-        }
-
-        &.st-checkbox-col {
-          width: 40px;
-          background: var(--st-header-bg, #f5f5f5);
-          position: sticky;
-          left: 0;
-          z-index: 3;
-        }
-
-        &.sticky-col {
-          position: sticky;
-          z-index: 3;
-          background: var(--st-header-bg, #f5f5f5);
-        }
-
-        &.st-actions-col {
-          width: 100px;
-          min-width: 100px;
-          max-width: 100px;
-          background: var(--st-header-bg, #f5f5f5);
-          box-shadow: var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, 0.06));
-          text-align: center;
-          position: sticky;
-          right: 0;
-          z-index: 4;
-        }
-      }
-    }
-
-    tbody {
-      tr {
-        background: var(--st-row-bg, #fff);
-
-        td {
-          padding: 0.5rem 1rem;
-          color: var(--st-text-color, #333);
-          vertical-align: middle;
-          border-bottom: var(--st-row-border, 1px solid #eee);
-          font-weight: 400;
-
-          // Checkbox column — always grey, sticky at left: 0
-          &.st-checkbox-col {
-            // background: var(--st-frozen-col-bg, #f9f9f9);
-            position: sticky;
-            left: 0;
-            z-index: 2;
-          }
-
-          // Only first data column gets grey background
-          &.first-data-col {
-            // background: var(--st-frozen-col-bg, #f9f9f9);
-            color: var(--st-text-color, #333); // Normal black by default
-            font-weight: 500;
-          }
-
-          &.sticky-col {
-            position: sticky;
-            z-index: 2;
-            background: var(--st-row-bg, #fff); // White — grey only for first-data-col
-
-            &:first-child {
-              left: 0;
-            }
-
-            // First data column is the only sticky col that gets grey
-            // &.first-data-col {
-            //   background: var(--st-frozen-col-bg, #f9f9f9);
-            // }
-          }
-
-          &.st-actions-col {
-            width: 100px;
-            min-width: 100px;
-            max-width: 100px;
-            background: var(--st-frozen-col-bg, #f9f9f9);
-            box-shadow: var(--st-actions-col-shadow, -4px 0 8px rgba(0, 0, 0, 0.06));
-            text-align: center;
-            position: sticky;
-            right: 0;
-            z-index: 2;
-          }
-        }
-
-        // No border on the last row; bottom corner radius on first and last cells
-        &:last-child td {
-          border-bottom: none;
-
-          &:first-child {
-            border-bottom-left-radius: var(--st-border-radius, 8px);
-          }
-
-          &:last-child {
-            border-bottom-right-radius: var(--st-border-radius, 8px);
-          }
-        }
-
-        // Row hover — medium weight, first-col text turns red; all cells use the same hover bg
-        &:hover td {
-          font-weight: 500;
-          background: var(--st-row-hover-bg, #f5f5f5);
-
-          &.first-data-col {
-            color: var(--st-first-col-color, #E84646); // Red text only on hover
-          }
-        }
-
-        &.selected td {
-          background: var(--st-row-selected-bg, #f3e5f5);
-
-          &.sticky-col {
-            background: var(--st-row-selected-bg, #f3e5f5);
-          }
-        }
-
-        .clickable-cell {
-          cursor: pointer;
-          transition: background 0.2s;
-        }
-      }
-    }
-
-    // When selectable is enabled, first data column is NOT greyed — checkbox col takes that role visually
-    &.is-selectable {
-      tbody {
-        td.first-data-col {
-          background: var(--st-row-bg, #fff);
-
-          &.sticky-col {
-            background: var(--st-row-bg, #fff);
-          }
-        }
-
-        tr:hover td.first-data-col {
-          background: var(--st-row-hover-bg, #f5f5f5);
-
-          &.sticky-col {
-            background: var(--st-row-hover-bg, #f5f5f5);
-          }
-        }
-
-        tr.selected td.first-data-col {
-          background: var(--st-row-selected-bg, #f3e5f5);
-        }
-      }
-    }
-  }
-}
-
-// Combined sort icon (single SVG, opacity-driven)
-.sort-icon-wrap {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  flex-shrink: 0;
-  margin-left: 4px;
-  position: relative;
-  top: -3px;
-
-  svg {
-    display: block;
-  }
-}
-
-// Selection count strip — shown between toolbar and table header when selectable
-.st-selection-strip {
-  display: flex;
-  align-items: center;
-  padding: var(--st-selection-strip-padding, 0.45rem 1rem);
-  background: var(--st-selection-strip-bg, #fafafa);
-  border-bottom: var(--st-selection-strip-border, 1px solid rgba(0, 0, 0, 0.08));
-
-  .st-selection-count {
-    font-size: var(--st-selection-count-font-size, 13px);
-    color: var(--st-selection-count-color, #444);
-    font-weight: var(--st-selection-count-font-weight, 500);
-  }
-}
-
-// Checkboxes
-input[type="checkbox"] {
-  accent-color: var(--st-checkbox-color, #e63e30);
-  width: var(--st-checkbox-size, 16px);
-  height: var(--st-checkbox-size, 16px);
-  cursor: pointer;
-}
-
-// Badges
-.st-badge {
-  display: inline-block;
-  padding: var(--st-badge-padding, 4px 12px);
-  border-radius: var(--st-badge-radius, 12px);
-  font-size: var(--st-badge-font-size, 12px);
-  font-weight: var(--st-badge-font-weight, 500);
-  text-align: center;
-  white-space: nowrap;
-
-  &.badge-success {
-    background: var(--st-badge-success-bg, #e8f5e9);
-    color: var(--st-badge-success-color, #2e7d32);
-  }
-
-  &.badge-warning {
-    background: var(--st-badge-warning-bg, #fff3e0);
-    color: var(--st-badge-warning-color, #ef6c00);
-  }
-
-  &.badge-danger {
-    background: var(--st-badge-danger-bg, #ffebee);
-    color: var(--st-badge-danger-color, #c62828);
-  }
-
-  &.badge-info {
-    background: var(--st-badge-info-bg, #e3f2fd);
-    color: var(--st-badge-info-color, #1565c0);
-  }
-
-  &.badge-neutral {
-    background: var(--st-badge-neutral-bg, #f5f5f5);
-    color: var(--st-badge-neutral-color, #616161);
-  }
-}
-
-.st-row-actions {
-  .action-buttons {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.st-action-icon {
-  margin-right: var(--st-action-icon-margin, 8px);
-}
-
-.st-dropdown-container {
-  position: relative;
-  display: inline-block;
-}
-
-.st-dropdown-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover .action-circle {
-    background: rgba(0, 0, 0, 0.06);
-  }
-}
-
-// Circle wrapping the three-dot icon
-.action-circle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--st-action-circle-size, 32px);
-  height: var(--st-action-circle-size, 32px);
-  border-radius: 50%;
-  background: var(--st-table-bg, #fff);
-  border: none;
-  color: var(--st-text-color, #555);
-  font-size: 1rem;
-  transition: background 0.15s;
-}
-
-.st-dropdown-menu {
-  min-width: var(--st-dropdown-min-width, 150px);
-  background: var(--st-dropdown-bg, #fff);
-  border: var(--st-dropdown-border, 1px solid #e0e0e0);
-  border-radius: var(--st-dropdown-radius, 8px);
-  box-shadow: var(--st-dropdown-shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  padding: var(--st-dropdown-padding, 4px);
-  margin-top: 4px;
-}
-
-.st-dropdown-item {
-  background: transparent;
-  border: none;
-  padding: var(--st-dropdown-item-padding, 8px 12px);
-  border-radius: var(--st-dropdown-item-radius, 6px);
-  text-align: left;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: var(--st-font-size, 14px);
-  color: var(--st-text-color, #333);
-  transition: background 0.15s;
-
-  &:hover {
-    background: var(--st-dropdown-item-hover-bg, #f5f5f5);
-  }
-
-  .st-action-icon {
-    margin-right: 8px;
-    width: 16px;
-    text-align: center;
-  }
-}
-
-.no-data {
-  padding: 2rem;
-  color: var(--st-no-data-color, #888);
-  text-align: center;
-}
-
-
-/* Pagination — inside the card, bottom edge */
-.st-pagination {
-  padding: var(--st-pagination-padding, 0.6rem 1rem);
-  border-top: 1px solid rgba(0, 0, 0, 0.07);
-  background: var(--st-table-bg, #fff);
-  border-bottom-left-radius: var(--st-border-radius, 8px);
-  border-bottom-right-radius: var(--st-border-radius, 8px);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .st-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-
-    .st-search,
-    .st-filters,
-    .st-actions,
-    .st-search input {
-      width: 100%;
-    }
-  }
-
-  .st-table-container {
-    font-size: 13px;
-  }
-}
-
-/* Loader */
-.st-table-container {
-  position: relative;
-  // min-height: 200px;
-
-  .st-table.loading-data {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .st-check-loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 10;
-
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 4px solid var(--st-spinner-border-color, rgba(0, 0, 0, 0.1));
-      border-left-color: var(--st-loader-color);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-  }
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-// Inline editing styles
-.st-stacked-inputs {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  width: 100%;
-}
-
-.st-cell-input,
-.st-cell-select {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0.35rem 0.5rem;
-  font-family: inherit;
-  font-size: var(--st-font-size, 14px);
-  color: var(--st-text-color, #333);
-  background-color: var(--st-cell-input-bg, #fcfcfc);
-  border: var(--st-cell-input-border, 1px solid #dee2e6);
-  border-radius: var(--st-border-radius, 8px);
-  outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
-
-  &:focus {
-    border-color: var(--st-cell-input-focus-outline-color, #00bcd4);
-  }
-
-  &:disabled {
-    background-color: #f1f3f5;
-    color: #6c757d;
-    cursor: not-allowed;
-    border-color: #dee2e6;
-  }
-}
-
-.edit-mode-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.st-date-cell {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  width: 100%;
-
-  .st-cell-input {
-    flex: 1;
-    min-width: 0;
-  }
-
-  mat-datepicker-toggle {
-    flex-shrink: 0;
-
-    ::ng-deep .mat-mdc-icon-button {
-      width: 28px;
-      height: 28px;
-      padding: 2px;
-      color: var(--st-text-color, #333);
-    }
-  }
-}