@lowcodeunit/applications-flow-common 1.33.54-lets-get-social-ish → 1.33.55-lets-get-social-ish

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators));
-}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/common/http'), require('@lcu/common'), require('@angular/forms'), require('@angular/flex-layout'), require('@lowcodeunit/app-host-common'), require('@angular/cdk/keycodes'), require('rxjs/operators'), require('@angular/cdk/layout')) :
+    typeof define === 'function' && define.amd ? define('@lowcodeunit/applications-flow-common', ['exports', '@angular/core', 'rxjs', '@angular/common/http', '@lcu/common', '@angular/forms', '@angular/flex-layout', '@lowcodeunit/app-host-common', '@angular/cdk/keycodes', 'rxjs/operators', '@angular/cdk/layout'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.lowcodeunit = global.lowcodeunit || {}, global.lowcodeunit['applications-flow-common'] = {}), global.ng.core, global.rxjs, global.ng.common.http, global.i2, global.ng.forms, global.ng.flexLayout, global.appHostCommon, global.ng.cdk.keycodes, global.rxjs.operators, global.ng.cdk.layout));
+}(this, (function (exports, i0, rxjs, i1, i2, forms, flexLayout, appHostCommon, keycodes, operators, layout) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -4640,20 +4640,36 @@
     };
 
     var ThreeColumnComponent = /** @class */ (function () {
-        function ThreeColumnComponent() {
+        function ThreeColumnComponent(breakpointObserver) {
+            this.breakpointObserver = breakpointObserver;
         }
         ThreeColumnComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.breakpointObserver
+                .observe(['(max-width: 850px)'])
+                .subscribe(function (state) {
+                console.log("Breakpoint: ", state.matches);
+                if (state.matches) {
+                    _this.SmallScreen = true;
+                }
+                else {
+                    _this.SmallScreen = false;
+                }
+                console.log("SmallScrren = ", _this.SmallScreen);
+            });
         };
         return ThreeColumnComponent;
     }());
     ThreeColumnComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-three-column',
-                    template: "\n<div class=\"col-container\" fxLayout=\"row\" fxLayout.lt-md=\"column\">\n\n    <div class=\"col-left\"  fxFlex=\"25%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"50%\">\n        <ng-content></ng-content>\n    </div>\n    \n    <div class=\"col-right\" fxFlex=\"25%\">\n        <ng-content select=\"[right]\"></ng-content>\n    </div>\n\n</div>",
-                    styles: [".col-container{background-color:#ebecf0;height:100%}"]
+                    template: "\n<div class=\"col-container\" fxLayout=\"row\" fxLayout.lt-md=\"column\">\n\n    <div class=\"col-left\"  fxFlex.gt-md=\"25%\"  >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex.gt-md=\"50%\" >\n        <ng-content></ng-content>\n    </div>\n    \n    <div class=\"col-right\" fxFlex.gt-md=\"25%\" >\n        <ng-content select=\"[right]\"></ng-content>\n    </div>\n\n</div>\n<!-- below doesn't work -->\n<!-- <div [hidden]=\"!SmallScreen\" class=\"col-container\" fxLayout=\"column\">\n    <div fxLayout=\"row\">\n        <div class=\"col-left\"  fxFlex=\"50%\" >\n            <ng-content select=\"[left]\"></ng-content>\n        </div>\n\n        <div class=\"col-right\" fxFlex=\"50%\">\n            <ng-content select=\"[right]\"></ng-content>\n        </div>\n    </div>\n\n    <div class=\"col-center\">\n        <ng-content></ng-content>\n    </div>\n\n</div> -->",
+                    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}}"]
                 },] }
     ];
-    ThreeColumnComponent.ctorParameters = function () { return []; };
+    ThreeColumnComponent.ctorParameters = function () { return [
+        { type: layout.BreakpointObserver }
+    ]; };
 
     var ColumnInfoCardComponent = /** @class */ (function () {
         function ColumnInfoCardComponent() {
@@ -4732,7 +4748,7 @@
     ProjectInfoCardComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-project-info-card',
-                    template: "<mat-card class=\"project-info-card\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon class=\"temp-icon\">flutter_dash</mat-icon>\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n      <button mat-icon-button id=\"right-icon\" (click)=\"RightIconClicked()\">\n        <mat-icon>share</mat-icon>\n      </button>\n    </div>\n\n    <mat-card-header class=\"project-card-header\">\n\n      <mat-card-title class=\"project-card-name\" *ngIf=\"Name\">{{Name}}</mat-card-title>\n\n      <mat-card-subtitle class=\"project-card-description\" *ngIf=\"Description\">{{Description}}</mat-card-subtitle>\n\n      <mat-card-subtitle class=\"project-card-host\">\n          <a class=\"host-anchor\" *ngIf=\"Subtext\" [href]=\"Subtext\" target=\"_blank\">{{Subtext}}</a>\n      </mat-card-subtitle>\n\n    </mat-card-header>\n    <mat-card-content class=\"card-content-container\">\n      <div class=\"stats-container\">\n        <ng-content  select=\"[stats]\"></ng-content>\n      </div>\n\n      <div class=\"promo-container\">\n        <ng-content  select=\"[promo]\"></ng-content>\n      </div>\n\n    </mat-card-content>\n    <mat-card-actions class=\"actions-container\">\n      <ng-content select=\"[action]\"></ng-content>\n      \n    </mat-card-actions>\n  </mat-card>\n  \n",
+                    template: "<mat-card class=\"project-info-card\">\n\n    <div class=\"header-img-container\" fxLayout=\"row\" >\n        <div class=\"round-project-img\" fxLayoutAlign=\"center center\">\n            <mat-icon class=\"temp-icon\">flutter_dash</mat-icon>\n        </div>\n    </div>\n\n    <div class=\"icon-btn-container\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\" >\n      <button mat-icon-button id=\"left-icon\" (click)=\"LeftIconClicked()\">\n        <mat-icon>settings</mat-icon>\n      </button>\n      <button mat-icon-button id=\"right-icon\" (click)=\"RightIconClicked()\">\n        <mat-icon>share</mat-icon>\n      </button>\n    </div>\n\n    <mat-card-header class=\"project-card-header\" fxLayoutAlign=\"center center\">\n\n      <mat-card-title class=\"project-card-name\" *ngIf=\"Name\">{{Name}}</mat-card-title>\n\n      <mat-card-subtitle class=\"project-card-description\" *ngIf=\"Description\">{{Description}}</mat-card-subtitle>\n\n      <mat-card-subtitle class=\"project-card-host\">\n          <a class=\"host-anchor\" *ngIf=\"Subtext\" [href]=\"Subtext\" target=\"_blank\">{{Subtext}}</a>\n      </mat-card-subtitle>\n\n    </mat-card-header>\n    <mat-card-content class=\"card-content-container\">\n      <div class=\"stats-container\">\n        <ng-content  select=\"[stats]\"></ng-content>\n      </div>\n\n      <div class=\"promo-container\">\n        <ng-content  select=\"[promo]\"></ng-content>\n      </div>\n\n    </mat-card-content>\n    <mat-card-actions class=\"actions-container\">\n      <ng-content select=\"[action]\"></ng-content>\n      \n    </mat-card-actions>\n  </mat-card>\n  \n",
                     styles: [".project-info-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:0}.round-project-img{background-color:#dfeff2;border:2px solid #fff;border-radius:40px;height:75px;margin-top:20px;text-align:center;width:75px}.temp-icon{font-size:50px;height:50px;width:50px}.icon-btn-container{margin:5px}.project-card-header{margin-top:50px;text-align:center}.host-anchor{color:#4a918e;text-decoration:none}.header-img-container{background-color:#a4bab3;border-radius:2px 2px 0 0;height:60px;justify-content:center;margin-right:-.5px;margin-top:-.5px!important}.project-card-name{font-size:30px;font-weight:600}.card-content-container{margin-bottom:0!important}.stats-container{border-bottom:1px solid #d3d3d3;border-top:1px solid #d3d3d3}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.actions-container{padding:0!important}.info-card-btn{border-radius:0 0 2px 2px;border-top:1px solid #d3d3d3;width:100%}"]
                 },] }
     ];
@@ -4814,19 +4830,46 @@
             this.InputLabel = "Create Feature Branch";
             this.selectedBtn = "fb-btn";
             this.addSelectBtn();
+            console.log("create feature branch selected");
         };
         GhControlComponent.prototype.OpenIssue = function () {
             this.removeSelectedBtn();
             this.InputLabel = "Open Issue";
             this.selectedBtn = "oi-btn";
             this.addSelectBtn();
+            console.log("open issue selected");
         };
         GhControlComponent.prototype.CreatePullRequest = function () {
             this.removeSelectedBtn();
             this.InputLabel = "Create Pull Request";
             this.selectedBtn = "pr-btn";
             this.addSelectBtn();
+            console.log("create pull request selected");
+        };
+        GhControlComponent.prototype.OpenMoreInfo = function () {
+            console.log("more info selected");
         };
+        GhControlComponent.prototype.Submit = function () {
+            console.log("submitting: ", this.value);
+            switch (this.selectedBtn) {
+                case "pr-btn":
+                    //Pull request
+                    console.log("creating pull request: ", this.value);
+                    break;
+                case "oi-btn":
+                    //Open Issue
+                    console.log("Open issue: ", this.value);
+                    break;
+                case "fb-btn":
+                    //Feature Branch
+                    console.log("creating feature branch: ", this.value);
+                    break;
+                default:
+                    console.log("hmm");
+                    break;
+            }
+        };
+        //HELPERS
         GhControlComponent.prototype.addSelectBtn = function () {
             document.getElementById(this.selectedBtn).classList.add('selected');
         };
@@ -4838,7 +4881,7 @@
     GhControlComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-gh-control',
-                    template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"20%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"80%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button>\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>",
+                    template: "<mat-card class=\"social-card\">\n    <div class=\"gh-card-container\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <mat-icon fxFlex=\"15%\" class=\"gh-icon\">error_outline</mat-icon>\n        <div fxFlex=\"70%\"class=\"gh-card-main-content\">\n            <mat-form-field appearance=\"fill\" class=\"gh-input\">\n                <mat-label>{{InputLabel}}</mat-label>\n                <input matInput type=\"text\" [(ngModel)]=\"value\">\n                <!-- <button *ngIf=\"value\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"value=''\">\n                  <mat-icon>close</mat-icon>\n                </button> -->\n              </mat-form-field>\n        </div>\n        <button fxFlex=\"15%\" mat-button (click)=\"Submit()\" id=\"submit-btn\">Submit</button>\n    </div>\n\n    <mat-card-actions fxLayout=\"row\" fxLayoutAlign=\"space-around center\">\n        <button mat-button (click)=\"CreatePullRequest()\" id=\"pr-btn\">Pull Request</button>\n        <button mat-button (click)=\"OpenIssue()\" id=\"oi-btn\">Open Issue</button>\n        <button mat-button (click)=\"CreateFeatureBranch()\" id=\"fb-btn\">Feature Branch</button>\n        <button mat-icon-button (click)=\"OpenMoreInfo()\">\n            <mat-icon>more_horiz</mat-icon>\n        </button>\n    </mat-card-actions>\n  </mat-card>",
                     styles: [".social-card{background-color:#fff;border:2px solid #d3d3d3;margin:20px;padding:15px 5px}mat-card-actions{margin-bottom:-1px!important;margin-left:0!important;margin-right:-.5px!important}.gh-icon{font-size:60px;height:60px;text-align:center;width:60px}.gh-input{width:90%}.selected{border:1px solid green}::ng-deep .mat-form-field-flex{border:1px solid;border-radius:30px!important}::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}"]
                 },] }
     ];
@@ -4879,8 +4922,8 @@
     TwoColumnHeaderComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lcu-two-column-header',
-                    template: "<div class=\"col-container\" fxLayout=\"row\" fxLayout.lt-md=\"column\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n",
-                    styles: [".col-container{background-color:#ebecf0}"]
+                    template: "<div class=\"col-container\" fxLayout=\"row\">\n\n    <div class=\"col-left\"  fxFlex=\"15%\" >\n        <ng-content select=\"[left]\"></ng-content>\n    </div>\n\n    <div class=\"col-center\" fxFlex=\"85%\">\n        <ng-content></ng-content>\n    </div>\n\n</div>\n",
+                    styles: [".col-container{background-color:#ebecf0}.col-left{min-width:210px}"]
                 },] }
     ];
     TwoColumnHeaderComponent.ctorParameters = function () { return []; };