@acontplus/ng-components 2.1.29 → 2.1.31

package/src/lib/components/button/button.scss

@@ -0,0 +1,297 @@
+:root {
+  --acp-secondary: #e0e0e0;
+  --acp-secondary-on: #000000;
+  --acp-success: #4caf50;
+  --acp-success-on: #ffffff;
+  --acp-danger: #ba1a1a;
+  --acp-danger-on: #ffffff;
+  --acp-warning: #ff9800;
+  --acp-warning-on: #000000;
+  --acp-info: #2196f3;
+  --acp-info-on: #ffffff;
+  --acp-dark: #212121;
+  --acp-dark-on: #ffffff;
+}
+
+.dark-theme {
+  --acp-secondary: #424242;
+  --acp-secondary-on: #ffffff;
+  --acp-success: #81c784;
+  --acp-success-on: #1b5e20;
+  --acp-danger: #ef5350;
+  --acp-danger-on: #b71c1c;
+  --acp-warning: #ffb74d;
+  --acp-warning-on: #e65100;
+  --acp-info: #64b5f6;
+  --acp-info-on: #0d47a1;
+  --acp-dark: #616161;
+  --acp-dark-on: #ffffff;
+}
+
+acp-button {
+  display: inline-block;
+  // margin: 4px;
+}
+
+// Button content alignment - center icon and text vertically
+.mat-mdc-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+button[matbutton='tonal'],
+.mat-mdc-fab.mdc-fab--extended {
+  .mdc-button__label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+// Filled buttons - target Material's generated classes
+.mat-mdc-button.mat-btn-secondary,
+.mat-mdc-unelevated-button.mat-btn-secondary {
+  background-color: var(--acp-secondary) !important;
+  color: var(--acp-secondary-on) !important;
+}
+
+.mat-mdc-button.mat-btn-secondary:hover,
+.mat-mdc-unelevated-button.mat-btn-secondary:hover {
+  background-color: color-mix(in srgb, var(--acp-secondary) 80%, black) !important;
+}
+
+.mat-mdc-button.mat-btn-success,
+.mat-mdc-unelevated-button.mat-btn-success {
+  background-color: var(--acp-success) !important;
+  color: var(--acp-success-on) !important;
+}
+
+.mat-mdc-button.mat-btn-danger,
+.mat-mdc-unelevated-button.mat-btn-danger {
+  background-color: var(--acp-danger) !important;
+  color: var(--acp-danger-on) !important;
+}
+
+.mat-mdc-button.mat-btn-warning,
+.mat-mdc-unelevated-button.mat-btn-warning {
+  background-color: var(--acp-warning) !important;
+  color: var(--acp-warning-on) !important;
+}
+
+.mat-mdc-button.mat-btn-info,
+.mat-mdc-unelevated-button.mat-btn-info {
+  background-color: var(--acp-info) !important;
+  color: var(--acp-info-on) !important;
+}
+
+.mat-mdc-button.mat-btn-dark,
+.mat-mdc-unelevated-button.mat-btn-dark {
+  background-color: var(--acp-dark) !important;
+  color: var(--acp-dark-on) !important;
+}
+
+// Tonal buttons - lighter background
+button[matbutton='tonal'].mat-btn-success {
+  background-color: color-mix(in srgb, var(--acp-success) 12%, transparent) !important;
+  color: var(--acp-success) !important;
+}
+
+button[matbutton='tonal'].mat-btn-danger {
+  background-color: color-mix(in srgb, var(--acp-danger) 12%, transparent) !important;
+  color: var(--acp-danger) !important;
+}
+
+button[matbutton='tonal'].mat-btn-warning {
+  background-color: color-mix(in srgb, var(--acp-warning) 12%, transparent) !important;
+  color: var(--acp-warning) !important;
+}
+
+button[matbutton='tonal'].mat-btn-info {
+  background-color: color-mix(in srgb, var(--acp-info) 12%, transparent) !important;
+  color: var(--acp-info) !important;
+}
+
+button[matbutton='tonal'].mat-btn-dark {
+  background-color: color-mix(in srgb, var(--acp-dark) 12%, transparent) !important;
+  color: var(--acp-dark) !important;
+}
+
+// Text buttons - only text color
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-secondary {
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-success {
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-danger {
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-warning {
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-info {
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-dark {
+  color: var(--acp-dark) !important;
+}
+
+// Elevated buttons - surface background with colored text, container background on hover
+.mat-mdc-raised-button.mat-btn-secondary {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-success {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-success:hover {
+  background-color: color-mix(in srgb, var(--acp-success) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-danger {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-danger:hover {
+  background-color: color-mix(in srgb, var(--acp-danger) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-warning {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-warning:hover {
+  background-color: color-mix(in srgb, var(--acp-warning) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-info {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-info:hover {
+  background-color: color-mix(in srgb, var(--acp-info) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-dark {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-dark) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-dark:hover {
+  background-color: color-mix(in srgb, var(--acp-dark) 12%, transparent) !important;
+}
+
+// Outlined buttons
+.mat-mdc-outlined-button.mat-btn-secondary {
+  border-color: var(--mat-sys-outline) !important;
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-success {
+  border-color: var(--acp-success) !important;
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-danger {
+  border-color: var(--acp-danger) !important;
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-warning {
+  border-color: var(--acp-warning) !important;
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-info {
+  border-color: var(--acp-info) !important;
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-dark {
+  border-color: var(--acp-dark) !important;
+  color: var(--acp-dark) !important;
+}
+
+// FAB buttons (regular, mini, and extended)
+.mat-mdc-fab.mat-btn-secondary,
+.mat-mdc-mini-fab.mat-btn-secondary {
+  background-color: var(--acp-secondary) !important;
+  color: var(--acp-secondary-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-success,
+.mat-mdc-mini-fab.mat-btn-success {
+  background-color: var(--acp-success) !important;
+  color: var(--acp-success-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-danger,
+.mat-mdc-mini-fab.mat-btn-danger {
+  background-color: var(--acp-danger) !important;
+  color: var(--acp-danger-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-warning,
+.mat-mdc-mini-fab.mat-btn-warning {
+  background-color: var(--acp-warning) !important;
+  color: var(--acp-warning-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-info,
+.mat-mdc-mini-fab.mat-btn-info {
+  background-color: var(--acp-info) !important;
+  color: var(--acp-info-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-dark,
+.mat-mdc-mini-fab.mat-btn-dark {
+  background-color: var(--acp-dark) !important;
+  color: var(--acp-dark-on) !important;
+}
+
+// Icon buttons
+.mat-mdc-icon-button.mat-btn-secondary {
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-success {
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-danger {
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-warning {
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-info {
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-dark {
+  color: var(--acp-dark) !important;
+}

package/src/lib/components/cards/dynamic-card/dynamic-card.scss

@@ -0,0 +1,131 @@
+//@use "@angular/material" as mat;
+//
+//:host {
+//  display: block;
+//  box-sizing: border-box;
+//
+//  mat-card {
+//    height: 100%;
+//    display: flex;
+//    flex-direction: column;
+//    transition:
+//            box-shadow 200ms ease,
+//            transform 200ms ease;
+//    overflow: hidden;
+//
+//    &:hover {
+//      // mat.elevation is already theme-aware.
+//      @include mat.elevation(4);
+//      transform: translateY(-2px);
+//    }
+//
+//    &-header {
+//      padding: 1rem 1rem 0.5rem;
+//
+//      mat-card-title {
+//        font-weight: 500;
+//        line-height: 1.2;
+//        margin-bottom: 0.25rem;
+//      }
+//
+//      mat-card-subtitle {
+//        // Use a theme color for subtitles, e.g., text-secondary.
+//        // The `mat.get-theme-color` function allows you to get specific colors from your theme.
+//        // Here, 'text' refers to the text palette and 'secondary' is a shade within it.
+//        // You might need to adjust 'secondary' based on your specific theme definition
+//        // or use `mat.get-color-from-palette($theme-palette, $color-shade)`.
+//        color: mat.get-theme-color(text, secondary);
+//        line-height: 1.3;
+//      }
+//
+//      [mat-card-avatar] {
+//        width: 40px;
+//        height: 40px;
+//        border-radius: 50%;
+//        margin-right: 1rem;
+//        // Use a theme color for the border, e.g., divider or text-disabled.
+//        border: 2px solid mat.get-theme-color(divider);
+//      }
+//    }
+//
+//    &-content {
+//      flex: 1;
+//      padding: 1rem;
+//      overflow: auto;
+//
+//      &:not(:first-child) {
+//        padding-top: 0;
+//      }
+//    }
+//
+//    &.mat-card-divider {
+//      // Use a theme color for the divider.
+//      border-top: 1px solid mat.get-theme-color(divider);
+//      padding-top: 0.5rem;
+//    }
+//
+//    &-actions {
+//      padding: 0.5rem 1rem 1rem;
+//      margin: 0;
+//      min-height: 52px;
+//      box-sizing: border-box;
+//      display: flex;
+//      flex-wrap: wrap;
+//      gap: 0.5rem;
+//
+//      &[align="end"] {
+//        justify-content: flex-end;
+//      }
+//
+//      &[align="center"] {
+//        justify: center;
+//      }
+//
+//      &[align="start"] {
+//        justify-content: flex-start;
+//      }
+//
+//      button {
+//        margin: 0 0.25rem;
+//        min-width: 88px; // Material spec minimum button width
+//
+//        mat-icon {
+//          margin-right: 0.5rem;
+//          font-size: 18px;
+//          height: 18px;
+//          width: 18px;
+//        }
+//      }
+//    }
+//  }
+//
+//  // Responsive adjustments
+//  @media (max-width: 600px) {
+//    mat-card {
+//      &-header {
+//        padding: 0.75rem 0.75rem 0.25rem;
+//
+//        [mat-card-avatar] {
+//          width: 36px;
+//          height: 36px;
+//          margin-right: 0.75rem;
+//        }
+//      }
+//
+//      &-content {
+//        padding: 0.75rem;
+//      }
+//
+//      &-actions {
+//        padding: 0.5rem;
+//        flex-direction: column;
+//        gap: 0.5rem;
+//
+//        button {
+//          width: 100%;
+//          margin: 0.25rem 0;
+//        }
+//      }
+//    }
+//  }
+//}

package/src/lib/components/data-grid/_grid-theme.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core/tokens/token-utils';
+@use './m3-grid';
+
+@mixin base($theme) {
+  $tokens: map.get(m3-grid.get-tokens($theme), base);
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-grid.get-tokens($theme), color);
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-grid.get-tokens($theme), typography);
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-grid.get-tokens($theme), density);
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return ((namespace: grid, tokens: token-utils.get-overrides(m3-grid.get-tokens(), grid)));
+}
+
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme, $color-variant: null) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if mat.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if mat.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if mat.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/src/lib/components/data-grid/_m3-grid.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use './../../../core/tokens/m3-utils';
+@use './../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      grid-container-shape: map.get($system, corner-medium),
+      grid-table-cell-min-width: 80px,
+    ),
+    color: (
+      grid-outline-color: map.get($system, outline-variant),
+      grid-column-menu-text-color: map.get($system, on-surface-variant),
+      grid-column-menu-divider-color: map.get($system, outline-variant),
+      grid-table-footer-background-color: map.get($system, surface-container),
+      grid-table-row-striped-background-color: map.get($system, surface-container),
+      grid-table-row-hover-background-color: map.get($system, secondary-container),
+      grid-table-row-selected-background-color: map.get($system, secondary-container),
+      grid-table-row-selected-hover-background-color: map.get($system, primary-container),
+      grid-table-cell-selected-outline-color: map.get($system, primary),
+      grid-resizable-handle-active-background-color: map.get($system, primary),
+      grid-resizable-handle-hover-background-color: map.get($system, primary),
+      grid-resizable-handle-disabled-background-color: map.get($system, outline-variant),
+    ),
+    typography: (),
+    density: (
+      grid-row-expand-button-size: 40px,
+    ),
+  );
+
+  @return $tokens;
+}

package/src/lib/components/data-grid/cell/cell.scss

@@ -0,0 +1,38 @@
+// .acp-grid-img {
+//   display: inline-block;
+//   width: 32px;
+//   border-radius: 4px;
+//   vertical-align: middle;
+// }
+
+.acp-placeholder-box {
+  width: 50px;
+  height: 50px;
+  background: #f0f0f0;
+  border: 2px dashed #c2c2c2;
+  border-radius: 50%;
+
+  /* Centrado perfecto */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  color: #6b7280; /* gris elegante */
+  font-size: 0.85rem;
+  gap: 8px;
+}
+
+.acp-placeholder-icon {
+  width: 32px;
+  height: 32px;
+  color: #3b82f6; /* azul bonito */
+}
+
+.acp-placeholder-image {
+  width: 50px;
+  height: 50px;
+  object-fit: cover;
+  border-radius: 50%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}

package/src/lib/components/data-grid/column-menu/column-menu.scss

@@ -0,0 +1,117 @@
+@use '@angular/material' as mat;
+@use './../../../../core/tokens/token-utils';
+@use './../m3-grid';
+
+$fallbacks: m3-grid.get-tokens();
+
+.acp-grid-column-menu,
+.acp-grid-column-pin-list {
+  color: token-utils.slot(grid-column-menu-text-color, $fallbacks);
+}
+
+.acp-grid-column-menu {
+  .mat-mdc-menu-content {
+    padding: 0;
+  }
+}
+
+.acp-grid-column-menu-body {
+  max-height: 65vh;
+  padding: 8px 16px;
+  overflow: auto;
+}
+
+.acp-grid-column-menu-header,
+.acp-grid-column-menu-footer {
+  position: sticky;
+  z-index: 1;
+  padding: 8px 16px;
+}
+
+.acp-grid-column-menu-header {
+  top: 0;
+  border-bottom: 1px solid token-utils.slot(grid-column-menu-divider-color, $fallbacks);
+}
+
+.acp-grid-column-menu-footer {
+  bottom: 0;
+  border-top: 1px solid token-utils.slot(grid-column-menu-divider-color, $fallbacks);
+}
+
+.acp-grid-column-menu-list {
+  display: block;
+  max-width: 100%;
+
+  &.cdk-drop-list-dragging {
+    .acp-grid-column-menu-item:not(.cdk-drag-placeholder) {
+      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+}
+
+.acp-grid-column-menu-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &.cdk-drag-disabled {
+    .cdk-drag-handle {
+      opacity: 0.35;
+      cursor: no-drop;
+    }
+  }
+
+  .cdk-drag-handle {
+    cursor: move;
+  }
+
+  &.cdk-drag-preview {
+    border-radius: 4px;
+    box-shadow: 0 0 0 1px token-utils.slot(grid-outline-color, $fallbacks);
+  }
+
+  &.cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  &.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.acp-grid-column-pin-button.mat-mdc-icon-button {
+  .mat-mdc-button-touch-target {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.acp-grid-column-pin-option.mat-menu-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+
+.acp-grid-column-pin-option-placeholder {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+}
+
+.acp-grid-column-pin-option-text {
+  padding: 0 8px;
+  vertical-align: middle;
+}
+
+.acp-grid-column-drag-handle-icon:hover {
+  cursor: move;
+}
+
+.acp-grid-column-menu-item-label.mat-mdc-checkbox {
+  .mat-mdc-checkbox-touch-target {
+    width: 100%;
+    height: 100%;
+  }
+}