@pepperi-addons/ngx-lib 0.4.2-beta.32 → 0.4.2-beta.321

package/src/core/style/abstracts/variables.scss

@@ -77,7 +77,7 @@ $lh-12xl: var(--pep-line-height-12xl, 10rem);
 //  Fonts weight - General
 $font-weight-normal: var(--pep-font-weight-normal, 400);
 $font-weight-bold: var(--pep-font-weight-bold, 600);
-$font-weight-bolder: var(--pep-font-weight-bolder, 800);
+$font-weight-bolder: var(--pep-font-weight-bold, 600); // var(--pep-font-weight-bolder, 800);
 
 // Round corners
 // -----------------------------------------------------------------------------
@@ -496,6 +496,15 @@ $color-top-header-flat-r-20: hsl(#{$color-top-header-h}, #{$color-top-header-s},
 $color-top-header-flat-r-30: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-30-lp);
 $color-top-header-flat-r-40: hsl(#{$color-top-header-h}, #{$color-top-header-s}, $flat-r-40-lp);
 
+//*********************************************************************************
+//                       Loader - color
+//*********************************************************************************
+// Base color - default caution color.
+$color-loader-h: var(--pep-color-loader-h, 360);
+$color-loader-s: var(--pep-color-loader-s, 100%);
+$color-loader-l: var(--pep-color-loader-l, 45%);
+$color-loader-base: hsl(#{$color-loader-h}, #{$color-loader-s}, #{$color-loader-l}); // base
+
 //*********************************************************************************
 //                       Quantity selector - color
 //*********************************************************************************

package/src/core/style/base/Spacing.stories.mdx

@@ -16,14 +16,14 @@ Here are the available spacing vars, see them play out in the box below
 - `$spacing-md`
 - `$spacing-lg`
 - `$spacing-xl`
-- `$spacing-xl2`
-- `$spacing-xl3`
-- `$spacing-xl4`
-- `$spacing-xl5`
-- `$spacing-xl6`
-- `$spacing-xl7`
-- `$spacing-xl8`
-- `$spacing-xl9`
+- `$spacing-2xl`
+- `$spacing-3xl`
+- `$spacing-4xl`
+- `$spacing-5xl`
+- `$spacing-6xl`
+- `$spacing-7xl`
+- `$spacing-8xl`
+- `$spacing-9xl`
 
 
 Use them like so `↓`
@@ -59,17 +59,17 @@ BTW, these are the vaules of the spacing `↓`
 
 | Name | In rems | In PX on base size (1rem=16px) |
 |:---|:---|:---|
-|`$spacing-2xs` |  0.125rem | 2px |
-|`$spacing-xs`  |  0.25rem  | 4px |
-|`$spacing-sm`  |  0.5rem   | 8px |
-|`$spacing-md`  |  0.75rem  | 12px |
-|`$spacing-lg`  |  1rem     | 16px |
-|`$spacing-xl`  |  1.5rem   | 24px |
-|`$spacing-xl2` |  2rem     | 32px |
-|`$spacing-xl3` |  2.5rem   | 40px  |
-|`$spacing-xl4` |  3rem     |   48px  |
-|`$spacing-xl5` |  3.5rem   | 56px  |
-|`$spacing-xl6` |  5rem     |   80px  |
-|`$spacing-xl7` |  6rem     |   96px  |
-|`$spacing-xl8` |  8rem     |   128px  |
-|`$spacing-xl9` |  16rem    |  256px  |
+|`$spacing-2xs` | 0.125rem | 2px   |
+|`$spacing-xs`  | 0.25rem  | 4px   |
+|`$spacing-sm`  | 0.5rem   | 8px   |
+|`$spacing-md`  | 0.75rem  | 12px  |
+|`$spacing-lg`  | 1rem     | 16px  |
+|`$spacing-xl`  | 1.5rem   | 24px  |
+|`$spacing-2xl` | 2rem     | 32px  |
+|`$spacing-3xl` | 2.5rem   | 40px  |
+|`$spacing-4xl` | 3rem     | 48px  |
+|`$spacing-5xl` | 3.5rem   | 56px  |
+|`$spacing-6xl` | 5rem     | 80px  |
+|`$spacing-7xl` | 6rem     | 96px  |
+|`$spacing-8xl` | 8rem     | 128px |
+|`$spacing-9xl` | 16rem    | 256px |

package/src/core/style/base/base.scss

@@ -306,6 +306,7 @@
 
             .mat-expansion-panel-header-title {
                 flex-grow: 0;
+                flex-basis: auto;
                 width: fit-content;
                 height: variables.$spacing-3xl;
                 border-radius: 1.5rem; // variables.$border-radius-md;
@@ -316,6 +317,10 @@
                 // margin-bottom: variables.$shadow-bottom;
             }
 
+            .mat-expansion-panel-header-description {
+                flex-basis: auto;
+            }
+
             &.mat-expanded {
                 .mat-expansion-panel-header-title {
                     position: absolute;
@@ -435,6 +440,7 @@
             grid-template-areas: "title close";
 
             .dialog-title {
+                @include mixins.font-title(variables.$fs-2xl,variables.$lh-2xl);
                 @include mixins.ellipsis();
                 grid-area: title;
 
@@ -467,6 +473,7 @@
         }
 
         .mat-dialog-actions {
+            display: flex;
             justify-content: flex-end;
             grid-row: mat-dialog-actions;
             margin-bottom: 0;
@@ -478,36 +485,36 @@
 
     &.small {
         max-width: 18rem !important;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
     }
 
     &.regular {
         max-width: 36rem !important;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
     }
 
     &.large {
         max-width: 54rem !important;
-        width: 90vw;
+        width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         height: auto;
-        max-height: 90vh;
-
-        .mat-dialog-container {
-            .mat-dialog-content {
-                $border-size: 1px;
-                max-height: calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
-            }
-        }
+        max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
+        
+        //DI-27148 remove the max-height calc
+        // .mat-dialog-container {
+        //     .mat-dialog-content {
+        //         $border-size: 1px;
+        //         max-height: calc(100% - (var(--pep-spacing-2xl) * 2)); // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+        //     }
+        // }
     }
 
     &.full-screen {
-        $dialog-height: 95vh;
-        max-width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
-        //max-width: 95vw !important;
         width: 95vw !important;
-        //max-height: $dialog-height !important;
+        height: 95vh !important;
+        max-width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
         max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important;
-        height: $dialog-height !important;
 
         .mat-dialog-container {
             .mat-dialog-content {
@@ -564,7 +571,8 @@
 //  Snack bar
 // -------------------------------------------------
 .pepperi-snack-bar, .pep-snack-bar {
-    min-width: 20rem;
+    min-width: min(20rem, calc(100vw - 2rem));
+    max-width: min(30rem, calc(100vw - 2rem));
 }
 
 // -----------------------------------------------------
@@ -758,6 +766,7 @@
                 }
 
                 .mat-expansion-panel-header-title {
+                    flex-basis: auto;
                     @include mixins.state-weak-default();
 
                     &:hover {

package/src/core/style/base/typography.scss

@@ -115,7 +115,8 @@ body {
     font-weight: variables.$font-weight-bold !important;
 }
 .bolder {
-    font-weight: variables.$font-weight-bolder !important;
+    font-weight: variables.$font-weight-bold !important;
+    // font-weight: variables.$font-weight-bolder !important;
 }
 
 .font-family-title {

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

@@ -94,6 +94,10 @@
     @include mixins.pep-button-states(weak-invert);
 }
 
+@mixin pep-button-state-weak-special() {
+    @include mixins.pep-button-states(weak-special);
+}
+
 @mixin pep-button-state-weak($color: null) {
     @include mixins.pep-button-states(weak, $color);
 }
@@ -278,12 +282,19 @@
             &.invert {
                 @include pep-button-state-weak-invert();
             }
+            &.special {
+                @include pep-button-state-weak-special();
+            }
         }
 
         &.weak-invert {
             @include pep-button-state-weak-invert();
         }
 
+        &.weak-special {
+            @include pep-button-state-weak-special();
+        }
+
         &.regular {
             @include pep-button-state-regular();
 

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,67 +34,6 @@
     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
 // -----------------------------------------------------
@@ -111,7 +54,7 @@
 .mat-checkbox-checked {
     .mat-checkbox-layout {
         .mat-checkbox-background {
-            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==");
+            @include pep-checkbox-checked-mark();
             width: inherit;
             height: inherit;
 
@@ -219,6 +162,13 @@
 
 .pepperi-report-checkbox, .pep-report-checkbox {
     background: transparent !important;
+
+    .mat-checkbox-background,
+    .mat-checkbox-frame {
+        border: unset !important;
+        background: unset !important;
+        box-shadow: unset !important;
+    }
 }
 
 .pepperi-card-checkbox, .pep-card-checkbox {
@@ -533,4 +483,4 @@
             }
         }
     }
-}
+}

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

@@ -50,10 +50,10 @@ $file-input-z-index: 1;
 
                         img {
                             object-fit: contain;
-                            max-height: 100%;
-                            max-height: stretch;
-                            max-width: 100%;
-                            max-width: stretch;
+                            max-height: 100% !important;
+                            // max-height: stretch;
+                            max-width: 100% !important;
+                            // max-width: stretch;
                             position: absolute;
                             top: 50%;
                             left: 50%;