@enigmatry/entry-components 1.15.1-preview.3 → 1.15.1-preview.6

package/styles/modules/typography/_fonts.scss

@@ -1,19 +1,33 @@
-@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: '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);
-  
+
 		@each $format in $formats {
 			$url: '#{$font-path}#{$name}/#{$name}-#{$style}.#{$format}';
-  
+
 			@font-face {
 				font: {
 					family: '#{$name}-#{$style}';
@@ -23,64 +37,35 @@
 			}
 		}
 	}
-
-	// 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) {
+@mixin font($family: 'OpenSans-normal', $size: 14px) {
 	font: {
 		family: $family;
 		size: $size;
 	};
 }
+
 @mixin main-font($size: 14px) {
-	@include -font('OpenSans-normal', $size);
+	@include font('OpenSans-normal', $size);
 }
+
 @mixin main-bolded-font($size: 14px) {
-	@include -font('OpenSans-Bold', $size);
+	@include font('OpenSans-Bold', $size);
 }
+
 @mixin title-font($size: 20px) {
-	@include -font('Montserrat-bold', $size);
+	@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/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/{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,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/headers/_general.scss

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

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/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);
-}

package/dialog/styles/modules/components/dialogs/_general.scss

@@ -1,11 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use 'headers/general' as headers;
-@use 'footers/general' as footers;
-
-@mixin generate-dialog-from($theme) {
-	.entry-dialog {
-		@include headers.generate-headers-from($theme);
-		@include footers.generate-footers-from($theme);
-		font-size: map.value-from($theme, 'default-font-size');
-	}
-}

package/dialog/styles/modules/components/dialogs/footers/_general.scss

@@ -1,26 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../../styles/modules/states/hover';
-
-@mixin generate-footers-from($theme) {
-	.button-confirm {
-		@include hover.default(
-			map.value-from($theme, 'button-confirm.default-font-color'), 
-			map.value-from($theme, 'button-confirm.hover-font-color'));
-		background-color: map.value-from($theme, 'button-confirm.default-background');
-
-		&:hover {
-			background-color: map.value-from($theme, 'button-confirm.hover-background');
-		}
-	}
-
-	.button-cancel {
-		@include hover.default(
-			map.value-from($theme, 'button-cancel.default-font-color'), 
-			map.value-from($theme, 'button-cancel.hover-font-color'));
-		background-color: map.value-from($theme, 'button-cancel.default-background');
-
-		&:hover {
-			background-color: map.value-from($theme, 'button-cancel.hover-background');
-		}
-	}
-}

package/dialog/styles/modules/components/dialogs/headers/_general.scss

@@ -1,16 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../../styles/modules/states/hover';
-
-@mixin generate-headers-from($theme) {
-	.title {
-		color: map.value-from($theme, 'header.title.color');
-		font-size: map.value-from($theme, 'header.title.size');
-	}
-
-	.close-button {
-		@include hover.default(
-			map.value-from($theme, 'header.close-icon.default-color'), 
-				map.value-from($theme, 'header.close-icon.hover-color'));
-		font-size: map.value-from($theme, 'header.close-icon.size');
-	}
-}

package/dialog/styles/modules/theming/_default-theming.scss

@@ -1,29 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    header: (
-        title: (
-            size: 20px,
-            color: vars.$font-color-default,
-        ),
-        close-icon: (
-            size: 12px,
-            default-color: vars.$font-color-default,
-            hover-color: vars.$primary,
-        )
-    ),
-    content-color: vars.$font-color-default,
-    default-font-size: 14px,
-    button-confirm: (
-        default-background: vars.$primary,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$accent,
-        hover-font-color: vars.$font-color-light,
-    ),
-    button-cancel: (
-        default-background: transparent,
-        default-font-color: vars.$primary,
-        hover-background: transparent,
-        hover-font-color: vars.$accent,
-    )
-);

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

@@ -1,3 +0,0 @@
-@use 'components';
-@use 'elements';
-@use 'layouts';

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

@@ -1 +0,0 @@
-@use 'dialogs';

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

@@ -1 +0,0 @@
-@use 'general';

package/dialog/styles/partials/core/elements/_general.scss

@@ -1,10 +0,0 @@
-// TODO remove this once done https://jira.enigmatry.com/browse/ETL-483
-h1, h2, h3, h4, h5, h6, p {
-	margin: 0;
-}
-
-button {
-	padding: 0;
-	border: 0;
-	cursor: pointer;
-}

package/dialog/styles/partials/core/elements/_index.scss

@@ -1 +0,0 @@
-@use 'general';

package/dialog/styles/partials/core/layouts/_alignments.scss

@@ -1,13 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/display/items';
-
-.align-center {
-	@include items.align-absolute-center();
-}
-
-.align-right {
-	@include items.fully-align(center, flex-end);
-}
-
-.align-left {
-	text-align: left;
-}

package/dialog/styles/partials/core/layouts/_index.scss

@@ -1 +0,0 @@
-@use 'alignments';

package/dialog/styles/partials/main.scss

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

package/header/styles/modules/_generator.scss

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

package/header/styles/modules/components/buttons/_general.scss

@@ -1,26 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-@use '../../../../../styles/modules/states/hover';
-
-@mixin generate-buttons-from($theme) {
-	.entry-button-primary {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-primary.default-background'),
-			map.value-from($theme, 'button-primary.hover-background'));
-		color: map.value-from($theme, 'button-primary.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-
-	.entry-button-accent {
-		@include hover.background-hover(
-			map.value-from($theme, 'button-accent.default-background'),
-			map.value-from($theme, 'button-accent.hover-background'));
-            color: map.value-from($theme, 'button-accent.default-font-color');
-
-		&:hover {
-			color: map.value-from($theme, 'button-accent.default-font-color');
-		}
-	}
-}

package/header/styles/modules/components/headers/_general.scss

@@ -1,13 +0,0 @@
-@use '@enigmatry/scss-foundation/src/modules/map';
-
-@mixin generate-headers-from($theme) {
-
-    .entry-header {
-        background-color: map.value-from($theme, 'header.background');
-
-        .title {
-            font-size: map.value-from($theme, 'header.title.size');
-            color: map.value-from($theme, 'header.title.color');
-        }
-    }
-}

package/header/styles/modules/theming/_default-theming.scss

@@ -1,21 +0,0 @@
-@use '../../../../styles/modules/variables' as vars;
-
-$theme: (
-    header: (
-        background: vars.$primary-lightest,
-        title-size: 32px,
-        title-color: vars.$primary,
-    ),
-    button-primary: (
-        default-background: vars.$primary,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$accent,
-        hover-font-color: vars.$font-color-light,
-    ),
-    button-accent: (
-        default-background: vars.$accent,
-        default-font-color: vars.$font-color-light,
-        hover-background: vars.$primary,
-        hover-font-color: vars.$font-color-light,
-    )
-);

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

@@ -1,3 +0,0 @@
-@use 'components';
-@use 'layouts';
-@use 'elements';

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

@@ -1,2 +0,0 @@
-@use 'buttons';
-@use 'headers';