@enigmatry/entry-components 1.15.1-preview.2 → 1.15.1-preview.21

package/public-api.d.ts

@@ -3,3 +3,4 @@ export * from '@enigmatry/entry-components/dialog';
 export * from '@enigmatry/entry-components/search-filter';
 export * from '@enigmatry/entry-components/toolbar';
 export * from '@enigmatry/entry-components/validation';
+export * from '@enigmatry/entry-components/button';

package/styles/_generator.scss

@@ -0,0 +1,15 @@
+@use 'modules/components/dialogs/generator' as dialog;
+@use 'modules/components/headers/generator' as header;
+@use 'modules/components/tables/generator' as table;
+@use 'modules/default-theme' as default;
+@use 'modules/vendors/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 table.generate-from($merged-theme);
+	@include dialog.generate-from($merged-theme);
+	@include header.generate-from($merged-theme);
+}

package/styles/modules/_default-theme.scss

@@ -0,0 +1,57 @@
+$theme: (
+	general: (
+		colors: (
+			primary-theme: null,
+			accent-theme: null,
+			primary: #2581C4,
+			accent: #EA518D,
+			font: #323232
+		),
+		typography: null,
+		fonts: (
+			hero-titles: (
+				family: '',
+				size: 0
+			),
+			titles: (
+				family: '',
+				size: 0
+			),
+			body: (
+				family: '',
+				size: 0
+			),
+			buttons: (
+				family: '',
+				size: 0
+			)
+		)
+	),
+	tables: (
+		cells: (
+			edge-gap: 4px
+		),
+		rows: (
+			selected-color: #FFF,
+			disabled-color: #F5F5F5,
+			odd-even-row: odd,
+			odd-even-background: #F0F0F0
+		),
+		contents: (
+			no-result: (
+				font-size: 13px,
+				font-weight: 500
+			)
+		)
+	),
+	headers: (
+		title: (
+			size: 32px
+		)
+	),
+	dialogs: (
+		title: (
+			size: 20px
+		)
+	)
+);

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

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-dialog {
+		.title {
+			color: map.get($theme, 'general', 'colors', 'font');
+			font-size: map.get($theme, 'dialogs', 'title', 'size');
+		}
+		font-size: map.get($theme, 'general', 'font', 'size');
+	}
+}

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

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-header {
+		background-color: map.get($theme, 'general', 'colors', 'primary');
+
+		.title {
+			color: map.get($theme, 'general', 'colors', 'font');
+			font-size: map.get($theme, 'headers', 'title', 'size');
+		}
+	}
+}

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

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.mat-mdc-cell {
+		color: map.get($theme, 'general', 'colors', 'font');
+	}
+
+	.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', 'edge-gap');
+	}
+
+	.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', 'edge-gap');
+	}
+}

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,10 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.entry-table .no-results {
+		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,23 @@
+@use 'sass:map';
+@use '@enigmatry/scss-foundation/src/modules/lists/row-coloring' as list;
+
+@mixin generate-from($theme) {
+	.mat-mdc-row {
+		&.mdc-data-table__row {
+			@include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
+			map.get($theme, 'tables', 'rows', 'odd-even-row'));
+
+			&.selected {
+				background-color: map.get($theme, 'general', 'colors', 'primary');
+
+				.mat-mdc-cell {
+					color: map.get($theme, 'tables', 'rows', 'selected-color');
+				}
+			}
+
+			&.mat-row-disabled {
+				background-color: map.get($theme, 'tables', 'rows', 'disabled-color');
+			}
+		}
+	}
+}

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

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@mixin generate-from($theme) {
+	.mat-sort-header-sorted {
+		font-weight: 700;
+	}
+
+	.mat-sort-header-sorted, .mat-sort-header-arrow {
+		color: map.get($theme, 'general', 'colors', 'font');
+	}
+}

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/typography/_fonts.scss

@@ -1,86 +1,64 @@
-@use 'sass:string';
 @use 'sass:map';
-@use 'sass:math';
 
-@mixin generate-font-face($font-config) {
-	$font-path: map.get($font-config, path);
-	$font-sources: map.get($font-config, sources);
+$font-path: '/assets/fonts/';
+$font-sources: (
+	(
+		name: 'Roboto',
+		style: normal,
+		formats: ('woff2'),
+		weight: 400
+	),
+	(
+		name: 'Roboto',
+		style: bold,
+		formats: ('woff2'),
+		weight: 500
+	)
+);
 
+// $font-sources: (
+// 	(
+// 		name: 'OpenSans',
+// 		style: normal,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	),
+// 	(
+// 		name: 'OpenSans',
+// 		style: bold,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	),
+// 	(
+// 		name: 'Montserrat',
+// 		style: bold,
+// 		formats: ('eot', 'woff', 'woff2', 'ttf')
+// 	)
+// );
+
+@mixin generate-default-font() {
 	@each $font in $font-sources {
 		$name: map.get($font, name);
 		$style: map.get($font, style);
 		$formats: map.get($font, formats);
-  
+		$weight: map.get($font, weight);
+
 		@each $format in $formats {
 			$url: '#{$font-path}#{$name}/#{$name}-#{$style}.#{$format}';
-  
+
 			@font-face {
 				font: {
-					family: '#{$name}-#{$style}';
 					style: '#{$style}';
+		
+					/* stylelint-disable property-no-unknown, max-nesting-depth */
+					@if $weight {
+						family: '#{$name}';
+						weight: $weight;
+					}
+					@else {
+						family: '#{$name}-#{$style}';
+					}
 				}
 				src: url('#{$url}') format('#{$format}');
 			}
 		}
 	}
-
-	// Generate icomoon icons font face:
-	@include entry-icomoon-icons($font-path);
-}
-
-// TODO: Hardcoded icons font, must be configurable but also to support default value!
-@mixin entry-icomoon-icons($font-path) {
-	@font-face {
-		font-family: 'icomoon';
-		font-style: normal;
-		font-weight: normal;
-		src: url($font-path + 'icomoon/fonts/icomoon.eot?s68r7n');
-		src: url($font-path + 'icomoon/fonts/icomoon.eot?s68r7n#iefix') format('embedded-opentype'), 
-			url($font-path + 'icomoon/fonts/icomoon.ttf?s68r7n') format('truetype'),
-			url($font-path + 'icomoon/fonts//icomoon.woff?s68r7n') format('woff'),
-			url($font-path + 'icomoon/fonts//icomoon.svg?s68r7n#icomoon') format('svg');
-		font-display: block;
-	}
-	  
-	[class ^= 'icon-'], [class *= ' icon-'] {
-		/* use !important to prevent issues with browser extensions that change fonts */
-		font-family: 'icomoon' !important;
-	  
-		/* Better Font Rendering =========== */
-		-webkit-font-smoothing: antialiased;
-		-moz-osx-font-smoothing: grayscale;
-		font-style: normal;
-		font-variant: normal;
-		font-weight: normal;
-		line-height: 1;
-		text-transform: none;
-		speak: never;
-	}
-	  
-	.icon-close::before {
-		content: '\e900';
-	}
-	  
-	.icon-menu:before {
-		content: "\e9bd";
-	}
-}
-
-// TODO: Hardcoded mixins (currently not ins use) that should be configurable!
-/*
-@mixin -font($family, $size) {
-	font: {
-		family: $family;
-		size: $size;
-	};
-}
-@mixin main-font($size: 14px) {
-	@include -font('OpenSans-normal', $size);
-}
-@mixin main-bolded-font($size: 14px) {
-	@include -font('OpenSans-Bold', $size);
-}
-@mixin title-font($size: 20px) {
-	@include -font('Montserrat-bold', $size);
 }
-*/

package/styles/modules/vendors/angular-material/_generator.scss

@@ -0,0 +1,44 @@
+@use '@angular/material' as theming;
+@use 'palette-generator';
+@use 'typography-generator';
+@use 'sass:map';
+@use '../../typography/fonts';
+
+/* stylelint-disable scss/function-no-unknown */
+@mixin generate-from($theme) {
+	@include theming.core();
+	$body-font: map.get($theme, 'general', 'fonts', 'body', 'family');
+
+	@if $body-font == '' {
+		@include fonts.generate-default-font();
+	}
+
+	$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);
+
+	$typography: typography-generator.generate-from($theme);
+	@include theming.typography-hierarchy($typography);
+
+	$default-theme: theming.define-light-theme((
+		color: (
+			primary: $primary-palette,
+			accent: $accent-palette,
+			warn: $warn-palette
+		),
+		typography: $typography
+	));
+	
+	@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/vendors/angular-material/_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/vendors/angular-material/_typography-generator.scss

@@ -0,0 +1,100 @@
+/* stylelint-disable scss/no-duplicate-dollar-variables, scss/function-no-unknown */
+@use '@angular/material' as theming;
+@use 'sass:map';
+
+@function generate-from($theme) {
+	$theme-typography: map.get($theme, 'general', 'typography');
+
+	@if $theme-typography {
+		@return $theme-typography;
+	}
+
+	@return -generate-typography-from($theme);
+}
+
+@function -generate-typography-from($theme) {
+	$fonts: map.get($theme, 'general', 'fonts');
+	$typography: theming.define-typography-config();
+
+	$typography: -set-font-size-for('body', $typography, $fonts, ('body-1', 'body-2'));
+	$typography: -set-font-size-for('buttons', $typography, $fonts, ('buttons'));
+	$typography: -set-font-size-for('hero-titles', $typography, $fonts, ('headline-1', 'headline-2', 'headline-3', 'headline-4'));
+	$typography: -set-font-size-for('titles', $typography, $fonts, ('headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'));
+	$typography: -set-font-family($typography, $fonts);
+
+	@return $typography;
+}
+
+@function -set-font-size-for($selector, $typography, $fonts, $desired-size-settings) {
+	$desired-size: map.get($fonts, $selector, 'size');
+
+	@if $desired-size != 0 {
+		@each $setting in $desired-size-settings {
+			$typography: map.set($typography, $setting, 'font-size', $desired-size);
+		}
+	}
+
+	@return $typography;
+}
+
+@function -set-font-family($typography, $fonts) {
+	$body-font: map.get($fonts, 'body', 'family');
+
+	@if $body-font == '' {
+		@return -generate-defaults-from($typography);
+	}
+
+	$typography: -set-typography-group($typography, ('body-1', 'body-2', 'caption'), $body-font);
+
+	$titles-font: map.get($fonts, 'titles', 'family');
+	$hero-titles-font: map.get($fonts, 'hero-titles', 'family');
+	$buttons-font: map.get($fonts, 'buttons', 'family');
+
+	// We fallback to body font if buttons font isn't provided.
+	@if $buttons-font == '' {
+		$buttons-font: $body-font;
+	}
+
+	// Both titles font fallback to body font unless main one's being set.
+	@if $hero-titles-font == '' and $titles-font == '' {
+		$hero-titles-font: $body-font;
+		$titles-font: $body-font;
+	}
+	@else if $hero-titles-font == '' and $titles-font != '' {
+		$hero-titles-font: $titles-font;
+	}
+
+	$typography: -set-text-groups-for($typography, $body-font, $buttons-font);
+	$typography: -set-typography-group($typography, ('headline-1', 'headline-2', 'headline-3', 'headline-4'), $hero-titles-font);
+	$typography: -set-typography-group($typography, ('headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'), $titles-font);
+	$typography: map.set($typography, 'font-family', '"#{$buttons-font}"');
+
+	@return $typography;
+}
+
+@function -set-text-groups-for($typography, $body-font, $buttons-font) {
+	$typography: -set-typography-group($typography, ('body-1', 'body-2', 'caption'), $body-font);
+	$typography: -set-typography-group($typography, ('button'), $buttons-font);
+	@return $typography;
+}
+
+@function -generate-defaults-from($typography) {
+	// Return Roboto (default Angular Material's font (for now).
+	// $typography: -set-text-groups-for($typography, 'OpenSans-normal', 'OpenSans-bold');
+	// $typography: -set-typography-group($typography,('headline-1', 'headline-2', 'headline-3', 
+	// 'headline-4', 'headline-5', 'headline-6', 'subtitle-1', 'subtitle-2'),'Montserrat-bold');
+	@return $typography;
+}
+
+@function -set-typography-group($typography, $desired-typography-group, $font) {
+	@each $setting in $desired-typography-group {
+		$typography: -set-typography-font($typography, $setting, $font);
+	}
+
+	@return $typography;
+}
+
+@function -set-typography-font($typography, $section, $font) {
+	$typography: map.set($typography, $section, 'font-family', '"#{$font}"');
+	@return $typography;
+}

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

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

package/{dialog/styles → styles}/partials/core/components/dialogs/_general.scss

@@ -1,21 +1,21 @@
 @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;
+$large-gap: calc(#{$default-gap} * 2);
  
+// TODO: Refactor me. Rename things adequately taking care of context, try minimizing styles required for this to look as expected.
 .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 {
@@ -37,12 +37,11 @@ $border-dark: #000;
 		@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;
 		}
@@ -50,8 +49,8 @@ $border-dark: #000;
 
 	.dialog-content {
 		margin: {
-			top: vars.$default-gap;
-			bottom: vars.$large-gap;
+			top: $default-gap;
+			bottom: $large-gap;
 		}
 		line-height: 1.4;
 
@@ -72,7 +71,7 @@ $border-dark: #000;
 	
 	.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,36 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
+.entry-form {
+	.action-buttons {
+		margin-top: 25px;
+
+		.mdc-button:not(:first-child) {
+			margin-left: 10px;
+		}
+	}
+
+	.entry-checkbox {
+		display: block;
+	}
+
+	.mat-mdc-form-field {
+		margin-bottom: 20px;
+	}
+	  
+	.mdc-form-field {
+		margin-bottom: 10px;
+	}
+}
+
+.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/headers/_general.scss

@@ -0,0 +1,7 @@
+.entry-header {
+	padding: 24px 16px;
+
+	.content {
+		padding-top: 20px;
+	}
+}

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

@@ -0,0 +1,21 @@
+@use '@enigmatry/scss-foundation/src/modules/display/items';
+
+.entry-table {
+	display: flex;
+	flex-direction: column;
+	overflow: auto;
+
+	.selection-cell, .action-cell {
+		width: 48px;
+	}
+
+	.pagination {
+		margin-bottom: 10px;
+	}
+
+	.no-results {
+		@include items.align-absolute-center();
+		flex: 1;
+		min-height: 50px;
+	}
+}

package/styles/partials/generator-test.scss

@@ -0,0 +1,27 @@
+@use '../generator';
+
+$custom-theme: (
+	general: (
+		colors: (
+			primary: #FAE3C1
+		),
+		fonts: (
+			body: (
+				family: 'My-Font',
+				size: 41px
+			)
+		)
+	),
+	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/dialog/styles/modules/_generator.scss

@@ -1,11 +0,0 @@
-@use 'sass:map';
-
-@use 'theming/default-theming' as default_theme;
-@use 'components/dialogs/general' as dialogs;
-
-$default-theme: default_theme.$theme;
-
-@mixin generate($custom-theme: ()) {
-	$merged-theme: map.deep-merge($default-theme, $custom-theme);
-	@include dialogs.generate-dialog-from($merged-theme);
-}