@lowcodeunit/applications-flow-common 1.33.63-lets-get-social-ish → 1.33.67-lets-get-social-ish

package/bundles/lowcodeunit-applications-flow-common.umd.js

@@ -4663,7 +4663,7 @@
     ThreeColumnComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-three-column',
-                    template: "\n<div class=\"col-container\" fxLayout=\"row\" fxLayout.lt-md=\"column\">\n\n\n        <div class=\"col-left\"  \n            fxFlexOrder=\"1\" \n            fxFlex.gt-md=\"25%\"  \n             >\n\n            <ng-content select=\"[left]\"></ng-content>\n\n        </div>\n\n        \n\n\n    <div class=\"col-center\" \n        fxFlex.gt-md=\"50%\" \n        fxFlexOrder.gt-md=\"2\"\n        fxFlexOrder.lt-md=\"3\">\n        <ng-content></ng-content>\n    </div>\n\n    <div class=\"col-right\" \n            fxFlexOrder.gt-md=\"3\" \n            fxFlex.gt-md=\"25%\" \n            fxFlexOrder.lt-md=\"2\" \n            >\n\n            <ng-content select=\"[right]\"></ng-content>\n        </div>\n    \n    \n\n</div>\n",
+                    template: "\n<div class=\"col-container\" fxLayout=\"row\" fxLayout.lt-md=\"column\">\n\n\n        <div class=\"col-left\"  \n            fxFlex=\"25%\">\n\n            <ng-content select=\"[left]\"></ng-content>\n\n        </div>\n\n        \n\n\n    <div class=\"col-center\" \n        fxFlex=\"50%\" \n        fxFlexOrder.lt-md=\"3\">\n\n        <ng-content></ng-content>\n\n    </div>\n\n    <div class=\"col-right\" \n            fxFlex=\"25%\" \n            fxFlexOrder.lt-md=\"2\">\n\n            <ng-content select=\"[right]\"></ng-content>\n\n        </div>\n    \n    \n\n</div>\n",
                     styles: [".col-container,.col-container-sm{background-color:#ebecf0;height:100%}.col-container-sm{display:none}@media only screen and (max-width:850px){.col-container{display:none}.col-container-sm{display:block}}"]
                 },] }
     ];
@@ -4928,6 +4928,73 @@
     ];
     TwoColumnHeaderComponent.ctorParameters = function () { return []; };
 
+    var CardCarouselComponent = /** @class */ (function () {
+        function CardCarouselComponent() {
+            this.carouselIndex = 0;
+        }
+        CardCarouselComponent.prototype.ngOnInit = function () {
+        };
+        CardCarouselComponent.prototype.ngAfterViewInit = function () {
+            this.assignCarouselClass();
+        };
+        CardCarouselComponent.prototype.LeftChevronClicked = function () {
+            this.removeCarouselClasses();
+            if (this.carouselIndex === 0) {
+                this.carouselIndex = this.Stats.length - 1;
+            }
+            else {
+                this.carouselIndex--;
+            }
+            this.assignCarouselClass();
+        };
+        CardCarouselComponent.prototype.MoreDetailsClicked = function () {
+            console.log("More details clicked on carousel item", this.Stats[this.carouselIndex]);
+        };
+        CardCarouselComponent.prototype.RightChevronClicked = function () {
+            this.removeCarouselClasses();
+            if (this.carouselIndex === this.Stats.length - 1) {
+                this.carouselIndex = 0;
+            }
+            else {
+                this.carouselIndex++;
+            }
+            this.assignCarouselClass();
+        };
+        //HELPERS
+        CardCarouselComponent.prototype.removeCarouselClasses = function () {
+            for (var i = 0; i < this.Stats.length; i++) {
+                if (i === this.carouselIndex) {
+                    document.getElementById("carousel-" + this.carouselIndex).classList.remove('active');
+                }
+                else {
+                    document.getElementById("carousel-" + i).classList.remove('hidden');
+                }
+            }
+        };
+        CardCarouselComponent.prototype.assignCarouselClass = function () {
+            for (var i = 0; i < this.Stats.length; i++) {
+                if (i === this.carouselIndex) {
+                    document.getElementById("carousel-" + this.carouselIndex).classList.add('active');
+                }
+                else {
+                    document.getElementById("carousel-" + i).classList.add('hidden');
+                }
+            }
+        };
+        return CardCarouselComponent;
+    }());
+    CardCarouselComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'lcu-card-carousel',
+                    template: "<div stats class=\"carousel-container\">\n    <div class=\"chevron-container\" fxLayout=\"row\">\n        <button mat-icon-button class=\"chevron-button\" id=\"left-chevron\" (click)=\"LeftChevronClicked()\">\n            <mat-icon>chevron_left</mat-icon>\n        </button>\n        <button mat-icon-button class=\"chevron-button\" id=\"right-chevron\" (click)=\"RightChevronClicked()\">\n            <mat-icon>chevron_right</mat-icon>\n        </button>\n    </div>\n    <ng-container *ngFor=\"let stat of Stats; let i = index\">\n            <div class=\"carousel-item\" [id]=\"'carousel-'+i\">\n                <div class=\"carousel-title\">{{stat.Name}}</div>\n                <div class=\"carousel-stat\">{{stat.Stat}}</div>\n            </div>\n    </ng-container>\n    <div (click)=\"MoreDetailsClicked()\">More details</div>\n</div>\n",
+                    styles: [".carousel-container{height:75px;padding-top:20px;text-align:center}.carousel-item.hidden{display:none}.carousel-item.active{visibility:visible}.chevron-button{position:absolute}#right-chevron{right:5px}#left-chevron{left:5px}"]
+                },] }
+    ];
+    CardCarouselComponent.ctorParameters = function () { return []; };
+    CardCarouselComponent.propDecorators = {
+        Stats: [{ type: i0.Input, args: ['stats',] }]
+    };
+
     var ApplicationsFlowModule = /** @class */ (function () {
         function ApplicationsFlowModule() {
         }
@@ -4979,7 +5046,8 @@
                         FeedCardSmComponent,
                         GhControlComponent,
                         MainFeedCardComponent,
-                        TwoColumnHeaderComponent
+                        TwoColumnHeaderComponent,
+                        CardCarouselComponent
                     ],
                     imports: [
                         i2.FathymSharedModule,
@@ -5020,7 +5088,8 @@
                         FeedCardSmComponent,
                         GhControlComponent,
                         MainFeedCardComponent,
-                        TwoColumnHeaderComponent
+                        TwoColumnHeaderComponent,
+                        CardCarouselComponent
                     ],
                     entryComponents: [
                         ApplicationsFlowProjectsElementComponent,
@@ -5051,7 +5120,8 @@
                         FeedCardSmComponent,
                         GhControlComponent,
                         MainFeedCardComponent,
-                        TwoColumnHeaderComponent
+                        TwoColumnHeaderComponent,
+                        CardCarouselComponent
                     ],
                 },] }
     ];
@@ -5159,6 +5229,7 @@
     exports.ɵv = GhControlComponent;
     exports.ɵw = MainFeedCardComponent;
     exports.ɵx = TwoColumnHeaderComponent;
+    exports.ɵy = CardCarouselComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });