@pepperi-addons/ngx-lib 0.4.2-beta.8 → 0.4.2-beta.81

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

@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-states',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="color-text-grid">
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Weak</h2>
+                    <pre class="body-xs">class="pep-button weak"</pre>
+                    <button class="size-it pep-button weak"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">Caution</h3>
+                    <pre class="body-xs">class="pep-button weak caution"</pre>
+                    <button class="size-it pep-button weak caution"></button>
+                    <h3 class="body-sm color-dimmed">Success</h3>
+                    <pre class="body-xs">class="pep-button weak success"</pre>
+                    <button class="size-it pep-button weak success"></button>
+                    <h3 class="body-sm color-dimmed">System</h3>
+                    <pre class="body-xs">class="pep-button weak system-primary"</pre>
+                    <button class="size-it pep-button weak system-primary"></button>
+                    <h3 class="body-sm color-dimmed">Primary</h3>
+                    <pre class="body-xs">class="pep-button weak user-primary"</pre>
+                    <button class="size-it pep-button weak user-primary"></button>
+                    <h3 class="body-sm color-dimmed">Secondary</h3>
+                    <pre class="body-xs">class="pep-button weak user-secondary"</pre>
+                    <button class="size-it pep-button weak user-secondary"></button>
+                </span>
+            </span>
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Regular</h2>
+                    <pre class="body-xs">class="pep-button regular"</pre>
+                    <button class="size-it pep-button regular"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular caution"</pre>
+                    <button class="size-it pep-button regular caution"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular success"</pre>
+                    <button class="size-it pep-button regular success"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular system-primary"</pre>
+                    <button class="size-it pep-button regular system-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular user-primary"</pre>
+                    <button class="size-it pep-button regular user-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular user-secondary"</pre>
+                    <button class="size-it pep-button regular user-secondary"></button>
+                </span>
+            </span>
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Strong</h2>
+                    <pre class="body-xs">class="pep-button strong"</pre>
+                    <button class="size-it pep-button strong"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong caution"</pre>
+                    <button class="size-it pep-button strong caution"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong success"</pre>
+                    <button class="size-it pep-button strong success"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong system-primary"</pre>
+                    <button class="size-it pep-button strong system-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong user-primary"</pre>
+                    <button class="size-it pep-button strong user-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong user-secondary"</pre>
+                    <button class="size-it pep-button strong user-secondary"></button>
+                </span>
+            </span>
+        </div>
+    </div> `,
+})
+export default class StatesComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

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

@@ -0,0 +1,94 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-typography',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <pre>.title-2xs</pre>
+        <span class="title-2xs">This is a 2XS title </span>
+        <pre>.title-xs</pre>
+        <span class="title-xs">This is a XS title </span>
+        <pre>.title-sm</pre>
+        <span class="title-sm">This is a SM title </span>
+        <pre>.title-md</pre>
+        <span class="title-md">This is a MD title </span>
+        <pre>.title-lg</pre>
+        <span class="title-lg">This is a LG title </span>
+        <pre>.title-xl</pre>
+        <span class="title-xl">This is a XL title </span>
+        <pre>.title-2xl</pre>
+        <span class="title-2xl">This is a 2XL title </span>
+        <pre>.title-3xl</pre>
+        <span class="title-3xl">This is a 3XL title </span>
+        <pre>.title-4xl</pre>
+        <span class="title-4xl">This is a 4XL title </span>
+        <pre>.title-5xl</pre>
+        <span class="title-5xl">This is a 5XL title </span>
+        <pre>.title-6xl</pre>
+        <span class="title-6xl">This is a 6XL title </span>
+        <pre>.title-7xl</pre>
+        <span class="title-7xl">This is a 7XL title </span>
+        <pre>.title-8xl</pre>
+        <span class="title-8xl">This is a 8XL title </span>
+    </div>
+    <div *ngIf="storyIndex === 2" class="set-grid">
+        <pre>&#60;h6&#62;</pre>
+        <h6>This is an h6 tag</h6>
+        <pre>&#60;h5&#62;</pre>
+        <h5>This is an h5 tag</h5>
+        <pre>&#60;h4&#62;</pre>
+        <h4>This is an h4 tag</h4>
+        <pre>&#60;h3&#62;</pre>
+        <h3>This is an h3 tag</h3>
+        <pre>&#60;h2&#62;</pre>
+        <h2>This is an h2 tag</h2>
+        <pre>&#60;h1&#62;</pre>
+        <h1>This is an h1 tag</h1>
+        </div>
+    <div *ngIf="storyIndex === 3" class="set-grid">
+        <pre>.body-2xs</pre>
+        <span class="body-2xs">This is a 2XS body class</span>
+        <pre>.body-xs</pre>
+        <span class="body-xs">This is a XS body class</span>
+        <pre>.body-sm</pre>
+        <span class="body-sm">This is a SM body class</span>
+        <pre>.body-md</pre>
+        <span class="body-md">This is a MD body class</span>
+        <pre>.body-lg</pre>
+        <span class="body-lg">This is a LG body class</span>
+        <pre>.body-xl</pre>
+        <span class="body-xl">This is a XL body class</span>
+        <pre>.body-2xl</pre>
+        <span class="body-2xl">This is a 2XL body class</span>
+        <hr/>
+        <p>This is a classless <strong>&#60;p&#62;</strong> tag</p>
+        </div>
+    <div *ngIf="storyIndex === 4" class="set-grid">
+        <pre>.color-user-primary</pre>
+        <p class="color-user-primary">This one is using the <strong>primary</strong> color class</p>
+        <pre>.color-user-secondary</pre>
+        <p class="color-user-secondary">This one is using the <strong>secondary</strong> color class</p>
+        <pre>.color-main</pre>
+        <p class="color-main">This one is using the <strong>main</strong> color class</p>
+        <pre>.color-invert</pre>
+        <p class="color-invert">This one is using the <strong>invert</strong> color class</p>
+        <pre>.color-link</pre>
+        <p class="color-link">This one is using the <strong>link</strong> color class</p>
+        <pre>.color-caution</pre>
+        <p class="color-caution">This one is using the <strong>caution</strong> color class</p>
+        <pre>.color-success</pre>
+        <p class="color-success">This one is using the <strong>success</strong> color class</p>
+        <pre>.color-dimmed class</pre>
+        <p class="color-dimmed">This one is using the <strong>dimmed</strong> color class</p>
+    </div>
+    <div *ngIf="storyIndex === 5" class="set-grid">
+        <p class="color-user-primary body-md">Unify B2B eCommerce, SFA & Trade Promotions</p>
+        <h4 class="color-dimmed body-xl">Unify B2B eCommerce, SFA & Trade Promotions</h4>
+        <span class="color-caution title-md">Unify B2B eCommerce, SFA & Trade Promotions</span>
+    </div>`,
+})
+export default class TypographyComponent {
+    /**
+   */
+    @Input()
+    storyIndex?: number = 1;
+}

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,63 +50,38 @@
     .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;
@@ -122,6 +96,14 @@ body {
     /*.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
@@ -156,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
@@ -191,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;
@@ -155,7 +160,6 @@
     .mat-form-field-flex {
         border-radius: variables.$border-radius-md;
     }
-
 }
 
 @mixin pep-field-size($size: 'md') {