@natec/mef-dev-ui-kit 20.1.19 → 20.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@natec/mef-dev-ui-kit",
-  "version": "20.1.19",
+  "version": "20.1.21",
   "description": "MEF.DEV UI Kit Library",
   "author": {
     "name": "NATEC"

package/src/lib/styles/pg/vendor/md-cards-grid.scss

@@ -1,663 +0,0 @@
-@use '../../vars.scss' as *;
-@use 'sass:color' as color;
-
-// ═══════════════════════════════════════════════════════════════════════════
-// MD Cards Grid Custom Theme
-// Bordered card style with shadows and rounded corners
-// ═══════════════════════════════════════════════════════════════════════════
-//
-// USAGE:
-// Add the theme class to the md-grid element:
-// <md-grid class="md-grid-bordered" ...>
-//
-// Or wrap it in a container:
-// <div class="md-grid-bordered">
-//   <md-grid ...>
-// </div>
-//
-// ═══════════════════════════════════════════════════════════════════════════
-// AVAILABLE CSS CLASSES (for reference):
-// ═══════════════════════════════════════════════════════════════════════════
-//
-// HOST / CONTAINER:
-//   .md-grid                    - Main component host
-//   .md-grid-shrink-mode        - Applied when overflowMode="shrink"
-//
-// SCROLL:
-//   .md-grid-scroll-container   - Horizontal scroll wrapper
-//
-// HEADER:
-//   .md-grid-header             - Header container
-//   .md-grid-header-inner       - Header flex container
-//   .md-grid-header-cell        - Individual header cell
-//   .md-grid-header-cell-label  - Header cell text label
-//   .md-grid-header-cell.sortable     - Sortable header cell
-//   .md-grid-header-cell.sort-active  - Currently sorted column
-//   .md-grid-header-cell.sort-asc     - Ascending sort
-//   .md-grid-header-cell.sort-desc    - Descending sort
-//   .md-grid-header-cell.resizeable   - Resizeable column header
-//
-// SORT ICONS:
-//   .md-grid-sort-icon          - Sort icon container
-//   .md-grid-sort-asc           - Ascending sort icon
-//   .md-grid-sort-desc          - Descending sort icon
-//
-// RESIZE:
-//   .md-grid-resize-handle      - Column resize drag handle
-//   body.md-grid-resizing       - Applied to body during resize
-//
-// BODY:
-//   .md-grid-body               - Body container (cards wrapper)
-//
-// GROUPS:
-//   .md-grid-group              - Group container
-//   .md-grid-group-header       - Group header
-//   .md-grid-group-title        - Group title text
-//   .md-grid-group-rows         - Group rows container
-//
-// CARD (ROW):
-//   .md-grid-card               - Individual card/row
-//   .md-grid-card-editing       - Card in edit mode
-//   .md-grid-card-fixed-height  - Card with fixed height (clips content)
-//
-// CELL:
-//   .md-grid-cell               - Individual cell
-//   .md-grid-cell-value         - Cell value wrapper
-//
-// ACTIONS:
-//   .md-grid-actions-cell       - Actions cell container
-//   .md-grid-action-btn         - Action button base
-//   .md-grid-action-edit        - Edit button
-//   .md-grid-action-save        - Save button
-//   .md-grid-action-cancel      - Cancel button
-//
-// ACTION ICONS:
-//   .md-grid-icon-edit          - Edit icon (pencil)
-//   .md-grid-icon-save          - Save icon (checkmark)
-//   .md-grid-icon-cancel        - Cancel icon (X)
-//
-// FOOTER / PAGINATION:
-//   .md-grid-footer             - Footer container
-//   .md-grid-pager              - Pager container
-//   .md-grid-pager-btn          - Pager button
-//   .md-grid-pager-info         - Page info text (e.g., "1 / 5")
-//
-// PAGER ICONS:
-//   .md-grid-icon-first         - First page icon
-//   .md-grid-icon-prev          - Previous page icon
-//   .md-grid-icon-next          - Next page icon
-//   .md-grid-icon-last          - Last page icon
-//
-// ═══════════════════════════════════════════════════════════════════════════
-
-.md-grid-bordered {
-  // ═════════════════════════════════════════════════════════════════════════
-  // HOST STYLES
-  // ═════════════════════════════════════════════════════════════════════════
-
-  &.md-grid,
-  .md-grid {
-    font-family: $base-font-family;
-    font-size: 13px;
-    background: $White;
-    border: 1px solid $Light-Gray-2;
-    border-radius: $default-border-size;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    overflow: hidden;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // SCROLL CONTAINER
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-scroll-container {
-    &::-webkit-scrollbar {
-      height: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $Light-Gray-3;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $Light-Gray-1;
-      border-radius: 4px;
-
-      &:hover {
-        background: $Dark-Gray-2;
-      }
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // HEADER
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-header {
-    background: $White;
-    border-bottom: 1px solid $Light-Gray-2;
-  }
-
-  .md-grid-header-cell {
-    padding: 12px 16px;
-    background: $White;
-    font-size: 12px;
-    font-weight: 600;
-    color: $Dark-Gray-2;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-
-    // No separator between cells in bordered mode
-    &:not(:first-child) {
-      border-left: none;
-    }
-
-    &.sortable {
-      &:hover {
-        background: $Light-Gray-3;
-      }
-
-      &:focus {
-        outline: 2px solid $Link;
-        outline-offset: -2px;
-      }
-    }
-
-    &.sort-active {
-      color: $Link;
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // SORT ICONS
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-sort-icon {
-    margin-left: 4px;
-    color: $Light-Gray-1;
-
-    &.md-grid-sort-asc,
-    &.md-grid-sort-desc {
-      color: $Link;
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // RESIZE HANDLE
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-resize-handle {
-    right: 0;
-    width: 8px;
-
-    &::after {
-      width: 2px;
-    }
-
-    &:hover::after {
-      background: $Link;
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // BODY
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-body {
-    padding: 8px;
-    background: $Light-Gray-3;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // GROUPS
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-group {
-    margin-bottom: 16px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .md-grid-group-header {
-    padding: 8px 12px;
-    margin-bottom: 8px;
-    background: $Light-Gray-2;
-    border-radius: $default-border-size;
-    font-size: 13px;
-    font-weight: 600;
-    color: $Dark-Gray-1;
-  }
-
-  .md-grid-group-rows {
-    gap: 8px;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // CARD (ROW)
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-card {
-    background: $White;
-    border: 1px solid $Light-Gray-2;
-    border-radius: $default-border-size;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-    transition: background-color 0.15s ease, box-shadow 0.15s ease;
-
-    &:hover {
-      background: $Light-Gray-3;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-      transform: none;
-    }
-
-    &.md-grid-card-editing {
-      background: #fffef5;
-      border-color: $Yellow;
-      box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2);
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // CELL
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-cell {
-    padding: 12px 16px;
-    font-size: 14px;
-    color: $Black-Color;
-    border-right: 1px solid $Light-Gray-2;
-
-    &:last-child {
-      border-right: none;
-    }
-  }
-
-  .md-grid-cell-value {
-    line-height: 1.4;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // ACTIONS CELL
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-actions-cell {
-    padding: 8px 12px;
-    gap: 4px;
-    min-width: 80px;
-    border-left: 1px solid $Light-Gray-2;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // ACTION BUTTONS
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-action-btn {
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    transition: background-color 0.15s ease, color 0.15s ease;
-
-    &:hover {
-      transform: none;
-    }
-  }
-
-  .md-grid-action-edit {
-    color: $Link;
-
-    &:hover {
-      background: rgba($Link, 0.1);
-    }
-  }
-
-  .md-grid-action-save {
-    color: $Green;
-
-    &:hover {
-      background: rgba($Green, 0.1);
-    }
-  }
-
-  .md-grid-action-cancel {
-    color: $Red;
-
-    &:hover {
-      background: rgba($Red, 0.1);
-    }
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // ACTION ICONS
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-icon-edit,
-  .md-grid-icon-save,
-  .md-grid-icon-cancel {
-    width: 16px;
-    height: 16px;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // FOOTER / PAGINATION
-  // ═════════════════════════════════════════════════════════════════════════
-
-  .md-grid-footer {
-    padding: 8px 16px;
-    background: $White;
-    border-top: 1px solid $Light-Gray-2;
-    font-size: 12px;
-    color: $Dark-Gray-2;
-  }
-
-  .md-grid-pager {
-    gap: 4px;
-  }
-
-  .md-grid-pager-btn {
-    width: 28px;
-    height: 28px;
-    border: 1px solid $Light-Gray-2;
-    border-radius: 4px;
-    background: $White;
-    color: $Dark-Gray-2;
-
-    &:hover:not(:disabled) {
-      background: $Light-Gray-3;
-      border-color: $Light-Gray-1;
-    }
-
-    &:disabled {
-      opacity: 0.4;
-    }
-  }
-
-  .md-grid-pager-info {
-    padding: 0 12px;
-    font-weight: 500;
-  }
-
-  // ═════════════════════════════════════════════════════════════════════════
-  // RESPONSIVE
-  // ═════════════════════════════════════════════════════════════════════════
-
-  @media (max-width: 768px) {
-    &.md-grid,
-    .md-grid {
-      font-size: 12px;
-    }
-
-    .md-grid-header {
-      display: none;
-    }
-
-    .md-grid-body {
-      padding: 8px;
-    }
-
-    .md-grid-card {
-      flex-direction: column;
-    }
-
-    .md-grid-cell {
-      padding: 10px 12px;
-      border-right: none;
-      border-bottom: 1px solid $Light-Gray-2;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    .md-grid-actions-cell {
-      border-left: none;
-      border-top: 1px solid $Light-Gray-2;
-      justify-content: center;
-    }
-
-    .md-grid-footer {
-      flex-direction: column;
-      gap: 8px;
-      padding: 8px 12px;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// MODIFIER: Zebra striping (alternating row colors)
-// ═══════════════════════════════════════════════════════════════════════════
-
-.md-grid-bordered.zebra {
-  .md-grid-body {
-    background: $White;
-  }
-
-  .md-grid-card {
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-
-    &:nth-child(odd) {
-      background: $White;
-    }
-
-    &:nth-child(even) {
-      background: $Light-Gray-3;
-    }
-
-    &:hover {
-      background: color.mix($Light-Gray-1, $White, 25%) !important;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// MODIFIER: Compact (smaller padding)
-// ═══════════════════════════════════════════════════════════════════════════
-
-.md-grid-bordered.compact {
-  .md-grid-header-cell {
-    padding: 8px 10px;
-    font-size: 11px;
-  }
-
-  .md-grid-body {
-    padding: 6px;
-  }
-
-  .md-grid-group-rows {
-    gap: 4px;
-  }
-
-  .md-grid-card {
-    border-radius: 4px;
-  }
-
-  .md-grid-cell {
-    padding: 8px 10px;
-    font-size: 12px;
-  }
-
-  .md-grid-actions-cell {
-    padding: 6px 8px;
-    min-width: 60px;
-  }
-
-  .md-grid-action-btn {
-    width: 24px;
-    height: 24px;
-  }
-
-  .md-grid-footer {
-    padding: 6px 12px;
-  }
-
-  .md-grid-pager-btn {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════════════
-// DARK THEME
-// ═══════════════════════════════════════════════════════════════════════════
-
-.bg-dark .md-grid-bordered,
-.dark-mode .md-grid-bordered,
-.md-grid-bordered.dark-theme {
-  &.md-grid,
-  .md-grid {
-    background: color.mix($Dark-Gray-1, $Black-Color, 90%);
-    border-color: color.mix($Dark-Gray-2, $Black-Color, 70%);
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  .md-grid-scroll-container {
-    &::-webkit-scrollbar-track {
-      background: color.mix($Dark-Gray-1, $Black-Color, 80%);
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $Dark-Gray-2;
-
-      &:hover {
-        background: $Light-Gray-1;
-      }
-    }
-  }
-
-  .md-grid-header {
-    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
-    border-bottom-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
-  }
-
-  .md-grid-header-cell {
-    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
-    color: $Light-Gray-2;
-
-    &.sortable:hover {
-      background: color.mix($Dark-Gray-1, $Black-Color, 70%);
-    }
-
-    &.sort-active {
-      color: $Link-on-dark;
-    }
-  }
-
-  .md-grid-sort-icon {
-    color: $Dark-Gray-2;
-
-    &.md-grid-sort-asc,
-    &.md-grid-sort-desc {
-      color: $Link-on-dark;
-    }
-  }
-
-  .md-grid-resize-handle {
-    &:hover::after {
-      background: $Link-on-dark;
-    }
-  }
-
-  .md-grid-body {
-    background: color.mix($Dark-Gray-1, $Black-Color, 85%);
-  }
-
-  .md-grid-group-header {
-    background: color.mix($Dark-Gray-2, $Black-Color, 75%);
-    color: $Light-Gray-2;
-  }
-
-  .md-grid-card {
-    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
-    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-
-    &:hover {
-      background: color.mix($Dark-Gray-2, $Black-Color, 80%);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    &.md-grid-card-editing {
-      background: color.mix($Yellow, $Black-Color, 15%);
-      border-color: $Yellow;
-      box-shadow: 0 0 0 3px rgba($Yellow, 0.3);
-    }
-  }
-
-  .md-grid-cell {
-    color: $Light-Gray-2;
-    border-right-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
-  }
-
-  .md-grid-actions-cell {
-    border-left-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
-  }
-
-  .md-grid-action-edit {
-    color: $Link-on-dark;
-
-    &:hover {
-      background: color.mix($Link-on-dark, $Black-Color, 25%);
-    }
-  }
-
-  .md-grid-action-save {
-    color: $Green;
-
-    &:hover {
-      background: color.mix($Green, $Black-Color, 25%);
-    }
-  }
-
-  .md-grid-action-cancel {
-    color: $Red;
-
-    &:hover {
-      background: color.mix($Red, $Black-Color, 25%);
-    }
-  }
-
-  .md-grid-footer {
-    background: color.mix($Dark-Gray-2, $Black-Color, 85%);
-    border-top-color: color.mix($Dark-Gray-1, $Black-Color, 60%);
-    color: $Light-Gray-2;
-  }
-
-  .md-grid-pager-btn {
-    background: color.mix($Dark-Gray-1, $Black-Color, 95%);
-    border-color: color.mix($Dark-Gray-2, $Black-Color, 60%);
-    color: $Light-Gray-2;
-
-    &:hover:not(:disabled) {
-      background: color.mix($Dark-Gray-2, $Black-Color, 80%);
-      border-color: $Light-Gray-1;
-      color: $White;
-    }
-  }
-
-  .md-grid-pager-info {
-    color: $Light-Gray-2;
-  }
-
-  // Zebra in dark mode
-  &.zebra {
-    .md-grid-body {
-      background: color.mix($Dark-Gray-1, $Black-Color, 90%);
-    }
-
-    .md-grid-card {
-      &:nth-child(odd) {
-        background: color.mix($Dark-Gray-1, $Black-Color, 95%);
-      }
-
-      &:nth-child(even) {
-        background: color.mix($Dark-Gray-1, $Black-Color, 85%);
-      }
-
-      &:hover {
-        background: color.mix($Dark-Gray-2, $Black-Color, 75%) !important;
-      }
-    }
-  }
-}