@pepperi-addons/ngx-lib 0.4.2-storybook.1 → 0.5.0-ng15.2

package/src/core/style/components/checkbox.scss

@@ -5,6 +5,10 @@
 // -----------------------------------------------------
 //  Checkbox
 // -----------------------------------------------------
+@mixin pep-checkbox-checked-mark() {
+    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+}
+
 @mixin pep-checkbox-size($size) {
     $checkbox-width: 1.5rem;
     $checkbox-height: 1.5rem;
@@ -30,106 +34,59 @@
     height: $checkbox-height;
 }
 
-.checkbox-as-title {
-    margin-bottom: 0.5rem !important;
-    min-height: unset !important;
-
-    .pep-checkbox-container {
-        background: unset !important;
-        padding-left: unset !important;
-        padding-right: unset !important;
-
-        .mat-checkbox-inner-container {
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-
-        .mat-checkbox-layout {
-            @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
-            font-weight: variables.$font-weight-bold !important;
-
-            .mat-checkbox-label span {
-                margin: 0 0.5rem;
-            }
-        }
-    }
-
-    // &.sub-title {
-    //     .pep-checkbox-container {
-    //         .mat-checkbox-layout {
-    //             @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
-    //             font-weight: variables.$font-weight-bold !important;
-    
-    //             .mat-checkbox-label span {
-    //                 margin: 0 0.5rem;
-    //             }
-    //         }
-    //     }
-    // }
-}
-
-.checkbox-no-background {
-    .pep-checkbox-container {
-        background: unset !important;
-        padding-left: unset !important;
-        padding-right: unset !important;
-
-        &.disable {
-            background: unset !important;
-        }
-
-        .mat-checkbox-inner-container {
-            margin-left: 0 !important;
-            margin-right: 0 !important;
-        }
-
-        .mat-checkbox-layout {
-            .mat-checkbox-label span {
-                margin: 0 0.5rem;
-            }
-        }
-    }
-}
-
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------
-.mat-checkbox-anim-checked-unchecked .mat-checkbox-background {
+.mat-checkbox-anim-checked-unchecked .mat-checkbox-background,
+.mat-mdc-checkbox-anim-checked-unchecked .mdc-checkbox__background {
     display: none;
 }
 
 .mat-checkbox-disabled,
+.mat-mdc-checkbox-disabled,
 .mat-checkbox-indeterminate,
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
+.mat-mdc-checkbox-indeterminate
+.mat-checkbox-checked,
+.mat-mdc-checkbox-checked {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
             border-radius: variables.$border-radius-md;
         }
     }
 }
 
-.mat-checkbox-checked {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
-            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+.mat-checkbox-checked,
+.mat-mdc-checkbox-checked {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
+            @include pep-checkbox-checked-mark();
             width: inherit;
             height: inherit;
 
-            .mat-checkbox-checkmark-path {
+            .mat-checkbox-checkmark-path,
+            .mat-mdc-checkbox-checkmark-path {
                 display: none;
             }
         }
     }
 }
 
-.mat-checkbox-indeterminate {
-    .mat-checkbox-layout {
-        .mat-checkbox-background {
+.mat-checkbox-indeterminate,
+.mat-mdc-checkbox-indeterminate {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
+        .mat-checkbox-background,
+        .mdc-checkbox__background {
             content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+");
             width: inherit;
             height: inherit;
 
-            .mat-checkbox-checkmark-path {
+            .mat-checkbox-checkmark-path,
+            .mat-mdc-checkbox-checkmark-path {
                 display: none;
             }
         }
@@ -142,7 +99,8 @@
     display: grid;
     align-items: center;
 
-    .mat-checkbox {
+    .mat-checkbox,
+    .mat-mdc-checkbox {
         @include mixins.fix-inline-z-index();
         height: inherit;
         display: flex;
@@ -150,11 +108,13 @@
         cursor: default;
     }
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         cursor: pointer;
     }
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         // margin: auto 0rem auto 0.5rem !important; // override default auto margin.
         // margin: auto 0.5rem auto 0.5rem !important; // override default auto margin.
         margin: auto 0 !important; // override default auto margin.
@@ -176,7 +136,8 @@
     }
 
     &.right-alignment {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             // margin: auto 0.5rem auto 0rem !important;
             // margin: auto 0.5rem auto 0.5rem !important;
             margin-left: 0 !important;
@@ -190,19 +151,17 @@
     }
 
     &.center-alignment {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             // margin: auto 0 auto 0 !important;
             margin-left: 0 !important;
             margin-right: 0 !important;
         }
 
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             width: 100% !important;
             justify-content: center !important;
-
-            .mat-checkbox-label {
-                // margin-left: 0.25rem;
-            }
         }
 
         // .emoji-icon {
@@ -219,6 +178,15 @@
 
 .pepperi-report-checkbox, .pep-report-checkbox {
     background: transparent !important;
+
+    .mat-checkbox-background,
+    .mdc-checkbox__background,
+    .mat-checkbox-frame,
+    .mat-mdc-checkbox-frame {
+        border: unset !important;
+        background: unset !important;
+        box-shadow: unset !important;
+    }
 }
 
 .pepperi-card-checkbox, .pep-card-checkbox {
@@ -238,14 +206,16 @@
         width: 2.5rem !important;
     }
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         width: 100% !important;
         height: auto;
         align-items: center !important;
         vertical-align: unset; // override default auto margin.
     }
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         margin: auto 0.25rem;
     }
 
@@ -264,7 +234,8 @@
         &.no-title {
             width: variables.$card-field-height !important; // 1.5rem !important;
 
-            .mat-checkbox-inner-container {
+            .mat-checkbox-inner-container,
+            .mat-mdc-checkbox-inner-container {
                 // margin: auto 0.5rem auto 0rem !important;
                 // margin: auto 0.5rem auto 0.5rem !important;
                 margin-left: 0 !important;
@@ -285,11 +256,13 @@
             @include mixins.font-size(variables.$fs-xs);
         }
 
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             height: 1.5rem;
         }
 
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             border-radius: variables.$border-radius-md;
 
             @include pep-checkbox-size('sm');
@@ -299,14 +272,11 @@
     &.disable {
         background: transparent !important;
         padding: 0 !important;
-
-        .mat-checkbox-inner-container {
-            //margin-left: 0;
-        }
     }
 }
 
-.mat-checkbox-layout {
+.mat-checkbox-layout,
+.mat-mdc-checkbox-layout {
     @include mixins.fix-inline-z-index();
     // height: inherit;
     margin-bottom: unset; // Cancel bootstrap defaults for Label.
@@ -318,17 +288,20 @@
     display: grid !important;
     grid-auto-flow: column;
 
-    .mat-checkbox-inner-container {
+    .mat-checkbox-inner-container,
+    .mat-mdc-checkbox-inner-container {
         border-radius: variables.$border-radius-md;
 
         @include pep-checkbox-size('lg');
 
-        .mat-checkbox-ripple {
+        .mat-checkbox-ripple,
+        .mat-mdc-checkbox-ripple {
             display: none;
         }
     }
 
-    .mat-checkbox-label {
+    .mat-checkbox-label,
+    .mat-mdc-checkbox-label {
         display: block;
         @include mixins.ellipsis();
         span {
@@ -336,7 +309,8 @@
         }
     }
 
-    .mat-checkbox-frame {
+    .mat-checkbox-frame,
+    .mat-mdc-checkbox-frame {
         height: inherit;
         width: inherit;
         display: flex;
@@ -345,33 +319,40 @@
 }
 
 // disabled
-.mat-checkbox-disabled {
+.mat-checkbox-disabled,
+.mat-mdc-checkbox-disabled {
     cursor: auto;
 
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         cursor: auto;
     }
 }
 
 // Sizes
-.mat-checkbox {
+.mat-checkbox,
+.mat-mdc-checkbox {
     &.lg {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('lg');
         }
     }
     &.md {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('md');
         }
     }
     &.sm {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('sm');
         }
     }
     &.xs {
-        .mat-checkbox-inner-container {
+        .mat-checkbox-inner-container,
+        .mat-mdc-checkbox-inner-container {
             @include pep-checkbox-size('xs');
         }
     }
@@ -427,20 +408,24 @@
     // -----------------------------------------------------
     //  Override material style
     // -----------------------------------------------------
-    .mat-checkbox-layout {
+    .mat-checkbox-layout,
+    .mat-mdc-checkbox-layout {
         &:hover {
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-hover(true);
             }
         }
 
         &:active {
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-active(true);
             }
         }
 
-        .mat-checkbox-frame {
+        .mat-checkbox-frame,
+        .mat-mdc-checkbox-frame {
             // border: unset;
             @include mixins.state-regular-default(true);
         }
@@ -448,61 +433,76 @@
 
     // checked
     .mat-checkbox-indeterminate,
-    .mat-checkbox-checked {
-        .mat-checkbox-layout {
+    .mat-mdc-checkbox-indeterminate,
+    .mat-checkbox-checked,
+    .mat-mdc-checkbox-checked {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-hover(true);
                     opacity: 0.7;
                 }
             }
 
             &:active {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-active(true);
                 }
             }
 
-            .mat-checkbox-background {
+            .mat-checkbox-background,
+            .mdc-checkbox__background {
                 @include mixins.state-regular-default(true);
             }
         }
     }
 
-    .mat-checkbox-indeterminate {
-        .mat-checkbox-mixedmark {
+    .mat-checkbox-indeterminate,
+    .mat-mdc-checkbox-indeterminate {
+        .mat-checkbox-mixedmark,
+        .mat-mdc-checkbox-mixedmark {
             background: functions.get-pep-color(color-text, color-dimmed) !important;
         }
     }
 
     // focused
     .cdk-focused {
-        .mat-checkbox-layout {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-frame {
+                .mat-checkbox-frame,
+                .mat-mdc-checkbox-frame {
                     @include mixins.state-regular-hover(true);
                     @include mixins.focus();
                 }
             }
 
             &:active {
-                .mat-checkbox-frame {
+                .mat-checkbox-frame,
+                .mat-mdc-checkbox-frame {
                     @include mixins.state-regular-active(true);
                     @include mixins.focus();
                 }
             }
 
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-focus(true);
             }
         }
     }
 
     // disabled
-    .mat-checkbox-disabled {
-        .mat-checkbox-layout {
+    .mat-checkbox-disabled,
+    .mat-mdc-checkbox-disabled {
+        .mat-checkbox-layout,
+        .mat-mdc-checkbox-layout {
             &:hover {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
@@ -510,27 +510,31 @@
             }
 
             &:active {
-                .mat-checkbox-background {
+                .mat-checkbox-background,
+                .mdc-checkbox__background {
                     @include mixins.state-regular-disable(true);
                     box-shadow: unset;
                     opacity: 0.35;
                 }
             }
 
-            .mat-checkbox-frame {
+            .mat-checkbox-frame,
+            .mat-mdc-checkbox-frame {
                 @include mixins.state-regular-disable(true);
                 box-shadow: unset;
             }
 
-            .mat-checkbox-background {
+            .mat-checkbox-background,
+            .mdc-checkbox__background {
                 @include mixins.state-regular-disable(true);
                 box-shadow: unset;
                 opacity: 0.35;
             }
 
-            .mat-checkbox-label {
+            .mat-checkbox-label,
+            .mat-mdc-checkbox-label {
                 color: functions.get-pep-color(color-text, color-dimmed);
             }
         }
     }
-}
+}

package/src/core/style/components/file.scss

@@ -9,7 +9,7 @@ $file-input-z-index: 1;
 
 .pepperi-file-container, .pep-file-container {
     ::ng-deep {
-        .mat-form-field {
+        .mat-form-field, .mat-mdc-form-field {
             .pepperi-file-wrapper, .pep-file-wrapper {
                 position: relative;
                 border-radius: variables.$border-radius-md;
@@ -75,7 +75,7 @@ $file-input-z-index: 1;
                         padding: 0;
                         justify-content: center;
 
-                        mat-icon {
+                        mat-icon, mat-mdc-icon {
                             vertical-align: middle;
                         }
 
@@ -115,7 +115,7 @@ $file-input-z-index: 1;
             // -----------------------------------------------------
             //  Override material style
             // -----------------------------------------------------
-            &.mat-form-field-disabled {
+            &.mat-form-field-disabled, &.mat-mdc-form-field-disabled {
                 .hidden-input {
                     cursor: auto !important;
                 }
@@ -125,7 +125,7 @@ $file-input-z-index: 1;
 
     &.one-row {
         ::ng-deep {
-            .mat-form-field {
+            .mat-form-field, .mat-mdc-form-field {
                 .pepperi-file-wrapper, .pep-file-wrapper {
                     .pepperi-file, .pep-file {
                         .pepperi-file-message, .pep-file-message {
@@ -164,11 +164,14 @@ $file-input-z-index: 1;
     display: grid;
 
     ::ng-deep {
-        .mat-form-field {
-            .mat-form-field-flex {
+        .mat-form-field,
+        .mat-mdc-form-field {
+            .mat-form-field-flex,
+            .mat-mdc-form-field-flex {
                 padding: 0 !important;
 
-                .mat-form-field-infix {
+                .mat-form-field-infix,
+                .mat-mdc-form-field-infix {
                     display: block !important;
                     width: 100%;
                 }
@@ -180,7 +183,8 @@ $file-input-z-index: 1;
 @mixin pep-file-theme() {
     .pepperi-file-container, .pep-file-container {
         ::ng-deep {
-            .mat-form-field {
+            .mat-form-field,
+            .mat-mdc-form-field {
                 .pepperi-file-wrapper, .pep-file-wrapper {
                     color: functions.get-pep-color(color-text, color-dimmed);
                     @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-20), 1px, dashed);
@@ -220,7 +224,7 @@ $file-input-z-index: 1;
                 }
 
                 // Disabled
-                &.mat-form-field-disabled {
+                &.mat-form-field-disabled, &.mat-mdc-form-field-disabled {
                     .pepperi-file-wrapper:after, .pep-file-wrapper:after {
                         border: unset;
                     }