@pepperi-addons/ngx-lib 0.4.2-beta.99 → 0.4.2-scroll.2

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

@@ -388,13 +388,15 @@
 }
 
 // ******************************************************************************
-//                       State weak declerations
+//                       State declerations
 // ******************************************************************************
 @mixin pep-state-default($style: weak, $color-map-key: null, $regularBorder: false) {
     @if ($style == 'none') {
         @include state-none-default();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-default();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-default();
     } @else if ($style == 'weak') {
         @include state-weak-default($color-map-key);
     } @else if ($style == 'strong') {
@@ -408,6 +410,8 @@
         @include state-none-disable();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-disable();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-disable();
     } @else if ($style == 'weak') {
         @include state-weak-disable($color-map-key);
     } @else if ($style == 'strong') {
@@ -421,6 +425,8 @@
         @include state-none-hover();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-hover();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-hover();
     } @else if ($style == 'weak') {
         @include state-weak-hover($color-map-key);
     } @else if ($style == 'strong') {
@@ -434,6 +440,8 @@
         @include state-none-active();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-active();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-active();
     } @else if ($style == 'weak') {
         @include state-weak-active($color-map-key);
     } @else if ($style == 'strong') {
@@ -447,6 +455,8 @@
         @include state-none-focus();
     } @else if ($style == 'weak-invert') {
         @include state-weak-invert-focus();
+    } @else if ($style == 'weak-special') {
+        @include state-weak-special-focus();
     } @else if ($style == 'weak') {
         @include state-weak-focus($color-map-key);
     } @else if ($style == 'strong') {
@@ -507,33 +517,85 @@
 //  Weak - invert
 // -----------------------------------------------------------------------------
 @mixin state-weak-invert-default() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-30);
 
-    // $color: functions.get-pep-color(color-text, color-main);
-    // color: $color;
-
-    // .svg-icon {
-    //     fill: $color !important;
-    // }
+    $color: functions.get-pep-color(color-text, color-invert);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-disable() {
     @include state-disabled();
     
-    color:functions.get-pep-color(color-text, color-disabled) !important;
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;
+    color:functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-10) !important;
+    .svg-icon {
+        fill: functions.get-pep-color(color-system-primary-invert, color-tran-40) !important;
+    }
 }
 @mixin state-weak-invert-hover() {
-    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
     box-shadow: functions.get-pep-shadow(shadow-xs, soft);
     cursor: pointer;
 }
 @mixin state-weak-invert-active() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
 }
 @mixin state-weak-invert-focus() {
     background: functions.get-pep-color(color-system-primary-invert, color-base);
     @include focus();
+    $color: functions.get-pep-color(color-text, color-main);
+    color: $color;
+    
+    .svg-icon {
+        fill: $color !important;
+    }
+}
+
+//  Weak - special
+// -----------------------------------------------------------------------------
+@mixin state-weak-special-default() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-50);
+}
+@mixin state-weak-special-disable() {
+    @include state-disabled();
+    
+    color:functions.get-pep-color(color-text, color-disabled) !important;
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-20) !important;  
+}
+@mixin state-weak-special-hover() {
+    background: functions.get-pep-color(color-system-primary-invert, color-tran-70);
+    box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+    cursor: pointer;
+}
+@mixin state-weak-special-active() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // box-shadow: functions.get-pep-shadow(shadow-xs, regular);
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
+}
+@mixin state-weak-special-focus() {
+    // background: functions.get-pep-color(color-system-primary-invert, color-base);
+    // @include focus();
+    // $color: functions.get-pep-color(color-text, color-main);
+    // color: $color;
+    
+    // .svg-icon {
+    //     fill: $color !important;
+    // }
 }
 
 // ******************************************************************************

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
 // -----------------------------------------------------------------------------

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

@@ -478,24 +478,26 @@
 
     &.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: calc(100% - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
+        max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
 
         .mat-dialog-container {
             .mat-dialog-content {
                 $border-size: 1px;
-                max-height: 100% // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+                max-height: calc(100% - (var(--pep-spacing-2xl) * 2)); // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
             }
         }
     }

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/general.scss

@@ -428,10 +428,8 @@ $zoom-compact-view: 85%;
             &.mat-radio-button {
                 display: inline-flex;
             
-                ::ng-deep {
-                    .mat-radio-label-content {
-                        padding: 0;    
-                    }
+                .mat-radio-label-content {
+                    padding: 0;    
                 }
             }
         }

package/textbox/textbox.component.d.ts

@@ -143,6 +143,8 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, AfterView
     ngOnChanges(changes: any): void;
     ngOnDestroy(): void;
     onFocus(event: any): void;
+    getGeneralError(): any;
+    getOtherErrorMessage(inputValue: string): any;
     isDecimal(): boolean;
     isNumberType(): boolean;
     isValueValid(value: string): boolean;

package/theming.scss

@@ -80,5 +80,9 @@ $material-theme-for-pep: default-theme.$material-default-theme;
 
 
 // Import links at the end for clients that work offline not crushed on the css.
-@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');
+// Old fonts
+// @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');
+// New fonts 09.10.23
+@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;600&family=Crimson+Pro:wght@400;600&family=David+Libre:wght@400;500&family=EB+Garamond:wght@400;600&family=Heebo:wght@400;600&family=Inter:wght@400;600&family=Open+Sans:wght@400;600&family=Rubik:wght@400;600&family=Work+Sans:wght@400;600&display=swap');
+
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');

package/src/core/style/abstracts/AbstractsIntro.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Abstracts/Intro" />
-
-# Abstracts
-
-Content TBD