@ecodev/natural 65.0.2 → 66.0.0

package/src/lib/modules/search/input/input.component.scss

@@ -0,0 +1,17 @@
+:host {
+    display: flex;
+    position: relative; // for matRipple
+    flex-direction: column;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    overflow: hidden;
+
+    .hide {
+        margin: 0 50px 0 10px;
+        height: 0;
+        color: transparent;
+        font-size: inherit;
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+        white-space: nowrap;
+    }
+}

package/src/lib/modules/search/search/search.component.scss

@@ -0,0 +1,56 @@
+.natural-search {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    .groupsWrapper {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    .groupWrapper {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 10px;
+        min-width: 0;
+
+        natural-group {
+            flex: 1;
+            max-width: 100%;
+        }
+
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+
+    .endOfRowButton {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 15px;
+        height: 53px;
+    }
+
+    mat-divider {
+        margin: -10px 0 10px 0;
+    }
+}
+
+.natural-search.mobile {
+    .clear-button {
+        display: none;
+    }
+
+    &.hasMultipleGroups {
+        flex-direction: column;
+        align-items: stretch;
+
+        .endOfRowButton {
+            flex-direction: row-reverse;
+            margin-bottom: 0;
+        }
+    }
+}

package/src/lib/modules/select/select/select.component.scss

@@ -0,0 +1,35 @@
+:host {
+    display: flex;
+    flex-direction: column;
+
+    // Gap between vertical elements
+    & > *:not(:last-child) {
+        margin-bottom: 20px;
+    }
+
+    & > mat-autocomplete {
+        margin-bottom: 0 !important;
+    }
+
+    .external-buttons {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .external-buttons {
+        display: flex;
+        flex-direction: row;
+
+        & > *:not(:last-child) {
+            margin-right: 10px;
+        }
+    }
+
+    .loading-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 48px;
+        height: 48px;
+    }
+}

package/src/lib/modules/select/select-enum/select-enum.component.scss

@@ -0,0 +1,5 @@
+:host {
+    // Allow host to extend the with of inner select
+    display: flex;
+    flex-direction: column;
+}

package/src/lib/modules/select/select-hierarchic/select-hierarchic.component.scss

@@ -0,0 +1,23 @@
+:host {
+    display: flex;
+    flex-direction: column;
+
+    // Gap between vertical elements
+    & > *:not(:last-child) {
+        margin-bottom: 20px;
+    }
+
+    .external-buttons {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .external-buttons {
+        display: flex;
+        flex-direction: row;
+
+        & > *:not(:last-child) {
+            margin-right: 10px;
+        }
+    }
+}

package/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.scss

@@ -0,0 +1,25 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 0;
+
+    mat-sidenav-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    mat-sidenav-content > div {
+        overflow: auto;
+    }
+
+    .menuMinimized {
+        overflow-x: hidden;
+    }
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+}

package/src/lib/modules/sidenav/sidenav-content/sidenav-content.component.scss

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: auto;
+}

package/src/lib/modules/sidenav/sidenav.scss

@@ -0,0 +1,32 @@
+natural-sidenav-container {
+    .mat-drawer {
+        border-right: none;
+    }
+
+    mat-sidenav.mode-side {
+        .mat-drawer-inner-container {
+            display: flex;
+            flex-direction: column;
+        }
+
+        natural-sidenav {
+            display: flex;
+            flex: 1;
+            min-height: 0;
+        }
+    }
+
+    mat-sidenav-content {
+        display: flex !important;
+
+        & > div {
+            display: flex;
+            flex: 1;
+
+            natural-sidenav-content {
+                display: flex;
+                flex: 1;
+            }
+        }
+    }
+}

package/src/lib/modules/table-button/table-button.component.scss

@@ -0,0 +1,35 @@
+natural-table-button {
+    $gap: 5px;
+    display: flex;
+
+    flex: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+
+    mat-icon:not(:last-child) {
+        margin-right: $gap;
+    }
+
+    a.mat-mdc-button {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        .mdc-button__label {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+}
+
+natural-table-button > span {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    // This should same as @angular/material/src/material/button/_button-base.scss
+    padding: 0 8px;
+}

package/src/lib/modules/theme-changer/theme-changer.component.scss

@@ -0,0 +1,10 @@
+:host {
+    display: block;
+    width: fit-content;
+}
+
+.wrapper {
+    border-radius: var(--mat-sys-corner-full);
+    background: var(--mat-sys-surface-bright);
+    padding: 5px;
+}

package/src/lib/styles/table.scss

@@ -0,0 +1,107 @@
+@use '@angular/material' as mat;
+
+.responsive-table {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+:root {
+    @include mat.table-overrides(
+        (
+            background-color: var(--mat-sys-surface-container-low),
+        )
+    );
+
+    .mat-mdc-header-row {
+        background-color: var(--mat-sys-surface-container-high);
+    }
+
+    .mat-mdc-footer-row {
+        background: var(--mat-sys-surface-container-low);
+    }
+
+    @include mat.paginator-overrides(
+        (
+            container-background-color: var(--mat-sys-surface-container-low),
+        )
+    );
+}
+
+[mat-table] {
+    width: 100%;
+    max-width: 100%;
+
+    [mat-cell] {
+        justify-content: center;
+    }
+
+    .mdc-data-table__content .mdc-data-table__row:last-child .mdc-data-table__cell {
+        border-bottom: 1px solid var(--mat-sys-outline-variant);
+    }
+
+    .mat-mdc-cell,
+    .mat-mdc-header-cell,
+    .mat-mdc-footer-cell {
+        &:first-child {
+            padding-right: 5px;
+        }
+
+        &:last-child {
+            padding-left: 5px;
+        }
+
+        &:not(:first-child):not(:last-child) {
+            padding-right: 5px;
+            padding-left: 5px;
+        }
+
+        &.natural-align-right {
+            text-align: right;
+        }
+
+        &.natural-align-center {
+            text-align: center;
+
+            .mat-sort-header-container {
+                justify-content: center;
+            }
+        }
+    }
+
+    [mat-row].selected {
+        // todo : remove ? when is it used ?
+        //background: mat.m2-get-color-from-palette($background, selected-button);
+    }
+
+    .mat-mdc-footer-cell {
+        font-weight: bold;
+    }
+
+    .natural-1em-column {
+        width: 1em;
+    }
+
+    .natural-2em-column {
+        width: 2em;
+    }
+
+    .natural-3em-column {
+        width: 3em;
+    }
+
+    .natural-4em-column {
+        width: 4em;
+    }
+
+    .natural-5em-column {
+        width: 5em;
+    }
+
+    .natural-6em-column {
+        width: 6em;
+    }
+
+    .natural-7em-column {
+        width: 7em;
+    }
+}

package/src/lib/_natural.theme.scss

@@ -1,72 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-// Non themes
-@use 'styles/table';
-@use 'modules/panels/panels.external';
-// Themes
-@use 'modules/alert/alert.theme';
-@use 'modules/sidenav/sidenav.theme';
-@use 'modules/search/search.theme';
-@use 'modules/file/component/file.theme';
-
-/**
- * Global css
- */
-.mat-mdc-table .mdc-button__label {
-    white-space: nowrap;
-}
-
-/**
- * Wrapped theme
- */
-@mixin natural($theme) {
-    $primary: map.get($theme, primary);
-    $accent: map.get($theme, accent);
-    $warn: map.get($theme, warn);
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
-    @include alert.natural-alert($theme);
-    @include sidenav.natural-sidenav($theme);
-    @include search.natural-search($theme);
-    @include table.natural-table($theme);
-    @include file.natural-file($theme);
-
-    .mat-mdc-tab-labels,
-    .mat-mdc-tab-links,
-    .mdc-data-table__row:last-child .mdc-data-table__cell {
-        border-bottom: 1px solid mat.m2-get-color-from-palette($foreground, divider);
-    }
-
-    // Since MDC dialogs, text color is too pale, so we restore a higher contrast for better readability
-    // See https://github.com/angular/components/issues/26797
-    .mat-mdc-dialog-container .mdc-dialog__content {
-        color: mat.m2-get-color-from-palette(map.get($theme, foreground), base, 0.87);
-    }
-
-    .natural-elevation {
-        box-shadow:
-            inset 0 1px rgba(255, 255, 255, 0.3),
-            0 2px 1px -1px rgba(0, 0, 0, 0.2),
-            0 1px 1px 0 rgba(0, 0, 0, 0.14),
-            0 1px 3px 0 rgba(0, 0, 0, 0.12);
-    }
-}
-
-$defaultConfig: mat.m2-define-typography-config();
-
-// This is the default Material typography, but with button with normal letter-spacing instead of wider letter-spacing.
-$typography: mat.m2-define-typography-config(
-    $button: mat.m2-define-typography-level(
-            $font-family: mat.m2-font-family($defaultConfig, 'button'),
-            $font-weight: mat.m2-font-weight($defaultConfig, 'button'),
-            $font-size: mat.m2-font-size($defaultConfig, 'button'),
-            $line-height: mat.m2-line-height($defaultConfig, 'button'),
-            $letter-spacing: normal,
-        ),
-);
-
-.mdc-snackbar {
-    margin-top: 75px !important;
-}

package/src/lib/modules/alert/_alert.theme.scss

@@ -1,14 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@mixin natural-alert($theme) {
-    $primary: map.get($theme, primary);
-    $accent: map.get($theme, accent);
-    $warn: map.get($theme, warn);
-    $bg: map.get($theme, background);
-    $fg: map.get($theme, foreground);
-
-    .snackbar-error .mdc-snackbar__surface {
-        background-color: mat.m2-get-color-from-palette($warn) !important;
-        color: mat.m2-get-color-from-palette($warn, default-contrast) !important;
-    }
-}

package/src/lib/modules/file/component/_file.theme.scss

@@ -1,23 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@mixin natural-file($theme) {
-    $primary: map.get($theme, primary);
-    $accent: map.get($theme, accent);
-    $bg: map.get($theme, background);
-
-    natural-file {
-        a {
-            background-color: mat.m2-get-color-from-palette($bg, card);
-        }
-
-        .action-overlay {
-            background-color: mat.m2-get-color-from-palette($accent, 0.85);
-            color: mat.m2-get-color-from-palette($accent, default-contrast);
-        }
-
-        .file-preview {
-            background-color: mat.m2-get-color-from-palette($primary, 0.85);
-            color: mat.m2-get-color-from-palette($primary, default-contrast);
-        }
-    }
-}

package/src/lib/modules/search/dropdown-container/_dropdown-container.theme.scss

@@ -1,14 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@mixin natural-dropdown-container($theme) {
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
-    .natural-dropdown-container {
-        background: mat.m2-get-color-from-palette($background, 'card');
-
-        & > * > * > * {
-            outline: none !important;
-        }
-    }
-}

package/src/lib/modules/search/input/_input.theme.scss

@@ -1,23 +0,0 @@
-/**
- This is not really theming as there is no color, but it's some custom styles to allow flexible with inputs that require
- to override inner mat-form-field html elements. This styling needs to escape from namespacing and theming is the easier way to apply them.
- */
-@mixin natural-input($theme) {
-    natural-input {
-        .mat-mdc-form-field-infix {
-            margin-right: 10px;
-            margin-left: 10px;
-            width: auto;
-        }
-
-        .mat-form-field-flex {
-            align-items: flex-start; // Fix firefox misalignment with baseline and mat-icon-button that seems not accepted by @a/material
-            padding-right: 0;
-            padding-left: 0;
-        }
-
-        .mat-mdc-form-field {
-            margin-bottom: -1.25em;
-        }
-    }
-}

package/src/lib/modules/search/search.theme.scss

@@ -1,7 +0,0 @@
-@use 'input/input.theme';
-@use 'dropdown-container/dropdown-container.theme';
-
-@mixin natural-search($theme) {
-    @include input.natural-input($theme);
-    @include dropdown-container.natural-dropdown-container($theme);
-}

package/src/lib/modules/sidenav/_sidenav.theme.scss

@@ -1,40 +0,0 @@
-@use 'sass:map';
-@mixin natural-sidenav($theme) {
-    $primary: map.get($theme, primary);
-    $accent: map.get($theme, accent);
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
-    natural-sidenav-container {
-        .mat-drawer {
-            border-right: none;
-        }
-
-        mat-sidenav.modeSide {
-            .mat-drawer-inner-container {
-                display: flex;
-                flex-direction: column;
-            }
-
-            natural-sidenav {
-                display: flex;
-                flex: 1;
-                min-height: 0;
-            }
-        }
-
-        mat-sidenav-content {
-            display: flex !important;
-
-            & > div {
-                display: flex;
-                flex: 1;
-
-                natural-sidenav-content {
-                    display: flex;
-                    flex: 1;
-                }
-            }
-        }
-    }
-}

package/src/lib/styles/_table.scss

@@ -1,94 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin natural-table($theme) {
-    $primary: map.get($theme, primary);
-    $accent: map.get($theme, accent);
-    $background: map.get($theme, background);
-    $foreground: map.get($theme, foreground);
-
-    .responsive-table {
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-
-    [mat-table] {
-        width: 100%;
-        max-width: 100%;
-
-        [mat-cell] {
-            justify-content: center;
-        }
-
-        .mat-mdc-cell,
-        .mat-mdc-header-cell,
-        .mat-mdc-footer-cell {
-            &:first-child {
-                padding-right: 5px;
-            }
-
-            &:last-child {
-                padding-left: 5px;
-            }
-
-            &:not(:first-child):not(:last-child) {
-                padding-right: 5px;
-                padding-left: 5px;
-            }
-
-            &.natural-align-right {
-                text-align: right;
-            }
-
-            &.natural-align-center {
-                text-align: center;
-
-                .mat-sort-header-container {
-                    justify-content: center;
-                }
-            }
-        }
-
-        [mat-row] {
-            &.selected {
-                background: mat.m2-get-color-from-palette($background, selected-button);
-            }
-        }
-
-        [mat-header-row] {
-            background: mat.m2-get-color-from-palette($background, app-bar);
-        }
-
-        .mat-mdc-footer-cell {
-            font-weight: bold;
-        }
-
-        .natural-1em-column {
-            width: 1em;
-        }
-
-        .natural-2em-column {
-            width: 2em;
-        }
-
-        .natural-3em-column {
-            width: 3em;
-        }
-
-        .natural-4em-column {
-            width: 4em;
-        }
-
-        .natural-5em-column {
-            width: 5em;
-        }
-
-        .natural-6em-column {
-            width: 6em;
-        }
-
-        .natural-7em-column {
-            width: 7em;
-        }
-    }
-}