@acontplus/ng-components 2.1.31 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "2.1.31",
+  "version": "2.3.0",
   "description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
   "peerDependencies": {
     "@acontplus/ui-kit": "^1.0.2",
@@ -22,6 +22,30 @@
       "types": "./types/acontplus-ng-components.d.ts",
       "default": "./fesm2022/acontplus-ng-components.mjs"
     },
+    "./prebuilt-themes/blue": {
+      "sass": "./src/core/theming/prebuilt/blue.scss"
+    },
+    "./prebuilt-themes/aqua": {
+      "sass": "./src/core/theming/prebuilt/aqua.scss"
+    },
+    "./prebuilt-themes/purple": {
+      "sass": "./src/core/theming/prebuilt/purple.scss"
+    },
+    "./prebuilt-themes/green": {
+      "sass": "./src/core/theming/prebuilt/green.scss"
+    },
+    "./prebuilt-themes/cyan": {
+      "sass": "./src/core/theming/prebuilt/cyan.scss"
+    },
+    "./prebuilt-themes/orange": {
+      "sass": "./src/core/theming/prebuilt/orange.scss"
+    },
+    "./prebuilt-themes/pink": {
+      "sass": "./src/core/theming/prebuilt/pink.scss"
+    },
+    "./prebuilt-themes/rose": {
+      "sass": "./src/core/theming/prebuilt/rose.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     }
@@ -79,7 +103,7 @@
   "homepage": "https://github.com/acontplus/acontplus-libs#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/acontplus/acontplus-libs.git"
+    "url": "git+https://github.com/acontplus/acontplus-libs.git"
   },
   "release": {
     "branches": [

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

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use '../theming/all-theme';
 
-// Includes all of the color styles.
 @mixin all-component-colors($theme) {
   @if not mat.theme-has($theme, color) {
     @error 'No color configuration specified.';

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

@@ -1,16 +1,8 @@
 @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 density styles.
 @mixin all-component-densities($theme) {
@@ -19,20 +11,7 @@
   }
 
   @include alert-theme.density($theme);
-  // @include button-theme.density($theme);
-  // @include colorpicker-theme.density($theme);
-  // @include datetimepicker-theme.density($theme);
   @include drawer-theme.density($theme);
   @include grid-theme.density($theme);
-  // @include loader-theme.density($theme);
   @include popover-theme.density($theme);
-  // @include progress-theme.density($theme);
-  // @include select-theme.density($theme);
-  // @include split-theme.density($theme);
-  // @include tooltip-theme.density($theme);
-}
-
-// @deprecated Use `all-component-densities`.
-@mixin material-extensions-density($theme) {
-  @include all-component-densities($theme);
 }

package/src/core/theming/_all-theme.scss

@@ -1,50 +1,36 @@
-// Import all the theming functionality.
 @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/data-grid/grid-theme';
-// @use '../../loader/loader-theme';
+@use './../../lib/components/grid/grid-theme';
 @use './../../lib/components/popover/popover-theme';
-// @use '../../progress/progress-theme';
-// @use '../../select/select-theme';
-// @use '../../split/split-theme';
-// @use '../../tooltip/tooltip-theme';
 
 // Create a theme.
 @mixin all-component-themes($theme) {
   @include alert-theme.theme($theme);
-  // @include button-theme.theme($theme);
-  // @include colorpicker-theme.theme($theme);
-  // @include datetimepicker-theme.theme($theme);
   @include drawer-theme.theme($theme);
   @include grid-theme.theme($theme);
-  // @include loader-theme.theme($theme);
   @include popover-theme.theme($theme);
-  // @include progress-theme.theme($theme);
-  // @include select-theme.theme($theme);
-  // @include split-theme.theme($theme);
-  // @include tooltip-theme.theme($theme);
 }
 
 @mixin all-component-bases($theme) {
   @include alert-theme.base($theme);
-  // @include button-theme.base($theme);
-  // @include colorpicker-theme.base($theme);
-  // @include datetimepicker-theme.base($theme);
   @include drawer-theme.base($theme);
   @include grid-theme.base($theme);
-  // @include loader-theme.base($theme);
   @include popover-theme.base($theme);
-  // @include progress-theme.base($theme);
-  // @include select-theme.base($theme);
-  // @include split-theme.base($theme);
-  // @include tooltip-theme.base($theme);
 }
 
-// @deprecated Use `all-component-themes`.
-@mixin material-extensions-theme($theme) {
-  @include all-component-themes($theme);
+// Custom component overrides for all themes
+@mixin custom-component-overrides {
+  @include mat.checkbox-overrides(
+    (
+      selected-checkmark-color: white,
+    )
+  );
+
+  @include mat.fab-overrides(
+    (
+      container-color: var(--theme-primary-color),
+      foreground-color: white,
+    )
+  );
 }

package/src/core/theming/_palettes.scss

@@ -1058,3 +1058,519 @@ $rose-palette: _patch-error-palette(
     ),
   )
 );
+
+/// Custom blue palette rgb(27, 132, 255)
+$custom-blue-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #0b1a3d,
+    20: #16357a,
+    25: #1e4499,
+    30: #2652b8,
+    35: #2e61d7,
+    40: #366ff6,
+    50: #1b84ff,
+    60: #4d9dff,
+    70: #7fb6ff,
+    80: #b1ceff,
+    90: #e3e6ff,
+    95: #f1f2ff,
+    98: #f8f9ff,
+    99: #fbfdff,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #1a1d2e,
+      20: #2f3248,
+      25: #3a3e55,
+      30: #454962,
+      35: #51556f,
+      40: #5d617c,
+      50: #767a96,
+      60: #9094b1,
+      70: #abafcc,
+      80: #c6c9e7,
+      90: #e2e5f3,
+      95: #f0f2f9,
+      98: #f8f9fc,
+      99: #fbfdff,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1a1b1f,
+      20: #2f3034,
+      25: #3b3b3f,
+      30: #46464a,
+      35: #525256,
+      40: #5e5e62,
+      50: #77777a,
+      60: #919094,
+      70: #ababaf,
+      80: #c7c6ca,
+      90: #e3e2e6,
+      95: #f2f0f4,
+      98: #fcf8fd,
+      99: #fffbff,
+      100: #fff,
+      4: #0e0e11,
+      6: #131316,
+      12: #201f22,
+      17: #2a292d,
+      22: #353438,
+      24: #3a393c,
+      87: #dcd9dd,
+      92: #ebe7eb,
+      94: #f0edf1,
+      96: #f6f2f7,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #1b1b23,
+      20: #303038,
+      25: #3b3b43,
+      30: #46464f,
+      35: #52515b,
+      40: #5e5d67,
+      50: #777680,
+      60: #91909a,
+      70: #acaab4,
+      80: #c7c5d0,
+      90: #e4e1ec,
+      95: #f2effa,
+      98: #fbf8ff,
+      99: #fffbff,
+      100: #fff,
+    ),
+  )
+);
+
+/// Custom aqua palette #0074ba
+$custom-aqua-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #001a26,
+    20: #00334d,
+    25: #00405f,
+    30: #004d71,
+    35: #005983,
+    40: #006695,
+    50: #0074ba,
+    60: #3399cc,
+    70: #66b3dd,
+    80: #99ccee,
+    90: #cce0ff,
+    95: #e6f0ff,
+    98: #f5f9ff,
+    99: #fbfdff,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #1a1d2e,
+      20: #2f3248,
+      25: #3a3e55,
+      30: #454962,
+      35: #51556f,
+      40: #5d617c,
+      50: #767a96,
+      60: #9094b1,
+      70: #abafcc,
+      80: #c6c9e7,
+      90: #e2e5f3,
+      95: #f0f2f9,
+      98: #f8f9fc,
+      99: #fbfdff,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1a1b1f,
+      20: #2f3034,
+      25: #3b3b3f,
+      30: #46464a,
+      35: #525256,
+      40: #5e5e62,
+      50: #77777a,
+      60: #919094,
+      70: #ababaf,
+      80: #c7c6ca,
+      90: #e3e2e6,
+      95: #f2f0f4,
+      98: #fcf8fd,
+      99: #fffbff,
+      100: #fff,
+      4: #0e0e11,
+      6: #131316,
+      12: #201f22,
+      17: #2a292d,
+      22: #353438,
+      24: #3a393c,
+      87: #dcd9dd,
+      92: #ebe7eb,
+      94: #f0edf1,
+      96: #f6f2f7,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #1b1b23,
+      20: #303038,
+      25: #3b3b43,
+      30: #46464f,
+      35: #52515b,
+      40: #5e5d67,
+      50: #777680,
+      60: #91909a,
+      70: #acaab4,
+      80: #c7c5d0,
+      90: #e4e1ec,
+      95: #f2effa,
+      98: #fbf8ff,
+      99: #fffbff,
+      100: #fff,
+    ),
+  )
+);
+
+/// Custom purple palette #763ebd
+$custom-purple-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #1a0040,
+    20: #330080,
+    25: #400099,
+    30: #4d00b3,
+    35: #5900cc,
+    40: #6600e6,
+    50: #763ebd,
+    60: #9966ff,
+    70: #b388ff,
+    80: #ccaaff,
+    90: #e6ccff,
+    95: #f2e6ff,
+    98: #f9f5ff,
+    99: #fcfaff,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #2a1a35,
+      20: #45304d,
+      25: #523b5a,
+      30: #5f4667,
+      35: #6c5174,
+      40: #795c81,
+      50: #93729e,
+      60: #ae8fbb,
+      70: #c9abd8,
+      80: #e5c7f5,
+      90: #f2e6ff,
+      95: #f9f5ff,
+      98: #fcfaff,
+      99: #fffbff,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1d1a20,
+      20: #322f35,
+      25: #3d3a40,
+      30: #49464b,
+      35: #555157,
+      40: #615c62,
+      50: #7a757b,
+      60: #948f95,
+      70: #aea9af,
+      80: #cac4ca,
+      90: #e6e0e6,
+      95: #f4eff4,
+      98: #fcf8fc,
+      99: #fffbff,
+      100: #fff,
+      4: #110d12,
+      6: #161217,
+      12: #231e23,
+      17: #2d282d,
+      22: #383338,
+      24: #3d383d,
+      87: #e1d7dc,
+      92: #efe6eb,
+      94: #f5ebf0,
+      96: #fbf1f6,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #21191f,
+      20: #372e34,
+      25: #423940,
+      30: #4e444b,
+      35: #5a4f57,
+      40: #665b63,
+      50: #80747c,
+      60: #9a8d95,
+      70: #b5a7b0,
+      80: #d1c2cb,
+      90: #eedee7,
+      95: #fcecf5,
+      98: #fff7f9,
+      99: #fffbff,
+      100: #fff,
+    ),
+  )
+);
+
+/// Custom green palette #0a7ea4
+$custom-green-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #052a3d,
+    20: #0a547a,
+    25: #0d6b91,
+    30: #1082a8,
+    35: #1399bf,
+    40: #16b0d6,
+    50: #0a7ea4,
+    60: #3399b8,
+    70: #66b4cc,
+    80: #99cfe0,
+    90: #cceaf4,
+    95: #e6f5fa,
+    98: #f5fbfd,
+    99: #fbfdfe,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #0a1d2a,
+      20: #1a3548,
+      25: #26405a,
+      30: #324b6c,
+      35: #3e567e,
+      40: #4a6190,
+      50: #637ba8,
+      60: #7d96c0,
+      70: #97b1d8,
+      80: #b2ccf0,
+      90: #cce7f8,
+      95: #e6f3fc,
+      98: #f5f9fe,
+      99: #fbfdfe,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1a1c1e,
+      20: #2f3133,
+      25: #3a3c3e,
+      30: #464749,
+      35: #525355,
+      40: #5e5f61,
+      50: #777879,
+      60: #919293,
+      70: #abacad,
+      80: #c6c7c8,
+      90: #e2e2e3,
+      95: #f1f1f2,
+      98: #f9f9f9,
+      99: #fcfcfc,
+      100: #fff,
+      4: #0c0e10,
+      6: #111314,
+      12: #1e2021,
+      17: #292a2c,
+      22: #343536,
+      24: #393a3b,
+      87: #d9dadb,
+      92: #e8e9e9,
+      94: #ededee,
+      96: #f3f4f4,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #181d20,
+      20: #2d3235,
+      25: #383d40,
+      30: #43484b,
+      35: #4f5457,
+      40: #5b5f63,
+      50: #74797c,
+      60: #8e9396,
+      70: #a9aeb1,
+      80: #c4c9cc,
+      90: #e0e4e7,
+      95: #eff2f5,
+      98: #f8f9fa,
+      99: #fbfcfd,
+      100: #fff,
+    ),
+  )
+);
+
+/// Custom orange palette rgb(250, 137, 107)
+$custom-orange-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #4d1a0a,
+    20: #803314,
+    25: #994019,
+    30: #b34d1e,
+    35: #cc5923,
+    40: #e66628,
+    50: #fa896b,
+    60: #ffa388,
+    70: #ffbda5,
+    80: #ffd7c2,
+    90: #fff0e0,
+    95: #fff8f0,
+    98: #fffcf8,
+    99: #fffdfc,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #2d1a0a,
+      20: #4d3320,
+      25: #5f402d,
+      30: #714d3a,
+      35: #835a47,
+      40: #956754,
+      50: #b38470,
+      60: #d1a18c,
+      70: #efbea8,
+      80: #ffdcc4,
+      90: #fff0d9,
+      95: #fff8ed,
+      98: #fffcf5,
+      99: #fffdfa,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1c1a17,
+      20: #312f2b,
+      25: #3c3a35,
+      30: #484541,
+      35: #54514c,
+      40: #605d58,
+      50: #797670,
+      60: #938f89,
+      70: #aea9a3,
+      80: #c9c4be,
+      90: #e6e0d9,
+      95: #f4efe8,
+      98: #fdf9f0,
+      99: #fffbf5,
+      100: #fff,
+      4: #0f0d0a,
+      6: #14130f,
+      12: #201f1b,
+      17: #2b2925,
+      22: #36332f,
+      24: #3a3833,
+      87: #dddad1,
+      92: #ece8df,
+      94: #f1ede5,
+      96: #f7f3ea,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #1c1c11,
+      20: #313125,
+      25: #3d3c2f,
+      30: #48473a,
+      35: #545345,
+      40: #605f51,
+      50: #797869,
+      60: #939182,
+      70: #aeac9b,
+      80: #cac7b6,
+      90: #e6e3d1,
+      95: #f4f1df,
+      98: #fdfae7,
+      99: #fffbff,
+      100: #fff,
+    ),
+  )
+);
+
+/// Custom cyan palette #01c0c8
+$custom-cyan-palette: _patch-error-palette(
+  (
+    0: #000,
+    10: #003a3d,
+    20: #007075,
+    25: #008a90,
+    30: #00a3ab,
+    35: #00bdc6,
+    40: #00d6e1,
+    50: #01c0c8,
+    60: #33d3db,
+    70: #66e6ed,
+    80: #99f2f6,
+    90: #ccfafb,
+    95: #e6fcfd,
+    98: #f5fefe,
+    99: #fbfffe,
+    100: #fff,
+    secondary: (
+      0: #000,
+      10: #0a1d20,
+      20: #1a3538,
+      25: #264044,
+      30: #324b4f,
+      35: #3e565a,
+      40: #4a6165,
+      50: #637b7f,
+      60: #7d9699,
+      70: #97b1b4,
+      80: #b2cccf,
+      90: #cce7e9,
+      95: #e6f3f4,
+      98: #f5f9fa,
+      99: #fbfdfe,
+      100: #fff,
+    ),
+    neutral: (
+      0: #000,
+      10: #1a1c1d,
+      20: #2f3132,
+      25: #3a3c3d,
+      30: #464748,
+      35: #525354,
+      40: #5e5f60,
+      50: #777879,
+      60: #919293,
+      70: #abacad,
+      80: #c6c7c8,
+      90: #e2e2e3,
+      95: #f1f1f2,
+      98: #f9f9f9,
+      99: #fcfcfc,
+      100: #fff,
+      4: #0c0e0f,
+      6: #111313,
+      12: #1e2020,
+      17: #292a2b,
+      22: #343536,
+      24: #393a3b,
+      87: #d9dadb,
+      92: #e8e9e9,
+      94: #ededee,
+      96: #f3f4f4,
+    ),
+    neutral-variant: (
+      0: #000,
+      10: #181d1e,
+      20: #2d3233,
+      25: #383d3e,
+      30: #43484a,
+      35: #4f5456,
+      40: #5b5f62,
+      50: #74797b,
+      60: #8e9395,
+      70: #a9aeb0,
+      80: #c4c9cb,
+      90: #e0e4e6,
+      95: #eff2f4,
+      98: #f8f9fa,
+      99: #fbfcfd,
+      100: #fff,
+    ),
+  )
+);

package/src/core/theming/prebuilt/aqua.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-aqua {
+  --theme-primary-color: #0074ba;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-aqua-palette,
+        tertiary: palettes.$custom-aqua-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/blue.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-blue {
+  --theme-primary-color: #1b84ff;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-blue-palette,
+        tertiary: palettes.$custom-blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}