@kigi/components 1.26.1-alpha → 1.27.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kigi/components",
-  "version": "1.26.1-alpha",
+  "version": "1.27.0-alpha",
   "description": "@kigi/components",
   "main": "src/components/index.ts",
   "scripts": {

package/src/components/mbg-address/mbg-address.scss

@@ -7,52 +7,57 @@
     }
 
     .separator-address-link {
-      margin:0 8px;
+      margin: 0 8px;
       color: #666;
     }
   }
 }
 
 .mbg-address-wrapper {
+  @media screen and (max-width: 415px) {
     display: flex;
-    .input-cep-wrapper {
-        width: 108px;
-        max-width: 108px;
-        margin-right: 8px;
-        font-weight: 500;
-        input {
-            max-width: 100%;
+    flex-direction: column;
+    gap: 5px;
+  }
+  display: flex;
+  .input-cep-wrapper {
+    width: 108px;
+    max-width: 108px;
+    margin-right: 8px;
+    font-weight: 500;
+    input {
+      max-width: 100%;
 
-            &::placeholder {
-                color: #888888;
-            }
-        }
-    }
-    mbg-input-step {
-        flex: 1;
-        max-width: 100%;
+      &::placeholder {
+        color: #888888;
+      }
     }
-    .input-spacing {
-      min-width: 8px;
+  }
+  mbg-input-step {
+    flex: 1;
+    max-width: 100%;
+  }
+  .input-spacing {
+    min-width: 8px;
+  }
+  input.mbg-input {
+    border: 1px solid #ddd;
+    background: #fff;
+    border-radius: 5px;
+    padding: 8px 14px;
+    flex: 7;
+    outline: none;
+    width: inherit;
+    height: 44px;
+    max-width: 100%;
+    min-width: 0;
+    &.input-number {
+      flex: none;
+      width: 104px;
     }
-    input.mbg-input {
-      border: 1px solid #ddd;
-      background: #fff;
-      border-radius: 5px;
-      padding: 8px 14px;
-      flex: 7;
-      outline: none;
-      width: inherit;
-      height: 44px;
-      max-width: 100%;
-      min-width: 0;
-      &.input-number {
-        flex: none;
-        width: 104px;
-      }
-      &.input-information {
-        min-width: 160px;
-        flex: .3;
-      }
+    &.input-information {
+      min-width: 160px;
+      flex: 0.3;
     }
+  }
 }

package/src/components/mbg-list/components/mbg-list-column/mbg-list-column.ts

@@ -14,6 +14,7 @@ export class MbgListColumnController {
   private hidden: boolean
   private columnSort
   private dinamic
+  public markAsLastColumn
 
   constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {}
 
@@ -23,6 +24,7 @@ export class MbgListColumnController {
     this.alignRow = this.alignRow || 'left'
     this.sortable = this.sortable !== undefined ? this.sortable : false
     this.dinamic = this.dinamic !== undefined ? this.dinamic : false
+    this.markAsLastColumn = this.markAsLastColumn !== undefined ? this.markAsLastColumn : false
     this.mbgList.registerColumn(this)
     this.generateTemplateColumn()
     this.generateTemplateRow()
@@ -79,7 +81,7 @@ export class MbgListColumnController {
   }
 }
 
-MbgListColumnController.$inject = ['$scope', '$element', '$attrs', '$timeout', '$transclude']
+MbgListColumnController['$inject'] = ['$scope', '$element', '$attrs', '$timeout', '$transclude']
 
 const mbgListColumn = {
   transclude: true,
@@ -96,6 +98,7 @@ const mbgListColumn = {
     hidden: '=?',
     sortable: '=?',
     dinamic: '=?',
+    markAsLastColumn: '=?',
   },
   template: '',
   controller: MbgListColumnController,

package/src/components/mbg-list/mbg-list.ts

@@ -24,8 +24,10 @@ export class MbgListController {
   public columnSort
   public dinamic
   public dinamicColumns
+  public staticColumns: Array<any>
+  public indexToPush
 
-  constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) { }
+  constructor(public $scope, public $element, public $attrs, public $timeout, public $transclude) {}
 
   $onInit() {
     this.enableOnSelectByRow =
@@ -35,6 +37,8 @@ export class MbgListController {
     this.columns = []
     this.mbgRows = []
     this.selectedMap = {}
+    this.staticColumns = []
+
     this.$scope.$watch(
       '$ctrl.list',
       (list) => {
@@ -42,6 +46,7 @@ export class MbgListController {
         this.rows.forEach((row) => {
           row.$json = row.$json ? row.$json : JSON.stringify(row)
         })
+
         try {
           this.checkAll = this.isAllSelected()
         } catch (e) {
@@ -52,17 +57,34 @@ export class MbgListController {
     )
     this.observeOpenedRows()
     this.observeSelectedValues()
+
     if (this.dinamic) {
       this.$scope.$watch(
         '$ctrl.dinamicColumns',
         () => {
-          const columnsNames = this.dinamicColumns.map((column) => column.name)
-          this.columns = this.columns.filter((c: any) => {
-            if (!c.dinamic) {
-              return true
+          if (this.staticColumns.length == 0) {
+            this.staticColumns = this.columns
+          }
+
+          this.indexToPush = this.columns.findIndex((col) => col.markAsLastColumn)
+
+          let lastColumnItem = this.indexToPush > 0 && this.columns.splice(this.indexToPush, 1)[0]
+
+          if (this.dinamicColumns.length > 0) {
+            const newColumns = this.columns.filter(
+              (c: any) => c.dinamic && this.dinamicColumns.some((item) => item.id == c.name),
+            )
+
+            if (lastColumnItem) {
+              newColumns.push(lastColumnItem)
+            }
+            this.columns = this.staticColumns.concat(newColumns)
+          } else {
+            if (lastColumnItem) {
+              this.staticColumns.push(lastColumnItem)
             }
-            return columnsNames.includes(c.name)
-          })
+            this.columns = this.staticColumns
+          }
         },
         true,
       )
@@ -152,7 +174,14 @@ export class MbgListController {
   }
 
   registerColumn(column: MbgListColumnController) {
-    this.columns.push(column)
+    if (!this.indexToPush || this.indexToPush < 0) return this.columns.push(column)
+
+    this.columns.splice(this.indexToPush, 0, column)
+    this.indexToPush++
+
+    if (column.markAsLastColumn) {
+      this.indexToPush = this.columns.length - 1
+    }
   }
 
   registerRow(row: MbgListRowController) {
@@ -264,7 +293,7 @@ export class MbgListController {
           )
         }) %
           2 ===
-          0
+        0
           ? '#eaeaea'
           : '#F5F5F5',
     }