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

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

@@ -459,7 +459,6 @@ class LayoutBuilderInternalService {
         return this.getScreenType(this._screenSizeSubject?.getValue() || PepScreenSizeType.LG);
     }
     getScreenType(size) {
-        //TODO:
         const screenType = size < PepScreenSizeType.MD ? 'Landscape' :
             (size === PepScreenSizeType.MD || size === PepScreenSizeType.SM ? 'Tablet' : 'Phablet');
         return screenType;
@@ -982,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.
@@ -1019,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);
@@ -1944,7 +1997,6 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
         this.viewportWidth = 0;
         this.pepAddonService.setShellRouterData({ showSidebar: false, addPadding: false });
         this.renderer.addClass(this.hostElement.nativeElement, 'pep-layout-builder');
-        this.layoutBuilderInternalService.setEditMode(true);
     }
     set availableBlocksForDrag(value) {
         this._availableBlocksForDrag = value;
@@ -2039,6 +2091,7 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
         });
     }
     ngOnInit() {
+        this.layoutBuilderInternalService.setEditMode(true);
         // Get the first translation for load all translations.
         this.translate.get('LAYOUT_BUILDER.DESKTOP').subscribe((res) => {
             this.screenTypes = [
@@ -2049,6 +2102,10 @@ class PepLayoutBuilderComponent extends BaseDestroyerDirective {
         });
         this.subscribeEvents();
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.layoutBuilderInternalService.setEditMode(false);
+    }
     onResize(event) {
         this.updateViewportWidth();
     }