feat: update angular version

Author: teogl

build.js

@@ -18,7 +18,7 @@ function buildAll() {
     .reduce((err, exec) => {
       try {
         console.log(`Building ${exec.project} (${exec.config}):`);
-        child.execSync(`ng build --prod --project ${exec.project} --configuration ${exec.config}`, { stdio: "inherit" });
+        child.execSync(`ng build --project ${exec.project} --configuration ${exec.config}`, { stdio: "inherit" });
       }
       catch (error) {
         err.push({
@@ -42,4 +42,4 @@ function buildAll() {
   }
 }
 
-buildAll();
+buildAll();

package.json

@@ -18,16 +18,16 @@
   "private": false,
   "dependencies": {
     "@angular/animations": "^12.1.1",
-    "@angular/cdk": "^11.0.3",
+    "@angular/cdk": "^12.1.1",
     "@angular/common": "^12.1.1",
     "@angular/compiler": "^12.1.1",
     "@angular/core": "^12.1.1",
     "@angular/forms": "^12.1.1",
-    "@angular/material": "^11.0.3",
+    "@angular/material": "^12.1.1",
     "@angular/platform-browser": "^12.1.1",
     "@angular/platform-browser-dynamic": "^12.1.1",
     "@angular/router": "^12.1.1",
-    "@ngrx/store": "^10.1.2",
+    "@ngrx/store": "^12.2.0",
     "@ngx-translate/core": "^13.0.0",
     "perfect-scrollbar": "^1.5.0",
     "rxjs": "~6.6.3",

projects/craftsjs/alert/README.md

@@ -13,6 +13,7 @@ Choose the version corresponding to your Angular version:
 
  | Angular | @craftsjs/alert |
  | ------- | --------------- |
+ | 12      | 3.x             |
  | 11      | 2.x             |
  | 10      | 1.x             |
 

projects/craftsjs/alert/package.json

@@ -6,13 +6,13 @@
   "license": "MIT",
   "homepage": "https://github.com/addapptables/angular-miscellaneous",
   "peerDependencies": {
-    "@angular/common": ">= 11.0.0 < 12.0.0",
-    "@angular/core": ">= 11.0.0 < 12.0.0",
-    "@angular/material": ">= 11.0.0 < 12.0.0",
-    "@angular/cdk": ">= 11.0.0 < 12.0.0",
-    "@angular/animations": ">= 11.0.0 < 12.0.0",
-    "@ngx-translate/core": ">= 13.0.0 < 14.0.0",
-    "@craftsjs/core": ">=2.0.0 < 3.0.0"
+    "@angular/common": ">= 12.0.0 < 13.0.0",
+    "@angular/core": ">= 12.0.0 < 13.0.0",
+    "@angular/material": ">= 12.0.0 < 13.0.0",
+    "@angular/cdk": ">= 12.0.0 < 13.0.0",
+    "@angular/animations": ">= 12.0.0 < 13.0.0",
+    "@ngx-translate/core": ">= 13.0.0 < 16.0.0",
+    "@craftsjs/core": ">=3.0.0 < 4.0.0"
   },
   "repository": {
     "type": "git",

projects/craftsjs/card/README.md

@@ -13,6 +13,7 @@ Choose the version corresponding to your Angular version:
 
  Angular     | @craftsjs/card
  ----------- | -------------------
+ 12          | 3.x
  11          | 2.x
  10          | 1.x
 

projects/craftsjs/card/package.json

@@ -6,11 +6,11 @@
   "license": "MIT",
   "homepage": "https://github.com/addapptables/angular-miscellaneous",
   "peerDependencies": {
-    "@angular/common": ">= 11.0.0 < 12.0.0",
-    "@angular/core": ">= 11.0.0 < 12.0.0",
-    "@angular/animations": ">= 11.0.0 < 12.0.0",
-    "@angular/material": ">= 11.0.0 < 12.0.0",
-    "@angular/cdk": ">= 11.0.0 < 12.0.0"
+    "@angular/common": ">= 12.0.0 < 13.0.0",
+    "@angular/core": ">= 12.0.0 < 13.0.0",
+    "@angular/animations": ">= 12.0.0 < 13.0.0",
+    "@angular/material": ">= 12.0.0 < 13.0.0",
+    "@angular/cdk": ">= 12.0.0 < 13.0.0"
   },
   "repository": {
     "type": "git",

projects/craftsjs/card/src/lib/_craftsjs-card.theme.scss

@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import './components/card-header/craftsjs-card-header.theme';
 
 @mixin card($theme, $variables) {
@@ -17,9 +18,9 @@
     $card-header-margin: -20px 15px 0 16px;
     $card-header-padding: 20px;
     $card-title-font-weight: 500;
-    $card-header-box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px mat-color($accent);
+    $card-header-box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px mat.get-color-from-palette($accent);
     $card-header-icon-margin-right: 10px;
-    $background-color-header: mat-color($accent);
+    $background-color-header: mat.get-color-from-palette($accent);
 
     // body
     $card-body-padding: 12px 20px 20px;
@@ -35,7 +36,7 @@
         width: 100%;
         margin: $card-padding;
         box-shadow: $card-box-shadow;
-        background: mat-color($background, card);
+        background: mat.get-color-from-palette($background, card);
         margin-top: 32px;
         &-header {
             &-oval {
@@ -73,7 +74,7 @@
         &-footer {
             margin: $card-footer-margin;
             padding-top: $card-padding-top;
-            border-top: 1px solid mat-color($foreground, divider);
+            border-top: 1px solid mat.get-color-from-palette($foreground, divider);
         }
         &-divider {
             display: block;
@@ -85,4 +86,4 @@
         }
     }
     @include addapptable-card-header($variables);
-}
+}

projects/craftsjs/core/README.md

@@ -9,6 +9,7 @@ Choose the version corresponding to your Angular version:
 
  Angular     | @addapptables/core
  ----------- | -------------------
+ 12          | 3.x
  11          | 2.x
  10          | 1.x
 

projects/craftsjs/core/package.json

@@ -6,8 +6,8 @@
   "license": "MIT",
   "homepage": "https://github.com/addapptables/angular-miscellaneous",
   "peerDependencies": {
-    "@angular/common": ">= 11.0.0 < 12.0.0",
-    "@angular/core": ">= 11.0.0 < 12.0.0"
+    "@angular/common": ">= 12.0.0 < 13.0.0",
+    "@angular/core": ">= 12.0.0 < 13.0.0"
   },
   "repository": {
     "type": "git",

projects/craftsjs/core/src/lib/styles/grid/_variables.scss

@@ -300,7 +300,7 @@ $h4-font-size:                $font-size-base * 1.5 !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      $spacer / 2 !default;
+$headings-margin-bottom:      math.div($spacer, 2) !default;
 $headings-font-family:        inherit !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -556,7 +556,7 @@ $custom-radio-indicator-border-radius:          50% !default;
 $custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius:         math.div($custom-control-indicator-size, 2) !default;
 $custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
 
 $custom-select-padding-y:           $input-btn-padding-y !default;
@@ -574,9 +574,9 @@ $custom-select-indicator-color:     $gray-800 !default;
 $custom-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 $custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
 
-$custom-select-feedback-icon-padding-right: $input-height-inner * 3 / 4 + $custom-select-padding-x + $custom-select-indicator-padding !default;
+$custom-select-feedback-icon-padding-right: math.div($input-height-inner * 3, 4) + $custom-select-padding-x + $custom-select-indicator-padding !default;
 $custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size:          ($input-height-inner / 2) ($input-height-inner / 2) !default;
+$custom-select-feedback-icon-size:          math.div($input-height-inner, 2) math.div($input-height-inner, 2) !default;
 
 $custom-select-border-width:        $input-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
@@ -714,12 +714,12 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              $spacer / 2 !default;
+$nav-divider-margin-y:              math.div($spacer, 2) !default;
 
 
 // Navbar
 
-$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-y:                  math.div($spacer, 2) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
@@ -728,7 +728,7 @@ $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            math.div($nav-link-height - $navbar-brand-height, 2) !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -806,7 +806,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-group-margin:                 math.div($grid-gutter-width, 2) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;