@pepperi-addons/ngx-lib 0.4.2-beta.7 → 0.4.2-beta.70

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

@@ -1,6 +1,6 @@
-@use '../abstracts/variables';
-@use '../abstracts/mixins';
-@use '../abstracts/functions';
+@use "../abstracts/variables";
+@use "../abstracts/mixins";
+@use "../abstracts/functions";
 
 // -----------------------------------------------------------------------------
 // Typography style - This file contains all @font-face declarations, if any.
@@ -8,9 +8,8 @@
 
 // @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&family=Crimson+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=David+Libre:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-//    Calculation
-@media screen and (max-width: variables.$screen-max-size-2xs) {
-    //    Smaller then XXS
+@media screen and (min-width: variables.$screen-max-size-2xs) {
+    //    Bigger then XXS
     .body-2xs {
         @include mixins.font-body(variables.$fs-2xs, variables.$lh-2xs);
     }
@@ -51,76 +50,60 @@
     .title-2xl {
         @include mixins.font-title(variables.$fs-2xl, variables.$lh-2xl);
     }
-}
-
-@media screen and (min-width: variables.$screen-max-size-2xs) {
-    //    Bigger then XXS
-    .body-2xs {
-        @include mixins.font-body(variables.$fs-2xs, variables.$lh-2xs);
-    }
-    .body-xs {
-        @include mixins.font-body(variables.$fs-xs, variables.$lh-xs);
-    }
-    .body-sm {
-        @include mixins.font-body(variables.$fs-sm, variables.$lh-sm);
-    }
-    .body-md {
-        @include mixins.font-body(variables.$fs-md, variables.$lh-md);
-    }
-    .body-lg {
-        @include mixins.font-body(variables.$fs-lg, variables.$lh-lg);
-    }
-    .body-xl {
-        @include mixins.font-body(variables.$fs-xl, variables.$lh-xl);
-    }
-    .body-2xl {
-        @include mixins.font-body(variables.$fs-2xl, variables.$lh-2xl);
-    }
-
-    .title-xs {
-        @include mixins.font-title(variables.$fs-xs, variables.$lh-xs);
+    .title-3xl {
+        @include mixins.font-title(variables.$fs-3xl, variables.$lh-3xl);
     }
-    .title-sm {
-        @include mixins.font-title(variables.$fs-sm, variables.$lh-sm);
+    .title-4xl {
+        @include mixins.font-title(variables.$fs-4xl, variables.$lh-4xl);
     }
-    .title-md {
-        @include mixins.font-title(variables.$fs-md, variables.$lh-md);
+    .title-5xl {
+        @include mixins.font-title(variables.$fs-5xl, variables.$lh-5xl);
     }
-    .title-lg {
-        @include mixins.font-title(variables.$fs-lg, variables.$lh-lg);
+    .title-6xl {
+        @include mixins.font-title(variables.$fs-6xl, variables.$lh-6xl);
     }
-    .title-xl {
-        @include mixins.font-title(variables.$fs-xl, variables.$lh-xl);
+    .title-7xl {
+        @include mixins.font-title(variables.$fs-7xl, variables.$lh-7xl);
     }
-    .title-2xl {
-        @include mixins.font-title(variables.$fs-2xl, variables.$lh-2xl);
+    .title-8xl {
+        @include mixins.font-title(variables.$fs-8xl, variables.$lh-8xl);
     }
 }
 
 @supports (font-variation-settings: normal) {
     html,
     body {
-        font-family: 'Inter var', sans-serif;
+        font-family: "Inter var", sans-serif;
     }
 }
 
 html,
 body {
     $font-size: 16px;
-
+    
+    font:unset !important;
     font-family: variables.$font-family-body !important;
     font-weight: variables.$font-weight-normal !important;
     font-size: $font-size;
 
     // Override default user agent stylesheet
     button {
-        font: variables.$font-weight-normal $font-size variables.$font-family-body !important;
+        font: variables.$font-weight-normal $font-size variables.$font-family-body;
+        font-family: variables.$font-family-body !important;
     }
     // line-height: variables.$lh-md;
 
     /*.lang-he {
         font-family: 'Open Sans Hebrew' !important;
     }*/
+
+    //          Init Material fonts here 
+    // ***********************************************
+    // .mat-expansion-panel-content, 
+    .mat-expansion-panel-content {
+        font:unset !important;
+    }
+    // ***********************************************
 }
 
 //  Font weight
@@ -155,6 +138,24 @@ h2,
 h1 {
     font-family: variables.$font-family-title !important;
 }
+h6 {
+    @include mixins.font-title(variables.$fs-lg, variables.$lh-lg);
+}
+h5 {
+    @include mixins.font-title(variables.$fs-xl, variables.$lh-xl);
+}
+h4 {
+    @include mixins.font-title(variables.$fs-2xl, variables.$lh-2xl);
+}
+h3 {
+    @include mixins.font-title(variables.$fs-3xl, variables.$lh-3xl);
+}
+h2 {
+    @include mixins.font-title(variables.$fs-4xl, variables.$lh-4xl);
+}
+h1 {
+    @include mixins.font-title(variables.$fs-5xl, variables.$lh-5xl);
+}
 
 /**
  * Basic styles for links
@@ -190,14 +191,20 @@ a {
         color: functions.get-pep-color(color-user-primary, color-base);
     }
     .background-color-user-primary {
-        background-color: functions.get-pep-color(color-user-primary, color-base);
+        background-color: functions.get-pep-color(
+            color-user-primary,
+            color-base
+        );
     }
 
     .color-user-secondary {
         color: functions.get-pep-color(color-user-secondary, color-base);
     }
     .background-color-user-secondary {
-        background-color: functions.get-pep-color(color-user-secondary, color-base);
+        background-color: functions.get-pep-color(
+            color-user-secondary,
+            color-base
+        );
     }
 
     .color-system-primary,

package/src/core/style/base/zIndex.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-z-index',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="z-grid">
+            <div class="z-grid__1">
+                <code>variables.$z-index-high</code>
+            </div>
+            <div class="z-grid__2">
+                <code>variables.$z-index-medium</code>
+            </div>
+            <div class="z-grid__3"><code>variables.$z-index-low</code></div>
+            <div class="z-grid__4">
+                <code>variables.$z-index-lowest</code>
+            </div>
+        </div>
+    </div> `,
+})
+export default class ZIndexComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

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%;

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

@@ -125,6 +125,11 @@
                 width: 100%;
                 display: flex;
 
+                // Bug fix (DI-23724)
+                .mat-select {
+                    z-index: variables.$z-index-lowest;
+                }
+
                 .mat-input-element {
                     // vertical-align: unset;
                     z-index: variables.$z-index-lowest;