@netgrif/components 6.0.4 → 6.1.0

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

@@ -1,11 +1,13 @@
-@import '~@angular/material/theming';
-@import '~quill/dist/quill.core.css';
-@import '~quill/dist/quill.bubble.css';
-@import '~quill/dist/quill.snow.css';
+@use '@angular/material' as mat;
+@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';
 
 @mixin data-field-component($theme) {
     $primary: map-get($theme, primary);
     $secondary: map-get($theme, accent);
+    $warn: map-get($theme, warn);
 
     .editor-preview > h1 {
         border-bottom: 1px solid #ddd;
@@ -42,32 +44,50 @@
     }
 
     .horizontal-state-primary {
-        background-color: mat-color($primary);
+        background-color: mat.get-color-from-palette($primary);
     }
 
     .horizontal-state-secondary {
-        background-color: mat-color($secondary);
+        background-color: mat.get-color-from-palette($secondary);
     }
 
     .stepper-arrow-selected {
-        color: mat-color($primary) !important;
+        color: mat.get-color-from-palette($primary) !important;
         font-weight: 700 !important;
     }
 
     .enum-icon-item:hover {
-        color: mat-color($primary) !important;
+        color: mat.get-color-from-palette($primary) !important;
     }
 
     .enum-icon-item-active {
-        color: mat-color($primary) !important;
+        color: mat.get-color-from-palette($primary) !important;
     }
 
     .file-list-item:hover {
-        background-color: rgba(mat-color($secondary, A200), 0.3)
+        background-color: rgba(mat.get-color-from-palette($secondary, A200), 0.3)
     }
 
     .primary-background-color {
-        background: mat-color($primary);
+        background: mat.get-color-from-palette($primary);
+    }
+
+    .filled-language-row:hover {
+        background-color: rgba(mat-color($primary), 0.2);
+    }
+
+    .form-input:focus-within:not(.invalid-form-input) {
+        border: solid 2px mat-color($primary) !important;
+        padding: 1px !important;
+    }
+
+    .invalid-form-input {
+        border: solid 2px mat-color($warn) !important;
+        padding: 1px !important;
+    }
+
+    .invalid-form-label {
+        color: mat-color($warn) !important;
     }
 }
 

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

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin dialog-typography($typography-config) {
     .dialog-container {
         font: {

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

@@ -1,8 +1,8 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin header-component($theme) {
     $primary: map-get($theme, primary);
     .active-header-item {
-        background: rgba(mat-color($primary), 0.3);
+        background: rgba(mat.get-color-from-palette($primary), 0.3);
     }
 }

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

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin navigation-theme($theme) {
     $accent: map-get($theme, accent);
 
     .active-navigation-route {
-        background-color: rgba(mat-color($accent), 0.3);
+        background-color: rgba(mat.get-color-from-palette($accent), 0.3);
     }
 }

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

@@ -1,31 +1,31 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin panel-component($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
     .panel-color:hover {
-        background: mat-color($primary) !important;
+        background: mat.get-color-from-palette($primary) !important;
         color: white !important;
 
         .panel-primary-icon {
-            color: mat-color($accent);
+            color: mat.get-color-from-palette($accent);
         }
 
         .panel-accent-icon {
-            color: mat-color($accent);
+            color: mat.get-color-from-palette($accent);
         }
     }
 
     .line-datagroup {
         height: 1px;
-        background: mat-color($primary) !important;
+        background: mat.get-color-from-palette($primary) !important;
     }
 
     .panel-primary-icon {
-        color: mat-color($primary);
+        color: mat.get-color-from-palette($primary);
     }
 
     .panel-accent-icon {
-        color: mat-color($accent);
+        color: mat.get-color-from-palette($accent);
     }
 }

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

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin search-clause-theme($theme) {
     $primary: map-get($theme, primary);
 
     .clause-body-color {
-        background: mat-color($primary, 100);
+        background: mat.get-color-from-palette($primary, 100);
     }
 }

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

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin search-configuration-input-theme($theme) {
     $primary: map-get($theme, primary);
 
     .argument-placeholder-color {
-        background: mat-color($primary, 50);
+        background: mat.get-color-from-palette($primary, 50);
     }
 }

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

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin search-predicate-theme($theme) {
     $primary: map-get($theme, primary);
 
     .predicate-body-color {
-        background: mat-color($primary, 50);
+        background: mat.get-color-from-palette($primary, 50);
     }
 }

package/src/lib/side-menu/content-components/user-assign/user-assign-list/user-assign-item/theme/user-assign-item.component.theme.scss

@@ -1,15 +1,15 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin user-assign-item-component-theme($theme) {
     $primary: map-get($theme, primary);
 
     .user-assign-item-selected {
-        background-color: mat-color($primary, 300);
-        color: mat-contrast($primary, 300) !important;
+        background-color: mat.get-color-from-palette($primary, 300);
+        color: mat.get-contrast-color-from-palette($primary, 300) !important;
     }
 
     .user-assign-item-selected:hover {
-        background-color: mat-color($primary, 500) !important;
-        color: mat-contrast($primary, 500) !important;
+        background-color: mat.get-color-from-palette($primary, 500) !important;
+        color: mat.get-contrast-color-from-palette($primary, 500) !important;
     }
 }

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

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin side-menu-typography($typography-config) {
     .side-menu-root {
@@ -12,8 +12,8 @@
     $primary: map-get($theme, primary);
 
     .custom-mat-toolbar {
-        background-color: mat-color($primary);
-        color: mat-contrast($primary, 500);
+        background-color: mat.get-color-from-palette($primary);
+        color: mat.get-contrast-color-from-palette($primary, 500);
         height: 64px;
         padding: 0 16px;
         font-weight: 500;

package/src/lib/snack-bar/snack-bar.theme.scss

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin snack-bar-typography($typography-config) {
     .snack-bar-container {
         font: {

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

@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 @mixin tabs-theme($theme) {
     .center-tabs {
         .mat-tab-labels {

package/src/lib/user/user.theme.scss

@@ -1,9 +1,9 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin user-profile($theme) {
     $primary: map-get($theme, primary);
     .card-title {
-        background: mat-color($primary) !important;
+        background: mat.get-color-from-palette($primary) !important;
         border-top-left-radius: 5px;
         border-top-right-radius: 5px;
     }

package/src/lib/view/view.theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '@angular/material' as mat;
 
 @mixin view-theme($theme) {
     $primary: map-get($theme, primary);
@@ -9,8 +9,8 @@
     }
 
     .selected-tree-node {
-        color: mat-color($primary);
-        background: mat-color($primary, 50);
+        color: mat.get-color-from-palette($primary);
+        background: mat.get-color-from-palette($primary, 50);
     }
 }