@netgrif/components 6.3.2 → 6.4.0-beta.10

package/src/lib/data-fields/data-field.theme.scss

@@ -9,6 +9,12 @@
     $secondary: map-get($theme, accent);
     $warn: map-get($theme, warn);
 
+    $color-text-disabled: #64748B;
+    $color-outline-disabled: #CBD5E1;
+
+    $color-text-enabled: #64748B;
+    $color-outline-enabled: #64748B;
+
     .editor-preview > h1 {
         border-bottom: 1px solid #ddd;
     }
@@ -35,11 +41,11 @@
 
     .stepper-arrow-selected {
         color: mat.get-color-from-palette($primary) !important;
-        font-weight: 700 !important;
+        font-weight: 600 !important;
     }
 
     .enum-icon-item-hover:hover {
-        color: mat.get-color-from-palette($primary) !important;
+        color: mat.get-color-from-palette($primary, 200) !important;
     }
 
     .enum-icon-item-active {
@@ -73,21 +79,44 @@
     }
 
     .netgrif-input {
+
+        .mat-standard-chip {
+            height: unset;
+            min-height: 1px;
+        }
+
+        .mat-paginator-page-size-select .mat-form-field-infix {
+            min-width: unset !important;
+        }
         .mat-form-field-infix {
-            padding: 8px 0 12px 0 !important;
+            padding: 5px 0 11px 0 !important;
             font-weight: 400 !important;
             font-size: 14px !important;
             line-height: 20px !important;
-            min-width: 130px;
+            min-width: 130px !important;
+            width: unset;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline .mat-form-field-suffix {
+            top: 0.33em;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-prefix {
+            left: -0.33em;
         }
 
         .mat-form-field-label-wrapper {
-            top: -1.1em !important;
+            top: -1.2em !important;
             font-weight: 400 !important;
             font-size: 14px !important;
             line-height: 20px !important;
         }
 
+        .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
+            transform: translateY(-1.4em) scale(0.75);
+            width: 133.3333333333%;
+        }
+
         .mat-select-arrow-wrapper {
             transform: translateY(0) !important;
         }
@@ -99,19 +128,18 @@
         .mat-error {
             font-size: 10px !important;
             line-height: 18px !important;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             width: 100%;
-            overflow: hidden;
         }
 
         .mat-hint {
-            font-size: 11px !important;
+            font-size: 10px !important;
             line-height: 18px !important;
-            white-space: nowrap;
-            text-overflow: ellipsis;
             width: 100%;
-            overflow: hidden;
+            color: $color-text-enabled;
+        }
+
+        .mat-hint-disabled {
+            color: $color-text-disabled !important;
         }
 
         .ql-toolbar.ql-snow {
@@ -120,14 +148,28 @@
 
         .ql-container.ql-snow {
             border-radius: 0 0 6px 6px;
+            border: 1px solid $color-outline-enabled;
         }
 
         .mat-radio-label {
             min-height: 36px !important;
+            white-space: unset;
+        }
+
+        @media only screen and (max-width: 959.99px) {
+            .mat-radio-label {
+                align-items: flex-start;
+            }
         }
 
         .netgrif-label {
             font-weight: 500;
+            color: $color-text-enabled !important;
+        }
+
+        .netgrif-label-disabled {
+            color: $color-text-disabled !important;
+            cursor: alias;
         }
 
         .mat-list-option {
@@ -147,12 +189,13 @@
 
         .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
             min-height: 36px;
-            padding: 0 8px !important;
+            padding: 0 2px !important;
         }
 
         .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text {
             padding-top: 8px;
             padding-bottom: 8px;
+            padding-left: 10px;
         }
 
         .mat-list-base {
@@ -160,16 +203,141 @@
         }
 
         .mat-form-field-subscript-wrapper {
-            margin-top: 0.45em;
-            top: calc(100% - 2.05em);
+            //position: static;
+            margin-top: 0.5em;
+            top: calc(100% - 2em);
+        }
+
+        .mat-form-field-wrapper {
+            padding-bottom: 1em !important;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-wrapper {
+            margin: 0.25px 0 0;
+        }
+
+        // DISABLED
+
+        .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
+            color: $color-outline-disabled;
+            background-color: transparent;
+            border-radius: 6px;
+        }
+
+        .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
+            color: $color-text-disabled;
+        }
+
+        .mat-input-element:disabled, .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
+            color: $color-text-disabled;
+        }
+
+        .mat-form-field-prefix .mat-icon-button.mat-button-disabled.mat-button-disabled {
+            color: $color-text-disabled;
+        }
+
+        .mat-radio-button.mat-radio-disabled .mat-radio-label-content {
+            color: $color-text-disabled !important;
+        }
+
+        .mat-list-base .mat-list-item-disabled {
+            color: $color-text-disabled !important;
+            background-color: transparent;
+        }
+
+        .mat-select-disabled .mat-select-value {
+            color: $color-text-disabled;
+        }
+
+        .mat-button.mat-primary.mat-button-disabled,
+        .mat-button.mat-accent.mat-button-disabled,
+        .mat-button.mat-warn.mat-button-disabled,
+        .mat-button.mat-button-disabled.mat-button-disabled,
+        .mat-icon-button.mat-primary.mat-button-disabled,
+        .mat-icon-button.mat-accent.mat-button-disabled,
+        .mat-icon-button.mat-warn.mat-button-disabled,
+        .mat-icon-button.mat-button-disabled.mat-button-disabled,
+        .mat-stroked-button.mat-primary.mat-button-disabled,
+        .mat-stroked-button.mat-accent.mat-button-disabled,
+        .mat-stroked-button.mat-warn.mat-button-disabled,
+        .mat-stroked-button.mat-button-disabled.mat-button-disabled {
+            color: $color-text-disabled;
+        }
+
+        // ENABLED
+
+        .mat-form-field-appearance-outline .mat-form-field-outline {
+            color: $color-outline-enabled;
+            background-color: #FFFFFF;
+            border-radius: 6px;
+        }
+
+        .ql-toolbar {
+            background-color: #FFFFFF;
+        }
+
+        .ql-editor {
+            border-bottom-right-radius: 6px;
+            border-bottom-left-radius: 6px;
+        }
+
+        .ql-editor.ql-blank {
+            background-color: #FFFFFF;
+        }
+
+        .ql-toolbar.ql-snow {
+            border: 1px solid $color-outline-enabled;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-outline-start {
+            border-radius: 6px 0 0 6px;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-outline-end {
+            border-radius: 0 6px 6px 0;
+        }
+
+        .mat-list-base .mat-list-option {
+            color: $color-text-enabled !important;
+        }
+
+        .mat-radio-label-content{
+            color: $color-text-enabled !important;
+        }
+
+        .mat-stroked-button:not(.mat-button-disabled) {
+            border-color: $color-outline-enabled;
+        }
+
+        .mat-slide-toggle-content {
+            color: $color-text-enabled !important;
+        }
+
+        .netgrif-chip-fix {
+            .mat-chip-list-wrapper {
+                margin: -10px !important;
+            }
+        }
+
+        .mat-select-trigger {
+            height: unset;
+            min-height: 1.125em;
+        }
+
+        .mat-select-value-text {
+            white-space: break-spaces;
         }
 
     }
 
-    .netgrif-input-fix {
+    .netgrif-zero-field-wrapper {
         .mat-form-field-wrapper {
             padding-bottom: 0 !important;
         }
+    }
+
+    .netgrif-input-fix {
+
 
         input:-webkit-autofill,
         input:-webkit-autofill:focus {
@@ -181,7 +349,25 @@
         .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
             width: unset !important;
             height: unset !important;
-            top: 5px !important;
+            top: 3px !important;
+        }
+
+        .mat-form-field-wrapper {
+            padding-bottom: 0 !important;
+        }
+    }
+
+    .netgrif-input-primary-search-fix {
+        .mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline .mat-form-field-suffix {
+            top: 0.25em !important;
+        }
+
+        .mat-form-field-appearance-outline .mat-form-field-prefix {
+            left: 0 !important;
+        }
+
+        .mat-form-field-wrapper {
+            padding-bottom: 0 !important;
         }
     }
 
@@ -196,7 +382,7 @@
             }
 
             .mat-form-field-outline-thick {
-                color: mat.get-contrast-color-from-palette($primary, 500);
+                color: mat.get-contrast-color-from-palette($primary ,500);
             }
 
             &.mat-focused {
@@ -239,6 +425,13 @@
         border-radius: 16px;
         border-width: thin;
     }
+
+    :host ::ng-deep .editor-toolbar {
+        background-color: #FFFFFF !important;
+        border-top: 1px solid $color-outline-enabled !important;
+        border-left: 1px solid $color-outline-enabled !important;
+        border-right: 1px solid $color-outline-enabled !important;
+    }
 }
 
 .mat-calendar-arrow {
@@ -279,3 +472,14 @@ ngx-mat-datetime-content {
     }
 }
 
+ac-number-currency-field .mat-form-field .mat-form-field-prefix {
+    top: 0 !important;
+    padding-right: 4px !important;
+}
+
+:host .editor-toolbar {
+    background-color: #FFFFFF !important;
+    border-top: 1px solid #FFFFFF !important;
+    border-left: 1px solid #FFFFFF !important;
+    border-right: 1px solid #FFFFFF !important;
+}

package/src/lib/dialog/dialog.theme.scss

@@ -6,6 +6,58 @@
     }
 }
 
-.dialog-content-margin {
-    margin-bottom: 16px;
+@mixin dialog-theme($theme) {
+    .dialog-content-margin {
+        margin-bottom: 16px;
+    }
+
+    .dialog-responsive {
+        width: 40% !important;
+        height: 80% !important;
+        min-height: 300px !important;
+        min-width: 300px !important;
+    }
+
+    .dialog-task-responsive {
+        width: 40% !important;
+        height: auto !important;
+        min-height: 300px !important;
+        min-width: 300px !important;
+    }
+
+    @media only screen and (max-width: 599px) {
+        .dialog-responsive {
+            width: 100% !important;
+            height: 80% !important;
+            min-height: unset !important;
+            min-width: unset !important;
+        }
+
+        .dialog-task-responsive {
+            width: 100% !important;
+            height: 80% !important;
+            min-height: unset !important;
+            min-width: unset !important;
+        }
+    }
+
+    .mat-dialog-title {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        letter-spacing: 0.15px;
+        color: #1E293B;
+    }
+
+    .mat-dialog-container {
+        border-radius: 6px !important;
+    }
+
+    .dialog-field-fix  {
+        .netgrif-input .mat-form-field-appearance-outline .mat-form-field-suffix {
+            top: unset;
+        }
+    }
 }
+

package/src/lib/header/header.theme.scss

@@ -6,15 +6,6 @@
         background: rgba(mat.get-color-from-palette($primary), 0.3);
     }
 
-    .header-color {
-        background: mat.get-color-from-palette($primary, 500);
-        color: mat.get-contrast-color-from-palette($primary, 500);
-    }
-
-    .header-color-font {
-        color: mat.get-contrast-color-from-palette($primary, 500);
-    }
-
     .netgrif-header-input {
         .mat-input-element {
             caret-color: mat.get-contrast-color-from-palette($primary, 500) !important;

package/src/lib/navigation/navigation.theme.scss

@@ -20,11 +20,12 @@
     }
 
     .rail-color {
-        background: mat.get-color-from-palette($primary, 50);
+        background: #F8FAFC;
     }
 
     .rail-selected-color {
         background-color: mat.get-color-from-palette($primary, 100);
+        color: mat.get-color-from-palette($primary) !important;
     }
 
     .tree-node.active {
@@ -35,7 +36,23 @@
         color: mat.get-color-from-palette($primary) !important;
     }
 
-    .logo, .toolbar {
-        background: mat.get-color-from-palette($primary, 50);
+    .active-tree-node {
+        color: mat.get-color-from-palette($primary) !important;
+    }
+
+    .tree-node {
+        mat-icon.tree-node-icon {
+            color: mat.get-color-from-palette($primary) !important;
+        }
+    }
+
+    .tree-node:hover {
+        background-color: mat.get-color-from-palette($primary, 50);
+        color: mat.get-color-from-palette($primary) !important;
+    }
+
+    .menu-button:hover {
+        background-color: mat.get-color-from-palette($primary, 100);
+        color: mat.get-color-from-palette($primary) !important;
     }
 }

package/src/lib/panel/panel.theme.scss

@@ -4,15 +4,15 @@
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     .panel-color:hover {
-        background: mat.get-color-from-palette($primary) !important;
-        color: white !important;
+        background: mat.get-color-from-palette($primary, 50) !important;
+        color: mat.get-contrast-color-from-palette($primary, 50) !important;
 
         .panel-primary-icon {
-            color: mat.get-color-from-palette($accent);
+            color: mat.get-color-from-palette($primary, 500) !important;
         }
 
         .panel-accent-icon {
-            color: mat.get-color-from-palette($accent);
+            color: mat.get-color-from-palette($accent) !important;
         }
     }
 
@@ -38,4 +38,56 @@
         font-size: 12px;
         color: mat.get-contrast-color-from-palette($primary, 500);
     }
+
+    .panel-last {
+        .header-min-height {
+            border-bottom: unset !important;
+        }
+    }
+
+    .mat-accordion .mat-expansion-panel:last-of-type:not([class*=panel-last]) {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+    }
+
+    .mat-accordion .mat-expansion-panel:first-of-type {
+        border-top-left-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+    }
+
+    .panel-list-content {
+        .cdk-virtual-scroll-content-wrapper {
+            box-sizing: border-box;
+            padding: 0 1px;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+        }
+    }
+
+    .task-panel-scroll-container {
+        .cdk-virtual-scroll-content-wrapper {
+            box-shadow: 0px 1px 2px rgb(0 0 0 / 10%), 0px 1px 3px 1px rgb(0 0 0 / 10%);
+        }
+    }
+
+    .panel-body {
+        .mat-expansion-panel-body {
+            padding: 0 !important;
+            background-color: #F8FAFC;
+        }
+    }
+
+    .single-task-fix {
+        .mat-expansion-panel-content {
+            height: 100% !important;
+        }
+    }
+}
+
+@media only screen and (max-width: 599.99px) {
+    .panel-padding {
+        .mat-expansion-panel-body {
+            padding: 0 0 8px;
+        }
+    }
 }

package/src/lib/search/advanced-search/advanced-search-component/advanced-search.component.theme.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+
+@mixin advanced-search-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .advanced-search-buttons {
+        color: mat.get-color-from-palette($primary, 500);
+    }
+}

package/src/lib/search/advanced-search/search-predicate-component/search-predicate.component.theme.scss

@@ -6,4 +6,11 @@
     .predicate-body-color {
         background: mat.get-color-from-palette($primary, 50);
     }
+
+    .mat-form-field-wrapper-search {
+        .mat-form-field-wrapper {
+            margin: 0 !important;
+            padding-bottom: 0;
+        }
+    }
 }

package/src/lib/search/search-component/search.component-theme.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+
+@mixin advanced-search-icon($theme) {
+    $primary: map-get($theme, primary);
+
+    .advanced-search-icon {
+        color: mat.get-color-from-palette($primary, 500);
+    }
+
+    .mat-menu-border-radius {
+        border-radius: 8px !important;
+    }
+    .mat-menu-padding {
+        .mat-menu-content {
+            padding: 0 !important;
+        }
+    }
+    .mat-menu-item:hover:not([disabled]), .mat-menu-item.cdk-program-focused:not([disabled]), .mat-menu-item.cdk-keyboard-focused:not([disabled]), .mat-menu-item-highlighted:not([disabled]) {
+        background: mat.get-color-from-palette($primary, 50) !important;
+    }
+}

package/src/lib/side-menu/side-menu.theme.scss

@@ -19,6 +19,6 @@
         font-weight: 500;
         font-size: 20px;
         line-height: 32px;
-        font-family: Roboto, monospace;
+        font-family: 'Roboto';
     }
 }

package/src/lib/tabs/tabs.theme.scss

@@ -1,4 +1,7 @@
+@use '@angular/material' as mat;
+
 @mixin tabs-theme($theme) {
+    $primary: map-get($theme, primary);
     .center-tabs {
         .mat-tab-labels {
             justify-content: center;
@@ -12,8 +15,19 @@
     }
 
     .mat-tab-label-container {
-        border-radius: 6px;
         background: white;
     }
+
+    .mat-tab-header {
+        border-bottom: 2px solid #E2E8F0;
+    }
+
+    .icon-tab-color {
+        color: mat.get-color-from-palette($primary);
+    }
+
+    .mat-tab-label {
+        opacity: 1 !important;
+    }
 }