@enigmatry/entry-components 16.0.0 → 16.0.1-preview.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "16.0.0",
+  "version": "16.0.1-preview.4",
   "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,6 +4,7 @@
 @use 'modules/components/tables/generator' as tables;
 @use 'modules/components/inputs/generator' as inputs;
 @use 'modules/components/buttons/generator' as buttons;
+@use 'modules/components/checkboxes/generator' as checkboxes;
 @use 'modules/default-theme' as default;
 @use 'modules/vendors/angular-material/generator' as material-theme;
 @use 'sass:map';
@@ -19,4 +20,5 @@
 	@include forms.generate-from($merged-theme);
 	@include search-filters.generate-from($merged-theme);
 	@include dialogs.generate-from($merged-theme);
+	@include checkboxes.generate-from($merged-theme);
 }

package/styles/modules/_default-theme.scss

@@ -46,16 +46,27 @@ $theme: (
 			background: null
 		),
 		buttons: (
-			icon-size: 48px
+			icon-size: 48px,
+			radio: (
+				background: null
+			)
+		),
+		checkboxes: (
+			background: null,
+			border-hover-color: null
 		)
 	),
 	tables: (
+		header: (
+			font-size: null
+		),
 		cells: (
 			edge-gap: 4px,
 			padding: null
 		),
 		rows: (
 			selected-color: #FFF,
+			selected-background: null,
 			disabled-color: #F5F5F5,
 			odd-even-row: odd,
 			odd-even-background: #F0F0F0

package/styles/modules/components/buttons/_generator.scss

@@ -1,8 +1,11 @@
 @use 'sass:map';
+@use 'radio';
 
 @mixin generate-from($theme) {
 	.entry-button.mdc-button:disabled {
 		background-color: map.get($theme, 'general', 'colors', 'disabled', 'background');
 		color: map.get($theme, 'general', 'colors', 'disabled', 'foreground');
 	}
+
+	@include radio.generate-from($theme);
 }

package/styles/modules/components/buttons/_radio.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+$radio-selector: '.mdc-radio__native-control:enabled:checked + .mdc-radio__background';
+$radio-circles-selector: '.mdc-radio__outer-circle, .mdc-radio__inner-circle';
+
+@mixin generate-from($theme) {
+	.mat-mdc-radio-group .mat-mdc-radio-button {
+		&.mat-mdc-radio-checked .mdc-radio {
+			&:not(:disabled):active #{$radio-selector}, #{$radio-selector} {
+				#{$radio-circles-selector} {
+					border-color: map.get($theme, 'general', 'buttons', 'radio', 'background');
+				}
+			}
+		}
+	}
+}

package/styles/modules/components/checkboxes/_generator.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+
+/* stylelint-disable-next-line max-line-length */
+$checkbox-selector: '.mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate = "true"]) ~ .mdc-checkbox__background';
+
+@mixin generate-from($theme) {
+	$background: map.get($theme, 'general', 'checkboxes', 'background');
+	$border-hover-color: map.get($theme, 'general', 'checkboxes', 'border-hover-color');
+
+	.mat-mdc-checkbox {
+		.mdc-form-field {
+			.mdc-checkbox {
+				#{$checkbox-selector} {
+					background-color: $background;
+				}
+			}
+		}
+
+		&:hover {
+			/* stylelint-disable-next-line selector-max-pseudo-class */
+			.mdc-checkbox:hover {
+				#{$checkbox-selector} {
+					border-color: $border-hover-color;
+					background-color: $background;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	$cell-font-size: map.get($theme, 'tables', 'header', 'font-size');
+
+	.mat-mdc-header-cell {
+		font-size: $cell-font-size;
+	}
+}

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

@@ -9,7 +9,12 @@
 
 			&.selected {
 				background-color: map.get($theme, 'general', 'colors', 'primary');
-
+				$selected-row-background: map.get($theme, 'tables', 'rows', 'selected-background');
+				
+				@if $selected-row-background and $selected-row-background != transparent {
+					background-color: $selected-row-background;
+				}
+				
 				.mat-mdc-cell {
 					color: map.get($theme, 'tables', 'rows', 'selected-color');
 				}

package/styles/modules/components/tables/_table-body.scss

@@ -1,11 +1,13 @@
 @use 'rows';
 @use 'sorting';
 @use 'cells';
+@use 'header';
 
 @mixin generate-from($theme) {
 	.entry-table {
 		@include rows.generate-from($theme);
 		@include sorting.generate-from($theme);
 		@include cells.generate-from($theme);
+		@include header.generate-from($theme);
 	}
 }

package/styles/partials/generator-test.scss

@@ -20,6 +20,10 @@ $custom-theme: (
 		),
 		inputs: (
 			background: yellow
+		),
+		checkboxes: (
+			background: red,
+			border-hover-color: green
 		)
 	),
 	tables: (