@enigmatry/entry-components 1.15.1-preview.10 → 1.15.1-preview.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.10",
+  "version": "1.15.1-preview.12",
   "author": "Enigmatry",
   "description": "Enigmatry entry angular material components",
   "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/entry-components#readme",

package/styles/_generator.scss

@@ -4,11 +4,13 @@
 @use 'modules/components/forms/generator' as form;
 @use 'modules/elements/generator' as elements;
 @use 'modules/default-theme' as default;
+@use 'modules/angular-material-generator' as material-theme;
 @use 'sass:map';
 
 @mixin generate-from($custom-theme: ()) {
 	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
 
+	@include material-theme.generate-from($merged-theme);
 	@include elements.generate-from($merged-theme);
 	@include table.generate-from($merged-theme);
 	@include form.generate-from($merged-theme);

package/styles/modules/_angular-material-generator.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as theming;
+@use 'palette-generator';
+@use 'sass:map';
+
+/* stylelint-disable scss/function-no-unknown */
+@mixin generate-from($theme) {
+	@include theming.core();
+
+	$primary-palette: theming.define-palette(-get-material-palette-for('primary', $theme));
+	$accent-palette: theming.define-palette(-get-material-palette-for('accent', $theme));
+	$warn-palette: theming.define-palette(theming.$red-palette);
+
+	$default-theme: theming.define-light-theme((
+		color: (
+			primary: $primary-palette,
+			accent: $accent-palette,
+			warn: $warn-palette
+		),
+		typography: theming.define-typography-config()
+	));
+	
+	@include theming.all-component-themes($default-theme);
+}
+
+@function -get-material-palette-for($key, $theme) {
+	$palette: map.get($theme, 'general', 'colors', $key + '-theme');
+
+	@if $palette {
+		@return $palette;
+	}
+
+	$color: map.get($theme, 'general', 'colors', $key);
+	@return palette-generator.generate-from($color);
+}

package/styles/modules/_default-theme.scss

@@ -2,6 +2,8 @@
 $theme: (
 	general: (
 		colors: (
+			primary-theme: null,
+			accent-theme: null,
 			primary: #2581C4,
 			accent: #EA518D,
 			dark: #323232,
@@ -31,7 +33,7 @@ $theme: (
 				border-right: none,
 				border-left: none,
 				disabled-background: #F5F5F5,
-				disabled-hover: 2px solid #EBEBEB, 
+				disabled-hover: 2px solid #EBEBEB
 			)
 		),
 		checkboxes: (
@@ -44,11 +46,11 @@ $theme: (
 			border: 2px solid #0000008A,
 			border-hover: 2px solid #0000008A,
 			border-radius: 0,
-			label-breaking: nowrap,
+			label-breaking: nowrap
 		),
 		radio-buttons: (
 			align: flex-start,
-			white-space: nowrap,
+			white-space: nowrap
 		),
 	),
 	tables: (

package/styles/modules/_palette-generator.scss

@@ -0,0 +1,32 @@
+@use 'sass:color';
+@use 'sass:map';
+
+@function generate-from($color) {
+	$result: (
+		50: color.adjust($color, $lightness: -30%),
+		contrast: (
+			50: #212121,
+			100: #212121,
+			200: #212121,
+			300: #212121,
+			400: #212121,
+			500: #FFF,
+			600: #FFF,
+			700: #FFF,
+			800: #FFF,
+			900: #FFF,
+			a100: #212121,
+			a200: #212121,
+			a400: #FFF,
+			a700: #FFF
+		)
+	);
+
+	@for $counter from 1 through 9 {
+		$blended-color: color.adjust($color, $lightness: -27 + $counter * 5%);
+		/* stylelint-disable-next-line scss/no-duplicate-dollar-variables */
+		$result: map.set($result, $counter * 100, $blended-color);
+	}
+
+	@return $result;
+}

package/styles/modules/components/tables/_rows.scss

@@ -4,40 +4,20 @@
 @mixin generate-from($theme) {
 	.mat-mdc-row {
 		$edge-selected-color: map.get($theme, 'forms', 'checkboxes', 'selected-border-color');
-		
+
 		@include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
 		map.get($theme, 'tables', 'rows', 'odd-even-row'));
 
-		/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-		.mat-checkbox-inner-container {
-			background-color: map.get($theme, 'forms', 'checkboxes', 'background-color');
-		}
-
 		&.selected {
 			background-color: map.get($theme, 'tables', 'rows', 'selected-background-color');
-    
-			.mat-mdc-cell {
+
+			&:hover {
+				background-color: map.get($theme, 'tables', 'rows', 'selected-background-color');
 				color: map.get($theme, 'tables', 'rows', 'selected-color');
 			}
 
-			/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-			.mat-checkbox-checked {
-				/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-				.mat-checkbox-background {
-					background-color: map.get($theme, 'forms', 'checkboxes', 'selected-background-color');
-        
-					/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-					/* stylelint-disable-next-line max-nesting-depth, selector-max-combinators, selector-max-compound-selectors */
-					.mat-checkbox-checkmark-path {
-						/* stylelint-disable-next-line declaration-no-important */
-						stroke: $edge-selected-color !important;
-					}
-				}
-        
-				/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-				.mat-checkbox-frame {
-					border-color: $edge-selected-color;
-				}
+			.mat-mdc-cell {
+				color: map.get($theme, 'tables', 'rows', 'selected-color');
 			}
 		}
 	}
@@ -45,9 +25,4 @@
 	.mat-row-disabled {
 		background-color: map.get($theme, 'general', 'colors', 'disabled-light');
 	}
-
-	.entry-table-menu .context-menu-item:hover {
-		background-color: map.get($theme, 'general', 'colors', 'accent');
-		color: map.get($theme, 'general', 'colors', 'dark');
-	}
 }

package/styles/partials/core/components/tables/_action-cells.scss

@@ -1,26 +1,16 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-.entry-table .mat-mdc-icon-button {
-	width: unset;
-	@include items.align-center();
+.entry-table .mat-icon-button {
+	padding-top: 8px;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
 }
 
-.entry-table-checkbox-cell, .entry-table-context-menu-cell {
+.entry-table-checkbox-cell {
 	flex: none;
 	width: 56px;
 	max-width: 40px;
 
 	.mat-mdc-checkbox {
 		display: flex;
-		margin: 0 10px;
-	}
-
-	/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-	.mat-checkbox-inner-container {
-		margin-left: 0;
-	}
-
-	.mat-mdc-icon-button {
-		padding-top: 2px;
 	}
 }

package/styles/partials/core/components/tables/_cells.scss

@@ -1,3 +1,5 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
 .entry-table {
 	.mat-mdc-cell, .mat-mdc-header-cell {
 		padding: 0 10px;
@@ -14,6 +16,12 @@
 				left: 10px;
 			}
 		}
+
+		&.entry-table-context-menu-cell {
+			@include items.fully-align(center, flex-end);
+			/* stylelint-disable-next-line declaration-no-important */
+			min-width: unset !important;
+		}
 	}
 
 	.mat-mdc-table {
@@ -36,4 +44,4 @@
 			justify-content: right;
 		}
 	}
-}
+}

package/styles/partials/core/components/tables/_layout.scss

@@ -18,10 +18,6 @@
 		min-width: 100%;
 		border-collapse: separate;
 	}
-	/* TODO(mdc-migration): The following rule targets internal classes of paginator that may no longer apply for the MDC version. */
-	.mat-paginator-hidden {
-		display: none;
-	}
 }
 
 .entry-table-layout {

package/styles/partials/core/components/tables/_rows.scss

@@ -1,13 +1,15 @@
 .entry-table {
-	.mat-row, .mat-header-row {
-		height: 36px;
+	.mat-mdc-table {
+		.mdc-data-table__header-row, .mdc-data-table__row {
+			height: 36px;
+		}
 	}
 }
 
 .entry-table-menu {
 	min-height: 40px;
 
-	.mat-menu-content:not(:empty) {
+	.mat-mdc-menu-content:not(:empty) {
 		padding: 0;
 	}
 }