@acontplus/ng-components 2.1.30 → 2.1.32

package/src/lib/components/drawer/_drawer-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './../../../core/tokens/token-utils';
+@use './m3-drawer';
+
+@mixin base($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), base);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), color);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), typography);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-drawer.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: drawer, tokens: token-utils.get-overrides(m3-drawer.get-tokens(), drawer)));
+}
+
+@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/drawer/_m3-drawer.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use './../../../core/style/elevation';
+@use './../../../core/tokens/m3-utils';
+@use './../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      drawer-container-shape: map.get($system, corner-large),
+      drawer-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      drawer-container-background-color: map.get($system, surface),
+      drawer-container-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/src/lib/components/drawer/drawer-container.scss

@@ -0,0 +1,97 @@
+/* stylelint-disable keyframes-name-pattern */
+@use '@angular/cdk' as cdk;
+@use '@angular/material' as mat;
+@use './../../../core/tokens/token-utils';
+@use './m3-drawer';
+
+$fallbacks: m3-drawer.get-tokens();
+
+@keyframes _acp-drawer-enter {
+  from {
+    box-shadow: none;
+    visibility: hidden;
+  }
+
+  to {
+    transform: none;
+    visibility: visible;
+  }
+}
+
+@keyframes _acp-drawer-exit {
+  from {
+    transform: none;
+    visibility: visible;
+  }
+
+  to {
+    box-shadow: none;
+    visibility: hidden;
+  }
+}
+
+.acp-drawer-container {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  overflow: auto;
+  outline: 0;
+  box-sizing: border-box;
+
+  // We don't use this, but it's useful for consumers to position
+  // elements (e.g. close buttons) inside the bottom sheet.
+  position: relative;
+  background-color: token-utils.slot(drawer-container-background-color, $fallbacks);
+  color: token-utils.slot(drawer-container-text-color, $fallbacks);
+  box-shadow: token-utils.slot(drawer-container-elevation-shadow, $fallbacks);
+
+  @include cdk.high-contrast(active, off) {
+    outline: 1px solid;
+  }
+}
+
+.acp-drawer-container-animations-enabled {
+  &.acp-drawer-container-enter {
+    animation: _acp-drawer-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  &.acp-drawer-container-exit {
+    animation: _acp-drawer-exit 400ms cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
+  }
+
+  &.acp-drawer-right {
+    transform: translateX(100%);
+  }
+
+  &.acp-drawer-left {
+    transform: translateX(-100%);
+  }
+
+  &.acp-drawer-bottom {
+    transform: translateY(100%);
+  }
+
+  &.acp-drawer-top {
+    transform: translateY(-100%);
+  }
+}
+
+.acp-drawer-right {
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-left {
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-bottom {
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-top {
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}

package/src/lib/components/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/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/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/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%;
+  }
+}

package/src/lib/components/grid/column-resize/_column-resize.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './../../../../core/tokens/token-utils';
+@use './../m3-grid';
+
+$fallbacks: m3-grid.get-tokens();
+
+// Required for resizing to work properly.
+.mat-column-resize-table.cdk-column-resize-with-resized-column {
+  table-layout: fixed;
+}
+
+.mat-column-resize-flex {
+  .mat-mdc-header-cell,
+  .mat-mdc-cell {
+    box-sizing: border-box;
+    min-width: 32px;
+  }
+}
+
+.mat-mdc-header-cell {
+  position: relative;
+}
+
+.mat-resizable {
+  box-sizing: border-box;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after,
+.mat-resizable-handle {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: 1px;
+  background: transparent;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after {
+  content: '';
+}
+
+[dir='rtl'] {
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
+  .mat-resizable-handle {
+    left: 0;
+    right: auto;
+  }
+
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+    .mat-header-cell,
+    .mat-mdc-header-cell {
+      border-left: none;
+    }
+  }
+}
+
+.mat-mdc-header-row.cdk-column-resize-hover-or-active {
+  .mat-mdc-header-cell {
+    border-right: none;
+  }
+
+  .mat-mdc-header-cell:not(.mat-resizable)::after {
+    background-color: token-utils.slot(grid-resizable-handle-disabled-background-color, $fallbacks);
+  }
+
+  .mat-resizable-handle {
+    background-color: token-utils.slot(grid-resizable-handle-hover-background-color, $fallbacks);
+  }
+}
+
+.mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
+  opacity: 0;
+  transition: none;
+}
+
+.mat-resizable-handle:focus,
+.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
+  outline: none;
+  background-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
+}
+
+.mat-column-resize-overlay-thumb {
+  background: transparent;
+  cursor: col-resize;
+  width: 100%;
+  height: 100%;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
+
+  @include mat.private-user-select(none);
+
+  &:active {
+    will-change: transform;
+
+    $bg-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
+
+    background: linear-gradient(
+      90deg,
+      transparent,
+      transparent 7px,
+      $bg-color 7px,
+      $bg-color 9px,
+      transparent 9px,
+      transparent
+    );
+
+    .mat-column-resize-overlay-thumb-top {
+      background: linear-gradient(
+        90deg,
+        transparent,
+        transparent 4px,
+        $bg-color 4px,
+        $bg-color 12px,
+        transparent 12px,
+        transparent
+      );
+    }
+  }
+}
+
+.mat-column-resize-overlay-thumb-top {
+  width: 100%;
+}