@messaia/cdk 17.1.5 → 18.0.0-rc02

package/lib/common/styles/core/_button.scss

@@ -1,4 +1,3 @@
-// @use "sass:math";
 @import '../theme-functions';
 @import '../rtl';
 
@@ -23,37 +22,44 @@ $mat-icon-button-width: rem(4.000) !default;
 $mat-icon-button-margin: rem(0.600) !default;
 $mat-icon-border-radius: $mat-fab-border-radius;
 
+@function rem($multiplier) {
+	$font-size: 10px;
+	@return $multiplier * $font-size;
+}
+
 /** Mixin to create distinct classes for fab positions, e.g. ".mat-fab-position-bottom-right". */
 @mixin mat-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
-  [mat-fab].mat-mdc-fab-position-#{$spot},
-  .mat-fab.mat-fab-position-#{$spot},
-  [mat-fab].mat-fab-#{$spot},
-  .mat-fab.mat-fab-#{$spot} {
-    top: $top;
-    @include rtl(right, $right,$left);
-    @include rtl(left, $left,$right);
-    bottom: $bottom;
-    position: absolute;
-    &.fixed {
-      position: fixed;
-    }
-  }
+
+	[mat-fab].mat-mdc-fab-position-#{$spot},
+	.mat-fab.mat-fab-position-#{$spot},
+	[mat-fab].mat-fab-#{$spot},
+	.mat-fab.mat-fab-#{$spot} {
+		top: $top;
+		@include rtl(right, $right, $left);
+		@include rtl(left, $left, $right);
+		bottom: $bottom;
+		position: absolute;
+
+		&.fixed {
+			position: fixed;
+		}
+	}
 }
 
 @mixin vd-button-utilities() {
-  $mat-fab-pos-offset: math.div(($mat-fab-size - $mat-fab-padding), 2);
-  @include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);
-  @include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);
-  @include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);
-  @include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);
-
-  button {
-    &[mat-icon-button] {
-      &.mat-icon-button-mini {
-        height: 24px;
-        line-height: 24px;
-        width: 24px;
-      }
-    }
-  }
+	$mat-fab-pos-offset: math.div(($mat-fab-size - $mat-fab-padding), 2);
+	@include mat-fab-position(bottom-right, auto, $mat-fab-pos-offset, $mat-fab-pos-offset, auto);
+	@include mat-fab-position(bottom-left, auto, auto, $mat-fab-pos-offset, $mat-fab-pos-offset);
+	@include mat-fab-position(top-right, $mat-fab-pos-offset, $mat-fab-pos-offset, auto, auto);
+	@include mat-fab-position(top-left, $mat-fab-pos-offset, auto, auto, $mat-fab-pos-offset);
+
+	button {
+		&[mat-icon-button] {
+			&.mat-icon-button-mini {
+				height: 24px;
+				line-height: 24px;
+				width: 24px;
+			}
+		}
+	}
 }

package/lib/common/styles/{_common-theme.scss → m2/_common-theme.scss}

@@ -1,5 +1,5 @@
 // @use '~@angular/material' as mat;
-@import 'theme-functions';
+@import '../theme-functions';
 
 @mixin vd-common-theme($theme) {
     $warn: map-get($theme, warn);
@@ -10,17 +10,17 @@
     .mdc-list-item,
     .mat-list-item-content {
         mat-icon {
-            color: mat.get-color-from-palette($foreground, icon);
+            color: mat.m2-get-color-from-palette($foreground, icon);
 
             &[matListAvatar] {
-                background-color: mat.get-color-from-palette($background, hover);
+                background-color: mat.m2-get-color-from-palette($background, hover);
             }
         }
     }
 
     .mat-list-text {
         p {
-            color: mat.get-color-from-palette($foreground, disabled);
+            color: mat.m2-get-color-from-palette($foreground, disabled);
         }
     }
 
@@ -28,7 +28,7 @@
         opacity: if($is-dark, 0.8, 1);
 
         .mat-mdc-list-item-icon {
-            color: mat.get-color-from-palette($foreground, icon);
+            color: mat.m2-get-color-from-palette($foreground, icon);
         }
 
         .mdc-list-item__content {
@@ -41,7 +41,7 @@
 
     .mat-autocomplete-panel {
         .mat-mdc-paginator {
-            background-color: mat.get-color-from-palette($background, app-bar);
+            background-color: mat.m2-get-color-from-palette($background, app-bar);
         }
     }
 }

package/lib/common/styles/m2/_theme-functions.scss

@@ -0,0 +1,21 @@
+// Gets a color from a theme palette (the output of mat-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function mat-color($palette, $hue: default, $opacity: null) {
+
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if type-of($hue)==number and $hue >=0 and $hue <=1 {
+        @return mat.m2-get-color-from-palette($palette, default, $hue);
+    }
+
+    $color: map-get($palette, $hue);
+    $opacity: if($opacity ==null, opacity($color), $opacity);
+
+    @return rgba($color, $opacity);
+}

package/lib/common/styles/m3/_common-theme.scss

@@ -0,0 +1,47 @@
+// @use '~@angular/material' as mat;
+@import '../theme-functions';
+
+@mixin vd-common-theme($theme) {
+    $warn: map-get($theme, warn);
+    $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
+    $is-dark: map.get($theme, is-dark);
+
+    .mdc-list-item,
+    .mat-list-item-content {
+        mat-icon {
+            // color: mat.get-color-from-palette($foreground, icon);
+
+            &[matListAvatar] {
+                // background-color: mat.m2-get-color-from-palette($background, hover);
+            }
+        }
+    }
+
+    .mat-list-text {
+        p {
+            // color: mat.m2-get-color-from-palette($foreground, disabled);
+        }
+    }
+
+    .mdc-list-item {
+        opacity: if($is-dark, 0.8, 1);
+
+        .mat-mdc-list-item-icon {
+            // color: mat.m2-get-color-from-palette($foreground, icon);
+        }
+
+        .mdc-list-item__content {
+            .mdc-list-item__primary-text {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+
+    .mat-autocomplete-panel {
+        .mat-mdc-paginator {
+            // background-color: mat.m2-get-color-from-palette($background, app-bar);
+        }
+    }
+}

package/lib/common/styles/m3/_theme-functions.scss

@@ -0,0 +1,21 @@
+// Gets a color from a theme palette (the output of mat-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function mat-color($palette, $hue: default, $opacity: null) {
+
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if type-of($hue)==number and $hue >=0 and $hue <=1 {
+        @return mat.m2-get-color-from-palette($palette, default, $hue);
+    }
+
+    $color: map-get($palette, $hue);
+    $opacity: if($opacity ==null, opacity($color), $opacity);
+
+    @return rgba($color, $opacity);
+}

package/lib/common/styles/platform.scss

@@ -8,4 +8,4 @@
 @include vd-utilities();
 @include vd-layout();
 @include vd-typography();
-@include vd-colors();
+// @include vd-colors();

package/lib/common/theming/_all-theme.scss

@@ -5,7 +5,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
-@import '../styles/common-theme';
+@import '../styles/m3/common-theme';
 @import '../../layout/layout-theme';
 @import '../styles/styles';
 @import '../typography/all-typography';

package/lib/common/theming/_m2-all-theme.scss

@@ -0,0 +1,27 @@
+@use '@angular/material' as mat;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/color-palette' as mdc-color-palette;
+@use "sass:math";
+@use 'sass:color';
+@use 'sass:map';
+
+@import '../styles/m2/common-theme';
+@import '../../layout/m2-layout-theme';
+@import '../styles/styles';
+@import '../typography/all-typography';
+
+/* Overrides the background colors */
+@function vd-custom-background($theme, $config) {
+	$palette-color : map.get($theme, color);
+	$background: map.get($palette-color, background);
+	$background: map.merge($background, $config);
+	$palette-color: map.merge($palette-color, (background: $background));
+	@return map.merge($theme, (color: $palette-color));
+}
+
+/* Creates a theme */
+@mixin vd-theme($theme, $config: null) {
+	@include vd-typography($config);
+	@include vd-common-theme($theme);
+	@include vd-layout-theme($theme);
+}

package/lib/http/http.module.d.ts

@@ -1,8 +1,7 @@
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common/http";
 export { GenericService } from './services/generic.service';
 export declare class VdHttpModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<VdHttpModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<VdHttpModule, never, [typeof i1.HttpClientModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<VdHttpModule, never, never, never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<VdHttpModule>;
 }

package/lib/layout/{_layout-theme.scss → _m2-layout-theme.scss}

@@ -1,6 +1,7 @@
 //@use '~@angular/material' as mat;
 @import '../common/styles/elevation';
 @import '../common/styles/theme-functions';
+@import '../common/styles/m2/theme-functions';
 @import '../common/styles/typography-functions';
 
 @mixin vd-layout-typography($config) {
@@ -45,13 +46,13 @@
 	$foreground: map-get($theme, foreground);
 	$is-dark: map.get($theme, is-dark);
 
-	$background-color: mat.get-color-from-palette($background, app-bar);
+	$background-color: mat.m2-get-color-from-palette($background, app-bar);
 
 	$primary-color: mat-color($primary);
 	$accent-color: mat-color($accent);
 
 	.mat-drawer-container {
-		background-color: mat.get-color-from-palette($background, if($is-dark, app-bar, status-bar)) !important;
+		background-color: mat.m2-get-color-from-palette($background, if($is-dark, app-bar, status-bar)) !important;
 	}
 
 	[mat-icon-button].vd-layout-menu-button {
@@ -104,34 +105,34 @@
 	}
 
 	.vd-layout-footer {
-		background: mat.get-color-from-palette($background, app-bar);
-		color: mat.get-color-from-palette($foreground, text);
+		background: mat.m2-get-color-from-palette($background, app-bar);
+		color: mat.m2-get-color-from-palette($foreground, text);
 		@include mat.elevation(2);
 
 		&.mat-primary {
-			background: mat.get-color-from-palette($primary);
+			background: mat.m2-get-color-from-palette($primary);
 
 			&,
 			mat-icon {
-				color: mat.get-color-from-palette($primary, default-contrast);
+				color: mat.m2-get-color-from-palette($primary, default-contrast);
 			}
 		}
 
 		&.mat-accent {
-			background: mat.get-color-from-palette($accent);
+			background: mat.m2-get-color-from-palette($accent);
 
 			&,
 			mat-icon {
-				color: mat.get-color-from-palette($accent, default-contrast);
+				color: mat.m2-get-color-from-palette($accent, default-contrast);
 			}
 		}
 
 		&.mat-warn {
-			background: mat.get-color-from-palette($warn);
+			background: mat.m2-get-color-from-palette($warn);
 
 			&,
 			mat-icon {
-				color: mat.get-color-from-palette($warn, default-contrast);
+				color: mat.m2-get-color-from-palette($warn, default-contrast);
 			}
 		}
 	}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@messaia/cdk",
-  "version": "17.1.5",
+  "version": "18.0.0-rc02",
   "peerDependencies": {
-    "@angular/common": "^17.3.5",
-    "@angular/core": "^17.3.5"
+    "@angular/common": "^18.0.6",
+    "@angular/core": "^18.0.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"