@enigmatry/entry-components 1.15.1-preview.5 → 1.15.1-preview.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.5",
+  "version": "1.15.1-preview.7",
   "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

@@ -1,5 +1,7 @@
 @use 'modules/components/dialogs/generator' as dialog;
 @use 'modules/components/headers/generator' as header;
+@use 'modules/components/tables/generator' as table;
+@use 'modules/components/forms/generator' as form;
 @use 'modules/elements/generator' as elements;
 @use 'modules/default-theme' as default;
 @use 'sass:map';
@@ -8,6 +10,8 @@
 	$merged-theme: map.deep-merge(default.$theme, $custom-theme);
 
 	@include elements.generate-from($merged-theme);
+	@include table.generate-from($merged-theme);
+	@include form.generate-from($merged-theme);
 	@include dialog.generate-from($merged-theme);
 	@include header.generate-from($merged-theme);
 }

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

@@ -0,0 +1,9 @@
+@use 'outlines/general' as appearance-outlines;
+@use 'selectors/checkboxes';
+@use 'selectors/radio-buttons';
+
+@mixin generate-from($theme) {
+	@include appearance-outlines.generate-from($theme);
+	@include checkboxes.generate-from($theme);
+	@include radio-buttons.generate-from($theme);
+}

package/styles/modules/components/forms/outlines/_field-outlines.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+@mixin -generate($border-value, $theme) {
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-outline-start, .mat-form-field-outline-gap, .mat-form-field-outline-end {
+		border: $border-value;
+	}
+
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-outline-start, .mat-form-field-outline-gap {
+		border-right-style: map.get($theme, 'forms', 'fields', 'outline', 'border-right');
+	}
+
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-outline-end, .mat-form-field-outline-gap {
+		border-left-style: map.get($theme, 'forms', 'fields', 'outline', 'border-left');
+	}
+}
+
+@mixin generate-from($theme) {
+	@include -generate(map.get($theme, 'forms', 'fields', 'outline', 'border'), $theme);
+
+	&.mat-focused, &:hover {
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-form-field-outline {
+			border-bottom: map.get($theme, 'forms', 'fields', 'outline', 'border-hover');
+		}
+
+		@include -generate(transparent, $theme);
+	}
+
+	&.mat-form-field-disabled {
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-form-field-outline {
+			background-color: map.get($theme, 'forms', 'fields', 'outline', 'disabled-background');
+		}
+
+		&:hover {
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+			.mat-form-field-outline-start, .mat-form-field-outline-gap, .mat-form-field-outline-end {
+				border-color: map.get($theme, 'forms', 'fields', 'outline', 'disabled-hover');
+			}
+		}
+	}
+}

package/styles/modules/components/forms/outlines/_form-fields.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-label {
+		color: map.get($theme, 'forms', 'fields', 'label-color');
+	}
+
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-infix {
+		padding: {
+			top: map.get($theme, 'forms', 'fields', 'infix-padding-top');
+			bottom: map.get($theme, 'forms', 'fields', 'infix-padding-bottom');
+		}
+	}
+
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-flex {
+		background-color: map.get($theme, 'general', 'inputs', 'background-color');
+	}
+
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-form-field-underline {
+		display: map.get($theme, 'forms', 'fields', 'underline-display');
+	}
+}

package/styles/modules/components/forms/outlines/_general.scss

@@ -0,0 +1,9 @@
+@use 'field-outlines';
+@use 'form-fields';
+
+@mixin generate-from($theme) {
+	.mat-form-field-appearance-outline {
+		@include field-outlines.generate-from($theme);
+		@include form-fields.generate-from($theme);
+	}
+}

package/styles/modules/components/forms/selectors/_checkboxes.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.mat-checkbox {
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-checkbox-inner-container {
+			width: map.get($theme, 'forms', 'checkboxes', 'width');
+			height: map.get($theme, 'forms', 'checkboxes', 'height');
+			background-color: map.get($theme, 'forms', 'checkboxes', 'background-color');
+		}
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-checkbox-label {
+			white-space: map.get($theme, 'forms', 'checkboxes', 'label-breaking');
+		}
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-checkbox-frame {
+			border: map.get($theme, 'forms', 'checkboxes', 'border');
+			border-radius: map.get($theme, 'forms', 'checkboxes', 'border-radius');
+		}
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-checkbox-checkmark-path {
+			/* stylelint-disable-next-line declaration-no-important */
+			stroke: map.get($theme, 'forms', 'checkboxes', 'checkmark-color') !important;
+		}
+
+		&:hover {
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+			.mat-checkbox-frame {
+				border: map.get($theme, 'forms', 'checkboxes', 'border-hover');
+			}
+		}
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		&.mat-checkbox-checked {
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field 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 form-field that may no longer apply for the MDC version. */
+				.mat-checkbox-checkmark-path {
+					/* stylelint-disable-next-line declaration-no-important */
+					stroke: map.get($theme, 'forms', 'checkboxes', 'selected-checkmark-color') !important;
+				}
+			}
+    
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+			.mat-checkbox-frame {
+				border-color: map.get($theme, 'forms', 'checkboxes', 'selected-background-color');
+			}
+		}
+	}
+}

package/styles/modules/components/forms/selectors/_radio-buttons.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+	.mat-radio-group {
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-radio-label {
+			align-items: map.get($theme, 'forms', 'radio-buttons', 'align');
+			white-space: map.get($theme, 'forms', 'radio-buttons', 'white-space');
+		}
+
+		$background: map.get($theme, 'general', 'inputs', 'background-color');
+
+		/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+		.mat-radio-button {
+
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+			.mat-radio-outer-circle {
+				border-color: $background;
+				background-color: $background;
+			}
+
+			/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+			&.mat-radio-checked {
+
+				/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+				.mat-radio-outer-circle {
+					border-color: $background;
+				}
+
+				/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+				.mat-radio-inner-circle {
+					background-color: map.get($theme, 'general', 'colors', 'primary');
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,23 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.mat-mdc-cell {
+		color: map.get($theme, 'general', 'colors', 'dark');
+	}
+
+	.mat-mdc-cell, .mat-mdc-header-cell {
+		font-size: map.get($theme, 'general', 'font', 'size');
+	}
+
+	.mat-mdc-header-cell:first-of-type, .mat-mdc-cell:first-of-type, .mat-mdc-footer-cell:first-of-type {
+		padding-left: map.get($theme, 'tables', 'cells', 'first-cell-padding-left');
+	}
+
+	.mat-mdc-header-cell:last-of-type, .mat-mdc-cell:last-of-type, .mat-mdc-footer-cell:last-of-type {
+		padding-right: map.get($theme, 'tables', 'cells', 'last-cell-padding-right');
+	}
+
+	.entry-table-checkbox-cell, .entry-table-context-menu-cell {
+		min-width: map.get($theme, 'tables', 'cells', 'min-width');
+	}
+}

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

@@ -0,0 +1,7 @@
+@use 'no-result';
+@use 'table-body' as table;
+
+@mixin generate-from($theme) {
+	@include table.generate-from($theme);
+	@include no-result.generate-from($theme);
+}

package/styles/modules/components/tables/_no-result.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-table-no-result {
+		text-transform: map.get($theme, 'tables', 'contents', 'no-result', 'text-transform');
+        
+		font: {
+			size: map.get($theme, 'tables', 'contents', 'no-result', 'font-size');
+			weight: map.get($theme, 'tables', 'contents', 'no-result', 'font-weight');
+		}
+	}
+}

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

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use '@enigmatry/scss-foundation/src/modules/lists/row-coloring' as list;
+
+@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 {
+				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-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/modules/components/tables/_sorting.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.mat-sort-header-sorted {
+		font: {
+			size: map.get($theme, 'general', 'font', 'size');
+			weight: map.get($theme, 'tables', 'columns', 'sorted', 'font-weight');
+		}
+	}
+
+	.mat-sort-header-sorted, .mat-sort-header-arrow {
+		color: map.get($theme, 'general', 'colors', 'dark');
+	}
+
+	.mat-sort-header-content {
+		text-align: map.get($theme, 'tables', 'columns', 'sorted', 'content-align');
+	}
+}

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

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

package/styles/modules/elements/_generator.scss

@@ -12,7 +12,7 @@ $default-theme: default.$theme;
 	$font-family: map.get($merged-theme, 'general', 'font', 'family');
 
 	@if $font-family == '' {
-		@include fonts.generate-default-font();
+		// @include fonts.generate-default-font();
 	}
 
 	@include anchors.generate-from($merged-theme);

package/styles/partials/core/components/_index.scss

@@ -0,0 +1,4 @@
+@use 'dialogs/general' as dialogs;
+@use 'headers/general' as headers;
+@use 'tables';
+@use 'forms/general' as forms;

package/styles/partials/core/components/dialogs/_general.scss

@@ -1,8 +1,5 @@
 @use 'sass:color';
 @use '@enigmatry/scss-foundation/src/modules/display/items';
-@use '../../../../../../styles/modules/variables' as vars;
-@use '../../../../../../styles/modules/states/hover';
-@use '../../../../../../styles/modules/typography/fonts' as fonts;
 
 $border-dark: #000;
 $default-gap: 16px;
@@ -12,13 +9,13 @@ $large-gap: calc(#{$default-gap} * 2);
 .dialog-container {
 	/* stylelint-disable-next-line declaration-no-important */
 	position: absolute !important;
-	top: vars.$large-gap;
+	top: $large-gap;
 	width: 100%;
 	max: {
 		/* stylelint-disable-next-line declaration-no-important */
 		width: 700px !important;
 		/* stylelint-disable-next-line declaration-no-important */
-		height: calc(100% - 2 * vars.$large-gap) !important;
+		height: calc(100% - 2 * $large-gap) !important;
 	}
     
 	&.wide {
@@ -40,12 +37,11 @@ $large-gap: calc(#{$default-gap} * 2);
 		@include items.fully-align(center, space-between, row, nowrap);
 	
 		.title {
-			// @include fonts.title-font();
 			line-height: 1.2;
 		}
 	
 		.close-button {
-			margin-left: vars.$default-gap;
+			margin-left: $default-gap;
 			border: none;
 			background: none;
 		}
@@ -53,8 +49,8 @@ $large-gap: calc(#{$default-gap} * 2);
 
 	.dialog-content {
 		margin: {
-			top: vars.$default-gap;
-			bottom: vars.$large-gap;
+			top: $default-gap;
+			bottom: $large-gap;
 		}
 		line-height: 1.4;
 
@@ -75,7 +71,7 @@ $large-gap: calc(#{$default-gap} * 2);
 	
 	.dialog-radio-button {
 		display: block;
-		margin-top: vars.$default-gap;
+		margin-top: $default-gap;
 		white-space: break;
 	}
 }

package/styles/partials/core/components/forms/_general.scss

@@ -0,0 +1,32 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
+.entry-form {
+	.action-buttons {
+		margin-top: 25px;
+
+		.button {
+			margin-left: 10px;
+
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+	}
+}
+
+.mat-form-field-appearance-outline .mat-form-field-should-float .mat-form-field-label {
+	top: 31px;
+}
+
+.datetimepicker {
+	.mat-form-field-appearance-outline .mat-form-field-infix {
+		padding: {
+			top: 8px;
+			bottom: 8px;
+		}
+	}
+}
+
+.entry-date-time-picker {
+	@include items.fully-align(baseline, space-between, row, nowrap);
+}

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

@@ -0,0 +1,26 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
+.entry-table .mat-mdc-icon-button {
+	width: unset;
+	@include items.align-center();
+}
+
+.entry-table-checkbox-cell, .entry-table-context-menu-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

@@ -0,0 +1,39 @@
+.entry-table {
+	.mat-mdc-cell, .mat-mdc-header-cell {
+		padding: 0 10px;
+		border-bottom: none;
+	}
+
+	.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell {
+		box-sizing: border-box;
+		padding: 4px 10px;
+
+		&.entry-table-checkbox-cell {
+			padding: {
+				right: 10px;
+				left: 10px;
+			}
+		}
+	}
+
+	.mat-mdc-table {
+		.mat-mdc-header-cell, .mat-mdc-footer-cell, .mat-mdc-cell {
+			&:not(.entry-table-checkbox-cell) {
+				min-width: 80px;
+			}
+		}
+	}
+
+	.mat-header-cell-inner {
+		display: flex;
+		align-items: center;
+	}
+
+	.currency {
+		text-align: right;
+
+		.mat-header-cell-inner {
+			justify-content: right;
+		}
+	}
+}

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

@@ -0,0 +1,5 @@
+@use 'action-cells';
+@use 'cells';
+@use 'layout';
+@use 'rows';
+@use 'sorting';

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

@@ -0,0 +1,47 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
+.entry-table {
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	width: 100%;
+
+	.mat-mdc-table-container {
+		overflow: auto;
+
+		&.mat-mdc-table-with-data {
+			flex: 1;
+		}
+	}
+
+	.mat-mdc-table {
+		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 {
+	display: flex;
+	flex: 1 1 auto;
+	overflow: auto;
+}
+
+.entry-table-content {
+	flex-direction: column;
+	width: 0;
+}
+
+.entry-table-footer {
+	position: relative;
+	z-index: 1;
+}
+
+.entry-table-no-result {
+	@include items.align-absolute-center();
+	flex: 1;
+	min-height: 50px;
+}

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

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

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

@@ -0,0 +1,8 @@
+.entry-table {
+	.mat-sort-header-icon {
+		width: 18px;
+		height: 18px;
+		margin: 0 4px;
+		font-size: 18px;
+	}
+}

package/styles/partials/test.scss

@@ -0,0 +1,35 @@
+@use '../generator';
+
+$custom-theme: (
+	general: (
+		colors: (
+			primary: #FAE3C1
+		),
+		font: (
+			size: 13px
+		),
+		buttons: (
+			color: #AAA
+		)
+	),
+	forms: (
+		fields: (
+			infix-padding-top: 41px,
+			outline: (
+				border-hover: 2px solid #666
+			)
+		)
+	),
+	tables: (
+		cells: (
+			first-cell-padding-left: 11px
+		)
+	),
+	headers: (
+		title: (
+			size: 41px
+		)
+	),
+);
+
+@include generator.generate-from($custom-theme);

package/styles/partials/theming.scss

@@ -0,0 +1 @@
+@use 'core/components';

package/styles/partials/main.scss

@@ -1,18 +0,0 @@
-@use '../generator';
-
-$custom-theme: (
-	general: (
-		colors: (
-			primary: #FAE3C1
-		),
-		font: (
-			family: 'Some Custom font',
-			size: 13px
-		),
-		buttons: (
-			color: #AAA
-		)
-	)
-);
-
-@include generator.generate-from($custom-theme);