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

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

@@ -10,14 +10,19 @@
     align-items: center;
 
     // Hide scroll
-    .mat-form-field {
+    .mat-form-field,
+    .mat-mdc-form-field {
         ::ng-deep {
-            .mat-form-field-wrapper {
-                .mat-form-field-flex {
+            .mat-form-field-wrapper,
+            .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     display: flex;
                 }
 
-                .mat-form-field-infix {
+                .mat-form-field-infix,
+                .mat-mdc-form-field-infix {
                     line-height: unset;
                     width: 100%;
                     height: 100%;
@@ -25,7 +30,8 @@
                     display: grid !important;
                 }
 
-                .mat-input-element {
+                .mat-input-element,
+                .mat-mdc-input-element {
                     margin: 0;
                     padding: 0.5rem 1.5rem 0.5rem 0;
                     vertical-align: unset;
@@ -42,7 +48,9 @@
             }
 
             .mat-form-field-prefix,
-            .mat-form-field-suffix {
+            .mat-mdc-form-field-prefix,
+            .mat-form-field-suffix,
+            .mat-mdc-form-field-suffix {
                 align-self: flex-end !important;
                 margin-bottom: 0.5rem;
             }
@@ -51,17 +59,24 @@
     }
 
     &.one-row {
-        .mat-form-field {
+        .mat-form-field,
+        .mat-mdc-form-field {
             ::ng-deep {
-                .mat-form-field-wrapper {
-                    .mat-form-field-infix {
-                        .mat-input-element {
+                .mat-form-field-wrapper,
+                .mat-mdc-text-field-wrapper,
+                .mdc-text-field {
+                    .mat-form-field-infix,
+                    .mat-mdc-form-field-infix {
+                        .mat-input-element,
+                        .mat-mdc-input-element {
                             padding-top: 0.35rem;
                         }
                     }
 
                     .mat-form-field-prefix,
-                    .mat-form-field-suffix {
+                    .mat-mdc-form-field-prefix,
+                    .mat-form-field-suffix,
+                    .mat-mdc-form-field-suffix {
                         align-self: center !important;
                         margin-bottom: unset;
 
@@ -75,7 +90,8 @@
                 }
             }
             &.pepperi-table-textarea, &.pep-table-textarea {
-                ::ng-deep.mat-input-element {
+                ::ng-deep.mat-input-element,
+                ::ng-deep.mat-mdc-input-element {
                     padding-top: 0.135rem !important;
                 }
             }
@@ -103,10 +119,14 @@
     }
 
     &.right-alignment {
-        .mat-form-field {
+        .mat-form-field,
+        .mat-mdc-form-field {
             ::ng-deep {
-                .mat-form-field-wrapper {
-                    .mat-input-element {
+                .mat-form-field-wrapper,
+                .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
+                    .mat-input-element,
+                    .mat-mdc-input-element {
                         padding: 0.5rem 0 0.5rem 1.5rem;
                     }
                 }
@@ -120,15 +140,20 @@
 }
 
 .pepperi-textarea-card-container, .pep-textarea-card-container {
-    .mat-form-field {
+    .mat-form-field,
+    .mat-mdc-form-field {
         ::ng-deep {
-            .mat-form-field-wrapper {
+            .mat-form-field-wrapper,
+            .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
 
-                .mat-form-field-flex {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     padding-left: 0.5rem;
                     padding-right: 0.5rem;
 
-                    .mat-input-element {
+                    .mat-input-element,
+                    .mat-mdc-input-element {
                         padding: 0.25rem 1.5rem 0.5rem 0;
                     }
                 }
@@ -160,13 +185,18 @@
     }
 
     &.one-row {
-        .mat-form-field {
+        .mat-form-field,
+        .mat-mdc-form-field {
             ::ng-deep {
-                .mat-form-field-wrapper {
-                    .mat-form-field-infix {
+                .mat-form-field-wrapper,
+                .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
+                    .mat-form-field-infix,
+                    .mat-mdc-form-field-infix {
                         line-height: 0 !important;
 
-                        .mat-input-element {
+                        .mat-input-element,
+                        .mat-mdc-input-element {
                             padding-top: 0;
                             padding-bottom: 0;
                         }
@@ -177,10 +207,14 @@
     }
 
     &.right-alignment {
-        .mat-form-field {
+        .mat-form-field,
+        .mat-mdc-form-field {
             ::ng-deep {
-                .mat-form-field-wrapper {
-                    .mat-input-element {
+                .mat-form-field-wrapper,
+                .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
+                    .mat-input-element,
+                    .mat-mdc-input-element {
                         padding: 0.25rem 0 0.5rem 1.5rem;
                     }
                 }
@@ -191,15 +225,19 @@
 
 .pepperi-report-textarea, .pep-report-textarea {
     ::ng-deep {
-        .mat-form-field-suffix {
+        .mat-form-field-suffix,
+        .mat-mdc-form-field-suffix {
             right: 0 !important;
         }
     }
 
     &.readonly {
         ::ng-deep {
-            .mat-form-field-wrapper {
-                .mat-form-field-flex {
+            .mat-form-field-wrapper,
+            .mat-mdc-text-field-wrapper,
+            .mdc-text-field {
+                .mat-form-field-flex,
+                .mat-mdc-form-field-flex {
                     padding: 0;
                 }
             }
@@ -209,7 +247,8 @@
 
 @mixin pep-textarea-theme() {
     .pepperi-report-textarea, .pep-report-textarea {
-        ::ng-deep.mat-form-field-flex {
+        ::ng-deep.mat-form-field-flex,
+        ::ng-deep.mat-mdc-form-field-flex {
             background: transparent !important;
         }
     }

package/textarea/textarea.component.d.ts

@@ -34,6 +34,7 @@ export declare class PepTextareaComponent implements OnChanges, OnInit, OnDestro
     get layoutType(): PepLayoutType;
     valueChange: EventEmitter<string>;
     keyup: EventEmitter<any>;
+    validationChange: EventEmitter<boolean>;
     textAreaDialogTemplate: TemplateRef<any>;
     fieldHeight: string;
     standAlone: boolean;
@@ -52,5 +53,5 @@ export declare class PepTextareaComponent implements OnChanges, OnInit, OnDestro
     openDialog(): void;
     closeDialog(data?: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextareaComponent, "pep-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "keyup": "keyup"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextareaComponent, "pep-textarea", never, { "key": "key"; "value": "value"; "label": "label"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "layoutType": "layoutType"; }, { "valueChange": "valueChange"; "keyup": "keyup"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/textbox/textbox-validation.directive.d.ts

@@ -18,5 +18,5 @@ export declare class PepTextboxValidationDirective implements OnInit {
     onKeyDown(e: KeyboardEvent): void;
     validateValue(value: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextboxValidationDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<PepTextboxValidationDirective, "[pepTextboxValidation]", never, { "type": "type"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PepTextboxValidationDirective, "[pepTextboxValidation]", never, { "type": "type"; }, {}, never, never, false, never>;
 }

package/textbox/textbox.component.d.ts

@@ -120,6 +120,7 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, AfterView
      */
     valueChange: EventEmitter<string>;
     keyup: EventEmitter<any>;
+    validationChange: EventEmitter<boolean>;
     input: ElementRef;
     private _calculateFormattedValue;
     get calculateFormattedValue(): boolean;
@@ -143,6 +144,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;
@@ -153,5 +156,5 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, AfterView
     anchorClicked(): void;
     cardTemplateClicked(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxComponent, "pep-textbox", never, { "key": "key"; "value": "value"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "accessory": "accessory"; "label": "label"; "placeholder": "placeholder"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "minValue": "minValue"; "maxValue": "maxValue"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "regex": "regex"; "regexError": "regexError"; "isInFocus": "isInFocus"; }, { "valueChange": "valueChange"; "keyup": "keyup"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxComponent, "pep-textbox", never, { "key": "key"; "value": "value"; "minFractionDigits": "minFractionDigits"; "maxFractionDigits": "maxFractionDigits"; "accessory": "accessory"; "label": "label"; "placeholder": "placeholder"; "type": "type"; "mandatory": "mandatory"; "disabled": "disabled"; "readonly": "readonly"; "maxFieldCharacters": "maxFieldCharacters"; "hint": "hint"; "textColor": "textColor"; "xAlignment": "xAlignment"; "rowSpan": "rowSpan"; "minValue": "minValue"; "maxValue": "maxValue"; "visible": "visible"; "form": "form"; "isActive": "isActive"; "showTitle": "showTitle"; "renderTitle": "renderTitle"; "renderError": "renderError"; "renderSymbol": "renderSymbol"; "layoutType": "layoutType"; "parentFieldKey": "parentFieldKey"; "regex": "regex"; "regexError": "regexError"; "isInFocus": "isInFocus"; }, { "valueChange": "valueChange"; "keyup": "keyup"; "validationChange": "validationChange"; }, never, never, false, never>;
 }

package/textbox-icon/textbox-icon.component.d.ts

@@ -9,5 +9,5 @@ export declare class PepTextboxIconComponent {
     iconClick: EventEmitter<void>;
     iconButtonClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTextboxIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxIconComponent, "pep-textbox-icon", never, { "value": "value"; "label": "label"; "type": "type"; "disabled": "disabled"; }, { "iconClick": "iconClick"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTextboxIconComponent, "pep-textbox-icon", never, { "value": "value"; "label": "label"; "type": "type"; "disabled": "disabled"; }, { "iconClick": "iconClick"; }, never, never, false, never>;
 }

package/theming-offline.scss

@@ -33,7 +33,8 @@
 $pep-typography: mat.define-typography-config(
     $font-family: variables.$font-family-body
 );
-@include mat.core($pep-typography);
+@include mat.core();
+@include mat.typography-hierarchy($pep-typography);
 
 $material-theme-for-pep: default-theme.$material-default-theme;
 

package/theming.scss

@@ -33,7 +33,8 @@
 $pep-typography: mat.define-typography-config(
     $font-family: variables.$font-family-body
 );
-@include mat.core($pep-typography);
+@include mat.core();
+@include mat.typography-hierarchy($pep-typography);
 
 $material-theme-for-pep: default-theme.$material-default-theme;
 
@@ -80,5 +81,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/top-bar/top-bar.component.d.ts

@@ -35,5 +35,5 @@ export declare class PepTopBarComponent implements AfterViewInit, AfterContentIn
     private setSearchIsOpenAndSmallDevice;
     private setFooterState;
     static ɵfac: i0.ɵɵFactoryDeclaration<PepTopBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PepTopBarComponent, "pep-top-bar", never, { "inline": "inline"; "title": "title"; }, { "footerStateChange": "footerStateChange"; }, ["searchComp", "listActionsComp", "listChooserComp", "listTotalComp", "listSortingComp", "listViewsComp"], ["[footer-start-content]", "[footer-end-content]", "pep-list-actions", "pep-list-chooser", "[header-start-content]", "pep-list-total", "pep-search", "pep-list-sorting", "pep-list-views", "[header-end-content]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PepTopBarComponent, "pep-top-bar", never, { "inline": "inline"; "title": "title"; }, { "footerStateChange": "footerStateChange"; }, ["searchComp", "listActionsComp", "listChooserComp", "listTotalComp", "listSortingComp", "listViewsComp"], ["[footer-start-content]", "[footer-end-content]", "pep-list-actions", "pep-list-chooser", "[header-start-content]", "pep-list-total", "pep-search", "pep-list-sorting", "pep-list-views", "[header-end-content]"], false, never>;
 }

package/top-bar/top-bar.model.d.ts

@@ -1,4 +1,4 @@
-export declare type PepFooterStateType = 'visible' | 'hidden';
+export type PepFooterStateType = 'visible' | 'hidden';
 export interface IPepFooterStateChangeEvent {
     state: PepFooterStateType;
 }