@vality/matez 19.0.0

package/src/lib/components/dialog/dialog.component.scss

@@ -0,0 +1,71 @@
+$base-padding: 24px;
+$max-height-mobile: 100vh;
+$max-height-desktop: 90vh;
+
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    height: 100%;
+}
+
+.dialog {
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1 1 100%;
+    max-height: calc(#{$max-height-desktop} - #{$base-padding * 2}) !important;
+
+    @media screen and (max-width: 959px) {
+        max-height: calc(#{$max-height-mobile} - #{$base-padding * 2}) !important;
+    }
+
+    &.full-size {
+        min-height: calc(#{$max-height-desktop} - #{$base-padding * 2}) !important;
+        @media screen and (max-width: 959px) {
+            min-height: calc(#{$max-height-mobile} - #{$base-padding * 2}) !important;
+        }
+    }
+
+    &-title {
+        flex-direction: row;
+        box-sizing: border-box;
+        display: flex;
+        place-content: center space-between;
+        align-items: center;
+        padding: $base-padding;
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin: 0;
+        }
+
+        &-close {
+            &#{&} {
+                cursor: pointer;
+                font-size: 24px;
+
+                &:hover {
+                    opacity: 0.5;
+                }
+            }
+        }
+    }
+
+    &-content {
+        // instead of flex="grow". Don't need wrong rule "max-height": 100% to support scroll content
+        flex: 1 1 100%;
+        box-sizing: border-box;
+        padding: $base-padding;
+        overflow: auto;
+        display: grid;
+    }
+
+    &-actions {
+        padding: $base-padding;
+    }
+}

package/src/lib/components/error-page/error-page.component.scss

@@ -0,0 +1,19 @@
+.error {
+    margin: 0 auto;
+    padding: 96px 24px;
+    text-align: center;
+
+    .title {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+
+        mat-icon {
+            font-size: 40px;
+            width: auto;
+            height: auto;
+        }
+    }
+}

package/src/lib/components/file-upload/file-upload.component.scss

@@ -0,0 +1,12 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: min-content auto;
+    align-items: center;
+    grid-gap: 16px;
+
+    & > * {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+}

package/src/lib/components/filters/components/filters-dialog/filters-dialog.component.scss

@@ -0,0 +1,19 @@
+$max-columns: 5;
+$rows: 1;
+
+.filters {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    .other-filters {
+        display: block !important;
+    }
+}
+
+@for $i from 1 through $max-columns {
+    ::ng-deep .v-filters-dialog-cols-#{$i} {
+        & > *:nth-child(-n + #{$i * $rows}) {
+            display: none;
+        }
+    }
+}

package/src/lib/components/filters/filters.component.scss

@@ -0,0 +1,23 @@
+$max-columns: 5;
+$rows: 1;
+
+.filters {
+    display: grid;
+    grid-column-gap: 8px;
+    margin-bottom: -22px;
+    padding: 22px !important;
+
+    ::ng-deep & > * {
+        min-width: 0;
+    }
+}
+
+@for $i from 1 through $max-columns {
+    ::ng-deep .v-filters-cols-#{$i} {
+        grid-template-columns: repeat($i, 1fr);
+
+        & > *:nth-child(n + #{($i * $rows) + 1}) {
+            display: none;
+        }
+    }
+}

package/src/lib/components/input-field/_input-field-theme.scss

@@ -0,0 +1,7 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    .v-input-field__small {
+        @include mat.all-component-densities(-5);
+    }
+}

package/src/lib/components/input-field/input-field.component.scss

@@ -0,0 +1,21 @@
+.v-input-field {
+    .postfix {
+        white-space: nowrap;
+    }
+
+    &__small {
+        ::ng-deep .mat-icon {
+            transform: scale(0.75) !important;
+        }
+    }
+
+    &__outline {
+        .postfix {
+            padding-right: 4px;
+        }
+
+        .prefix {
+            padding-left: 4px;
+        }
+    }
+}

package/src/lib/components/nav/_nav-theme.scss

@@ -0,0 +1,33 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    .v-nav {
+        .item {
+            &:hover {
+                background-color: mat.get-theme-color($theme, primary, 95);
+            }
+
+            &__active {
+                background-color: mat.get-theme-color($theme, primary, 90);
+
+                &:hover {
+                    background-color: mat.get-theme-color($theme, primary, 90);
+                }
+            }
+        }
+
+        &__secondary {
+            .item {
+                border-color: mat.get-theme-color($theme, neutral, 80) !important;
+
+                &:hover {
+                    border-color: mat.get-theme-color($theme, primary) !important;
+                }
+
+                &__active {
+                    border-color: mat.get-theme-color($theme, primary) !important;
+                }
+            }
+        }
+    }
+}

package/src/lib/components/nav/nav.component.scss

@@ -0,0 +1,32 @@
+$bold: 500;
+
+.v-nav {
+    display: flex;
+    flex-direction: column;
+
+    .item {
+        cursor: pointer;
+        padding: 12px 24px 12px 12px;
+
+        &__active {
+            font-weight: $bold;
+        }
+
+        // Normal text used the same width as bold text so that the width would not change when switching
+        &::after {
+            display: block;
+            content: attr(title);
+            font-weight: $bold;
+            height: 0;
+            color: transparent;
+            overflow: hidden;
+            visibility: hidden;
+        }
+    }
+
+    &__secondary {
+        .item {
+            border-left: solid 4px;
+        }
+    }
+}

package/src/lib/components/number-range-field/number-range-field.component.scss

@@ -0,0 +1,5 @@
+.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 8px;
+}

package/src/lib/components/select-autocomplete/autocomplete-field/autocomplete-field.component.scss

@@ -0,0 +1,5 @@
+.label,
+.description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/lib/components/select-autocomplete/select-field/select-field.component.scss

@@ -0,0 +1,26 @@
+::ng-deep .mat-mdc-form-field {
+    width: 100%;
+
+    & > * {
+        max-height: 56px;
+    }
+
+    .ng-value-container {
+        flex-wrap: nowrap !important;
+        overflow-x: hidden;
+    }
+}
+
+::ng-deep .ng-dropdown-panel.ng-select-bottom {
+    margin-top: -4px;
+}
+
+.checkbox-option {
+    margin: -12px 0 -12px -8px;
+}
+
+.label,
+.description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/lib/components/table/_table-theme.scss

@@ -0,0 +1,11 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    .column {
+        &,
+        &__sticky-start,
+        &__sticky-end {
+            border-color: mat.get-theme-color($theme, neutral, 90) !important;
+        }
+    }
+}

package/src/lib/components/table/components/table-info-bar/table-info-bar.component.scss

@@ -0,0 +1,45 @@
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.inputs {
+    display: none;
+}
+
+.inputs:not(:empty) {
+    display: block;
+}
+
+.header-wrapper {
+    display: flex;
+    gap: 16px;
+
+    ::ng-deep & > * {
+        flex: 1;
+    }
+}
+
+.details {
+    display: flex;
+    align-items: center;
+
+    ::ng-deep button {
+        margin: -6px 0;
+    }
+}
+
+.count {
+    align-self: anchor-center;
+}
+
+.filter {
+    &__extended {
+        max-width: 200px;
+    }
+
+    ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        height: 0;
+    }
+}

package/src/lib/components/table/table.component.scss

@@ -0,0 +1,84 @@
+:host {
+    min-height: 0;
+}
+
+.wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: max-content;
+    gap: 24px;
+    height: 100%;
+
+    .card {
+        width: 100%;
+        height: 100%;
+        min-height: 300px;
+        overflow: auto;
+        transform: translateZ(0);
+
+        ::ng-deep .mdc-data-table__row:last-child .mat-mdc-cell {
+            border-bottom-color: var(
+                --mat-table-row-item-outline-color,
+                rgba(0, 0, 0, 0.12)
+            ) !important;
+            border-bottom-width: var(--mat-table-row-item-outline-width, 1px) !important;
+            border-bottom-style: solid !important;
+        }
+    }
+}
+
+table,
+::ng-deep .cdk-drag-preview {
+    ::ng-deep .cdk-drag-placeholder {
+        background: #eee;
+    }
+
+    .column {
+        max-width: max(20px, 30vw);
+
+        &__sticky-start,
+        &__sticky-end {
+            width: 0;
+        }
+
+        &__sticky-start {
+            border-right: 1px solid;
+        }
+
+        &__sticky-end {
+            border-left: 1px solid;
+        }
+    }
+
+    .row__hidden {
+        display: none;
+    }
+}
+
+// Drag
+
+::ng-deep .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow:
+        0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    background: white !important;
+    display: flex !important;
+    align-items: center;
+}
+
+::ng-deep .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+::ng-deep .cdk-drop-list-dragging ::ng-deep .mat-mdc-row:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+::ng-deep .cdk-drag-preview {
+    ::ng-deep td {
+        border: none !important;
+    }
+}

package/src/lib/components/tag/_tag-theme.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    .v-tag {
+        .tag {
+            background-color: mat.get-theme-color($theme, primary, 90);
+
+            &.color-pending,
+            &.color-success,
+            &.color-warn {
+                * {
+                    color: #fff !important;
+                }
+            }
+
+            &.color-pending {
+                background-color: map.get(mat.$orange-palette, 70);
+            }
+
+            &.color-success {
+                background-color: map.get(mat.$green-palette, 50);
+            }
+
+            &.color-warn {
+                background-color: mat.get-theme-color($theme, error, 50);
+            }
+        }
+    }
+}

package/src/lib/components/tag/tag.component.scss

@@ -0,0 +1,40 @@
+:host {
+    ::ng-deep {
+        pointer-events: none;
+    }
+
+    .action ::ng-deep {
+        pointer-events: auto;
+        cursor: pointer;
+
+        button {
+            pointer-events: none;
+        }
+    }
+
+    ::ng-deep *::before {
+        border: none !important;
+    }
+}
+
+@keyframes content-loading-animation {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.tag {
+    transition: all 300ms ease-in-out;
+}
+
+.loading {
+    animation: content-loading-animation 1.5s ease-in-out infinite;
+}

package/src/lib/components/value/_value-theme.scss

@@ -0,0 +1,10 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    .value {
+        &__click,
+        &__link {
+            color: mat.get-theme-color($theme, primary, 20);
+        }
+    }
+}

package/src/lib/components/value/value.component.scss

@@ -0,0 +1,42 @@
+:host {
+    cursor: default;
+    text-align: left;
+}
+
+::ng-deep .inline {
+    &,
+    & * {
+        white-space: nowrap;
+    }
+}
+
+.tooltip {
+    text-decoration: underline;
+    text-decoration-style: dotted;
+}
+
+.wrapper {
+    &__action {
+        cursor: pointer;
+    }
+}
+
+.value {
+    &__click {
+        &:hover {
+            text-decoration: underline;
+            text-decoration-style: dashed;
+        }
+    }
+
+    &__link {
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/src/lib/styles/_all-component-themes.scss

@@ -0,0 +1,23 @@
+@use '@angular/material' as mat;
+@use '@ng-matero/extensions' as mtx;
+
+@use '../components/table/table-theme';
+@use '../components/value/value-theme';
+@use '../components/dialog/dialog-theme';
+@use '../components/tag/tag-theme';
+@use '../components/input-field/input-field-theme';
+@use '../components/nav/nav-theme';
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@mixin all-component-themes($theme) {
+    @include mtx.select-theme($theme);
+
+    @include table-theme.theme($theme);
+    @include value-theme.theme($theme);
+    @include dialog-theme.theme($theme);
+    @include tag-theme.theme($theme);
+    @include input-field-theme.theme($theme);
+    @include nav-theme.theme($theme);
+}

package/src/lib/styles/_app.scss

@@ -0,0 +1,10 @@
+@mixin app($theme) {
+    html,
+    body {
+        height: 100%;
+    }
+    body {
+        margin: 0;
+        font-family: Roboto, 'Helvetica Neue', sans-serif;
+    }
+}

package/src/lib/styles/_core.scss

@@ -0,0 +1,8 @@
+@use '@angular/material' as mat;
+
+@mixin core() {
+    // Include the common styles for Angular Material. We include this here so that you only
+    // have to load a single css file for Angular Material in your app.
+    // Be sure that you only ever include this mixin once!
+    @include mat.core();
+}

package/src/lib/styles/_mat-component-variants.scss

@@ -0,0 +1,65 @@
+@use 'sass:meta';
+@use '@angular/material' as mat;
+
+$variants: ('primary', 'secondary', 'tertiary', 'error');
+$components: (
+    // 'badge',
+    'button',
+    // 'checkbox',
+    // 'chips',
+    // 'datepicker',
+    // 'form-field',
+    // 'fab',
+    // 'icon',
+    // 'option',
+    // 'progress-bar',
+    // 'progress-spinner',
+    // 'pseudo-checkbox',
+    // 'radio',
+    // 'select',
+    // 'slide-toggle',
+    // 'slider',
+    // 'stepper',
+     // 'tabs'
+);
+
+@mixin mat-component-variants($theme) {
+    @each $variant in $variants {
+        .matv-#{$variant} {
+            @each $component in $components {
+                @if (is-variant-supported($variant, $component)) {
+                    @include meta.apply(
+                        meta.get-mixin('#{$component}-color', mat),
+                        $theme,
+                        $color-variant: $variant
+                    );
+                }
+            }
+        }
+        // @each $component in $components {
+        //     @if (is-variant-supported($variant, $component)) {
+        //         .#{$variant}-#{$component} {
+        //             @include meta.apply(
+        //                 meta.get-mixin('#{$component}-color', mat),
+        //                 $theme,
+        //                 $color-variant: $variant
+        //             );
+        //         }
+        //     }
+        // }
+    }
+
+    .matv-primary {
+        @include mat.toolbar-overrides(
+            (
+                container-background-color: mat.get-theme-color($theme, primary, 40),
+            )
+        );
+    }
+}
+@function is-variant-supported($variant, $component) {
+    @if ($variant == 'error' and $component == 'fab') {
+        @return false;
+    }
+    @return true;
+}

package/src/lib/styles/_select-theme.scss

@@ -0,0 +1,6 @@
+@use '@angular/material' as mat;
+@use '@ng-matero/extensions' as mtx;
+
+@mixin select-theme($theme) {
+    @include mtx.select-theme($theme);
+}