@netgrif/components 6.4.0-rc.8 → 7.0.0-beta.2

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

@@ -2,7 +2,7 @@
 @import "quill/dist/quill.snow.css";
 @import "quill/dist/quill.bubble.css";
 @import "quill/dist/quill.core.css";
-@import '~node_modules/@covalent/markdown/markdown-theme';
+@import 'node_modules/@covalent/markdown/markdown-theme';
 
 @mixin data-field-component($theme) {
     $primary: map-get($theme, primary);
@@ -23,14 +23,6 @@
         border-bottom: 1px solid #eee;
     }
 
-    .mat-option {
-        height: auto !important;
-        min-height: 48px;
-        white-space: normal !important;
-        line-height: normal !important;
-        padding: 8px 16px !important;
-    }
-
     .horizontal-state-primary {
         background-color: mat.get-color-from-palette($primary);
     }
@@ -78,69 +70,94 @@
         color: mat.get-color-from-palette($primary) !important;
     }
 
+    .mat-mdc-option {
+        height: auto !important;
+        min-height: 48px;
+        white-space: normal !important;
+        line-height: normal !important;
+        padding: 8px 16px !important;
+    }
+
     .netgrif-input {
 
-        .mat-standard-chip {
+        .mat-mdc-standard-chip {
             height: unset;
             min-height: 1px;
             word-break: break-word;
         }
 
-        .mat-paginator-page-size-select .mat-form-field-infix {
+        .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix {
             min-width: unset !important;
         }
 
-        .mat-form-field-infix {
-            padding: 5px 0 11px 0 !important;
+        .mat-mdc-form-field-infix {
+            padding: 11px 0 11px 0 !important;
             font-weight: 400 !important;
             font-size: 14px !important;
             line-height: 20px !important;
             min-width: 130px !important;
             width: unset;
+            height: unset;
+            min-height: 43px;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline .mat-form-field-suffix {
-            top: 0.33em;
+        .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
+            transform: translateY(-26px) scale(0.75) !important;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-prefix {
-            left: -0.33em;
+        .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+            top: 20px;
+            font-size: 14px;
         }
 
-        .mat-form-field-label-wrapper {
+        .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button.mat-mdc-button-base,  .mat-mdc-form-field-icon-prefix .mat-mdc-icon-button.mat-mdc-button-base {
+            height: 42px;
+            width: 42px;
+            padding: 9px;
+        }
+
+        //.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-prefix, .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-suffix {
+        //    top: 0.33em;
+        //}
+        //
+        //.mat-mdc-form-field-appearance-outline .mat-mdc-form-field-prefix {
+        //    left: -0.33em;
+        //}
+
+        .mat-mdc-form-field-label-wrapper {
             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 {
+        .mat-mdc-form-field-appearance-outline.mat-mdc-form-field-can-float.mat-mdc-form-field-should-float .mat-mdc-form-field-label {
             transform: translateY(-1.4em) scale(0.75);
             width: 133.3333333333%;
         }
 
-        .mat-select-arrow-wrapper {
-            transform: translateY(0) !important;
+        .mat-mdc-select-arrow-wrapper {
+            height: 20px;
         }
 
-        .mat-select-disabled .mat-select-trigger {
+        .mat-mdc-select-disabled .mat-mdc-select-trigger {
             user-select: all !important;
         }
 
-        .mat-error {
+        .mat-mdc-form-field-error {
             font-size: 10px !important;
             line-height: 18px !important;
             width: 100%;
         }
 
-        .mat-hint {
+        .mat-mdc-form-field-hint {
             font-size: 10px !important;
             line-height: 18px !important;
             width: 100%;
             color: $color-text-enabled;
         }
 
-        .mat-hint-disabled {
+        .mat-mdc-hint-disabled {
             color: $color-text-disabled !important;
         }
 
@@ -154,13 +171,13 @@
             border: 1px solid $color-outline-enabled;
         }
 
-        .mat-radio-label {
+        .mat-mdc-radio-label {
             min-height: 36px !important;
             white-space: unset;
         }
 
         @media only screen and (max-width: 959.99px) {
-            .mat-radio-label {
+            .mat-mdc-radio-label {
                 align-items: flex-start;
             }
         }
@@ -175,7 +192,7 @@
             cursor: alias;
         }
 
-        .mat-list-option {
+        .mat-mdc-list-option {
             height: auto !important;
             min-height: 36px;
             padding: 0 !important;
@@ -183,93 +200,97 @@
             line-height: normal !important;
             display: flex !important;
             justify-content: center;
-            flex-direction: column;
         }
 
-        .mat-list-option:focus {
+        .mdc-list-item--with-leading-checkbox .mdc-list-item__start {
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .mdc-list-item__primary-text,  .mdc-list-item__content {
+            text-overflow: clip;
+            white-space: break-spaces;
+        }
+
+        .mat-mdc-list-option:focus {
             outline: none;
         }
 
-        .mat-list-base .mat-list-item .mat-list-item-content, .mat-list-base .mat-list-option .mat-list-item-content {
+        .mat-mdc-list-base .mat-mdc-list-item .mat-mdc-list-item-content, .mat-mdc-list-base .mat-mdc-list-option .mat-mdc-list-item-content {
             min-height: 36px;
             padding: 0 2px !important;
         }
 
-        .mat-list-base .mat-list-option.mat-list-option .mat-list-item-content .mat-list-text {
+        .mat-mdc-list-base .mat-mdc-list-option.mat-mdc-list-option .mat-mdc-list-item-content .mat-mdc-list-text {
             padding-top: 8px;
             padding-bottom: 8px;
             padding-left: 10px;
         }
 
-        .mat-list-base {
+        .mat-mdc-list-base {
             padding-top: 4px !important;
         }
 
-        .mat-form-field-subscript-wrapper {
-            //position: static;
-            margin-top: 0.5em;
-            top: calc(100% - 2em);
-        }
-
-        .mat-form-field-wrapper {
+        .mat-mdc-form-field-wrapper {
             padding-bottom: 1em !important;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-wrapper {
+        .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-wrapper {
             margin: 0.25px 0 0;
         }
 
         // DISABLED
 
-        .mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
+
+        .mat-mdc-form-field-appearance-outline.mat-mdc-form-field-disabled .mat-mdc-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 {
+        .mat-mdc-form-field-appearance-outline.mat-mdc-form-field-disabled .mat-mdc-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 {
+        .mat-mdc-input-element:disabled, .mat-mdc-form-field-type-mat-native-select.mat-mdc-form-field-disabled .mat-mdc-form-field-infix::after {
             color: $color-text-disabled;
         }
 
-        .mat-form-field-prefix .mat-icon-button.mat-button-disabled.mat-button-disabled {
+        .mat-mdc-form-field-icon-prefix .mat-mdc-icon-button.mat-mdc-button-disabled.mat-mdc-button-disabled {
             color: $color-text-disabled;
         }
 
-        .mat-radio-button.mat-radio-disabled .mat-radio-label-content {
+        .mat-mdc-radio-button.mat-mdc-radio-disabled .mat-mdc-radio-label-content {
             color: $color-text-disabled !important;
         }
 
-        .mat-list-base .mat-list-item-disabled {
+        .mat-mdc-list-base .mat-mdc-list-item-disabled {
             color: $color-text-disabled !important;
             background-color: transparent;
         }
 
-        .mat-select-disabled .mat-select-value {
+        .mat-mdc-select-disabled .mat-mdc-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 {
+        .mat-mdc-button.mat-mdc-primary.mat-mdc-button-disabled,
+        .mat-mdc-button.mat-mdc-accent.mat-mdc-button-disabled,
+        .mat-mdc-button.mat-mdc-warn.mat-mdc-button-disabled,
+        .mat-mdc-button.mat-mdc-button-disabled.mat-mdc-button-disabled,
+        .mat-mdc-icon-button.mat-mdc-primary.mat-mdc-button-disabled,
+        .mat-mdc-icon-button.mat-mdc-accent.mat-mdc-button-disabled,
+        .mat-mdc-icon-button.mat-mdc-warn.mat-mdc-button-disabled,
+        .mat-mdc-icon-button.mat-mdc-button-disabled.mat-mdc-button-disabled,
+        .mat-mdc-stroked-button.mat-mdc-primary.mat-mdc-button-disabled,
+        .mat-mdc-stroked-button.mat-mdc-accent.mat-mdc-button-disabled,
+        .mat-mdc-stroked-button.mat-mdc-warn.mat-mdc-button-disabled,
+        .mat-mdc-stroked-button.mat-mdc-button-disabled.mat-mdc-button-disabled {
             color: $color-text-disabled;
         }
 
         // ENABLED
 
-        .mat-form-field-appearance-outline .mat-form-field-outline {
+        .mat-mdc-text-field-wrapper {
             color: $color-outline-enabled;
             background-color: #FFFFFF;
             border-radius: 6px;
@@ -288,54 +309,101 @@
             background-color: #FFFFFF;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-outline-start {
+        .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
             border-radius: 6px 0 0 6px;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-outline-end {
+        .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
             border-radius: 0 6px 6px 0;
         }
 
-        .mat-list-base .mat-list-option {
+        .mat-mdc-list-base .mat-mdc-list-option {
             color: $color-text-enabled !important;
         }
 
-        .mat-radio-label-content {
+        .mat-mdc-radio-label-content {
             color: $color-text-enabled !important;
         }
 
-        .mat-stroked-button:not(.mat-button-disabled) {
+        .mat-mdc-stroked-button:not(.mat-mdc-button-disabled) {
             border-color: $color-outline-enabled;
         }
 
-        .mat-slide-toggle-content {
+        .mat-mdc-slide-toggle-content {
             color: $color-text-enabled !important;
         }
 
         .netgrif-chip-fix {
-            .mat-chip-list-wrapper {
+            .mat-mdc-chip-list-wrapper {
                 margin: -10px !important;
             }
 
-            &.mat-form-field .mat-form-field-prefix {
+            &.mat-form-field .mat-mdc-form-field-icon-prefix {
                 top: 0.33em !important;
                 padding-right: 4px !important;
             }
         }
 
-        .mat-select-trigger {
+        .mat-mdc-select-trigger {
             height: unset;
             min-height: 1.125em;
         }
 
-        .mat-select-value-text {
+        .mat-mdc-select-value-text {
             white-space: break-spaces;
         }
 
+        /// NEW STYLES
+
+        .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__leading,
+        .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch,
+        .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__trailing {
+            border-color: $color-outline-disabled;
+        }
+
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
+            border-color: $color-outline-enabled;
+        }
+
+        .mat-mdc-icon-button .mat-mdc-button-touch-target {
+            height: 42px;
+            width: 42px;
+            padding: 8px;
+        }
+
+        .mat-mdc-icon-button.mat-mdc-button-base {
+            height: 42px;
+            width: 42px;
+            padding: 8px;
+        }
+
+        .mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
+            padding: 8px;
+        }
+
+        .mat-mdc-select {
+            line-height: 20px;
+        }
+
+        .chip-fix {
+            .mat-mdc-form-field-infix {
+                padding: 7px 0 7px 0 !important;
+            }
+
+            .mdc-evolution-chip__cell,
+            .mat-mdc-chip-action-label {
+                word-break: break-word;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis ;
+            }
+        }
     }
 
     .netgrif-zero-field-wrapper {
-        .mat-form-field-wrapper {
+        .mat-mdc-form-field-wrapper {
             padding-bottom: 0 !important;
         }
     }
@@ -350,57 +418,52 @@
     }
 
     .netgrif-input-search-fix {
-        .mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button {
+        .mat-mdc-form-field:not(.mat-mdc-form-field-appearance-legacy) .mat-mdc-form-field-suffix .mat-mdc-icon-button {
             width: unset !important;
             height: unset !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-mdc-form-field-subscript-wrapper {
+            display: none;
         }
 
-        .mat-form-field-appearance-outline .mat-form-field-prefix {
-            left: 0 !important;
-        }
-
-        .mat-form-field-wrapper {
-            padding-bottom: 0 !important;
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
+        .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
+            background-color: #FFFFFF;
         }
     }
 
     .netgrif-icon-fix {
-        margin-bottom: 18px;
+        margin-bottom: 22px;
+        padding-right: 16px;
     }
 
     .netgrif-input-primary-fix {
-        .mat-form-field-appearance-outline {
-            .mat-form-field-outline {
+        .mat-mdc-form-field-appearance-outline {
+            .mat-mdc-form-field-outline {
                 color: mat.get-contrast-color-from-palette($primary, 500);
             }
 
-            .mat-form-field-outline-thick {
-                color: mat.get-contrast-color-from-palette($primary, 500);
+            .mat-mdc-form-field-outline-thick {
+                color: mat.get-contrast-color-from-palette($primary ,500);
             }
 
-            &.mat-focused {
-                .mat-form-field-outline-thick {
+            &.mat-mdc-focused {
+                .mat-mdc-form-field-outline-thick {
                     color: mat.get-contrast-color-from-palette($primary, 500);
                 }
             }
         }
 
-        .mat-form-field-label {
+        .mat-mdc-form-field-label {
             color: mat.get-contrast-color-from-palette($primary, 500);
         }
 
-        .mat-form-field.mat-focused .mat-form-field-label {
+        .mat-mdc-form-field.mat-mdc-focused .mat-mdc-form-field-label {
             color: mat.get-contrast-color-from-palette($primary, 500);
         }
 
@@ -411,14 +474,57 @@
         ::placeholder {
             color: mat.get-contrast-color-from-palette($primary, 500) !important;
         }
+
+
     }
 
     .date-field-fix {
-        .mat-form-field-appearance-outline .mat-form-field-flex {
+        .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-flex {
             padding: 0 0.75em 0 0.5em !important;
         }
     }
 
+
+    /// DATE TIME STYLE WORKAROUND
+        .mat-datepicker-content, .time-container {
+            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+            display: block;
+            border-radius: 6px;
+            background-color: var(--mat-datepicker-calendar-container-background-color);
+            color: var(--mat-datepicker-calendar-container-text-color);
+        }
+
+        .mat-calendar-body-cell-content {
+            color: var(--mat-datepicker-calendar-date-text-color);
+            border-color: var(--mat-datepicker-calendar-date-outline-color)
+        }
+
+        .mat-calendar-body-active {
+            background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+        }
+
+        .mat-calendar-body-selected {
+            background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
+            color: var(--mat-datepicker-calendar-date-selected-state-text-color);
+        }
+
+        .mat-calendar-body-cell-content {
+            border: none !important;
+        }
+
+        .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+            background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+        }
+
+        .mat-calendar-arrow {
+            fill: var(--mat-datepicker-calendar-period-button-icon-color);
+        }
+
+        .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
+            color: var(--mat-datepicker-calendar-date-disabled-state-text-color);
+        }
+    //// END OF WORKAROUND
+
     .form-input-error {
         border-color: mat.get-color-from-palette($warn) !important;
     }
@@ -438,13 +544,12 @@
     }
 }
 
-.mat-calendar-arrow {
+.mat-mdc-calendar-arrow {
     border: none !important;
     width: 10px !important;
     height: 5px !important;
 }
-
-ngx-mat-calendar-header .mat-calendar-arrow {
+ngx-mat-calendar-header .mat-mdc-calendar-arrow {
     border-left: 5px solid transparent !important;
     border-right: 5px solid transparent !important;
     border-top-width: 5px !important;
@@ -454,42 +559,51 @@ ngx-mat-calendar-header .mat-calendar-arrow {
 }
 
 ngx-mat-calendar {
-    .mat-calendar-body-cell {
+    .mat-mdc-calendar-body-cell {
         position: relative !important;
     }
 }
 
 mat-calendar {
-    .mat-calendar-arrow {
+    .mat-mdc-calendar-arrow {
         width: 0;
         height: 0;
     }
 
-    .mat-calendar-body-cell {
+    .mat-mdc-calendar-body-cell {
         position: absolute !important;
         height: 100%;
     }
 }
 
 ngx-mat-datetime-content {
-    .mat-calendar-arrow {
+    .mat-mdc-calendar-arrow {
         width: 0;
     }
 }
 
-nc-number-currency-field .mat-form-field .mat-form-field-prefix {
-    top: 0 !important;
-    padding-right: 4px !important;
+.mat-datepicker-content {
+    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+    background-color: white;
 }
 
-nc-user-list-default-field .mat-form-field .mat-form-field-prefix {
-    top: 0 !important;
+nc-number-currency-field .mat-mdc-form-field .mat-mdc-form-field-icon-prefix {
+    position: initial !important;
+}
+
+nc-user-list-default-field .mat-mdc-form-field .mat-mdc-form-field-icon-prefix {
+    position: initial !important;
     padding-right: 4px !important;
 }
 
+nc-number-currency-field .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+    padding-left: initial !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

@@ -48,14 +48,15 @@
         line-height: 24px;
         letter-spacing: 0.15px;
         color: #1E293B;
+        padding: 20px 24px 20px 24px;
     }
 
-    .mat-dialog-container {
+    .mat-mdc-dialog-container .mdc-dialog__surface {
         border-radius: 6px !important;
     }
 
     .dialog-field-fix  {
-        .netgrif-input .mat-form-field-appearance-outline .mat-form-field-suffix {
+        .netgrif-input .mat-mdc-form-field-appearance-outline .mat-mdc-form-field-suffix {
             top: unset;
         }
     }

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

@@ -7,7 +7,7 @@
     }
 
     .netgrif-header-input {
-        .mat-input-element {
+        .mat-mdc-input-element {
             caret-color: mat.get-contrast-color-from-palette($primary, 500) !important;
         }
     }

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

@@ -55,4 +55,15 @@
         background-color: mat.get-color-from-palette($primary, 100);
         color: mat.get-color-from-palette($primary) !important;
     }
+
+    .quick-panel-menu {
+        .mat-mdc-menu-item-text {
+            flex-direction: row;
+            box-sizing: border-box;
+            display: flex;
+            place-content: center flex-start;
+            align-items: center;
+        }
+    }
+
 }

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

@@ -82,6 +82,10 @@
             height: 100% !important;
         }
     }
+
+    .mat-content.mat-content-hide-toggle {
+        margin-right: 0 !important;
+    }
 }
 
 @media only screen and (max-width: 599.99px) {

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

@@ -7,8 +7,8 @@
         background: mat.get-color-from-palette($primary, 50);
     }
 
-    .mat-form-field-wrapper-search {
-        .mat-form-field-wrapper {
+    .mat-mdc-form-field-wrapper-search {
+        .mat-mdc-form-field-wrapper {
             margin: 0 !important;
             padding-bottom: 0;
         }