@pepperi-addons/ngx-composite-lib 0.4.2-beta.86 → 0.4.2-beta.87

package/fesm2020/pepperi-addons-ngx-composite-lib-layout-builder.mjs

@@ -981,36 +981,85 @@ class SectionComponent extends BaseDestroyerDirective {
     setIfHideForCurrentScreenType() {
         this.hideForCurrentScreenType = this.layoutBuilderInternalService.getIsHidden(this.hideIn, this.screenType);
     }
-    getCssSplitString() {
+    // private getCssSplitString() {
+    //     switch (this.split) {
+    //         case '1/2 1/2':
+    //             return '1fr 1fr';
+    //         case '1/2 1/4 1/4':
+    //             return '2fr 1fr 1fr';
+    //         case '1/3 1/3 1/3':
+    //             return '1fr 1fr 1fr';
+    //         case '1/3 2/3':
+    //             return '1fr 2fr';
+    //         case '1/4 1/2 1/4':
+    //             return '1fr 2fr 1fr';
+    //         case '1/4 1/4 1/2':
+    //             return '1fr 1fr 2fr';
+    //         case '1/4 1/4 1/4 1/4':
+    //             return '1fr 1fr 1fr 1fr';
+    //         case '1/4 3/4':
+    //             return '1fr 3fr';
+    //         case '2/3 1/3':
+    //             return '2fr 1fr';
+    //         case '3/4 1/4':
+    //             return '3fr 1fr';
+    //         default: // For one column.
+    //             return '1fr';
+    //     }
+    // }
+    getCssGridColumn(columnIndex) {
+        let res = '1/13';
+        let gridColumnValueArr = ['1/13'];
         switch (this.split) {
             case '1/2 1/2':
-                return '1fr 1fr';
+                gridColumnValueArr = ['1/7', '7/13'];
+                break;
             case '1/2 1/4 1/4':
-                return '2fr 1fr 1fr';
+                gridColumnValueArr = ['1/7', '7/10', '10/13'];
+                break;
             case '1/3 1/3 1/3':
-                return '1fr 1fr 1fr';
+                gridColumnValueArr = ['1/5', '5/9', '9/13'];
+                break;
             case '1/3 2/3':
-                return '1fr 2fr';
+                gridColumnValueArr = ['1/5', '5/13'];
+                break;
             case '1/4 1/2 1/4':
-                return '1fr 2fr 1fr';
+                gridColumnValueArr = ['1/4', '4/10', '10/13'];
+                break;
             case '1/4 1/4 1/2':
-                return '1fr 1fr 2fr';
+                gridColumnValueArr = ['1/4', '4/7', '7/13'];
+                break;
             case '1/4 1/4 1/4 1/4':
-                return '1fr 1fr 1fr 1fr';
+                gridColumnValueArr = ['1/4', '4/7', '7/10', '10/13'];
+                break;
             case '1/4 3/4':
-                return '1fr 3fr';
+                gridColumnValueArr = ['1/4', '4/13'];
+                break;
             case '2/3 1/3':
-                return '2fr 1fr';
+                gridColumnValueArr = ['1/9', '9/13'];
+                break;
             case '3/4 1/4':
-                return '3fr 1fr';
-            default: // For one column.
-                return '1fr';
+                gridColumnValueArr = ['1/10', '10/13'];
+                break;
+        }
+        if (gridColumnValueArr.length > columnIndex) {
+            res = gridColumnValueArr[columnIndex];
+        }
+        return res;
+    }
+    setSectionColumnStyle(sectionColumn, columnIndex, isHorizontalView) {
+        if (isHorizontalView) {
+            const gridColumnValue = this.getCssGridColumn(columnIndex);
+            this.renderer.setStyle(sectionColumn.nativeElement, 'grid-column', gridColumnValue);
+        }
+        else {
+            this.renderer.setStyle(sectionColumn.nativeElement, 'grid-column', 'unset');
         }
     }
     refreshSplit() {
         setTimeout(() => {
             if (this.sectionContainerRef) {
-                const cssSplitString = this.getCssSplitString();
+                // const cssSplitString = this.getCssSplitString();
                 // Go for all the columns in the columnsWrapper
                 this.columnsElementRef.toArray().map((section, sectionIndex) => {
                     // Horizontal (true) for large screens, false for small screens.
@@ -1018,25 +1067,30 @@ class SectionComponent extends BaseDestroyerDirective {
                     if (isHorizontalView) {
                         this.renderer.setStyle(section.nativeElement, 'grid-auto-flow', 'column');
                         this.renderer.setStyle(section.nativeElement, 'grid-template-rows', 'unset');
-                        this.renderer.setStyle(section.nativeElement, 'grid-template-columns', cssSplitString);
+                        // this.renderer.setStyle(section.nativeElement, 'grid-template-columns', cssSplitString);
                     }
                     else {
                         this.renderer.setStyle(section.nativeElement, 'grid-auto-flow', 'row');
                         this.renderer.setStyle(section.nativeElement, 'grid-template-columns', 'unset');
-                        this.renderer.setStyle(section.nativeElement, 'grid-template-rows', 'unset');
+                        // this.renderer.setStyle(section.nativeElement, 'grid-template-rows', 'unset');
                         // In runtime (or preview mode).
                         if (!this.editable) {
-                            const cssSplitArray = cssSplitString.split(' ');
-                            // If there are some hidden columns change the column width to 0 (for cut the spacing in the grid-template-rows).
-                            this.columns.forEach((column, index) => {
-                                if (!column.BlockContainer) {
-                                    cssSplitArray[index] = '0';
-                                }
-                            });
-                            this.renderer.setStyle(section.nativeElement, 'grid-template-rows', 'auto');
+                            // const cssSplitArray = cssSplitString.split(' ');
+                            // // If there are some hidden columns change the column width to 0 (for cut the spacing in the grid-template-rows).
+                            // this.columns.forEach((column, index) => {
+                            //     if (!column.BlockContainer) {
+                            //         cssSplitArray[index] = '0';
+                            //     }
+                            // });
                             //this.renderer.setStyle(section.nativeElement, 'grid-template-rows', cssSplitArray.join(' '));
+                            this.renderer.setStyle(section.nativeElement, 'grid-template-rows', 'auto');
                         }
                     }
+                    // Go for all the columns in the section and set there style.
+                    const sectionColumns = section.nativeElement.querySelectorAll('.section-column');
+                    for (var columnIndex = 0; columnIndex < sectionColumns.length; columnIndex++) {
+                        this.setSectionColumnStyle(sectionColumns[columnIndex], columnIndex, isHorizontalView);
+                    }
                 });
             }
         }, 0);