@acontplus/ng-components 2.1.31 → 2.3.0

package/src/core/theming/prebuilt/cyan.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-cyan {
+  --theme-primary-color: #01c0c8;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-cyan-palette,
+        tertiary: palettes.$custom-cyan-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/green.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-green {
+  --theme-primary-color: #0a7ea4;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-green-palette,
+        tertiary: palettes.$custom-green-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/orange.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-orange {
+  --theme-primary-color: #fa896b;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-orange-palette,
+        tertiary: palettes.$custom-orange-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/pink.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-pink {
+  --theme-primary-color: #d200d2;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$magenta-palette,
+        tertiary: palettes.$magenta-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/purple.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-purple {
+  --theme-primary-color: #763ebd;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-purple-palette,
+        tertiary: palettes.$custom-purple-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/rose.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-rose {
+  --theme-primary-color: #e80074;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$rose-palette,
+        tertiary: palettes.$rose-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/tokens/_system.scss

@@ -2,19 +2,12 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '@angular/material' as mat;
-@use '../../../../lib/components/alert/m3-alert';
-// @use '../../colorpicker/m3-colorpicker';
-// @use '../../datetimepicker/m3-datetimepicker';
-@use '../../../../lib/components/drawer/m3-drawer';
-@use '../../../../lib/components/grid/m3-grid';
-// @use '../../loader/m3-loader';
-@use '../../../../lib/components/popover/m3-popover';
-// @use '../../progress/m3-progress';
-// @use '../../select/m3-select';
-// @use '../../split/m3-split';
-// @use '../../tooltip/m3-tooltip';
-@use '../style/elevation';
-@use '../theming/config-validation';
+@use './../../lib/components/alert/m3-alert';
+@use './../../lib/components/drawer/m3-drawer';
+@use './../../lib/components/grid/m3-grid';
+@use './../../lib/components/popover/m3-popover';
+@use './../style/elevation';
+@use './../theming/config-validation';
 @use '../theming/definition';
 @use '../theming/palettes';
 @use './m3';

package/src/core/typography/_all-typography.scss

@@ -1,34 +1,12 @@
 @use '@angular/material' as mat;
 @use '../../../lib/components/alert/alert-theme';
-// @use '../../button/button-theme';
-// @use '../../colorpicker/colorpicker-theme';
-// @use '../../datetimepicker/datetimepicker-theme';
 @use '../../../lib/components/drawer/drawer-theme';
 @use '../../../lib/components/grid/grid-theme';
-// @use '../../loader/loader-theme';
 @use '../../../lib/components/popover/popover-theme';
-// @use '../../progress/progress-theme';
-// @use '../../select/select-theme';
-// @use '../../split/split-theme';
-// @use '../../tooltip/tooltip-theme';
 
-// Includes all of the typographic styles.
 @mixin all-component-typographies($theme: null) {
   @include alert-theme.typography($theme);
-  // @include button-theme.typography($theme);
-  // @include colorpicker-theme.typography($theme);
-  // @include datetimepicker-theme.typography($theme);
   @include drawer-theme.typography($theme);
   @include grid-theme.typography($theme);
-  // @include loader-theme.typography($theme);
   @include popover-theme.typography($theme);
-  // @include progress-theme.typography($theme);
-  // @include select-theme.typography($theme);
-  // @include split-theme.typography($theme);
-  // @include tooltip-theme.typography($theme);
-}
-
-// @deprecated Use `all-component-typographies`.
-@mixin material-extensions-typography($theme: null) {
-  @include all-component-typographies($theme);
 }

package/src/lib/components/autocomplete-wrapper/autocomplete-wrapper.scss

@@ -1,8 +1,5 @@
 .acp-autocomplete-wrapper {
   display: block;
-}
-
-.acp-autocomplete-wrapper {
   position: relative;
   width: 100%;
   max-width: 100%;
@@ -41,6 +38,13 @@
   font-size: 20px;
 }
 
+.acp-autocomplete-wrapper-label {
+  display: block;
+  font-size: 12px;
+  color: var(--mat-sys-on-surface-variant, #666);
+  margin-bottom: 4px;
+}
+
 .acp-autocomplete-wrapper-input-field {
   flex: 1;
   border: none;
@@ -258,6 +262,12 @@
   }
 }
 
+.acp-autocomplete-wrapper-page-label {
+  font-size: 12px;
+  color: var(--mat-sys-on-surface-variant, #666);
+  margin-right: 4px;
+}
+
 .acp-autocomplete-wrapper-page-input {
   width: 50px;
   height: 32px;
@@ -463,32 +473,32 @@
   transition: all 0.2s ease;
 
   &.acp-autocomplete-wrapper-create-button {
-    background-color: rgba(76, 175, 80, 0.04);
+    background-color: rgba(76, 175, 80, 0.12);
     border-color: #4caf50;
-    color: #4caf50;
+    color: #2e7d32;
 
     &:hover {
-      background-color: rgba(76, 175, 80, 0.08);
+      background-color: rgba(76, 175, 80, 0.2);
     }
   }
 
   &.acp-autocomplete-wrapper-search-button {
-    background-color: rgba(255, 152, 0, 0.04);
+    background-color: rgba(255, 152, 0, 0.12);
     border-color: #ff9800;
-    color: #ff9800;
+    color: #e65100;
 
     &:hover {
-      background-color: rgba(255, 152, 0, 0.08);
+      background-color: rgba(255, 152, 0, 0.2);
     }
   }
 
   &.acp-autocomplete-wrapper-results-button {
-    background-color: rgba(63, 81, 181, 0.04);
+    background-color: rgba(63, 81, 181, 0.12);
     border-color: #3f51b5;
-    color: #3f51b5;
+    color: #283593;
 
     &:hover {
-      background-color: rgba(63, 81, 181, 0.08);
+      background-color: rgba(63, 81, 181, 0.2);
     }
   }
 }

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

@@ -0,0 +1,221 @@
+@use '@angular/material' as mat;
+
+.acp-primary {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--theme-primary-color),
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: var(--theme-primary-color),
+      protected-label-text-color: var(--theme-primary-color),
+      text-label-text-color: var(--theme-primary-color),
+      text-state-layer-color: var(--theme-primary-color),
+    )
+  );
+}
+
+.acp-secondary {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-secondary),
+      filled-label-text-color: var(--mat-sys-on-secondary),
+      outlined-label-text-color: var(--mat-sys-secondary),
+      protected-label-text-color: var(--mat-sys-secondary),
+      text-label-text-color: var(--mat-sys-secondary),
+      text-state-layer-color: var(--mat-sys-secondary),
+    )
+  );
+}
+
+.acp-accent {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-tertiary),
+      filled-label-text-color: var(--mat-sys-on-tertiary),
+      outlined-label-text-color: var(--mat-sys-tertiary),
+      protected-label-text-color: var(--mat-sys-tertiary),
+      text-label-text-color: var(--mat-sys-tertiary),
+      text-state-layer-color: var(--mat-sys-tertiary),
+    )
+  );
+}
+
+.acp-error {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-error),
+      filled-label-text-color: var(--mat-sys-on-error),
+      outlined-label-text-color: var(--mat-sys-error),
+      protected-label-text-color: var(--mat-sys-error),
+      text-label-text-color: var(--mat-sys-error),
+      text-state-layer-color: var(--mat-sys-error),
+    )
+  );
+}
+
+.acp-success {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #4caf50,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #4caf50,
+      protected-label-text-color: #4caf50,
+      text-label-text-color: #4caf50,
+      text-state-layer-color: #4caf50,
+    )
+  );
+}
+
+.acp-warning {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #f59e0b,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #f59e0b,
+      protected-label-text-color: #f59e0b,
+      text-label-text-color: #f59e0b,
+      text-state-layer-color: #f59e0b,
+    )
+  );
+}
+
+.acp-info {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #3b82f6,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #3b82f6,
+      protected-label-text-color: #3b82f6,
+      text-label-text-color: #3b82f6,
+      text-state-layer-color: #3b82f6,
+    )
+  );
+}
+
+.acp-dark {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #1f2937,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #1f2937,
+      protected-label-text-color: #1f2937,
+      text-label-text-color: #1f2937,
+      text-state-layer-color: #1f2937,
+    )
+  );
+}
+
+[matIconButton].acp-primary {
+  @include mat.icon-overrides(
+    (
+      color: var(--theme-primary-color),
+    )
+  );
+}
+
+[matIconButton].acp-secondary {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-secondary),
+    )
+  );
+}
+
+[matIconButton].acp-accent {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-tertiary),
+    )
+  );
+}
+
+[matIconButton].acp-error {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-error),
+    )
+  );
+}
+
+[matIconButton].acp-success {
+  @include mat.icon-overrides(
+    (
+      color: #10b981,
+    )
+  );
+}
+
+[matIconButton].acp-warning {
+  @include mat.icon-overrides(
+    (
+      color: #f59e0b,
+    )
+  );
+}
+
+[matIconButton].acp-info {
+  @include mat.icon-overrides(
+    (
+      color: #3b82f6,
+    )
+  );
+}
+
+[matIconButton].acp-dark {
+  @include mat.icon-overrides(
+    (
+      color: #1f2937,
+    )
+  );
+}
+
+.acp-square {
+  @include mat.button-overrides(
+    (
+      filled-container-shape: 8px,
+      outlined-container-shape: 8px,
+      protected-container-shape: 8px,
+      text-container-shape: 8px,
+      tonal-container-shape: 8px,
+    )
+  );
+  --mat-icon-button-container-shape: 8px;
+}
+
+.acp-medium {
+  @include mat.theme(
+    (
+      density: -1,
+    )
+  );
+  @include mat.button-overrides(
+    (
+      filled-horizontal-padding: 20px,
+      outlined-horizontal-padding: 20px,
+      protected-horizontal-padding: 20px,
+      text-horizontal-padding: 20px,
+      tonal-horizontal-padding: 20px,
+    )
+  );
+
+  @include mat.button-toggle-overrides(
+    (
+      height: 36px,
+    )
+  );
+}
+.acp-small {
+  @include mat.theme(
+    (
+      density: -2,
+    )
+  );
+  @include mat.button-overrides(
+    (
+      filled-horizontal-padding: 16px,
+      outlined-horizontal-padding: 16px,
+      protected-horizontal-padding: 16px,
+      text-horizontal-padding: 16px,
+      tonal-horizontal-padding: 16px,
+    )
+  );
+}

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

@@ -1,131 +0,0 @@
-//@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/checkbox-group/checkbox-group.scss

@@ -0,0 +1,14 @@
+.acp-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .acp-checkbox-master {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .acp-checkbox-normal {
+    margin-left: 1rem;
+  }
+}

package/src/lib/components/dialog-wrapper/dialog-wrapper.scss

@@ -1,6 +1,5 @@
 .acp-dialog-header {
   cursor: move;
-  //padding: 12px 24px;
   border-bottom: 1px solid var(--mat-sys-outline-variant, #dee2e6);
   color: var(--mat-sys-on-surface, #212529);
   position: relative;

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

@@ -3,7 +3,6 @@
 @use './../../../core/tokens/m3-utils';
 @use './../../../core/tokens/m3';
 
-/// Generates custom tokens for the mtx-drawer.
 @function get-tokens($theme: m3.$sys-theme) {
   $system: m3-utils.get-system($theme);
 

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/tokens/token-utils';
+@use './../../../core/tokens/token-utils';
 @use './m3-grid';
 
 @mixin base($theme) {

package/src/lib/components/{data-grid → grid}/cell/cell.scss

@@ -1,10 +1,3 @@
-// .acp-grid-img {
-//   display: inline-block;
-//   width: 32px;
-//   border-radius: 4px;
-//   vertical-align: middle;
-// }
-
 .acp-placeholder-box {
   width: 50px;
   height: 50px;
@@ -18,7 +11,7 @@
   justify-content: center;
   align-items: center;
 
-  color: #6b7280; /* gris elegante */
+  color: #4b5563; /* darker gray for better contrast */
   font-size: 0.85rem;
   gap: 8px;
 }

package/src/styles/index.scss

@@ -1,5 +1,4 @@
 // Import variables and mixins first
-@forward 'variables';
 @forward 'mixins';
 
 @forward 'custom-dialog';