@pepperi-addons/ngx-lib 0.4.2-beta.320 → 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;
@@ -21,7 +22,7 @@
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-content: center;
-    
+
     // padding: variables.$spacing-2xs 0;
     // line-height: 1rem;
     // display: block;
@@ -113,7 +114,7 @@
                 display: flex;
                 align-self: center;
                 z-index: variables.$z-index-lowest + 1;
-                
+
                 @include pep-field-icon();
 
                 .mat-button {
@@ -177,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;
     }
@@ -207,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');
 }
@@ -226,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;
 }
 
@@ -292,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;
@@ -320,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;
                 }
@@ -365,6 +373,7 @@ $zoom-compact-view: 85%;
             &:hover {
                 &.support-sorting {
                     cursor: pointer;
+
                     .header-label {
                         cursor: pointer;
                         padding-inline-end: 1rem;
@@ -398,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;
@@ -437,9 +446,9 @@ $zoom-compact-view: 85%;
 
             &.mat-radio-button {
                 display: inline-flex;
-            
+
                 .mat-radio-label-content {
-                    padding: 0;    
+                    padding: 0;
                 }
             }
         }
@@ -447,6 +456,7 @@ $zoom-compact-view: 85%;
         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;
@@ -463,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;
             }
@@ -484,7 +495,7 @@ $zoom-compact-view: 85%;
                 // }
             }
         }
-        
+
         &.compact-view {
             padding: 0;
             height: variables.$table-field-height;
@@ -496,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;
                 }
             }
@@ -510,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;
             }
         }
@@ -602,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).
             }
 
@@ -628,7 +642,7 @@ $zoom-compact-view: 85%;
                 height: inherit;
 
                 &.wrap {
-                    white-space:normal;
+                    white-space: normal;
                 }
             }
 
@@ -668,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;
@@ -681,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;
@@ -711,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%;
 
@@ -728,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);
@@ -740,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);
@@ -752,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);
@@ -764,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);
@@ -776,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);
@@ -792,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;
@@ -800,6 +823,7 @@ $zoom-compact-view: 85%;
 }
 
 @mixin pep-general-theme() {
+
     .required,
     .mandatory {
         color: functions.get-pep-color(color-system-caution, color-base);
@@ -813,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;
         }
     }
@@ -840,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);
@@ -1028,4 +1056,4 @@ $zoom-compact-view: 85%;
         // }
     }
 
-}
+}

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

@@ -28,8 +28,8 @@ export declare class PepTopBarComponent implements AfterViewInit, AfterContentIn
     searchIsOpenAndSmallDevice: boolean;
     footerState: PepFooterStateType;
     PepScreenSizeType: typeof PepScreenSizeType;
-    private __pepLifecyclePhase;
     private __pepViewReady;
+    private _footerOwnerSeq;
     constructor(customizationService: PepCustomizationService, layoutService: PepLayoutService, cdRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -37,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>;
 }