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

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

@@ -2,7 +2,8 @@
 @use '../abstracts/mixins';
 @use '../abstracts/functions';
 
-.pepperi-report-fields, .pep-report-fields {
+.pepperi-report-fields,
+.pep-report-fields {
     height: inherit;
     display: flex;
     align-items: center;
@@ -20,12 +21,29 @@
     margin: 0;
     display: grid;
     grid-template-columns: auto 1fr auto;
-    height: variables.$form-field-title-height;
     align-content: center;
+
     // padding: variables.$spacing-2xs 0;
     // line-height: 1rem;
     // display: block;
 
+    &:not(.multi-line) {
+        height: variables.$form-field-title-height;
+
+        mat-label {
+            @include mixins.ellipsis();
+            display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
+            // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
+            vertical-align: top;
+        }
+    }
+
+    &.multi-line {
+        .mat-icon {
+            height: 1rem;
+        }
+    }
+
     .mat-icon {
         // line-height: 0.875rem;
         // vertical-align: top;
@@ -33,13 +51,6 @@
         width: 0.75rem;
     }
 
-    mat-label {
-        @include mixins.ellipsis();
-        display: inline-block; // WAS UNSET , CAUSE TO LABEL TO BE LONGER THEN THE CONTAINER - AVNER ,
-        // Than was blocked - cause the label to catch 100% of the row -> prob whith limited line
-        vertical-align: top;
-    }
-
     .mat-button {
         min-width: unset;
         line-height: 1rem;
@@ -103,7 +114,7 @@
                 display: flex;
                 align-self: center;
                 z-index: variables.$z-index-lowest + 1;
-                
+
                 @include pep-field-icon();
 
                 .mat-button {
@@ -125,6 +136,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 +171,6 @@
     .mat-form-field-flex {
         border-radius: variables.$border-radius-md;
     }
-
 }
 
 @mixin pep-field-size($size: 'md') {
@@ -163,19 +178,22 @@
     $field-height: variables.$spacing-3xl;
     $field-padding: variables.$spacing-md;
 
-    @if $size == 'xl' {
+    @if $size =='xl' {
         $field-height: variables.$spacing-5xl;
         $field-padding: variables.$spacing-xl;
     }
-    @else if $size == 'lg' {
+
+    @else if $size =='lg' {
         $field-height: variables.$spacing-4xl;
         $field-padding: variables.$spacing-lg;
     }
-    @else if $size == 'sm' {
+
+    @else if $size =='sm' {
         $field-height: variables.$spacing-2xl;
         $field-padding: variables.$spacing-sm;
     }
-    @else if $size == 'xs' {
+
+    @else if $size =='xs' {
         $field-height: variables.$spacing-xl;
         $field-padding: variables.$spacing-xs;
     }
@@ -193,15 +211,19 @@
 .xl {
     @include pep-field-size('xl');
 }
+
 .lg {
     @include pep-field-size('lg');
 }
+
 .md {
     @include pep-field-size('md');
 }
+
 .sm {
     @include pep-field-size('sm');
 }
+
 .xs {
     @include pep-field-size('xs');
 }
@@ -212,7 +234,7 @@
 
 /* make content to be on top (to be on the first row - if the field is declared on more than one row but it's UI is only on one row) */
 .mat-grid-tile .mat-figure {
-    justify-content: flex-start !important ;
+    justify-content: flex-start !important;
     align-items: flex-start !important;
 }
 
@@ -278,7 +300,7 @@ $zoom-compact-view: 85%;
                 // cursor: text;
                 display: block; // flex; with flex the ellipsis is not working.
                 align-items: center;
-    
+
                 .required,
                 .mandatory {
                     height: 0.75rem;
@@ -306,9 +328,9 @@ $zoom-compact-view: 85%;
                     width: 0.125rem;
                     height: 1rem;
                     line-height: variables.$table-field-height; // 2rem;
-                    
+
                     padding-inline-end: 0.425rem;
-                    border:none;
+                    border: none;
                     border-inline-end-width: 1px;
                     border-inline-end-style: dashed;
                 }
@@ -351,6 +373,7 @@ $zoom-compact-view: 85%;
             &:hover {
                 &.support-sorting {
                     cursor: pointer;
+
                     .header-label {
                         cursor: pointer;
                         padding-inline-end: 1rem;
@@ -384,7 +407,7 @@ $zoom-compact-view: 85%;
             &.is-last {
                 border-start-end-radius: variables.$table-border-radius;
                 border-end-end-radius: variables.$table-border-radius;
-                
+
                 &:hover {
                     .resize-box {
                         border-start-end-radius: variables.$table-border-radius;
@@ -423,12 +446,17 @@ $zoom-compact-view: 85%;
 
             &.mat-radio-button {
                 display: inline-flex;
+
+                .mat-radio-label-content {
+                    padding: 0;
+                }
             }
         }
 
         fieldset {
             height: variables.$table-row-fieldset-height; // 2.5rem;
             border-radius: variables.$table-border-radius;
+
             // padding: 0 variables.$spacing-2xs;
             .table-cell {
                 box-sizing: border-box;
@@ -445,7 +473,8 @@ $zoom-compact-view: 85%;
                 }
             }
 
-            .pepperi-input, .pep-input {
+            .pepperi-input,
+            .pep-input {
                 padding: 0 variables.$spacing-md;
                 height: variables.$table-field-height; // 2rem;
             }
@@ -466,7 +495,7 @@ $zoom-compact-view: 85%;
                 // }
             }
         }
-        
+
         &.compact-view {
             padding: 0;
             height: variables.$table-field-height;
@@ -478,11 +507,11 @@ $zoom-compact-view: 85%;
             fieldset {
                 height: variables.$table-field-height;
 
-                .table-cell > * {
+                .table-cell>* {
                     zoom: $zoom-compact-view;
                 }
-    
-                .pep-report-fields > * {
+
+                .pep-report-fields>* {
                     zoom: $zoom-compact-view;
                 }
             }
@@ -492,7 +521,9 @@ $zoom-compact-view: 85%;
         &.highlighted,
         &:active,
         &.selected {
-            .pepperi-form, .pep-form {
+
+            .pepperi-form,
+            .pep-form {
                 z-index: variables.$z-index-lowest + 1;
             }
         }
@@ -584,7 +615,8 @@ $zoom-compact-view: 85%;
             display: grid;
             grid-auto-flow: column;
 
-            &.pepperi-button, &.pep-button {
+            &.pepperi-button,
+            &.pep-button {
                 background: unset; // Cancel the default background and shows background only on the declared states (hover, etc).
             }
 
@@ -610,7 +642,7 @@ $zoom-compact-view: 85%;
                 height: inherit;
 
                 &.wrap {
-                    white-space:normal;
+                    white-space: normal;
                 }
             }
 
@@ -650,7 +682,8 @@ $zoom-compact-view: 85%;
                 align-items: center;
             }
 
-            .pepperi-button:not(.card-edit-button), .pep-button:not(.card-edit-button) {
+            .pepperi-button:not(.card-edit-button),
+            .pep-button:not(.card-edit-button) {
                 // height: variables.$card-field-height !important; // 1.5rem !important;
                 // line-height: 1.5rem !important;
                 padding: 0 variables.$spacing-xs;
@@ -663,7 +696,8 @@ $zoom-compact-view: 85%;
                     padding: 0 variables.$spacing-xs;
                 }
 
-                .pepperi-button, .pep-button,
+                .pepperi-button,
+                .pep-button,
                 .mat-select-trigger,
                 .mat-form-field-infix {
                     height: variables.$card-field-height !important; // 1.5rem !important;
@@ -693,8 +727,9 @@ $zoom-compact-view: 85%;
 
 //  Card views type sizes
 .line-view {
-    width:100%;
+    width: 100%;
 }
+
 .card-view {
     $screen-almost-full-width: 99.99%;
 
@@ -710,6 +745,7 @@ $zoom-compact-view: 85%;
             min-width: calc(#{$screen-almost-full-width} / 9);
         }
     }
+
     /* Large - XLarge */
     @media (max-width: variables.$screen-max-size-xl) and (min-width: variables.$screen-max-size-lg) {
         min-width: calc(#{$screen-almost-full-width} / 4);
@@ -722,6 +758,7 @@ $zoom-compact-view: 85%;
             min-width: calc(#{$screen-almost-full-width} / 7);
         }
     }
+
     /* Medium - Large */
     @media (max-width: variables.$screen-max-size-lg) and (min-width: variables.$screen-max-size-md) {
         min-width: calc(#{$screen-almost-full-width} / 3);
@@ -734,6 +771,7 @@ $zoom-compact-view: 85%;
             min-width: calc(#{$screen-almost-full-width} / 5);
         }
     }
+
     /* Small - Medium */
     @media (max-width: variables.$screen-max-size-md) and (min-width: variables.$screen-max-size-sm) {
         min-width: calc(#{$screen-almost-full-width} / 3);
@@ -746,6 +784,7 @@ $zoom-compact-view: 85%;
             min-width: calc(#{$screen-almost-full-width} / 4);
         }
     }
+
     /* Extra small - Small */
     @media (max-width: variables.$screen-max-size-sm) and (min-width: variables.$screen-max-size-xs) {
         min-width: calc(#{$screen-almost-full-width} / 2);
@@ -758,6 +797,7 @@ $zoom-compact-view: 85%;
             min-width: calc(#{$screen-almost-full-width} / 2);
         }
     }
+
     /* < Extra small */
     @media (max-width: variables.$screen-max-size-xs) {
         min-width: calc(#{$screen-almost-full-width} / 1);
@@ -774,7 +814,8 @@ $zoom-compact-view: 85%;
 
 //  Custom field (added for stand alone field).
 // ---------------------------------------------
-.pepperi-field, .pep-field {
+.pepperi-field,
+.pep-field {
     &:not(.pep-field-no-spacing) {
         min-height: variables.$form-row-height;
         margin-bottom: variables.$form-spacing;
@@ -782,6 +823,7 @@ $zoom-compact-view: 85%;
 }
 
 @mixin pep-general-theme() {
+
     .required,
     .mandatory {
         color: functions.get-pep-color(color-system-caution, color-base);
@@ -795,8 +837,11 @@ $zoom-compact-view: 85%;
         @include mixins.state-icon();
     }
 
-    .pepperi-report-fields, .pep-report-fields {
-        .pepperi-input, .pep-input {
+    .pepperi-report-fields,
+    .pep-report-fields {
+
+        .pepperi-input,
+        .pep-input {
             background: transparent !important;
         }
     }
@@ -822,6 +867,7 @@ $zoom-compact-view: 85%;
 
     .mat-form-field {
         .mat-form-field-wrapper {
+
             .mat-form-field-prefix,
             .mat-form-field-suffix {
                 color: functions.get-pep-color(color-weak, color-flat-r-20);
@@ -1010,4 +1056,4 @@ $zoom-compact-view: 85%;
         // }
     }
 
-}
+}

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

@@ -4,6 +4,7 @@
 // -----------------------------------------------------
 //  Textarea & Override material style
 // -----------------------------------------------------
+.pepperi-json-editor-container, .pep-json-editor-container,
 .pepperi-textarea-container, .pep-textarea-container {
     height: inherit;
     display: grid;
@@ -74,6 +75,8 @@
                     }
                 }
             }
+
+            &.pepperi-table-json-editor, &.pep-table-json-editor,
             &.pepperi-table-textarea, &.pep-table-textarea {
                 ::ng-deep.mat-input-element {
                     padding-top: 0.135rem !important;
@@ -119,6 +122,7 @@
     }
 }
 
+.pepperi-json-editor-card-container, .pep-json-editor-card-container,
 .pepperi-textarea-card-container, .pep-textarea-card-container {
     .mat-form-field {
         ::ng-deep {
@@ -189,6 +193,7 @@
     }
 }
 
+.pepperi-report-json-editor, .pep-report-json-editor,
 .pepperi-report-textarea, .pep-report-textarea {
     ::ng-deep {
         .mat-form-field-suffix {
@@ -214,3 +219,11 @@
         }
     }
 }
+
+@mixin pep-json-editor-theme() {
+    .pepperi-report-json-editor, .pep-report-json-editor {
+        ::ng-deep.mat-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>;
 }

package/textbox/textbox.component.d.ts

@@ -97,8 +97,12 @@ export declare class PepTextboxComponent implements OnChanges, OnInit, AfterView
     textColor: string;
     xAlignment: PepHorizontalAlignment;
     rowSpan: number;
-    minValue: number;
-    maxValue: number;
+    private _minValue;
+    set minValue(value: number);
+    get minValue(): number;
+    private _maxValue;
+    set maxValue(value: number);
+    get maxValue(): number;
     private _visible;
     set visible(visible: boolean);
     get visible(): boolean;
@@ -120,6 +124,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 +148,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 +160,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>;
 }

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/top-bar/top-bar.component.d.ts

@@ -28,6 +28,8 @@ export declare class PepTopBarComponent implements AfterViewInit, AfterContentIn
     searchIsOpenAndSmallDevice: boolean;
     footerState: PepFooterStateType;
     PepScreenSizeType: typeof PepScreenSizeType;
+    private __pepViewReady;
+    private _footerOwnerSeq;
     constructor(customizationService: PepCustomizationService, layoutService: PepLayoutService, cdRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -35,5 +37,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-element", "pep-list-chooser", "[header-start-content]", "pep-list-total", "pep-search", "pep-list-sorting", "pep-list-views", "[header-end-content]"], false>;
 }

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