@enigmatry/entry-components 1.15.1-preview.15 → 1.15.1-preview.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmatry/entry-components",
-  "version": "1.15.1-preview.15",
+  "version": "1.15.1-preview.17",
   "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,16 +1,14 @@
 @use 'modules/components/dialogs/generator' as dialog;
 @use 'modules/components/headers/generator' as header;
 @use 'modules/components/tables/generator' as table;
-@use 'modules/elements/generator' as elements;
 @use 'modules/default-theme' as default;
-@use 'modules/angular-material-generator' as material-theme;
+@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 elements.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

@@ -1,4 +1,3 @@
-/* stylelint-disable number-max-precision */
 $theme: (
 	general: (
 		colors: (
@@ -7,36 +6,40 @@ $theme: (
 			primary: #2581C4,
 			accent: #EA518D,
 			dark: #323232,
-			disabled: #D9D9D9,
 			disabled-light: #F5F5F5
 		),
-		font: (
-			family: '',
-			size: 14px
-		),
-		buttons: (
-			color: #FFF
-		),
-		inputs: (
-			background-color: #FFF
+		typography: null,
+		fonts: (
+			hero-titles: (
+				family: '',
+				size: 0
+			),
+			titles: (
+				family: '',
+				size: 0
+			),
+			body: (
+				family: '',
+				size: 0
+			),
+			buttons: (
+				family: '',
+				size: 0
+			)
 		)
 	),
 	tables: (
 		cells: (
-			first-cell-padding-left: 4px,
-			last-cell-padding-right: 4px,
-			min-width: unset
+			edge-gap: 4px
 		),
 		rows: (
-			selected-background-color: #06C,
 			selected-color: #FFF,
 			odd-even-row: odd,
 			odd-even-background: #F0F0F0
 		),
 		columns: (
 			sorted: (
-				font-weight: 700,
-				content-align: left
+				font-weight: 700
 			)
 		),
 		contents: (

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

@@ -10,14 +10,10 @@
 	}
 
 	.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');
+		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', 'last-cell-padding-right');
-	}
-
-	.entry-table-checkbox-cell, .entry-table-context-menu-cell {
-		min-width: map.get($theme, 'tables', 'cells', 'min-width');
+		padding-right: map.get($theme, 'tables', 'cells', 'edge-gap');
 	}
 }

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

@@ -3,19 +3,16 @@
 
 @mixin generate-from($theme) {
 	.mat-mdc-row {
-		@include list.row-coloring(map.get($theme, 'tables', 'rows', 'odd-even-background'),
-		map.get($theme, 'tables', 'rows', 'odd-even-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, 'tables', 'rows', 'selected-background-color');
+			&.selected {
+				background-color: map.get($theme, 'general', 'colors', 'primary');
 
-			&:hover {
-				background-color: map.get($theme, 'tables', 'rows', 'selected-background-color');
-				color: map.get($theme, 'tables', 'rows', 'selected-color');
-			}
-
-			.mat-mdc-cell {
-				color: map.get($theme, 'tables', 'rows', 'selected-color');
+				.mat-mdc-cell {
+					color: map.get($theme, 'tables', 'rows', 'selected-color');
+				}
 			}
 		}
 	}

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

@@ -11,8 +11,4 @@
 	.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/typography/_fonts.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 
-$font-path: '../../../../assets/fonts/';
+$font-path: 'assets/fonts/';
 $font-sources: (
 	(
 		name: 'OpenSans',
@@ -38,34 +38,3 @@ $font-sources: (
 		}
 	}
 }
-
-@mixin font($family: 'OpenSans-normal', $size: 14px) {
-	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);
-}
-
-@mixin font-family-from($theme) {
-	$font-family: map.get($theme, 'general', 'font', 'family');
-
-	@if $font-family == '' {
-		@content;
-	}
-	@else {
-		$font-size: map.get($theme, 'general', 'font', 'size');
-		@include font($font-family, $font-size);
-	}
-}

package/styles/modules/{_angular-material-generator.scss → vendors/angular-material/_generator.scss}

@@ -1,22 +1,32 @@
 @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: theming.define-typography-config()
+		typography: $typography
 	));
 	
 	@include theming.all-component-themes($default-theme);

package/styles/modules/vendors/angular-material/_typography-generator.scss

@@ -0,0 +1,98 @@
+/* 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);
+
+	@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) {
+	$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/forms/_general.scss

@@ -8,6 +8,10 @@
 			margin-left: 10px;
 		}
 	}
+
+	.entry-checkbox {
+		display: block;
+	}
 }
 
 .mat-mdc-form-field {

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

@@ -1,16 +1,3 @@
-.entry-table .mat-icon-button {
-	padding-top: 8px;
-	border: none;
-	background-color: transparent;
-	cursor: pointer;
-}
-
-.entry-table-checkbox-cell {
-	flex: none;
-	width: 56px;
-	max-width: 40px;
-
-	.mat-mdc-checkbox {
-		display: flex;
-	}
+.entry-table-checkbox-cell, .entry-table-context-menu-cell {
+	width: 48px;
 }

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

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

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

@@ -1,23 +1,11 @@
 @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 {
+	.mat-table-container {
+		&.mat-table-with-data {
 			flex: 1;
 		}
 	}
-
-	.mat-mdc-table {
-		min-width: 100%;
-		border-collapse: separate;
-	}
 }
 
 .entry-table-layout {
@@ -26,11 +14,6 @@
 	overflow: auto;
 }
 
-.entry-table-content {
-	flex-direction: column;
-	width: 0;
-}
-
 .entry-table-footer {
 	position: relative;
 	z-index: 1;

package/styles/partials/generator-test.scss

@@ -5,11 +5,11 @@ $custom-theme: (
 		colors: (
 			primary: #FAE3C1
 		),
-		font: (
-			size: 13px
-		),
-		buttons: (
-			color: #AAA
+		fonts: (
+			body: (
+				family: 'My-Font',
+				size: 41px
+			)
 		)
 	),
 	tables: (

package/styles/modules/elements/_generator.scss

@@ -1,20 +0,0 @@
-@use 'sass:map';
-@use '../default-theme' as default;
-@use '../typography/fonts';
-@use 'anchors/generator' as anchors;
-@use 'buttons/generator' as buttons;
-
-$default-theme: default.$theme;
-
-@mixin generate-from($custom-theme: ()) {
-	$merged-theme: map.deep-merge($default-theme, $custom-theme);
-
-	$font-family: map.get($merged-theme, 'general', 'font', 'family');
-
-	@if $font-family == '' {
-		// @include fonts.generate-default-font();
-	}
-
-	@include anchors.generate-from($merged-theme);
-	@include buttons.generate-from($merged-theme);
-}

package/styles/modules/elements/anchors/_generator.scss

@@ -1,16 +0,0 @@
-@use 'sass:map';
-
-@mixin generate-from($theme) {
-	$colors: map.get($theme, 'general', 'colors');
-	$primary-color: map.get($colors, 'primary');
-	$accent-color: map.get($colors, 'accent');
-
-	.entry-link {
-		color: $primary-color;
-		text-decoration: none;
-	
-		&:hover {
-			color: $accent-color;
-		}
-	}
-}

package/styles/modules/elements/buttons/_default.scss

@@ -1,12 +0,0 @@
-%entry-button {
-	display: inline-block;
-	padding: 10px 20px;
-	transition: .4s;
-	border: 0;
-	line-height: 1.25;
-	cursor: pointer;
-	text: {
-		align: center;
-		decoration: none;
-	}
-}

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

@@ -1,45 +0,0 @@
-@use 'default';
-@use 'sass:map';
-@use '../../typography/fonts';
-@use '../../states/hover';
-
-@mixin generate-from($theme) {
-	$button-color: map.get($theme, 'general', 'buttons', 'color');
-	$colors: map.get($theme, 'general', 'colors');
-	$primary-color: map.get($colors, 'primary');
-	$accent-color: map.get($colors, 'accent');
-	$disabled-color: map.get($colors, 'disabled');
-
-	.entry-button-accent, .entry-button-primary, .entry-button-dark {
-		@extend %entry-button;
-		@include fonts.font-family-from($theme) {
-			@include fonts.main-bolded-font();
-		}
-		color: $button-color;
-	}
-
-	.entry-button-primary {
-		@include hover.default($primary-color, $accent-color, $button-color, $disabled-color);
-	}
-
-	.entry-button-accent {
-		@include hover.default($accent-color, $primary-color, $button-color, $disabled-color);
-	}
-
-	.entry-button-dark {
-		@include hover.default(map.get($colors, 'dark'), $primary-color, $button-color, $disabled-color);
-	}
-
-	.entry-button-blank {
-		@include fonts.font-family-from($theme) {
-			@include fonts.main-font();
-		}
-
-		@include hover.default(transparent, transparent, $accent-color, transparent);
-		color: $primary-color;
-
-		&:disabled {
-			color: $primary-color;
-		}
-	}
-}

package/styles/modules/states/_hover.scss

@@ -1,18 +0,0 @@
-@mixin default($background, $hover-background, $color, $disabled-background) {
-	background-color: $background;
-
-	&:hover, &:active {
-		background-color: $hover-background;
-		color: $color;
-	}
-
-	&:disabled, &.disabled {
-		background-color: $disabled-background;
-		cursor: not-allowed;
-
-		/* stylelint-disable-next-line selector-max-pseudo-class */
-		&:hover {
-			background-color: $disabled-background;
-		}
-	}
-}

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

@@ -1,47 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-.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;
-			}
-		}
-
-		&.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 {
-		.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/_rows.scss

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

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

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