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

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

@@ -16,38 +16,53 @@
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------
-.mat-form-title {
+.mat-form-title,
+.mat-mdc-form-title {
     margin: 0;
     display: grid;
     grid-template-columns: auto 1fr auto;
-    height: variables.$form-field-title-height;
     align-content: center;
+    
     // padding: variables.$spacing-2xs 0;
     // line-height: 1rem;
     // display: block;
 
-    .mat-icon {
+    &:not(.multi-line) {
+        height: variables.$form-field-title-height;
+
+        mat-label {
+            @include mixins.ellipsis();
+            display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
+            // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
+            vertical-align: top;
+        }
+    }
+
+    &.multi-line {
+        .mat-icon,
+        .mat-mdc-icon {
+            height: 1rem;
+        }
+    }
+
+    .mat-icon,
+    .mat-mdc-icon {
         // line-height: 0.875rem;
         // vertical-align: top;
         height: 0.75rem;
         width: 0.75rem;
     }
 
-    mat-label {
-        @include mixins.ellipsis();
-        display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
-        // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
-        vertical-align: top;
-    }
-
-    .mat-button {
+    .mat-button,
+    .mat-mdc-button {
         min-width: unset;
         line-height: 1rem;
         padding: unset;
         width: 1rem;
         height: 1rem;
 
-        .mat-icon {
+        .mat-icon,
+        .mat-mdc-icon {
             width: inherit;
             height: inherit;
             font-size: unset;
@@ -56,19 +71,22 @@
 }
 
 @mixin pep-field-icon($inside-button: false) {
-    .mat-icon {
+    .mat-icon,
+    .mat-mdc-icon {
         height: calc(#{variables.$form-field-button-size});
         width: calc(#{variables.$form-field-button-size});
-
+        // Avner MDC style changes
+        margin-right: 0 !important;
         .svg-icon {
             height: variables.$form-field-button-icon-size; // 1rem;
             width: variables.$form-field-button-icon-size; // 1rem;
-        }
+        } 
     }
 
     @if ($inside-button) {
         &.regular {
-            .mat-icon {
+            .mat-icon,
+            .mat-mdc-icon {
                 height: calc(#{variables.$form-field-button-size} - 2px); // - 2px is the border size of the regular
                 width: calc(#{variables.$form-field-button-size} - 2px); // - 2px is the border size of the regular
             }
@@ -76,29 +94,46 @@
     }
 }
 
-.mat-form-field {
+::ng-deep {
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__notch,
+    .mdc-notched-outline__trailing {
+        border: 0px solid transparent !important;
+    }
+}
+
+.mat-form-field,
+.mat-mdc-form-field {
     @include mixins.fix-inline-z-index();
     display: flow-root !important;
     width: 100%;
-
-    .mat-form-field-wrapper {
+    
+    .mat-form-field-wrapper,
+    .mdc-text-field {
         width: inherit;
         margin: 0;
         padding-bottom: 0;
-
-        .mat-form-field-flex {
+        // Avner MDC style changes
+        padding: 0;
+        
+        .mat-form-field-flex,
+        .mat-mdc-form-field-flex {
             padding-left: variables.$spacing-md;
             padding-right: variables.$spacing-md;
             margin: 0;
             min-height: variables.$form-field-height; // 2.5rem;
             align-items: center;
-
-            .mat-form-field-outline {
+            
+            .mat-form-field-outline,
+            .mat-mdc-form-field-outline {
                 top: 0; // Override material default.
             }
 
             .mat-form-field-prefix,
-            .mat-form-field-suffix {
+            .mat-mdc-form-field-prefix,
+            .mat-form-field-suffix,
+            .mat-mdc-form-field-suffix,
+            .mat-mdc-form-field-icon-suffix {
                 top: 0; // Override material default.
                 display: flex;
                 align-self: center;
@@ -106,7 +141,8 @@
                 
                 @include pep-field-icon();
 
-                .mat-button {
+                .mat-button,
+                .mat-mdc-button {
                     min-width: unset;
                     line-height: unset;
                     padding: unset;
@@ -118,32 +154,38 @@
                 }
             }
 
-            .mat-form-field-infix {
+            .mat-form-field-infix,
+            .mat-mdc-form-field-infix {
                 border-top: 0;
-                padding: 0;
+                padding: 0 !important;
                 line-height: 2.5rem;
                 width: 100%;
                 display: flex;
+                min-height: unset;
 
                 // Bug fix (DI-23724)
-                .mat-select {
+                .mat-select,
+                .mat-mdc-select {
                     z-index: variables.$z-index-lowest;
                 }
 
-                .mat-input-element {
+                .mat-input-element,
+                .mat-mdc-input-element {
                     // vertical-align: unset;
                     z-index: variables.$z-index-lowest;
                     margin-top: unset;
                     text-overflow: ellipsis;
                 }
 
-                .mat-form-field-label-wrapper {
+                .mat-form-field-label-wrapper,
+                .mat-mdc-form-field-label-wrapper {
                     display: none;
                 }
             }
         }
 
-        .mat-form-field-subscript-wrapper {
+        .mat-form-field-subscript-wrapper,
+        .mat-mdc-form-field-subscript-wrapper {
             position: relative;
             margin-top: 0;
             padding: 0;
@@ -151,15 +193,22 @@
             z-index: variables.$z-index-medium - 4;
             border-radius: variables.$border-radius-md;
 
-            .mat-error {
+            .mat-error,
+            .mat-mdc-error {
                 padding: variables.$spacing-xs variables.$spacing-sm;
             }
         }
     }
 
-    .mat-form-field-flex {
+    .mat-form-field-flex,
+    .mat-mdc-form-field-flex {
         border-radius: variables.$border-radius-md;
     }
+
+    .mat-mdc-form-field-bottom-align::before {
+         // Avner MDC style changes
+        display: inline !important;
+    }
 }
 
 @mixin pep-field-size($size: 'md') {
@@ -184,8 +233,10 @@
         $field-padding: variables.$spacing-xs;
     }
 
-    .mat-form-field .mat-form-field-wrapper {
-        .mat-form-field-flex {
+    .mat-form-field .mat-form-field-wrapper,
+    .mat-mdc-form-field .mdc-text-field {
+        .mat-form-field-flex,
+        .mat-mdc-form-field-flex {
             min-height: $field-height;
             height: $field-height;
             padding-left: $field-padding;
@@ -210,12 +261,14 @@
     @include pep-field-size('xs');
 }
 
-.mat-grid-tile {
+.mat-grid-tile,
+.mat-mdc-grid-tile {
     overflow: inherit !important;
 }
 
 /* make content to be on top (to be on the first row - if the field is declared on more than one row but it's UI is only on one row) */
-.mat-grid-tile .mat-figure {
+.mat-grid-tile .mat-figure,
+.mat-mdc-grid-tile .mat-mdc-figure {
     justify-content: flex-start !important ;
     align-items: flex-start !important;
 }
@@ -331,7 +384,8 @@ $zoom-compact-view: 85%;
                     height: 1rem;
                     margin: 0.5rem 0;
 
-                    .mat-icon {
+                    .mat-icon,
+                    .mat-mdc-icon {
                         background-repeat: no-repeat;
                         display: flex;
                         height: inherit;
@@ -425,10 +479,12 @@ $zoom-compact-view: 85%;
             display: flex;
             align-items: center;
 
-            &.mat-radio-button {
+            &.mat-radio-button,
+            &.mat-mdc-radio-button {
                 display: inline-flex;
             
-                .mat-radio-label-content {
+                .mat-radio-label-content,
+                .mat-mdc-radio-label-content {
                     padding: 0;    
                 }
             }
@@ -461,8 +517,10 @@ $zoom-compact-view: 85%;
             // -----------------------------------------------------
             //  Override material style
             // -----------------------------------------------------
-            .mat-form-field .mat-form-field-wrapper {
-                .mat-form-field-flex {
+            .mat-form-field .mat-form-field-wrapper,
+            .mat-mdc-form-field .mdc-text-field {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     min-height: variables.$table-field-height; // 2rem;
                     height: variables.$table-field-height; // 2rem;
                     padding: 0 variables.$spacing-xs;
@@ -638,7 +696,8 @@ $zoom-compact-view: 85%;
                     align-self: flex-end;
                 }
 
-                .mat-icon {
+                .mat-icon,
+                .mat-mdc-icon {
                     // line-height: 0.5rem !important;
                     width: variables.$card-field-button-icon-size;
 
@@ -664,8 +723,10 @@ $zoom-compact-view: 85%;
                 padding: 0 variables.$spacing-xs;
             }
 
-            .mat-form-field .mat-form-field-wrapper {
-                .mat-form-field-flex {
+            .mat-form-field .mat-form-field-wrapper,
+            .mat-mdc-form-field .mdc-text-field {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     height: variables.$card-field-height !important; // 1.5rem !important;
                     min-height: variables.$card-field-height; // 1.5rem;
                     padding: 0 variables.$spacing-xs;
@@ -673,12 +734,15 @@ $zoom-compact-view: 85%;
 
                 .pepperi-button, .pep-button,
                 .mat-select-trigger,
-                .mat-form-field-infix {
+                .mat-mdc-select-trigger,
+                .mat-form-field-infix,
+                .mat-mdc-form-field-infix {
                     height: variables.$card-field-height !important; // 1.5rem !important;
                     // line-height: variables.$card-field-height !important;
                 }
 
-                .mat-input-element {
+                .mat-input-element,
+                .mat-mdc-input-element {
                     font-size: variables.$fs-sm !important;
                     // line-height: inherit !important;
                 }
@@ -812,26 +876,35 @@ $zoom-compact-view: 85%;
     // -----------------------------------------------------
     //  Override material style
     // -----------------------------------------------------
-    .mat-form-title {
+    .mat-form-title,
+    .mat-mdc-form-title {
         &.disable {
             color: functions.get-pep-color(color-text, color-dimmed);
         }
     }
 
     .mat-form-field-appearance-outline .mat-form-field-outline-end,
-    .mat-form-field-appearance-outline .mat-form-field-outline-start {
-        border-color: transparent; //red !important;
+    .mat-form-field-appearance-outline .mdc-notched-outline__notch,
+    .mat-form-field-appearance-outline .mat-form-field-outline-start,
+    .mat-form-field-appearance-outline .mdc-notched-outline__leading,
+    .mat-form-field-appearance-outline .mdc-notched-outline__trailing {
+        border: 0px solid transparent !important;
     }
 
-    .mat-form-field-appearance-outline .mat-form-field-wrapper {
+    .mat-form-field-appearance-outline .mat-form-field-wrapper,
+    .mat-mdc-form-field-appearance-outline .mdc-text-field {
         margin-top: unset;
         margin-bottom: unset;
     }
 
-    .mat-form-field {
-        .mat-form-field-wrapper {
+    .mat-form-field,
+    .mat-mdc-form-field {
+        .mat-form-field-wrapper,
+        .mdc-text-field {
             .mat-form-field-prefix,
-            .mat-form-field-suffix {
+            .mat-mdc-form-field-prefix,
+            .mat-form-field-suffix,
+            .mat-mdc-form-field-suffix {
                 color: functions.get-pep-color(color-weak, color-flat-r-20);
 
                 // For non icons symbols.
@@ -840,8 +913,10 @@ $zoom-compact-view: 85%;
                 }
             }
 
-            .mat-form-field-infix {
-                .mat-input-element {
+            .mat-form-field-infix,
+            .mat-mdc-form-field-infix {
+                .mat-input-element,
+                .mat-mdc-input-element {
                     &:disabled {
                         color: functions.get-pep-color(color-text, color-dimmed);
                     }
@@ -849,36 +924,44 @@ $zoom-compact-view: 85%;
             }
         }
 
-        .mat-form-field-flex {
+        .mat-form-field-flex,
+        .mat-mdc-form-field-flex {
             border-radius: variables.$border-radius-md;
         }
 
         @include mixins.pep-form-field-states();
 
         // Invalid (Error)
-        &.mat-form-field-invalid {
-            .mat-form-field-wrapper {
+        &.mat-form-field-invalid,
+        &.mat-mdc-form-field-invalid {
+            .mat-form-field-wrapper,
+            .mdc-text-field {
                 @include mixins.state-error-wrapper();
 
-                .mat-form-field-flex {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     @include mixins.state-error();
                 }
 
-                .mat-form-field-subscript-wrapper {
+                .mat-form-field-subscript-wrapper,
+                .mat-mdc-form-field-subscript-wrapper {
                     background: functions.get-pep-color(color-system-caution, color-base);
 
-                    .mat-error {
+                    .mat-error,
+                    .mat-mdc-error {
                         color: functions.get-pep-color(color-text, color-invert);
                     }
                 }
             }
 
             // Focused & Error
-            &.mat-focused .mat-form-field-wrapper {
+            &.mat-focused .mat-form-field-wrapper,
+            &.mat-mdc-focused .mdc-text-field {
                 @include mixins.focus();
                 z-index: variables.$z-index-medium - 3; // To show error on table above the next row element.
 
-                .mat-form-field-flex {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     box-shadow: unset !important;
                 }
             }
@@ -902,7 +985,8 @@ $zoom-compact-view: 85%;
 
             .header-column {
                 .sorting-box {
-                    .mat-icon {
+                    .mat-icon,
+                    .mat-mdc-icon {
                         .svg-icon {
                             fill: functions.get-pep-color(color-text, color-dimmed);
                         }

package/src/core/style/components/radio-button.scss

@@ -20,10 +20,14 @@
         $size: 0.75rem;
     }
 
-    &.mat-radio-button {
+    &.mat-radio-button,
+    &.mat-mdc-radio-button {
         .mat-radio-container,
+        .mat-mdc-radio-container,
         .mat-radio-outer-circle,
-        .mat-radio-inner-circle {
+        .mdc-radio__outer-circle,
+        .mat-radio-inner-circle,
+        .mdc-radio__inner-circle{
             width: $size;
             height: $size;
         }
@@ -51,15 +55,19 @@
         @include pep-radio-button-size('xs');
     }
 
-    &.mat-radio-button {
-        .mat-radio-label {
+    &.mat-radio-button,
+    &.mat-mdc-radio-button {
+        .mat-radio-label, .mat-mdc-radio-label {
             @include mixins.fix-inline-z-index();
             margin: 0;
             font-weight: variables.$font-weight-normal;
         }
 
-        &.mat-radio-checked {
-            .mat-radio-inner-circle {
+        &.mat-radio-checked,
+        &.mat-mdc-radio-checked {
+            .mat-radio-inner-circle,
+            .mdc-radio__inner-circle
+            {
                 transform: scale(0.45);
             }
         }
@@ -68,83 +76,102 @@
 
 @mixin pep-radio-button-theme() {
     .pepperi-radio-button, .pep-radio-button {
-        &.mat-radio-button {
+        &.mat-radio-button,
+        &.mat-mdc-radio-button {
             .mat-radio-inner-circle,
-            .mat-radio-outer-circle {
+            .mdc-radio__inner-circle,
+            .mat-radio-outer-circle,
+            .mdc-radio__outer-circle {
                 @include mixins.state-regular-default(true);
             }
 
             &:hover {
                 .mat-radio-inner-circle,
-                .mat-radio-outer-circle {
+                .mdc-radio__inner-circle,
+                .mat-radio-outer-circle,
+                .mdc-radio__outer-circle {
                     @include mixins.state-regular-hover(true);
                 }
             }
 
             &:active {
                 .mat-radio-inner-circle,
-                .mat-radio-outer-circle {
+                .mdc-radio__inner-circle,
+                .mat-radio-outer-circle,
+                .mdc-radio__outer-circle {
                     @include mixins.state-regular-active(true);
                 }
             }
 
             // checked
-            &.mat-radio-checked {
-                .mat-radio-inner-circle {
+            &.mat-radio-checked,
+            &.mat-mdc-radio-checked {
+                .mat-radio-inner-circle,
+                .mdc-radio__inner-circle {
                     border: unset;
                     background: functions.get-pep-color(color-system-primary, color-flat-l-10);
                 }
 
-                .mat-radio-outer-circle {
+                .mat-radio-outer-circle,
+                .mdc-radio__outer-circle {
                     @include mixins.state-regular-active(true);
                     background: functions.get-pep-color(color-system-primary, color-flat-r-30);
                 }
 
                 &:hover {
-                    .mat-radio-outer-circle {
+                    .mat-radio-outer-circle,
+                    .mdc-radio__outer-circle {
                         @include mixins.state-regular-hover(true);
                     }
 
-                    .mat-radio-inner-circle {
+                    .mat-radio-inner-circle,
+                    .mdc-radio__inner-circle {
                         background: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }
             }
 
             // focused
-            &.cdk-focused {
+            &.cdk-focused,
+            &.mat-mdc-focus-indicator {
                 &:hover {
-                    .mat-radio-outer-circle {
+                    .mat-radio-outer-circle,
+                    .mdc-radio__outer-circle {
                         @include mixins.state-regular-hover(true);
                         // @include mixins.focus();
                     }
 
-                    .mat-radio-inner-circle {
+                    .mat-radio-inner-circle,
+                    .mdc-radio__inner-circle {
                         background: functions.get-pep-color(color-text, color-dimmed);
                     }
                 }
 
                 &:active {
-                    .mat-radio-outer-circle {
+                    .mat-radio-outer-circle,
+                    .mdc-radio__outer-circle {
                         @include mixins.state-regular-active(true);
                         // @include mixins.focus();
                     }
                 }
 
-                .mat-radio-outer-circle {
+                .mat-radio-outer-circle,
+                .mdc-radio__outer-circle {
                     @include mixins.state-regular-focus(true);
                 }
             }
 
             // disabled
-            &.mat-radio-disabled {
+            &.mat-radio-disabled, &.mat-mdc-radio-disabled {
                 pointer-events: none;
 
-                .mat-radio-inner-circle {
+                .mat-radio-inner-circle,
+                .mdc-radio__inner-circle {
                     background: functions.get-pep-color(color-text, color-disabled);
                 }
 
-                .mat-radio-outer-circle {
+                .mat-radio-outer-circle,
+                .mdc-radio__outer-circle {
                     @include mixins.state-regular-disable(true);
                 }
             }