@pepperi-addons/ngx-lib 0.2.51-beta.2 → 0.2.51-beta.7

package/bundles/pepperi-addons-ngx-lib-form.umd.js

@@ -658,9 +658,8 @@
                     }
                     case ngxLib.FIELD_TYPE.RelatedObjectsCards: {
                         options.rowSpan = controlField.Layout.Height;
-                        // options.objectId = objectId;
-                        // options.parentId = parentId;
-                        // options.searchCode = searchCode;
+                        options.searchCode = searchCode;
+                        options.pageInfo = dataField.UIPageInfo;
                         customField = new ngxLib.PepInternalCaruselField(options);
                         break;
                     }
@@ -2741,13 +2740,17 @@
                         }))));
                         // * 16 convert rem to pixel
                         var cardRowsHeight = _this.customizationService.calculateCardRowsHeight(maxRow) * 16;
+                        // maxRow * 24 + 60 - 24 for each row in card + 60 for the padding of each card.
+                        // const rowSpanToAdd = Math.floor(childrenCount * ((cardRowsHeight + 56) / formRowHeight) + rowsToAdd);
                         // + 16 is the 1rem margin outside card.
-                        var rowSpanToAdd = (childrenCount * (cardRowsHeight + 16));
-                        // formRowHeight +
-                        //     rowsToAdd;
+                        var rowSpanToAdd = (childrenCount * (cardRowsHeight + 16)) /
+                            formRowHeight +
+                            rowsToAdd;
                         _this.field.rowSpan = rowSpanToAdd;
                     }
                     else {
+                        // const tableRowsHeight = this.customizationService.calculateTableRowsHeight(childrenCount) * 16;
+                        // this.field.rowSpan = Math.ceil((tableRowsHeight + (rowsToAdd * 40)) / formRowHeight);
                         // * 16 convert rem to pixel
                         var rowsToAddHeight = _this.customizationService.calculateTableRowsHeight(rowsToAdd, false) * 16;
                         var tableRowsHeight = _this.customizationService.calculateTableRowsHeight(childrenCount) * 16;
@@ -3077,6 +3080,100 @@
         { type: ngxLib.PepHttpService }
     ]; };
 
+    var PepInternalCaruselComponent = /** @class */ (function () {
+        function PepInternalCaruselComponent(fb, layoutService, internalCaruselService) {
+            this.fb = fb;
+            this.layoutService = layoutService;
+            this.internalCaruselService = internalCaruselService;
+            this.layoutType = 'form';
+            this.formValueChange = new core.EventEmitter();
+            this.formFieldClick = new core.EventEmitter();
+            this._items = null;
+            this.layout = null;
+            this.duration = 1000;
+            this.itemsToMove = 3;
+            this.prevDisabled = false;
+            this.nextDisabled = false;
+            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
+        }
+        Object.defineProperty(PepInternalCaruselComponent.prototype, "items", {
+            get: function () {
+                return this._items;
+            },
+            set: function (value) {
+                this._items = value;
+                // this.moveTo(0);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepInternalCaruselComponent.prototype.ngOnInit = function () {
+            // this.internalCaruselService.initCarusel(
+            //     this.field.objectId,
+            //     this.field.searchCode,
+            //     (caruselItems: any) => {
+            var caruselField = this.field;
+            if (caruselField) {
+                this.layout = caruselField.pageInfo.UIControl;
+                this.items = caruselField.pageInfo.Rows;
+            }
+            //     }
+            // );
+        };
+        PepInternalCaruselComponent.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            this.layoutService.onResize$.subscribe(function (size) {
+                _this.screenSize = size;
+            });
+        };
+        PepInternalCaruselComponent.prototype.onCustomizeObjectChanged = function (customizeObjectChangedData) {
+            this.formValueChange.emit(customizeObjectChangedData);
+        };
+        PepInternalCaruselComponent.prototype.onCustomizeFieldClick = function (fieldClickEvent) {
+            this.formFieldClick.emit(fieldClickEvent);
+        };
+        PepInternalCaruselComponent.prototype.moveLeft = function () {
+            var indexToMove = Math.max(this.carousel.currIndex - this.itemsToMove, 0);
+            this.moveTo(indexToMove);
+        };
+        PepInternalCaruselComponent.prototype.moveRight = function () {
+            var indexToMove = Math.min(this.carousel.currIndex + this.itemsToMove, this.items.length);
+            this.moveTo(indexToMove);
+        };
+        PepInternalCaruselComponent.prototype.moveTo = function (index) {
+            if (this.carousel) {
+                this.carousel.moveTo(index);
+            }
+        };
+        PepInternalCaruselComponent.prototype.onReachesLeftBound = function (event) {
+            this.prevDisabled = event;
+        };
+        PepInternalCaruselComponent.prototype.onReachesRightBound = function (event) {
+            this.nextDisabled = event;
+        };
+        return PepInternalCaruselComponent;
+    }());
+    PepInternalCaruselComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-internal-carusel',
+                    template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"prevDisabled\" (click)=\"moveLeft()\" class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"screenSize <= PepScreenSizeType.SM\" [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\"\n            [disabled]=\"nextDisabled\" (click)=\"moveRight()\" class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>",
+                    providers: [PepInternalCaruselService],
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".carousel-container{position:relative;margin:0;display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep.carousel-content .card-view{padding:.5rem 0!important;padding:var(--pep-spacing-sm,.5rem) 0!important}.carousel-container ::ng-deep.carousel-content .card-view:first-child{-webkit-padding-start:.5rem!important;padding-inline-start:.5rem!important;-webkit-padding-start:var(--pep-spacing-sm,.5rem)!important;padding-inline-start:var(--pep-spacing-sm,.5rem)!important}.carousel-container ::ng-deep.carousel-content .card-view:last-child{-webkit-padding-end:.5rem!important;padding-inline-end:.5rem!important;-webkit-padding-end:var(--pep-spacing-sm,.5rem)!important;padding-inline-end:var(--pep-spacing-sm,.5rem)!important}"]
+                },] }
+    ];
+    PepInternalCaruselComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: ngxLib.PepLayoutService },
+        { type: PepInternalCaruselService }
+    ]; };
+    PepInternalCaruselComponent.propDecorators = {
+        carousel: [{ type: core.ViewChild, args: ['carousel', { read: carousel.PepCarouselComponent },] }],
+        field: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        formValueChange: [{ type: core.Output }],
+        formFieldClick: [{ type: core.Output }]
+    };
     var TempRelatedItems = {
         "Rows": [
             {
@@ -6206,194 +6303,6 @@
         }
     };
 
-    // type PepListCarouselSizeType = 'xs' | 'sm' | 'md';
-    var PepInternalCaruselComponent = /** @class */ (function () {
-        function PepInternalCaruselComponent(fb, layoutService, internalCaruselService, customizationService, elementRef, changeDetectorRef) {
-            this.fb = fb;
-            this.layoutService = layoutService;
-            this.internalCaruselService = internalCaruselService;
-            this.customizationService = customizationService;
-            this.elementRef = elementRef;
-            this.changeDetectorRef = changeDetectorRef;
-            this.controlType = 'internalCarusel';
-            this.layoutType = 'form';
-            this.formValueChange = new core.EventEmitter();
-            this.formFieldClick = new core.EventEmitter();
-            this._items = null;
-            this.duration = 1000;
-            this.layout = null;
-            this.itemsToMove = 3;
-            this.lockItemInnerEvents = true;
-            this.hideArrowsInSmallScreen = true;
-            this.prevDisabled = false;
-            this.nextDisabled = false;
-            this.PepScreenSizeType = ngxLib.PepScreenSizeType;
-            this.defaultRowSpan = -1;
-        }
-        Object.defineProperty(PepInternalCaruselComponent.prototype, "items", {
-            get: function () {
-                return this._items;
-            },
-            set: function (value) {
-                this._items = value;
-                this.moveTo(0);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepInternalCaruselComponent.prototype.fillData = function () {
-            var _this = this;
-            setTimeout(function () {
-                // const childrenCount = this.items
-                //     ? this.items.length
-                //     : 0;
-                // convert rem to pixel
-                var formRowHeight = _this.customizationService.calculateFormFieldHeight() * 16;
-                // Set the default only if not set yet.
-                if (_this.defaultRowSpan === -1) {
-                    _this.defaultRowSpan = _this.field.rowSpan;
-                }
-                var maxRow = Math.max.apply(Math, __spreadArray([], __read(_this.layout.ControlFields.map(function (f) {
-                    return f.Layout.Y + f.Layout.Height;
-                }))));
-                // * 16 convert rem to pixel
-                var cardRowsHeight = _this.customizationService.calculateCardRowsHeight(maxRow) * 16;
-                // + 16 is the 1rem margin outside card.
-                var rowSpanToAdd = (cardRowsHeight + 16);
-                _this.field.rowSpan = rowSpanToAdd;
-            }, 0);
-            this.changeDetectorRef.markForCheck();
-        };
-        PepInternalCaruselComponent.prototype.ngOnInit = function () {
-            // this.internalCaruselService.initCarusel(
-            //     this.field.objectId,
-            //     this.field.searchCode,
-            //     (caruselItems: any) => {
-            this.layout = TempRelatedItems.UIControl;
-            this.items = TempRelatedItems.Rows;
-            // this.fillData();
-            //     }
-            // );
-        };
-        PepInternalCaruselComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.layoutService.onResize$.subscribe(function (size) {
-                _this.screenSize = size;
-            });
-        };
-        PepInternalCaruselComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        // updateChanges(elementToUpdate: any): void {
-        //     // Update memory data
-        //     for (let index = 0; index < this.caruselData.Rows.length; index++) {
-        //         if (this.caruselData.Rows[index].UID === elementToUpdate.UID) {
-        //             this.caruselData.Rows[index] = elementToUpdate;
-        //         }
-        //     }
-        // }
-        // setValueCallback(id: any, res: any): void {
-        //     if (res.Rows.length === 1) {
-        //         const field = res.Rows[0].Fields.find((f) => f.ApiName === 'ObjectMenu');
-        //         if (field) {
-        //             // HACK : Until "Enabled" returns from the server, we set PepMenu to be
-        //             //        Disabled in cart on regular items and not campign items.
-        //             field.Enabled = true;
-        //         }
-        //         this.updateChanges(res.Rows[0]);
-        //     }
-        //     this.valueChange.emit(res);
-        //     this.changeDetectorRef.markForCheck();
-        // }
-        PepInternalCaruselComponent.prototype.onCustomizeObjectChanged = function (customizeObjectChangedData) {
-            // this.internalCaruselService.childValueChanged(
-            //     customizeObjectChangedData.id,
-            //     customizeObjectChangedData.key,
-            //     customizeObjectChangedData.value,
-            //     (res: any) => {
-            //         this.setValueCallback(customizeObjectChangedData.id, res);
-            //     }
-            // );
-            this.formValueChange.emit(customizeObjectChangedData);
-        };
-        PepInternalCaruselComponent.prototype.onCustomizeFieldClick = function (fieldClickEvent) {
-            var handledEvent = false;
-            // // For the new custom form, the plus and minus events transform in the IPepFormFieldValueChangeEvent
-            // if (fieldClickEvent.controlType === 'qs') {
-            //     if (fieldClickEvent.value === PepQuantitySelectorComponent.PLUS) {
-            //         handledEvent = true;
-            //         this.internalCaruselService.childPlusClick(
-            //             fieldClickEvent.id,
-            //             fieldClickEvent.key,
-            //             (res: any) => {
-            //                 this.setValueCallback(fieldClickEvent.id, res);
-            //             }
-            //         );
-            //     } else if (
-            //         fieldClickEvent.value === PepQuantitySelectorComponent.MINUS
-            //     ) {
-            //         handledEvent = true;
-            //         this.internalCaruselService.childMinusClick(
-            //             fieldClickEvent.id,
-            //             fieldClickEvent.key,
-            //             (res: any) => {
-            //                 this.setValueCallback(fieldClickEvent.id, res);
-            //             }
-            //         );
-            //     }
-            // }
-            if (!handledEvent) {
-                this.formFieldClick.emit(fieldClickEvent);
-            }
-        };
-        PepInternalCaruselComponent.prototype.moveLeft = function () {
-            // this.carousel.moveLeft();
-            var indexToMove = Math.max(this.carousel.currIndex - this.itemsToMove, 0);
-            this.moveTo(indexToMove);
-        };
-        PepInternalCaruselComponent.prototype.moveRight = function () {
-            // this.carousel.moveRight();
-            var indexToMove = Math.min(this.carousel.currIndex + this.itemsToMove, this.items.length);
-            this.moveTo(indexToMove);
-        };
-        PepInternalCaruselComponent.prototype.moveTo = function (index) {
-            if (this.carousel) {
-                this.carousel.moveTo(index);
-            }
-        };
-        PepInternalCaruselComponent.prototype.onReachesLeftBound = function (event) {
-            this.prevDisabled = event;
-        };
-        PepInternalCaruselComponent.prototype.onReachesRightBound = function (event) {
-            this.nextDisabled = event;
-        };
-        return PepInternalCaruselComponent;
-    }());
-    PepInternalCaruselComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-internal-carusel',
-                    template: "<div class=\"carousel-container\">\n    <ng-container *ngIf=\"items?.length > 0; then carouselBlock; else emptyBlock\"></ng-container>\n    <ng-template #emptyBlock>\n        <!-- No items -->\n    </ng-template>\n    <ng-template #carouselBlock>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_left_alt'\" [styleType]=\"'regular'\" [disabled]=\"prevDisabled\" (click)=\"moveLeft()\"\n            class=\"carousel-arrow start-arrow\">\n        </pep-button>\n        <pep-carousel #carousel [xWheelEnabled]=\"false\" [snapDuration]=\"duration\"\n            (reachesLeftBound)=\"onReachesLeftBound($event)\" (reachesRightBound)=\"onReachesRightBound($event)\">\n            <ng-container *ngFor=\"let item of items\">\n                <pep-form pepCarouselItem [layout]=\"layout\" [data]=\"item\" [layoutType]=\"'card'\" class=\"card-view \"\n                    (valueChange)=\"onCustomizeObjectChanged($event)\" (fieldClick)=\"onCustomizeFieldClick($event)\">\n                </pep-form>\n            </ng-container>\n        </pep-carousel>\n        <pep-button *ngIf=\"!(hideArrowsInSmallScreen && screenSize > PepScreenSizeType.SM)\"\n            [iconName]=\"'arrow_right_alt'\" [styleType]=\"'regular'\" [disabled]=\"nextDisabled\" (click)=\"moveRight()\"\n            class=\"carousel-arrow end-arrow\">\n        </pep-button>\n    </ng-template>\n</div>",
-                    providers: [PepInternalCaruselService],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".carousel-container{position:relative;margin:0 calc(.5rem * -1);margin:0 calc(var(--pep-spacing-sm, .5rem) * -1);display:grid}.carousel-container .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.carousel-container .carousel-arrow.start-arrow{left:0}.carousel-container .carousel-arrow.end-arrow{right:0}.carousel-container ::ng-deep.carousel-content .card-view{padding:.5rem 0!important;padding:var(--pep-spacing-sm,.5rem) 0!important}.carousel-container ::ng-deep.carousel-content .card-view:first-child{-webkit-padding-start:.5rem!important;padding-inline-start:.5rem!important;-webkit-padding-start:var(--pep-spacing-sm,.5rem)!important;padding-inline-start:var(--pep-spacing-sm,.5rem)!important}.carousel-container ::ng-deep.carousel-content .card-view:last-child{-webkit-padding-end:.5rem!important;padding-inline-end:.5rem!important;-webkit-padding-end:var(--pep-spacing-sm,.5rem)!important;padding-inline-end:var(--pep-spacing-sm,.5rem)!important}"]
-                },] }
-    ];
-    PepInternalCaruselComponent.ctorParameters = function () { return [
-        { type: forms.FormBuilder },
-        { type: ngxLib.PepLayoutService },
-        { type: PepInternalCaruselService },
-        { type: ngxLib.PepCustomizationService },
-        { type: core.ElementRef },
-        { type: core.ChangeDetectorRef }
-    ]; };
-    PepInternalCaruselComponent.propDecorators = {
-        field: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        formValueChange: [{ type: core.Output }],
-        formFieldClick: [{ type: core.Output }],
-        carousel: [{ type: core.ViewChild, args: ['carousel', { read: carousel.PepCarouselComponent },] }]
-    };
-
     var pepComponentsModules = [
         address.PepAddressModule,
         attachment.PepAttachmentModule,