From 45e2d87f28a3683232816435e424ab8a1c533fc2 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 10 Oct 2024 09:15:15 -0400
Subject: [PATCH 01/13] Saving progress 1 Dropdown Table Style ok

---
 src/components/accordions.js                  |  2 +-
 .../inspector/collection-data-source.vue      |  1 -
 .../inspector/collection-designer-mode.vue    | 68 +++++++++++++++
 src/components/inspector/index.js             |  2 +
 src/components/renderer/form-record-list.vue  |  3 +-
 src/components/vue-form-builder.vue           | 23 ++++-
 src/form-builder-controls.js                  | 14 ++-
 src/form-control-common-properties.js         | 86 +++++++++++++++++++
 8 files changed, 191 insertions(+), 8 deletions(-)
 create mode 100644 src/components/inspector/collection-designer-mode.vue

diff --git a/src/components/accordions.js b/src/components/accordions.js
index 800c1992a..0c3003931 100644
--- a/src/components/accordions.js
+++ b/src/components/accordions.js
@@ -58,7 +58,7 @@ export default [
   },
   {
     name: 'Design',
-    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width'],
+    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode'],
     open: false,
   },
   {
diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index bc08411fd..f71176063 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -73,7 +73,6 @@
     "variableStore",
     "dataSelectionOptions",
     "singleField"
-
   ];
   export default {
     components: {
diff --git a/src/components/inspector/collection-designer-mode.vue b/src/components/inspector/collection-designer-mode.vue
new file mode 100644
index 000000000..fc198b6b0
--- /dev/null
+++ b/src/components/inspector/collection-designer-mode.vue
@@ -0,0 +1,68 @@
+<template>
+    <div>
+      <div>
+        <label for="collectiondesigner">{{ $t("Table Style") }}</label>
+        <b-form-select
+          id="collectiondesigner"
+          v-model="designerOptions"
+          :options="designerListOptions"
+          data-cy="inspector-collection-designer-model"
+        />
+      </div>
+      <div class="mt-2" v-if="designerOptions === 'Modern'">
+        <p>Aqui diseno Modern</p>
+      </div>
+    </div>
+  </template>
+  <script>
+
+  import { cloneDeep } from "lodash";
+
+  const CONFIG_FIELDS = [
+    "designerOptions"
+  ];
+  export default {
+    props: ["value", "screenType"],
+    data() {
+      return {
+        fields: [],
+        designerOptions: "Classic",
+        designerListOptions: [
+        {
+          text: this.$t('Classic'),
+          value: 'Classic',
+        },
+        {
+          text: this.$t('Modern'),
+          value: 'Modern',
+        },
+      ],
+      };
+    },
+    computed: {
+      options() {
+        return Object.fromEntries(
+          CONFIG_FIELDS.map((field) => [field, this[field]])
+        );
+      }
+    },
+    watch: {
+      value: {
+        handler(value) {
+          if (!value) {
+            return;
+          }
+          CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+        },
+        immediate: true
+      },
+      options: {
+        handler() {
+          this.$emit("input", this.options);
+          this.$root.$emit("style-mode", this.options.designerOptions);
+        },
+        deep: true
+      },
+    },
+  };
+  </script>
diff --git a/src/components/inspector/index.js b/src/components/inspector/index.js
index b393c8bf3..afe5c2922 100644
--- a/src/components/inspector/index.js
+++ b/src/components/inspector/index.js
@@ -2,7 +2,9 @@ export { default as CollectionSelectList } from "./collection-select-list.vue";
 export { default as CollectionRecordsList } from "./collection-records-list.vue";
 export { default as collectionDataSource } from "./collection-data-source.vue";
 export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
+export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
 export { default as ColorSelect } from "./color-select.vue";
+export { default as ColorSelectRecord } from "./color-select.vue";
 export { default as ColumnSetup } from "./column-setup.vue";
 export { default as ContainerColumns } from "./container-columns.vue";
 export { default as DataMapping } from "./data-mapping.vue";
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 2b230880a..6c2592b0a 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -241,7 +241,8 @@ export default {
     "formWatchers",
     "_perPage",
     "source",
-    "paginationOption"
+    "paginationOption",
+    "designerMode"
   ],
   data() {
     return {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index d931eae4c..3614eff24 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -330,7 +330,7 @@
               v-model="accordion.open"
             >
               <component
-                v-if="shouldShow(item)"
+                v-if="shouldShow(item, accordion)"
                 :is="item.type"
                 v-for="(item, index) in getInspectorFields(accordion)"
                 :key="index"
@@ -632,7 +632,9 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
-      enableOption: true
+      enableOption: true,
+      enableDesignOption: true,
+      styleMode: null
     };
   },
   computed: {
@@ -779,10 +781,13 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
+    this.$root.$on("style-mode", (mode) => {
+      this.styleMode = mode;
+    });
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
-    shouldShow(item) {
+    shouldShow(item, accordion) {
       const sourceOptions = this.inspection.config[item.field]?.sourceOptions;
 
       if (sourceOptions === 'Variable') {
@@ -794,6 +799,18 @@ export default {
         this.enableOption = false;
       }
 
+      if(this.styleMode === "Modern") {
+        this.enableDesignOption = false;
+      } else {
+        this.enableDesignOption = true;
+      }
+
+      if(accordion.name === "Design") {
+        if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
+          return false;
+        }
+      }
+
       return !(item.if === "hideControl" && this.enableOption === false);
     },
     isCurrentPageEmpty(currentPage) {
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 509a3af38..3c2b8e07c 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -29,6 +29,8 @@ import LinkButton from "./components/renderer/link-button.vue";
 import {
   bgcolorProperty,
   colorProperty,
+  bgcolorPropertyRecord,
+  colorPropertyRecord,
   keyNameProperty,
   javascriptReservedKeywords,
   labelProperty,
@@ -555,8 +557,16 @@ export default [
           },
           if: 'hideControl'
         },
-        colorProperty,
-        bgcolorProperty,
+        {
+          type: 'collectionDesignerMode',
+          field: 'designerMode',
+          config: {
+            label: 'Table Style',
+            helper: ''
+          }
+        },
+        colorPropertyRecord,
+        bgcolorPropertyRecord,
       ],
     },
   },
diff --git a/src/form-control-common-properties.js b/src/form-control-common-properties.js
index 50a7463e3..d76455341 100644
--- a/src/form-control-common-properties.js
+++ b/src/form-control-common-properties.js
@@ -44,6 +44,49 @@ export const bgcolorProperty = {
   },
 };
 
+export const bgcolorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'bgcolor',
+  config: {
+    label: 'Background Color',
+    helper: 'Set the element\'s background color',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-danger',
+        content: 'danger',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-info',
+        content: 'info',
+      },
+      {
+        value: 'alert alert-light',
+        content: 'light',
+      },
+      {
+        value: 'alert alert-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 export const colorProperty = {
   type: 'ColorSelect',
   field: 'color',
@@ -87,6 +130,49 @@ export const colorProperty = {
   },
 };
 
+export const colorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'color',
+  config: {
+    label: 'Text Color',
+    helper: 'Set the element\'s text color',
+    options: [
+      {
+        value: 'text-primary',
+        content: 'primary',
+      },
+      {
+        value: 'text-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'text-success',
+        content: 'success',
+      },
+      {
+        value: 'text-danger',
+        content: 'danger',
+      },
+      {
+        value: 'text-warning',
+        content: 'warning',
+      },
+      {
+        value: 'text-info',
+        content: 'info',
+      },
+      {
+        value: 'text-light',
+        content: 'light',
+      },
+      {
+        value: 'text-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 // Ref https://mathiasbynens.be/notes/javascript-identifiers
 export const javascriptReservedKeywords = 'null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false';
 

From 1679dccdfc28cc9551ea6e98238aed5f814e3f45 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 11 Oct 2024 16:01:11 -0400
Subject: [PATCH 02/13] Saving progress 2, row highlight, b-table with border
 new icons

---
 src/assets/Shape.svg                          |   3 +
 src/assets/pencil-square.svg                  |   3 +
 src/components/accordions.js                  |   2 +-
 src/components/index.js                       |   1 +
 .../inspector/collection-designer-mode.vue    |   2 +-
 .../inspector/color-select-modern.vue         | 202 ++++++++++++++++++
 src/components/inspector/index.js             |   1 +
 src/components/renderer/form-record-list.vue  | 106 ++++++++-
 src/components/vue-form-builder.vue           |   3 +
 src/form-builder-controls.js                  |   2 +
 src/form-control-common-properties.js         |  27 +++
 src/mixins/HasColorProperty.js                |   1 +
 12 files changed, 343 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/Shape.svg
 create mode 100644 src/assets/pencil-square.svg
 create mode 100644 src/components/inspector/color-select-modern.vue

diff --git a/src/assets/Shape.svg b/src/assets/Shape.svg
new file mode 100644
index 000000000..7a1fa990e
--- /dev/null
+++ b/src/assets/Shape.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2837 6.5L9.99519 14M6.00481 14L5.71635 6.5M14.023 3.82547C14.308 3.86851 14.592 3.91456 14.875 3.96358M14.023 3.82547L13.1332 15.3938C13.058 16.3707 12.2434 17.125 11.2637 17.125H4.73631C3.75655 17.125 2.94198 16.3707 2.86683 15.3938L1.97696 3.82547M14.023 3.82547C13.0677 3.6812 12.1013 3.57071 11.125 3.49527M1.125 3.96358C1.40798 3.91456 1.69198 3.86851 1.97696 3.82547M1.97696 3.82547C2.93231 3.6812 3.89874 3.57071 4.875 3.49527M11.125 3.49527V2.73182C11.125 1.74902 10.3661 0.928526 9.38382 0.897103C8.92435 0.882405 8.46304 0.875 8 0.875C7.53696 0.875 7.07565 0.882405 6.61618 0.897103C5.63388 0.928526 4.875 1.74902 4.875 2.73182V3.49527M11.125 3.49527C10.0938 3.41558 9.05164 3.375 8 3.375C6.94836 3.375 5.9062 3.41558 4.875 3.49527" stroke="#596372" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/pencil-square.svg b/src/assets/pencil-square.svg
new file mode 100644
index 000000000..6f33e3e3b
--- /dev/null
+++ b/src/assets/pencil-square.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0514 3.73889L15.4576 2.33265C16.0678 1.72245 17.0572 1.72245 17.6674 2.33265C18.2775 2.94284 18.2775 3.93216 17.6674 4.54235L8.81849 13.3912C8.37792 13.8318 7.83453 14.1556 7.23741 14.3335L5 15L5.66648 12.7626C5.84435 12.1655 6.1682 11.6221 6.60877 11.1815L14.0514 3.73889ZM14.0514 3.73889L16.25 5.93749M15 11.6667V15.625C15 16.6605 14.1605 17.5 13.125 17.5H4.375C3.33947 17.5 2.5 16.6605 2.5 15.625V6.87499C2.5 5.83946 3.33947 4.99999 4.375 4.99999H8.33333" stroke="#596372" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/accordions.js b/src/components/accordions.js
index 0c3003931..2339e07be 100644
--- a/src/components/accordions.js
+++ b/src/components/accordions.js
@@ -58,7 +58,7 @@ export default [
   },
   {
     name: 'Design',
-    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode'],
+    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
     open: false,
   },
   {
diff --git a/src/components/index.js b/src/components/index.js
index 8f9d3fd0e..6138371fb 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -57,6 +57,7 @@ const rendererComponents = {
 };
 export {default as globalProperties, formTypes} from "../global-properties";
 export {
+  bgcolorModern,
   bgcolorProperty,
   colorProperty,
   javascriptReservedKeywords,
diff --git a/src/components/inspector/collection-designer-mode.vue b/src/components/inspector/collection-designer-mode.vue
index fc198b6b0..008281d20 100644
--- a/src/components/inspector/collection-designer-mode.vue
+++ b/src/components/inspector/collection-designer-mode.vue
@@ -10,7 +10,7 @@
         />
       </div>
       <div class="mt-2" v-if="designerOptions === 'Modern'">
-        <p>Aqui diseno Modern</p>
+        <!-- <p>Aqui diseno Modern</p> -->
       </div>
     </div>
   </template>
diff --git a/src/components/inspector/color-select-modern.vue b/src/components/inspector/color-select-modern.vue
new file mode 100644
index 000000000..c397c3001
--- /dev/null
+++ b/src/components/inspector/color-select-modern.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="form-group">
+    <div>
+      <b-button-toolbar>
+        <b-button-group size="lg">
+          <b-button
+            v-for="option in options"
+            :key="option.value"
+            size="sm"
+            variant="outline-light"
+            class="color-option"
+            :class="['bg-' + parsedColor(option.value)]"
+            :title="option.content"
+          >
+            <i
+              class="fas fa-check"
+              :class="[
+                option.value === value
+                  ? 'text-light'
+                  : 'text-' + parsedColor(option.value)
+              ]"
+              @click="selectColor(option.value)"
+            />
+          </b-button>
+        </b-button-group>
+      </b-button-toolbar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    /**
+     * The label for the color select
+     */
+    label: {},
+    /**
+     * The value of the color select. eg. `alert alert-success`
+     */
+    value: {},
+    /**
+     * The helper text for the color select (not visible yet)
+     */
+     helper: {},
+    /**
+     * The options for the color select
+     */
+    options: {},
+  },
+  data() {
+    return {
+      newColor: ""
+    };
+  },
+  computed: {
+    hasColor() {
+      return Boolean(this.value);
+    }
+  },
+  methods: {
+    emitChanges(value) {
+      this.$emit("input", value);
+      this.$emit("update-state");
+    },
+    checkColor() {
+      if (this.hasColor) {
+        this.emitChanges("");
+      }
+    },
+    selectColor(color) {
+      this.emitChanges(color);
+    },
+    parsedColor(color) {
+      return color.split("-")[1];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  height: 4em;
+  text-align: center;
+  overflow: hidden;
+}
+.color-option {
+  left: -8px;
+  border-radius: 4px;
+  width: 48px; /* Ajusta el ancho del botón */
+  height: 48px; /* Ajusta la altura del botón */
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  }
+</style>
+
+<!-- <template>
+  <div class="form-group">
+    <div>
+      <b-button-toolbar>
+        <b-button-group size="sm">
+          <b-button
+            v-for="option in options"
+            :key="option.value"
+            size="sm"
+            variant="outline-light"
+            class="color-option"
+            :class="['bg-' + parsedColor(option.value)]"
+            :title="option.content"
+            @click="selectColor(option.value)"
+          >
+            <div class="color-check">
+              <i
+                class="fas fa-check"
+                :class="[
+                  option.value === value
+                    ? 'text-light'
+                    : 'text-' + parsedColor(option.value)
+                ]"
+              />
+            </div>
+          </b-button>
+        </b-button-group>
+      </b-button-toolbar>
+    </div>
+    <p class="helper-text" v-if="helper">{{ helper }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    label: {},
+    value: {},
+    helper: {},
+    options: {},
+  },
+  data() {
+    return {
+      newColor: ""
+    };
+  },
+  computed: {
+    hasColor() {
+      return Boolean(this.value);
+    }
+  },
+  methods: {
+    emitChanges(value) {
+      this.$emit("input", value);
+      this.$emit("update-state");
+    },
+    selectColor(color) {
+      this.emitChanges(color);
+    },
+    parsedColor(color) {
+      return color.split("-")[1];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.color-option {
+  left: -8px;
+  border-radius: 4px;
+  width: 48px; /* Ajusta el ancho del botón */
+  height: 48px; /* Ajusta la altura del botón */
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative; /* Para el icono de verificación */
+
+  &.bg-blue { background-color: #5297FE; }
+  &.bg-green { background-color: #6BD17C; }
+  &.bg-orange { background-color: #FFAB00; }
+  &.bg-gray { background-color: #9FA8B5; }
+
+  .color-check {
+    position: absolute;
+    visibility: hidden; /* Ocultar por defecto */
+  }
+
+  &:hover .color-check {
+    visibility: visible; /* Mostrar al pasar el mouse */
+  }
+}
+
+.helper-text {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+</style> -->
diff --git a/src/components/inspector/index.js b/src/components/inspector/index.js
index afe5c2922..e06839e08 100644
--- a/src/components/inspector/index.js
+++ b/src/components/inspector/index.js
@@ -5,6 +5,7 @@ export { default as CollectionDisplayMode } from "./collection-display-mode.vue"
 export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
 export { default as ColorSelect } from "./color-select.vue";
 export { default as ColorSelectRecord } from "./color-select.vue";
+export { default as ColorSelectModern } from "./color-select-modern.vue";
 export { default as ColumnSetup } from "./column-setup.vue";
 export { default as ContainerColumns } from "./container-columns.vue";
 export { default as DataMapping } from "./data-mapping.vue";
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 6c2592b0a..472cc85b2 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -21,6 +21,7 @@
     <template v-else>
         <b-table
           ref="vuetable"
+          :class="{ 'record-list-table': styleMode === 'Modern' }"
           :per-page="perPage"
           :data-manager="dataManager"
           :fields="tableFields"
@@ -32,7 +33,9 @@
           :empty-text="$t('No Data Available')"
           :current-page="currentPage"
           data-cy="table"
+          :tbody-tr-class="rowClass"
         >
+        
           <!-- Slot header for checkbox (Select All) -->
           <template #head(checkbox)="data">
             <b-form-checkbox
@@ -61,7 +64,7 @@
           </template>
 
           <template #cell()="{ index, field, item }">
-
+            
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
                 mustache(field.key, item)
@@ -86,20 +89,30 @@
                 aria-label="Actions"
               >
                 <button
-                  class="btn btn-primary"
+                :class="{
+                    btn: true,
+                    'btn-primary': styleMode === 'Classic'
+                  }"
                   :title="$t('Edit')"
                   data-cy="edit-row"
                   @click="showEditForm(index, item.row_id)"
                 >
-                  <i class="fas fa-edit" />
+
+                  <i v-if="styleMode === 'Classic'" class="fas fa-edit"></i>
+                  <img v-else src="../../assets/pencil-square.svg" alt="edit" />
                 </button>
+
                 <button
-                  class="btn btn-danger"
+                  :class="{
+                    btn: true,
+                    'btn-danger': styleMode === 'Classic'
+                    }"
                   :title="$t('Delete')"
                   data-cy="remove-row"
                   @click="showDeleteConfirmation(index, item.row_id)"
                 >
-                  <i class="fas fa-trash-alt" />
+                  <i v-if="styleMode === 'Classic'" class="fas fa-trash-alt" />
+                  <img v-else src="../../assets/Shape.svg" alt="delete" />
                 </button>
               </div>
             </div>
@@ -115,6 +128,7 @@
         aria-controls="vuetable"
         @change="onChangePage"
       />
+
     </template>
 
     <b-modal
@@ -279,7 +293,8 @@ export default {
       selectedRows: [],
       selectedIndex: null, 
       rows: [],
-      selectAll: false
+      selectAll: false,
+      styleMode: "Classic"
     };
   },
   computed: {
@@ -421,9 +436,19 @@ export default {
       this.onCollectionChange(this.source?.collectionFields?.collectionId, this.source?.collectionFields?.pmql);
     }
     
+    this.setStyleMode(this.designerMode?.designerOptions);
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    rowClass(item) {
+      return this.isRowSelected(item) ? 'sel-row' : '';
+    },
+    isRowSelected(item) {
+      return this.selectedRows.includes(item) || this.selectedRow === item;
+    },
+    setStyleMode(value) {
+      this.styleMode = value ? value : "Classic";
+    },
     selectAllRows() {
       if (this.allRowsSelected) {
         const updatedRows = this.tableData.data.map((item, index) => {
@@ -775,8 +800,73 @@ export default {
 };
 </script>
 
-<style>
-.table td.table-column {
+<style lang="scss">
+
+.sel-row {
+  background-color: #e0f7e0;
+}
+
+.record-list-table {
   max-width: 300px;
+  border-radius: 8px;
+  border: none; 
+  overflow: hidden;
+
+  /* Cabecera */
+  thead {
+    background-color: #e0f7e0; /* Color de fondo */
+    border: none;
+
+    th {
+      border: 1px solid #c0e0c0; /* Color de borde más oscuro */
+      font-weight: bold;
+      color: #333;
+      padding: 10px;
+
+      &:first-child {
+        border-top-left-radius: 8px; /* Esquina superior izquierda redondeada */
+      }
+
+      &:last-child {
+        border-top-right-radius: 8px; /* Esquina superior derecha redondeada */
+      }
+    }
+  }
+
+  /* Cuerpo de la tabla */
+  tbody {
+    border-left: 1px solid #d4f1d4;
+    border-right: 1px solid #d4f1d4;
+    border-bottom: 1px solid #d4f1d4;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+
+    tr {
+      td {
+        padding: 10px;
+        border-top: 1px solid #d4f1d4; /* Borde superior de las celdas */
+
+        &:first-child {
+          border-left: 1px solid #d4f1d4; /* Borde izquierdo de la primera columna */
+        }
+
+        &:last-child {
+          border-right: 1px solid #d4f1d4; /* Borde derecho de la última columna */
+        }
+      }
+    }
+  }
+
+  /* Ajuste para cubrir las esquinas inferiores */
+  tbody tr:last-child td:first-child {
+    border-bottom-left-radius: 8px;
+    overflow: hidden;
+  }
+  
+  tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 8px;
+    overflow: hidden;
+  }
 }
+
 </style>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 3614eff24..c7e261501 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -809,6 +809,9 @@ export default {
         if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
           return false;
         }
+        if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
+          return false;
+        }
       }
 
       return !(item.if === "hideControl" && this.enableOption === false);
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 3c2b8e07c..ef2815343 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -27,6 +27,7 @@ import { dataSourceValues } from '@/components/inspector/data-source-types';
 import LinkButton from "./components/renderer/link-button.vue";
 
 import {
+  bgcolorModern,
   bgcolorProperty,
   colorProperty,
   bgcolorPropertyRecord,
@@ -567,6 +568,7 @@ export default [
         },
         colorPropertyRecord,
         bgcolorPropertyRecord,
+        bgcolorModern
       ],
     },
   },
diff --git a/src/form-control-common-properties.js b/src/form-control-common-properties.js
index d76455341..8cdaef1ed 100644
--- a/src/form-control-common-properties.js
+++ b/src/form-control-common-properties.js
@@ -1,6 +1,33 @@
 import Tooltip from './components/inspector/tooltip';
 import DeviceVisibility from './components/inspector/device-visibility';
 
+export const bgcolorModern = {
+  type: 'ColorSelectModern',
+  field: 'bgcolormodern',
+  config: {
+    label: '',
+    helper: '',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+    ],
+  },
+};
+
 export const bgcolorProperty = {
   type: 'ColorSelect',
   field: 'bgcolor',
diff --git a/src/mixins/HasColorProperty.js b/src/mixins/HasColorProperty.js
index 469c8d026..b5fe14b9e 100644
--- a/src/mixins/HasColorProperty.js
+++ b/src/mixins/HasColorProperty.js
@@ -5,6 +5,7 @@ export default {
       const css = [];
       element.config.bgcolor ? css.push(element.config.bgcolor) : null;
       element.config.color ? css.push(element.config.color) : null;
+      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
       return css.join(' ');
     },
   },

From 2f15f74550b630ccd244d0cf1682ff496c80d774 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 11 Oct 2024 23:06:44 -0400
Subject: [PATCH 03/13] saving progress delete popover ok

---
 src/components/renderer/form-record-list.vue | 83 ++++++++++++++++----
 1 file changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 472cc85b2..154b49193 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -106,17 +106,29 @@
                   :class="{
                     btn: true,
                     'btn-danger': styleMode === 'Classic'
-                    }"
+                  }"
                   :title="$t('Delete')"
                   data-cy="remove-row"
-                  @click="showDeleteConfirmation(index, item.row_id)"
+                  popover="manual"
+                  @click="styleMode === 'Modern' 
+                  ? togglePopover(index, $event, item.row_id) 
+                  : showDeleteConfirmation(index, item.row_id)"
+                  ref="deleteButton"
                 >
                   <i v-if="styleMode === 'Classic'" class="fas fa-trash-alt" />
                   <img v-else src="../../assets/Shape.svg" alt="delete" />
                 </button>
+
+                <div v-show="isPopoverVisible === index" class="popover-content">
+                  <p>Are you sure you want to delete it?</p>
+                  <button class="btn btn-light" @click="hidePopover">CANCEL</button>
+                  <button class="btn btn-danger" @click="popover_remove()">DELETE</button>
+                </div>
+
               </div>
             </div>
           </template>
+         
         </b-table>
       <b-pagination
         v-if="tableData.total > perPage && (perPage !== 0)"
@@ -213,6 +225,7 @@
     >
       <p>{{ $t("The form to be displayed is not assigned.") }}</p>
     </b-modal>
+    
     <div v-if="editable && selfReferenced" class="alert alert-danger">
       {{
         $t(
@@ -294,7 +307,9 @@ export default {
       selectedIndex: null, 
       rows: [],
       selectAll: false,
-      styleMode: "Classic"
+      styleMode: "Classic",
+      isPopoverVisible: null,
+      popoverPosition: { top: '0px', left: '0px' },
     };
   },
   computed: {
@@ -440,6 +455,24 @@ export default {
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    togglePopover(index, event, rowId) {
+      this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
+      this.isPopoverVisible = this.isPopoverVisible === index ? null : index;
+      if (this.isPopoverVisible !== null) {
+        const rect = event.target.getBoundingClientRect();
+        this.popoverPosition = {
+          top: `${rect.bottom + window.scrollY}px`,
+          left: `${rect.left + window.scrollX}px`
+        };
+      }
+    },
+    hidePopover() {
+      this.isPopoverVisible = null;
+    },
+    popover_remove() {
+      this.remove();
+      this.hidePopover();
+    },
     rowClass(item) {
       return this.isRowSelected(item) ? 'sel-row' : '';
     },
@@ -748,7 +781,10 @@ export default {
       });
     },
     showDeleteConfirmation(index, rowId) {
+      console.log("rowId: ", rowId);
+      console.log("this.tableData.data: ", this.tableData.data);
       this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
+      console.log("this.deleteIndex: ", this.deleteIndex);
       this.$refs.deleteModal.show();
     },
     downloadFile(rowData, rowField, rowIndex) {
@@ -782,6 +818,7 @@ export default {
       });
     },
     remove() {
+      console.log("En remove: ", this.deleteIndex);
       // Add the item to our model and emit change
       // @todo Also check that value is an array type, if not, reset it to an array
       const data = this.tableData.data
@@ -795,45 +832,62 @@ export default {
       // Emit the newly updated data model
       this.$emit("input", data);
       this.$root.$emit("removed-record", this, recordData);
-    }
+    },
   }
 };
 </script>
 
 <style lang="scss">
 
+.popover-content {
+  background-color: white;
+  border: 1px solid #ddd;
+  padding: 10px;
+  border-radius: 5px;
+  position: fixed;
+  z-index: 1000;
+  width: 285px;
+  text-align: center;
+  margin-top: 30px;
+}
+.popover-content p {
+  margin: 0 0 10px;
+}
+.popover-content .btn-light {
+  margin-right: 5px;
+}
 .sel-row {
   background-color: #e0f7e0;
 }
 
 .record-list-table {
-  max-width: 300px;
+
   border-radius: 8px;
   border: none; 
   overflow: hidden;
 
-  /* Cabecera */
+  /* Header */
   thead {
-    background-color: #e0f7e0; /* Color de fondo */
+    background-color: #e0f7e0;
     border: none;
 
     th {
-      border: 1px solid #c0e0c0; /* Color de borde más oscuro */
+      border: 1px solid #c0e0c0; /* border dark color */
       font-weight: bold;
       color: #333;
       padding: 10px;
 
       &:first-child {
-        border-top-left-radius: 8px; /* Esquina superior izquierda redondeada */
+        border-top-left-radius: 8px;
       }
 
       &:last-child {
-        border-top-right-radius: 8px; /* Esquina superior derecha redondeada */
+        border-top-right-radius: 8px;
       }
     }
   }
 
-  /* Cuerpo de la tabla */
+  /* Body */
   tbody {
     border-left: 1px solid #d4f1d4;
     border-right: 1px solid #d4f1d4;
@@ -844,20 +898,19 @@ export default {
     tr {
       td {
         padding: 10px;
-        border-top: 1px solid #d4f1d4; /* Borde superior de las celdas */
+        border-top: 1px solid #d4f1d4;
 
         &:first-child {
-          border-left: 1px solid #d4f1d4; /* Borde izquierdo de la primera columna */
+          border-left: 1px solid #d4f1d4;
         }
 
         &:last-child {
-          border-right: 1px solid #d4f1d4; /* Borde derecho de la última columna */
+          border-right: 1px solid #d4f1d4;
         }
       }
     }
   }
 
-  /* Ajuste para cubrir las esquinas inferiores */
   tbody tr:last-child td:first-child {
     border-bottom-left-radius: 8px;
     overflow: hidden;

From 680c5144e829a543e8b04300c8b38eb9b781597a Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 14 Oct 2024 10:42:25 -0400
Subject: [PATCH 04/13] ready for PR

---
 .../inspector/collection-designer-mode.vue    |   3 -
 src/components/renderer/form-record-list.vue  | 130 +++++++++---------
 src/form-builder-controls.js                  |   3 +-
 3 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/components/inspector/collection-designer-mode.vue b/src/components/inspector/collection-designer-mode.vue
index 008281d20..881f1ffb8 100644
--- a/src/components/inspector/collection-designer-mode.vue
+++ b/src/components/inspector/collection-designer-mode.vue
@@ -9,9 +9,6 @@
           data-cy="inspector-collection-designer-model"
         />
       </div>
-      <div class="mt-2" v-if="designerOptions === 'Modern'">
-        <!-- <p>Aqui diseno Modern</p> -->
-      </div>
     </div>
   </template>
   <script>
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 154b49193..8b99aa32c 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -4,7 +4,7 @@
       <div class="col">
         <h4>{{ label }}</h4>
       </div>
-      <div class="col text-right">
+      <div v-if="styleMode === 'Classic'" class="col text-right">
         <button
           v-if="editable && !selfReferenced"
           class="btn btn-primary"
@@ -130,17 +130,30 @@
           </template>
          
         </b-table>
-      <b-pagination
-        v-if="tableData.total > perPage && (perPage !== 0)"
-        v-model="currentPage"
-        data-cy="table-pagination"
-        :total-rows="tableData.total"
-        :per-page="perPage"
-        :aria-label="$t('Pagination')"
-        aria-controls="vuetable"
-        @change="onChangePage"
-      />
-
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="col text-left">
+            <b-pagination
+              v-if="tableData.total > perPage && (perPage !== 0)"
+              v-model="currentPage"
+              data-cy="table-pagination"
+              :total-rows="tableData.total"
+              :per-page="perPage"
+              :aria-label="$t('Pagination')"
+              aria-controls="vuetable"
+              @change="onChangePage"
+            />
+          </div>
+          <div v-if="styleMode === 'Modern'" class="col text-right">
+            <button
+              v-if="editable && !selfReferenced"
+              class="btn btn-link text-primary class-button-modern"
+              data-cy="add-row"
+              @click="showAddForm"
+            >
+              <span class="mr-1">+</span> {{ $t("Add") }}
+            </button>
+          </div>
+        </div>
     </template>
 
     <b-modal
@@ -857,68 +870,59 @@ export default {
   margin-right: 5px;
 }
 .sel-row {
-  background-color: #e0f7e0;
+  background-color: #81AFFF;
+}
+.class-button-modern {
+  font-size: 14px; 
+  font-weight: bold; 
+  text-decoration: none;
 }
 
 .record-list-table {
-
-  border-radius: 8px;
-  border: none; 
-  overflow: hidden;
-
-  /* Header */
-  thead {
-    background-color: #e0f7e0;
-    border: none;
-
-    th {
-      border: 1px solid #c0e0c0; /* border dark color */
-      font-weight: bold;
-      color: #333;
-      padding: 10px;
-
-      &:first-child {
-        border-top-left-radius: 8px;
-      }
-
-      &:last-child {
-        border-top-right-radius: 8px;
-      }
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead th {
+    background-color: #f5f5f5;
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    &:first-child {
+      border-top-left-radius: 10px;
+      border-left: 1px solid #e0e0e0;
+    }
+    &:last-child {
+      border-top-right-radius: 10px;
+      border-right: 1px solid #e0e0e0;
     }
   }
 
-  /* Body */
-  tbody {
-    border-left: 1px solid #d4f1d4;
-    border-right: 1px solid #d4f1d4;
-    border-bottom: 1px solid #d4f1d4;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-
-    tr {
-      td {
-        padding: 10px;
-        border-top: 1px solid #d4f1d4;
-
-        &:first-child {
-          border-left: 1px solid #d4f1d4;
-        }
+  tbody tr {
+    td {
+      border-bottom: 1px solid #e0e0e0;
+    }
+    
+    td:first-child {
+      border-left: 1px solid #e0e0e0;
+    }
 
-        &:last-child {
-          border-right: 1px solid #d4f1d4;
-        }
+    td:last-child {
+      border-right: 1px solid #e0e0e0;
+    }
+
+    &:last-child {
+      td:first-child {
+        border-bottom-left-radius: 10px;
+      }
+      td:last-child {
+        border-bottom-right-radius: 10px;
       }
     }
   }
 
-  tbody tr:last-child td:first-child {
-    border-bottom-left-radius: 8px;
-    overflow: hidden;
-  }
-  
-  tbody tr:last-child td:last-child {
-    border-bottom-right-radius: 8px;
-    overflow: hidden;
+  th:not(:first-child):not(:last-child),
+  td:not(:first-child):not(:last-child) {
+    border-left: none;
+    border-right: none;
   }
 }
 
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index ef2815343..1c4793ce5 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -567,8 +567,7 @@ export default [
           }
         },
         colorPropertyRecord,
-        bgcolorPropertyRecord,
-        bgcolorModern
+        bgcolorPropertyRecord
       ],
     },
   },

From 3e6757e02c33ae5bb2b06ca9775b57676f00e257 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Mon, 14 Oct 2024 11:30:39 -0400
Subject: [PATCH 05/13] Removing unused code

---
 src/components/vue-form-builder.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index f4aeacd59..3e5868492 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -903,9 +903,6 @@ export default {
         if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
           return false;
         }
-        if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
-          return false;
-        }
       }
 
       return !(item.if === "hideControl" && this.enableOption === false);

From 0b4049d6067441190a1e586cd10f0db74b5a1bec Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 15 Oct 2024 11:19:26 -0400
Subject: [PATCH 06/13] Apllying Modern color palette

---
 .../inspector/color-select-modern.vue         | 105 +-----------------
 src/components/renderer/form-record-list.vue  |  93 +++++++++++++---
 src/components/vue-form-builder.vue           |   7 +-
 src/form-builder-controls.js                  |  98 ++++------------
 src/mixins/HasColorProperty.js                |   6 +-
 5 files changed, 114 insertions(+), 195 deletions(-)

diff --git a/src/components/inspector/color-select-modern.vue b/src/components/inspector/color-select-modern.vue
index c397c3001..b80289bed 100644
--- a/src/components/inspector/color-select-modern.vue
+++ b/src/components/inspector/color-select-modern.vue
@@ -90,8 +90,8 @@ export default {
 .color-option {
   left: -8px;
   border-radius: 4px;
-  width: 48px; /* Ajusta el ancho del botón */
-  height: 48px; /* Ajusta la altura del botón */
+  width: 48px;
+  height: 48px;
   margin-right: 15px;
   display: flex;
   align-items: center;
@@ -99,104 +99,3 @@ export default {
   position: relative;
   }
 </style>
-
-<!-- <template>
-  <div class="form-group">
-    <div>
-      <b-button-toolbar>
-        <b-button-group size="sm">
-          <b-button
-            v-for="option in options"
-            :key="option.value"
-            size="sm"
-            variant="outline-light"
-            class="color-option"
-            :class="['bg-' + parsedColor(option.value)]"
-            :title="option.content"
-            @click="selectColor(option.value)"
-          >
-            <div class="color-check">
-              <i
-                class="fas fa-check"
-                :class="[
-                  option.value === value
-                    ? 'text-light'
-                    : 'text-' + parsedColor(option.value)
-                ]"
-              />
-            </div>
-          </b-button>
-        </b-button-group>
-      </b-button-toolbar>
-    </div>
-    <p class="helper-text" v-if="helper">{{ helper }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {
-    label: {},
-    value: {},
-    helper: {},
-    options: {},
-  },
-  data() {
-    return {
-      newColor: ""
-    };
-  },
-  computed: {
-    hasColor() {
-      return Boolean(this.value);
-    }
-  },
-  methods: {
-    emitChanges(value) {
-      this.$emit("input", value);
-      this.$emit("update-state");
-    },
-    selectColor(color) {
-      this.emitChanges(color);
-    },
-    parsedColor(color) {
-      return color.split("-")[1];
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.color-option {
-  left: -8px;
-  border-radius: 4px;
-  width: 48px; /* Ajusta el ancho del botón */
-  height: 48px; /* Ajusta la altura del botón */
-  margin-right: 15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative; /* Para el icono de verificación */
-
-  &.bg-blue { background-color: #5297FE; }
-  &.bg-green { background-color: #6BD17C; }
-  &.bg-orange { background-color: #FFAB00; }
-  &.bg-gray { background-color: #9FA8B5; }
-
-  .color-check {
-    position: absolute;
-    visibility: hidden; /* Ocultar por defecto */
-  }
-
-  &:hover .color-check {
-    visibility: visible; /* Mostrar al pasar el mouse */
-  }
-}
-
-.helper-text {
-  margin-top: 0.5rem;
-  font-size: 0.875rem;
-  color: #6c757d;
-}
-</style> -->
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 8b99aa32c..09fd851ce 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -21,7 +21,7 @@
     <template v-else>
         <b-table
           ref="vuetable"
-          :class="{ 'record-list-table': styleMode === 'Modern' }"
+          :class="tableClassModern"
           :per-page="perPage"
           :data-manager="dataManager"
           :fields="tableFields"
@@ -282,7 +282,8 @@ export default {
     "_perPage",
     "source",
     "paginationOption",
-    "designerMode"
+    "designerMode",
+    "bgcolormodern"
   ],
   data() {
     return {
@@ -322,10 +323,27 @@ export default {
       selectAll: false,
       styleMode: "Classic",
       isPopoverVisible: null,
-      popoverPosition: { top: '0px', left: '0px' },
+      popoverPosition: { top: '0px', left: '0px' }
     };
   },
   computed: {
+    tableClassModern() {
+      if (this.styleMode === 'Modern') {
+        switch (this.bgcolormodern) {
+          case 'alert alert-primary':
+            return 'record-list-table-primary';
+          case 'alert alert-success':
+            return 'record-list-table-success';
+          case 'alert alert-warning':
+            return 'record-list-table-warning';
+          case 'alert alert-secondary':
+            return 'record-list-table-secondary';
+          default:
+            return 'record-list-table-secondary';
+        }
+      }
+      return '';
+    },
     indeterminate() {
       return this.selectedRows.length > 0 && this.selectedRows.length < this.tableData.data.length;
     },
@@ -487,7 +505,24 @@ export default {
       this.hidePopover();
     },
     rowClass(item) {
-      return this.isRowSelected(item) ? 'sel-row' : '';
+      //return this.isRowSelected(item) ? 'sel-row' : '';
+      return this.isRowSelected(item) ? this.colorSelection(this.bgcolormodern) : '';
+    },
+    colorSelection(colormode) {
+      if (this.styleMode === 'Modern') {
+        switch (colormode) {
+          case 'alert alert-primary':
+            return 'sel-row-primary';
+          case 'alert alert-success':
+            return 'sel-row-success';
+          case 'alert alert-warning':
+            return 'sel-row-warning';
+          case 'alert alert-secondary':
+            return 'sel-row-secondary';
+          default:
+            return 'sel-row-secondary';
+        }
+      }
     },
     isRowSelected(item) {
       return this.selectedRows.includes(item) || this.selectedRow === item;
@@ -794,10 +829,7 @@ export default {
       });
     },
     showDeleteConfirmation(index, rowId) {
-      console.log("rowId: ", rowId);
-      console.log("this.tableData.data: ", this.tableData.data);
       this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
-      console.log("this.deleteIndex: ", this.deleteIndex);
       this.$refs.deleteModal.show();
     },
     downloadFile(rowData, rowField, rowIndex) {
@@ -831,7 +863,6 @@ export default {
       });
     },
     remove() {
-      console.log("En remove: ", this.deleteIndex);
       // Add the item to our model and emit change
       // @todo Also check that value is an array type, if not, reset it to an array
       const data = this.tableData.data
@@ -869,8 +900,17 @@ export default {
 .popover-content .btn-light {
   margin-right: 5px;
 }
-.sel-row {
-  background-color: #81AFFF;
+.sel-row-primary {
+  background-color: #66b2ff;
+}
+.sel-row-success {
+  background-color: #71d188;
+}
+.sel-row-warning {
+  background-color: #ffe27d;
+}
+.sel-row-secondary {
+  background-color: #b0b3b8;
 }
 .class-button-modern {
   font-size: 14px; 
@@ -878,12 +918,11 @@ export default {
   text-decoration: none;
 }
 
-.record-list-table {
+.record-list-table-base {
   border-collapse: separate;
   border-spacing: 0;
-
+ 
   thead th {
-    background-color: #f5f5f5;
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #e0e0e0;
     &:first-child {
@@ -926,4 +965,32 @@ export default {
   }
 }
 
+.record-list-table-primary {
+  @extend .record-list-table-base;
+  thead th {
+    background-color: #007bff;
+  }
+}
+
+.record-list-table-success {
+  @extend .record-list-table-base;
+  thead th {
+    background-color: #28a745;
+  }
+}
+
+.record-list-table-warning {
+  @extend .record-list-table-base;
+  thead th {
+    background-color: #ffc107;
+  }
+}
+
+.record-list-table-secondary {
+  @extend .record-list-table-base;
+  thead th {
+    background-color: #6c757d;
+  }
+}
+
 </style>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 3e5868492..f62a9ef0e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -245,7 +245,7 @@
                   v-model="element.items"
                   :validation-errors="validationErrors"
                   class="card-body"
-                  :class="elementCssClass(element)"
+                  :class="styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element)"
                   :selected="selected"
                   :config="element.config"
                   :ai-element="element"
@@ -299,7 +299,7 @@
                   :tabindex="element.config.interactive ? 0 : -1"
                   class="card-body m-0 pb-4 pt-4"
                   :class="[
-                    elementCssClass(element),
+                    styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
                   @input="
@@ -903,6 +903,9 @@ export default {
         if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
           return false;
         }
+        if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
+          return false;
+        }
       }
 
       return !(item.if === "hideControl" && this.enableOption === false);
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 197e67146..ef2815343 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -12,7 +12,6 @@ import FileDownload from './components/renderer/file-download';
 import FormListTable from './components/renderer/form-list-table';
 import FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
-import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -59,7 +58,7 @@ export default [
     rendererBinding: 'FormHtmlEditor',
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
-      order: 2.0,
+      order: 1.0,
       group: 'Content Fields',
       label: 'Rich Text',
       component: 'FormHtmlViewer',
@@ -101,7 +100,7 @@ export default [
     rendererBinding: 'FormMaskedInput',
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
-      order: 2.0,
+      order: 1.0,
       group: 'Input Fields',
       label: 'Line Input',
       component: 'FormInput',
@@ -132,7 +131,6 @@ export default [
       ],
     },
   },
-
   {
     editorComponent: FormTextArea,
     editorBinding: 'FormTextArea',
@@ -140,7 +138,7 @@ export default [
     rendererBinding: 'FormTextArea',
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
-      order: 5.0,
+      order: 4.0,
       group: 'Input Fields',
       label: 'Textarea',
       component: 'FormTextArea',
@@ -198,7 +196,7 @@ export default [
     rendererBinding: 'FormSelectList',
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
-      order: 3.0,
+      order: 2.0,
       group: 'Input Fields',
       label: 'Select List',
       component: 'FormSelectList',
@@ -253,7 +251,7 @@ export default [
     rendererBinding: 'FormCheckbox',
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
-      order: 7.0,
+      order: 6.0,
       group: 'Input Fields',
       label: 'Checkbox',
       component: 'FormCheckbox',
@@ -295,7 +293,7 @@ export default [
     rendererBinding: 'FormDatePicker',
     control: {
       popoverContent: "Collect a date or date/time",
-      order: 6.0,
+      order: 5.0,
       group: 'Input Fields',
       label: 'Date Picker',
       component: 'FormDatePicker',
@@ -349,7 +347,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add special buttons that link between subpages within this Form",
-      order: 2.0,
+      order: 1.0,
       group: 'Navigation',
       label: 'Page Navigation',
       component: 'FormButton',
@@ -384,7 +382,7 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
-      order: 3.0,
+      order: 2.0,
       group: 'Content Fields',
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
@@ -429,7 +427,7 @@ export default [
     rendererBinding: 'FormLoop',
     control: {
       popoverContent: "Add a repeatable section of content",
-      order: 6.0,
+      order: 5.0,
       group: 'Content Fields',
       label: 'Loop',
       component: 'FormLoop',
@@ -465,7 +463,7 @@ export default [
     rendererBinding: 'FormRecordList',
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
-      order: 5.0,
+      order: 4.0,
       group: 'Content Fields',
       label: 'Record List',
       component: 'FormRecordList',
@@ -569,7 +567,8 @@ export default [
           }
         },
         colorPropertyRecord,
-        bgcolorPropertyRecord
+        bgcolorPropertyRecord,
+        bgcolorModern
       ],
     },
   },
@@ -580,7 +579,7 @@ export default [
     rendererBinding: 'FormImage',
     control: {
       popoverContent: "Upload an image to your screen",
-      order: 4.0,
+      order: 3.0,
       group: 'Content Fields',
       label: 'Image',
       component: 'FormImage',
@@ -647,7 +646,7 @@ export default [
     rendererBinding: 'FormAvatar',
     control: {
       popoverContent: "User avatar",
-      order: 4.0,
+      order: 3.0,
       group: 'Dashboards',
       label: 'User Avatar',
       component: 'FormAvatar',
@@ -691,7 +690,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add an action to submit your form or update a field",
-      order: 4.0,
+      order: 3.0,
       group: 'Input Fields',
       label: 'Submit Button',
       component: 'FormButton',
@@ -752,7 +751,7 @@ export default [
     rendererBinding: 'FormNestedScreen',
     control: {
       popoverContent: "Add and reuse another Form within this Form",
-      order: 7.0,
+      order: 6.0,
       group: 'Content Fields',
       label: 'Nested Screen',
       component: 'FormNestedScreen',
@@ -787,7 +786,7 @@ export default [
     control: {
       group: "Files",
       popoverContent: "Collect files uploaded into the Form",
-      order: 2.0,
+      order: 1.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -839,7 +838,7 @@ export default [
     builderBinding: 'FileDownload',
     control: {
       popoverContent: "Offer a File download",
-      order: 3.0,
+      order: 2.0,
       group: "Files",
       label: 'File Download',
       component: 'FileDownload',
@@ -875,7 +874,7 @@ export default [
     builderBinding: 'BFormComponent',
     control: {
       popoverContent: "Add one of several Bootstrap Vue components",
-      order: 2.0,
+      order: 1.0,
       group: 'Advanced',
       label: 'Bootstrap Component',
       component: 'BFormComponent',
@@ -929,7 +928,7 @@ export default [
     builderBinding: 'BWrapperComponent',
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component",
-      order: 3.0,
+      order: 2.0,
       group: 'Advanced',
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
@@ -1028,7 +1027,7 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 7.0,
+      order: 6.0,
       group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
@@ -1059,7 +1058,7 @@ export default [
     control: {
       popoverContent: "Add a URL where this link should redirect",
       group: 'Content Fields',
-      order: 7.0,
+      order: 6.0,
       label: "Link URL",
       component: "LinkButton",
       "editor-component": "LinkButton",
@@ -1091,19 +1090,6 @@ export default [
       ]
     }
   },
-  {
-    control: {
-      popoverContent: "Drag and paste copied elements to your desired location.",
-      order: 1.0,
-      group: 'Clipboard',
-      label: 'Drag & Paste',
-      component: "Clipboard",
-      config: {
-        icon: 'fa fa-clipboard',
-      },
-      inspector: [],
-    },
-  },
   {
     editorComponent: FormCollectionRecordControl,
     editorBinding: 'FormCollectionRecordControl',
@@ -1150,45 +1136,5 @@ export default [
         },
       ],
     },
-  },
-  {
-    editorComponent: FormCollectionViewControl,
-    editorBinding: 'FormCollectionViewControl',
-    rendererComponent: FormCollectionViewControl,
-    rendererBinding: 'FormCollectionViewControl',
-    control: {
-      popoverContent: "Create a Collection View Control",
-      order: 7.0,
-      group: 'Content Fields',
-      label: 'Collection Record View',
-      component: 'FormCollectionViewControl',
-      'editor-component': 'FormCollectionViewControl',
-      'editor-control': 'FormCollectionViewControl',
-      config: {
-        name: 'Collection View Control',
-        icon: 'fas fa-database',
-        label: 'Collection View Control',
-      },
-      inspector: [
-        {
-          type: "collectionRecordsList",
-          field: "collection",
-          config: {
-            label: 'Collection Name',
-            helper: 'Select a collection',
-            value: '',
-          }
-        },
-        {
-          type: 'FormInput',
-          field: 'record',
-          config: {
-            label: 'Record ID',
-            helper: 'Supports Mustache Variable and the Collection Record',
-            value: '',
-          },
-        }
-      ],
-    },
   }
 ];
diff --git a/src/mixins/HasColorProperty.js b/src/mixins/HasColorProperty.js
index b5fe14b9e..14a41749b 100644
--- a/src/mixins/HasColorProperty.js
+++ b/src/mixins/HasColorProperty.js
@@ -5,9 +5,13 @@ export default {
       const css = [];
       element.config.bgcolor ? css.push(element.config.bgcolor) : null;
       element.config.color ? css.push(element.config.color) : null;
-      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
       return css.join(' ');
     },
+    elementCssClassModern(element) {
+      const css = [];
+      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
+      return css.join(' ');
+    }
   },
 };
 

From 4ebf0204b819f51357273a1a7fc31e37876087cd Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 15 Oct 2024 16:25:24 -0400
Subject: [PATCH 07/13] saving progress

---
 src/components/renderer/form-record-list.vue | 137 +++++++++++++++----
 1 file changed, 108 insertions(+), 29 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 09fd851ce..f4be6860b 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -505,24 +505,7 @@ export default {
       this.hidePopover();
     },
     rowClass(item) {
-      //return this.isRowSelected(item) ? 'sel-row' : '';
-      return this.isRowSelected(item) ? this.colorSelection(this.bgcolormodern) : '';
-    },
-    colorSelection(colormode) {
-      if (this.styleMode === 'Modern') {
-        switch (colormode) {
-          case 'alert alert-primary':
-            return 'sel-row-primary';
-          case 'alert alert-success':
-            return 'sel-row-success';
-          case 'alert alert-warning':
-            return 'sel-row-warning';
-          case 'alert alert-secondary':
-            return 'sel-row-secondary';
-          default:
-            return 'sel-row-secondary';
-        }
-      }
+      return this.isRowSelected(item) ? 'sel-row' : '';
     },
     isRowSelected(item) {
       return this.selectedRows.includes(item) || this.selectedRow === item;
@@ -900,6 +883,9 @@ export default {
 .popover-content .btn-light {
   margin-right: 5px;
 }
+.sel-row {
+  background-color: #eaf2ff;
+}
 .sel-row-primary {
   background-color: #66b2ff;
 }
@@ -923,29 +909,29 @@ export default {
   border-spacing: 0;
  
   thead th {
-    border-top: 1px solid #e0e0e0;
-    border-bottom: 1px solid #e0e0e0;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
     &:first-child {
       border-top-left-radius: 10px;
-      border-left: 1px solid #e0e0e0;
+      border-left: 1px solid;
     }
     &:last-child {
       border-top-right-radius: 10px;
-      border-right: 1px solid #e0e0e0;
+      border-right: 1px solid;
     }
   }
 
   tbody tr {
     td {
-      border-bottom: 1px solid #e0e0e0;
+      border-bottom: 1px solid;
     }
     
     td:first-child {
-      border-left: 1px solid #e0e0e0;
+      border-left: 1px solid;
     }
 
     td:last-child {
-      border-right: 1px solid #e0e0e0;
+      border-right: 1px solid;
     }
 
     &:last-child {
@@ -968,28 +954,121 @@ export default {
 .record-list-table-primary {
   @extend .record-list-table-base;
   thead th {
-    background-color: #007bff;
+    //background-color: #007bff;
+    background-color: #f8fbff;
+    border-top-color: #eaf2ff;
+    border-bottom-color: #eaf2ff;
+    &:first-child {
+      border-left-color: #eaf2ff;
+    }
+    &:last-child {
+      border-right-color: #eaf2ff;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: #eaf2ff;
+      border-top: solid 0;
+    }
+    
+    td:first-child {
+      border-left-color: #eaf2ff;
+    }
+
+    td:last-child {
+      border-right-color: #eaf2ff;
+    }
   }
 }
 
 .record-list-table-success {
   @extend .record-list-table-base;
   thead th {
-    background-color: #28a745;
+    background-color: #eefcf1;
+    border-top-color: #d2f0d9;
+    border-bottom-color: #d2f0d9;
+    &:first-child {
+      border-left-color: #d2f0d9;
+    }
+    &:last-child {
+      border-right-color: #d2f0d9;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: #d2f0d9;
+      border-top: solid 0;
+    }
+    
+    td:first-child {
+      border-left-color: #d2f0d9;
+    }
+
+    td:last-child {
+      border-right-color: #d2f0d9;
+    }
   }
 }
 
 .record-list-table-warning {
   @extend .record-list-table-base;
   thead th {
-    background-color: #ffc107;
+    background-color: #fefae6;
+    border-top-color: #fef4c9;
+    border-bottom-color: #fef4c9;
+    &:first-child {
+      border-left-color: #fef4c9;
+    }
+    &:last-child {
+      border-right-color: #fef4c9;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: #fef4c9;
+      border-top: solid 0;
+    }
+    
+    td:first-child {
+      border-left-color: #fef4c9;
+    }
+
+    td:last-child {
+      border-right-color: #fef4c9;
+    }
   }
 }
 
 .record-list-table-secondary {
   @extend .record-list-table-base;
   thead th {
-    background-color: #6c757d;
+    background-color: #fbfbfc;
+    border-top-color: #f3f5f7;
+    border-bottom-color: #f3f5f7;
+    &:first-child {
+      border-left-color: #f3f5f7;
+    }
+    &:last-child {
+      border-right-color: #f3f5f7;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: #f3f5f7;
+      border-top: solid 0;
+    }
+    
+    td:first-child {
+      border-left-color: #f3f5f7;
+    }
+
+    td:last-child {
+      border-right-color: #f3f5f7;
+    }
   }
 }
 

From c366265cd978adedb0e99b5d7b9da8783262a709 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 15 Oct 2024 16:55:56 -0400
Subject: [PATCH 08/13] Ready for PR

---
 src/components/renderer/form-record-list.vue | 127 +------------------
 src/components/sortable/tableStyles.scss     |  42 ++++++
 2 files changed, 47 insertions(+), 122 deletions(-)
 create mode 100644 src/components/sortable/tableStyles.scss

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index f4be6860b..242c52b45 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -865,7 +865,7 @@ export default {
 </script>
 
 <style lang="scss">
-
+@import '../sortable/tableStyles.scss';
 .popover-content {
   background-color: white;
   border: 1px solid #ddd;
@@ -886,18 +886,6 @@ export default {
 .sel-row {
   background-color: #eaf2ff;
 }
-.sel-row-primary {
-  background-color: #66b2ff;
-}
-.sel-row-success {
-  background-color: #71d188;
-}
-.sel-row-warning {
-  background-color: #ffe27d;
-}
-.sel-row-secondary {
-  background-color: #b0b3b8;
-}
 .class-button-modern {
   font-size: 14px; 
   font-weight: bold; 
@@ -952,124 +940,19 @@ export default {
 }
 
 .record-list-table-primary {
-  @extend .record-list-table-base;
-  thead th {
-    //background-color: #007bff;
-    background-color: #f8fbff;
-    border-top-color: #eaf2ff;
-    border-bottom-color: #eaf2ff;
-    &:first-child {
-      border-left-color: #eaf2ff;
-    }
-    &:last-child {
-      border-right-color: #eaf2ff;
-    }
-  }
-
-  tbody tr {
-    td {
-      border-color: #eaf2ff;
-      border-top: solid 0;
-    }
-    
-    td:first-child {
-      border-left-color: #eaf2ff;
-    }
-
-    td:last-child {
-      border-right-color: #eaf2ff;
-    }
-  }
+  @include record-list-table($primary-bg-color, $primary-border-color);
 }
 
 .record-list-table-success {
-  @extend .record-list-table-base;
-  thead th {
-    background-color: #eefcf1;
-    border-top-color: #d2f0d9;
-    border-bottom-color: #d2f0d9;
-    &:first-child {
-      border-left-color: #d2f0d9;
-    }
-    &:last-child {
-      border-right-color: #d2f0d9;
-    }
-  }
-
-  tbody tr {
-    td {
-      border-color: #d2f0d9;
-      border-top: solid 0;
-    }
-    
-    td:first-child {
-      border-left-color: #d2f0d9;
-    }
-
-    td:last-child {
-      border-right-color: #d2f0d9;
-    }
-  }
+  @include record-list-table($success-bg-color, $success-border-color);
 }
 
 .record-list-table-warning {
-  @extend .record-list-table-base;
-  thead th {
-    background-color: #fefae6;
-    border-top-color: #fef4c9;
-    border-bottom-color: #fef4c9;
-    &:first-child {
-      border-left-color: #fef4c9;
-    }
-    &:last-child {
-      border-right-color: #fef4c9;
-    }
-  }
-
-  tbody tr {
-    td {
-      border-color: #fef4c9;
-      border-top: solid 0;
-    }
-    
-    td:first-child {
-      border-left-color: #fef4c9;
-    }
-
-    td:last-child {
-      border-right-color: #fef4c9;
-    }
-  }
+  @include record-list-table($warning-bg-color, $warning-border-color);
 }
 
 .record-list-table-secondary {
-  @extend .record-list-table-base;
-  thead th {
-    background-color: #fbfbfc;
-    border-top-color: #f3f5f7;
-    border-bottom-color: #f3f5f7;
-    &:first-child {
-      border-left-color: #f3f5f7;
-    }
-    &:last-child {
-      border-right-color: #f3f5f7;
-    }
-  }
-
-  tbody tr {
-    td {
-      border-color: #f3f5f7;
-      border-top: solid 0;
-    }
-    
-    td:first-child {
-      border-left-color: #f3f5f7;
-    }
-
-    td:last-child {
-      border-right-color: #f3f5f7;
-    }
-  }
+  @include record-list-table($secondary-bg-color, $secondary-border-color);
 }
 
 </style>
diff --git a/src/components/sortable/tableStyles.scss b/src/components/sortable/tableStyles.scss
new file mode 100644
index 000000000..61efa725e
--- /dev/null
+++ b/src/components/sortable/tableStyles.scss
@@ -0,0 +1,42 @@
+$primary-bg-color: #f8fbff;
+$primary-border-color: #e6efff;
+
+$success-bg-color: #71d188;
+$success-border-color: #28a745;
+
+$warning-bg-color: #fff3cd;
+$warning-border-color: #ffc107;
+
+$secondary-bg-color: #fbfbfc;
+$secondary-border-color: #f3f5f7;
+
+@mixin record-list-table($bg-color, $border-color) {
+  @extend .record-list-table-base;
+
+  thead th {
+    background-color: $bg-color;
+    border-top-color: $border-color;
+    border-bottom-color: $border-color;
+    &:first-child {
+      border-left-color: $border-color;
+    }
+    &:last-child {
+      border-right-color: $border-color;
+    }
+  }
+
+  tbody tr {
+    td {
+      border-color: $border-color;
+      border-top: solid 0;
+    }
+
+    td:first-child {
+      border-left-color: $border-color;
+    }
+
+    td:last-child {
+      border-right-color: $border-color;
+    }
+  }
+}

From 86a2f29724ba379b0b7e061cc7782e07ec8fd9eb Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Wed, 16 Oct 2024 12:05:48 -0400
Subject: [PATCH 09/13] Adding missing files

---
 src/components/index.js      |   1 -
 src/form-builder-controls.js | 111 ++++++++++++++++++++++++-----------
 2 files changed, 77 insertions(+), 35 deletions(-)

diff --git a/src/components/index.js b/src/components/index.js
index c8e188e93..5740296da 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -59,7 +59,6 @@ const rendererComponents = {
 };
 export {default as globalProperties, formTypes} from "../global-properties";
 export {
-  bgcolorModern,
   bgcolorProperty,
   colorProperty,
   javascriptReservedKeywords,
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index ef2815343..0ae341a31 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -12,6 +12,7 @@ import FileDownload from './components/renderer/file-download';
 import FormListTable from './components/renderer/form-list-table';
 import FormAnalyticsChart from "./components/renderer/form-analytics-chart";
 import FormCollectionRecordControl from './components/renderer/form-collection-record-control.vue';
+import FormCollectionViewControl from './components/renderer/form-collection-view-control.vue';
 import {DataTypeProperty, DataFormatProperty, DataTypeDateTimeProperty} from './VariableDataTypeProperties';
 import {
   FormInput,
@@ -27,11 +28,8 @@ import { dataSourceValues } from '@/components/inspector/data-source-types';
 import LinkButton from "./components/renderer/link-button.vue";
 
 import {
-  bgcolorModern,
   bgcolorProperty,
   colorProperty,
-  bgcolorPropertyRecord,
-  colorPropertyRecord,
   keyNameProperty,
   javascriptReservedKeywords,
   labelProperty,
@@ -58,7 +56,7 @@ export default [
     rendererBinding: 'FormHtmlEditor',
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
-      order: 1.0,
+      order: 2.0,
       group: 'Content Fields',
       label: 'Rich Text',
       component: 'FormHtmlViewer',
@@ -100,7 +98,7 @@ export default [
     rendererBinding: 'FormMaskedInput',
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
-      order: 1.0,
+      order: 2.0,
       group: 'Input Fields',
       label: 'Line Input',
       component: 'FormInput',
@@ -131,6 +129,7 @@ export default [
       ],
     },
   },
+
   {
     editorComponent: FormTextArea,
     editorBinding: 'FormTextArea',
@@ -138,7 +137,7 @@ export default [
     rendererBinding: 'FormTextArea',
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
-      order: 4.0,
+      order: 5.0,
       group: 'Input Fields',
       label: 'Textarea',
       component: 'FormTextArea',
@@ -196,7 +195,7 @@ export default [
     rendererBinding: 'FormSelectList',
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
-      order: 2.0,
+      order: 3.0,
       group: 'Input Fields',
       label: 'Select List',
       component: 'FormSelectList',
@@ -251,7 +250,7 @@ export default [
     rendererBinding: 'FormCheckbox',
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
-      order: 6.0,
+      order: 7.0,
       group: 'Input Fields',
       label: 'Checkbox',
       component: 'FormCheckbox',
@@ -293,7 +292,7 @@ export default [
     rendererBinding: 'FormDatePicker',
     control: {
       popoverContent: "Collect a date or date/time",
-      order: 5.0,
+      order: 6.0,
       group: 'Input Fields',
       label: 'Date Picker',
       component: 'FormDatePicker',
@@ -347,7 +346,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add special buttons that link between subpages within this Form",
-      order: 1.0,
+      order: 2.0,
       group: 'Navigation',
       label: 'Page Navigation',
       component: 'FormButton',
@@ -382,7 +381,7 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
-      order: 2.0,
+      order: 3.0,
       group: 'Content Fields',
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
@@ -427,7 +426,7 @@ export default [
     rendererBinding: 'FormLoop',
     control: {
       popoverContent: "Add a repeatable section of content",
-      order: 5.0,
+      order: 6.0,
       group: 'Content Fields',
       label: 'Loop',
       component: 'FormLoop',
@@ -463,7 +462,7 @@ export default [
     rendererBinding: 'FormRecordList',
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
-      order: 4.0,
+      order: 5.0,
       group: 'Content Fields',
       label: 'Record List',
       component: 'FormRecordList',
@@ -558,17 +557,8 @@ export default [
           },
           if: 'hideControl'
         },
-        {
-          type: 'collectionDesignerMode',
-          field: 'designerMode',
-          config: {
-            label: 'Table Style',
-            helper: ''
-          }
-        },
-        colorPropertyRecord,
-        bgcolorPropertyRecord,
-        bgcolorModern
+        colorProperty,
+        bgcolorProperty,
       ],
     },
   },
@@ -579,7 +569,7 @@ export default [
     rendererBinding: 'FormImage',
     control: {
       popoverContent: "Upload an image to your screen",
-      order: 3.0,
+      order: 4.0,
       group: 'Content Fields',
       label: 'Image',
       component: 'FormImage',
@@ -646,7 +636,7 @@ export default [
     rendererBinding: 'FormAvatar',
     control: {
       popoverContent: "User avatar",
-      order: 3.0,
+      order: 4.0,
       group: 'Dashboards',
       label: 'User Avatar',
       component: 'FormAvatar',
@@ -690,7 +680,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add an action to submit your form or update a field",
-      order: 3.0,
+      order: 4.0,
       group: 'Input Fields',
       label: 'Submit Button',
       component: 'FormButton',
@@ -751,7 +741,7 @@ export default [
     rendererBinding: 'FormNestedScreen',
     control: {
       popoverContent: "Add and reuse another Form within this Form",
-      order: 6.0,
+      order: 7.0,
       group: 'Content Fields',
       label: 'Nested Screen',
       component: 'FormNestedScreen',
@@ -786,7 +776,7 @@ export default [
     control: {
       group: "Files",
       popoverContent: "Collect files uploaded into the Form",
-      order: 1.0,
+      order: 2.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -838,7 +828,7 @@ export default [
     builderBinding: 'FileDownload',
     control: {
       popoverContent: "Offer a File download",
-      order: 2.0,
+      order: 3.0,
       group: "Files",
       label: 'File Download',
       component: 'FileDownload',
@@ -874,7 +864,7 @@ export default [
     builderBinding: 'BFormComponent',
     control: {
       popoverContent: "Add one of several Bootstrap Vue components",
-      order: 1.0,
+      order: 2.0,
       group: 'Advanced',
       label: 'Bootstrap Component',
       component: 'BFormComponent',
@@ -928,7 +918,7 @@ export default [
     builderBinding: 'BWrapperComponent',
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component",
-      order: 2.0,
+      order: 3.0,
       group: 'Advanced',
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
@@ -1027,7 +1017,7 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 6.0,
+      order: 7.0,
       group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
@@ -1058,7 +1048,7 @@ export default [
     control: {
       popoverContent: "Add a URL where this link should redirect",
       group: 'Content Fields',
-      order: 6.0,
+      order: 7.0,
       label: "Link URL",
       component: "LinkButton",
       "editor-component": "LinkButton",
@@ -1090,6 +1080,19 @@ export default [
       ]
     }
   },
+  {
+    control: {
+      popoverContent: "Drag and paste copied elements to your desired location.",
+      order: 1.0,
+      group: 'Clipboard',
+      label: 'Drag & Paste',
+      component: "Clipboard",
+      config: {
+        icon: 'fa fa-clipboard',
+      },
+      inspector: [],
+    },
+  },
   {
     editorComponent: FormCollectionRecordControl,
     editorBinding: 'FormCollectionRecordControl',
@@ -1136,5 +1139,45 @@ export default [
         },
       ],
     },
+  },
+  {
+    editorComponent: FormCollectionViewControl,
+    editorBinding: 'FormCollectionViewControl',
+    rendererComponent: FormCollectionViewControl,
+    rendererBinding: 'FormCollectionViewControl',
+    control: {
+      popoverContent: "Create a Collection View Control",
+      order: 7.0,
+      group: 'Content Fields',
+      label: 'Collection Record View',
+      component: 'FormCollectionViewControl',
+      'editor-component': 'FormCollectionViewControl',
+      'editor-control': 'FormCollectionViewControl',
+      config: {
+        name: 'Collection View Control',
+        icon: 'fas fa-database',
+        label: 'Collection View Control',
+      },
+      inspector: [
+        {
+          type: "collectionRecordsList",
+          field: "collection",
+          config: {
+            label: 'Collection Name',
+            helper: 'Select a collection',
+            value: '',
+          }
+        },
+        {
+          type: 'FormInput',
+          field: 'record',
+          config: {
+            label: 'Record ID',
+            helper: 'Supports Mustache Variable and the Collection Record',
+            value: '',
+          },
+        }
+      ],
+    },
   }
 ];

From 0d86705a7a2daac391e46e97037bab8b7516966f Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 18 Oct 2024 08:19:39 -0700
Subject: [PATCH 10/13] Bump VFE version

---
 package-lock.json | 9 +++++----
 package.json      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8f6623704..3ec3d8c36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "@fortawesome/fontawesome-free": "^5.6.1",
         "@originjs/vite-plugin-commonjs": "^1.0.3",
         "@panter/vue-i18next": "^0.15.2",
-        "@processmaker/vue-form-elements": "0.60.0",
+        "@processmaker/vue-form-elements": "0.60.1",
         "@processmaker/vue-multiselect": "2.3.0",
         "@storybook/addon-essentials": "^7.6.13",
         "@storybook/addon-interactions": "^7.6.13",
@@ -4015,10 +4015,11 @@
       }
     },
     "node_modules/@processmaker/vue-form-elements": {
-      "version": "0.60.0",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.0.tgz",
-      "integrity": "sha512-Rndk+TlCl3SXGx7VeZq0207fzA3ALNEjfapXazra1yI+AQFqPYAdSLrisckSvGYPTG0TFGGBhpzh+cHjOWlwug==",
+      "version": "0.60.1",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.60.1.tgz",
+      "integrity": "sha512-cFmhrqMz0n3aOS556wJpb5Jm0dasvqLNIaHAuT1T4uhboo+JI6Lxfp57JbJuQ8NS7c2FcTm0MgoPAxtiWTt6Ng==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@chantouchsek/validatorjs": "1.2.3",
         "@tinymce/tinymce-vue": "2.0.0",
diff --git a/package.json b/package.json
index a5b52751c..2b37b7ab0 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.60.0",
+    "@processmaker/vue-form-elements": "0.60.1",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",

From 107fcd2c05b80a78e3d5319f98326cc7336f5284 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 18 Oct 2024 08:52:59 -0700
Subject: [PATCH 11/13] Remove next from ci config

---
 .github/workflows/ci.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 39b1b9b69..370ec8eb3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -25,9 +25,6 @@ jobs:
       - name: set-vfe-branch
         run: |
           export VFE_BRANCH=''
-          if [[ ${{ contains(github.event.pull_request.body, 'ci:next') }} ]]; then
-            export VFE_BRANCH=next
-          fi
           if [[ "${{ steps.install-vfe.outputs.match }}" != "" ]]; then
             export VFE_BRANCH=${{ steps.install-vfe.outputs.group1 }}
           fi

From 2250ad92948f32ba2cb73cf2db8e81b5c8cd92a6 Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 22 Oct 2024 11:50:58 -0400
Subject: [PATCH 12/13] Adding code someone removed solving conflicts

---
 src/form-builder-controls.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 0ae341a31..88badebe9 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -46,6 +46,7 @@ import {
   tooltipProperty,
   LoadingSubmitButtonProperty,
   LabelSubmitButtonProperty,
+  bgcolorModern
 } from './form-control-common-properties';
 
 export default [
@@ -557,8 +558,17 @@ export default [
           },
           if: 'hideControl'
         },
+        {
+          type: 'collectionDesignerMode',
+          field: 'designerMode',
+          config: {
+            label: 'Table Style',
+            helper: ''
+          }
+        },
         colorProperty,
         bgcolorProperty,
+        bgcolorModern
       ],
     },
   },

From 3d1db8d8223aab7e7d19d8f2173163d75d80530a Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Tue, 22 Oct 2024 12:31:55 -0400
Subject: [PATCH 13/13] Adding code someone removes in conflicts

---
 src/form-builder-controls.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 88badebe9..b9c6fb2d4 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -46,7 +46,9 @@ import {
   tooltipProperty,
   LoadingSubmitButtonProperty,
   LabelSubmitButtonProperty,
-  bgcolorModern
+  bgcolorModern,
+  bgcolorPropertyRecord,
+  colorPropertyRecord,
 } from './form-control-common-properties';
 
 export default [
@@ -566,8 +568,8 @@ export default [
             helper: ''
           }
         },
-        colorProperty,
-        bgcolorProperty,
+        colorPropertyRecord,
+        bgcolorPropertyRecord,
         bgcolorModern
       ],
     },