From 0020958d32bb2abb453d88a6c92bf077eebe8cdc Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Fri, 29 Aug 2025 18:53:55 +0100
Subject: [PATCH 1/8] feat: add missing content sidebar input types and move
 sub headers to step input

---
 .../countly/vue/components/content.js         | 265 ++++++--
 .../content/UI/content-block-list-input.html  |  49 ++
 .../UI/content-builder-sidebar-step.html      |  39 ++
 .../content/UI/content-sidebar-input.html     | 197 +++---
 .../public/stylesheets/vue/clyvue.scss        | 590 +++++++++++++-----
 5 files changed, 852 insertions(+), 288 deletions(-)
 create mode 100644 frontend/express/public/javascripts/countly/vue/templates/content/UI/content-block-list-input.html
 create mode 100644 frontend/express/public/javascripts/countly/vue/templates/content/UI/content-builder-sidebar-step.html

diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js
index ae8c99b7c6d..830474866be 100644
--- a/frontend/express/public/javascripts/countly/vue/components/content.js
+++ b/frontend/express/public/javascripts/countly/vue/components/content.js
@@ -1,4 +1,4 @@
-/* global Vue, CV, countlyCommon */
+/* global Vue, CV, countlyCommon, ElementTiptap */
 (function(countlyVue) {
     Vue.component("cly-content-layout", countlyVue.components.create({
         template: CV.T('/javascripts/countly/vue/templates/content/content.html'),
@@ -369,65 +369,154 @@
         `,
     }));
 
-    Vue.component("cly-content-steps", countlyVue.components.create({
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_IMAGE_RADIO = 'image-radio';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK = 'list-block';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER = 'number';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TEXTAREA = 'textarea';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_UPLOAD = 'upload';
+
+    Vue.component('cly-content-builder-sidebar-step', countlyVue.components.create({
         props: {
             header: {
-                type: String,
-                required: false,
-                default: null
+                default: null,
+                type: String
             },
-            collapse: {
-                type: Boolean,
-                required: false,
-                default: true
+
+            collapsible: {
+                default: false,
+                type: Boolean
+            },
+
+            inputs: {
+                default: () => [],
+                type: Array
             }
         },
+
+        emits: [
+            'add-asset',
+            'delete-asset',
+            'input-value-change',
+            'upload-asset'
+        ],
+
         data() {
             return {
-                activeSection: ["section"]
+                section: ['body']
             };
         },
+
+        computed: {
+            bodyComponent() {
+                return this.collapsible ? 'el-collapse-item' : 'div';
+            },
+
+            bodyComponentProps() {
+                if (!this.collapsible) {
+                    return null;
+                }
+
+                return {
+                    name: 'body',
+                    testId: this.dataTestId,
+                    title: this.header
+                };
+            },
+
+            dataTestId() {
+                return `content-drawer-sidebar-step-${this.header.toLowerCase().replaceAll(' ', '-')}`;
+            },
+
+            formattedInputs() {
+                if (this.inputs.length) {
+                    return this.inputs.map(input => ({
+                        ...input,
+                        ...!!input.subHeader && {
+                            hasSubHeader: true,
+                            dataTestId: `content-drawer-sidebar-step-${input.subHeader.toLowerCase().replaceAll(' ', '-')}-label`
+                        }
+                    }));
+                }
+
+                return [];
+            },
+
+            wrapperComponent() {
+                return this.collapsible ? 'el-collapse' : 'div';
+            }
+        },
+
         methods: {
+            onAddAsset(payload) {
+                const { input, payload: eventPayload } = payload || {};
+                const { id, key, type } = input || {};
+
+                if (type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK) {
+                    this.$emit('add-asset', eventPayload);
+                }
+                else {
+                    this.$emit('add-asset', { id, key });
+                }
+            },
+
+            onDeleteAsset(payload) {
+                const { input, payload: eventPayload } = payload || {};
+                const { id, key, type } = input || {};
+
+                if (type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK) {
+                    this.$emit('delete-asset', eventPayload);
+                }
+                else {
+                    this.$emit('delete-asset', { id, key });
+                }
+            },
+
+            onUploadAsset(payload) {
+                this.$emit('upload-asset', payload);
+            },
+
+            onInputChange(payload) {
+                const { input, payload: inputPayload } = payload || {};
+                const { id, key, type } = input || {};
+
+                if (type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK) {
+                    this.$emit('input-value-change', inputPayload);
+                }
+                else {
+                    this.$emit('input-value-change', {
+                        id,
+                        key,
+                        value: inputPayload
+                    });
+                }
+            }
         },
-        template: `
-            <div class="cly-vue-content-builder__layout-steps">
-                <div v-if="collapse">
-                    <el-collapse v-model="activeSection">
-                        <el-collapse-item :title="header" name="section" :test-id="header.toLowerCase().replaceAll(' ', '-')">
-                            <slot name="content-builder-layout-steps"></slot>
-                        </el-collapse-item>
-                    </el-collapse>  
-                </div>
-                <div v-else>
-                    <div class="cly-vue-content-builder__layout-steps__header text-medium font-weight-bold" :data-test-id="'content-drawer-sidebar-step-' + header.toLowerCase().replaceAll(' ', '-')">{{ header }}</div>
-                    <slot name="content-builder-layout-steps"></slot>
-                </div>
-            </div>
-        `,
+
+        template: CV.T('/javascripts/countly/vue/templates/content/UI/content-builder-sidebar-step.html'),
     }));
 
 
     // CONSTANTS
 
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER = 'number';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB = 'tab';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_UPLOAD = 'upload';
-
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE = {
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select',
+        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_IMAGE_RADIO]: 'div',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input',
+        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK]: 'cly-content-block-list-input',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER]: 'el-input-number',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TAB]: 'div',
+        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TEXTAREA]: 'el-tiptap',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_UPLOAD]: 'el-upload'
     };
 
@@ -452,7 +541,7 @@
             },
 
             labelIcon: {
-                default: 'cly-io cly-io-question-mark-circle',
+                default: 'ion ion-help-circled',
                 type: String
             },
 
@@ -498,7 +587,7 @@
 
             value: {
                 default: null,
-                type: [String, Number, Boolean, Object]
+                type: [String, Number, Boolean, Object, Array]
             },
 
             size: {
@@ -520,9 +609,42 @@
         emits: [
             'add-asset',
             'delete-asset',
-            'input'
+            'input',
+            'upload-asset'
         ],
 
+        data() {
+            return {
+                textareaExtensions: [
+                    new ElementTiptap.Doc(),
+                    new ElementTiptap.Text(),
+                    new ElementTiptap.Paragraph(),
+                    new ElementTiptap.TextColor({colors: countlyCommon.GRAPH_COLORS}),
+                    new ElementTiptap.FontType({
+                        fontTypes: {
+                            Inter: 'Inter',
+                            Lato: 'Lato',
+                            Oswald: 'Oswald',
+                            'Roboto-Mono': 'Roboto-Mono',
+                            Ubuntu: 'Ubuntu'
+                        }
+                    }),
+                    new ElementTiptap.FontSize({
+                        fontSizes: ['8', '10', '12', '14', '16', '18', '20', '24', '30', '36', '48', '60', '72', '96']
+                    }),
+                    new ElementTiptap.LineHeight(),
+                    new ElementTiptap.Bold(),
+                    new ElementTiptap.Italic(),
+                    new ElementTiptap.Underline(),
+                    new ElementTiptap.ListItem(),
+                    new ElementTiptap.BulletList(),
+                    new ElementTiptap.OrderedList(),
+                    new ElementTiptap.FormatClear(),
+                    new ElementTiptap.History()
+                ],
+            };
+        },
+
         computed: {
             componentValue: {
                 get() {
@@ -538,21 +660,33 @@
                         return +this.value || 0;
                     }
 
+                    if (this.isListBlockInput) {
+                        return null;
+                    }
+
                     return this.value || null;
                 },
+
                 set(newValue) {
                     this.$emit('input', newValue);
                 }
             },
 
             computedAttrs() {
+                if (this.isTextareaInput) {
+                    return {
+                        ...this.$attrs,
+                        extensions: this.textareaExtensions
+                    };
+                }
+
                 if (this.isUploadInput) {
                     return {
+                        ...this.$attrs,
                         action: '',
                         drag: true,
                         multiple: false,
-                        showFileList: false,
-                        ...this.$attrs
+                        showFileList: false
                     };
                 }
 
@@ -571,10 +705,18 @@
                 return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
             },
 
+            isImageRadioInput() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_IMAGE_RADIO;
+            },
+
             isLabelTooltipVisible() {
                 return this.withLabelTooltip && this.labelTooltip;
             },
 
+            isListBlockInput() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_LIST_BLOCK;
+            },
+
             isSliderInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER;
             },
@@ -590,6 +732,10 @@
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER;
             },
 
+            isTextareaInput() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_TEXTAREA;
+            },
+
             isUploadInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_UPLOAD;
             },
@@ -611,6 +757,14 @@
         },
 
         methods: {
+            onAddAsset(payload) {
+                this.$emit('add-asset', payload);
+            },
+
+            onDeleteAsset(payload) {
+                this.$emit('delete-asset', payload);
+            },
+
             onUploadAddButtonClick() {
                 this.$emit('add-asset');
             },
@@ -623,6 +777,37 @@
         template: CV.T('/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html')
     }));
 
+    Vue.component('cly-content-block-list-input', countlyVue.components.create({
+        props: {
+            blockInputs: {
+                default: () => [],
+                type: Array
+            }
+        },
+
+        emits: [
+            'add-asset',
+            'delete-asset',
+            'input'
+        ],
+
+        methods: {
+            onAddAsset(payload) {
+                this.$emit('add-asset', payload);
+            },
+
+            onDeleteAsset(payload) {
+                this.$emit('delete-asset', payload);
+            },
+
+            onInput(payload) {
+                this.$emit('input', payload);
+            }
+        },
+
+        template: CV.T('/javascripts/countly/vue/templates/content/UI/content-block-list-input.html'),
+    }));
+
     Vue.component("cly-option-swapper", countlyVue.components.create({
         template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'),
 
diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-block-list-input.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-block-list-input.html
new file mode 100644
index 00000000000..5dd9237788d
--- /dev/null
+++ b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-block-list-input.html
@@ -0,0 +1,49 @@
+<div class="cly-content-block-list-input">
+  <!-- v-tooltip.right="step.componentTooltip" -->
+  <el-collapse
+    v-for="(block, blockIndex) in blockInputs"
+    :key="`list-block-${blockIndex}`"
+    class="cly-content-block-list-input__list-block"
+  >
+    <el-collapse-item :icon="{ position: 'right' }" >
+      <template v-slot:title>
+        <div class="cly-content-block-list-input__list-block-header">
+          <div class="cly-content-block-list-input__list-block-header-display">
+              <img
+                  class="cly-content-block-list-input__list-block-header-display-icon"
+                  :data-test-id="'fullscreen-blocks-icon-block-' + blockIndex"
+                  :src="block[0].value || '/content/images/fullscreenPlaceholderImage.png'"
+              >
+              <p
+                  class="cly-content-block-list-input__list-block-header-display-title"
+                  :data-test-id="'fullscreen-blocks-title-label-block-' + blockIndex"
+              >
+                  {{ block[1].value }}
+              </p>
+          </div>
+          <div class="cly-content-block-list-input__list-block-header-icon">
+              <i
+                  class="cly-io cly-io-plus cly-content-block-list-input__list-block-header-icon--open"
+                  :data-test-id="'fullscreen-blocks-open-block-' + blockIndex"
+              />
+              <i
+                  class="cly-io cly-io-minus cly-content-block-list-input__list-block-header-icon--close"
+                  :data-test-id="'fullscreen-blocks-close-block-' + blockIndex"
+              />
+          </div>
+        </div>
+      </template>
+      <div class="cly-content-block-list-input__list-block-fields">
+        <cly-content-builder-sidebar-input
+          v-for="(item, itemIndex) in block"
+          v-bind="item"
+          class="cly-content-block-list-input__list-block-field"
+          :key="`list-block-${blockIndex}-item-${itemIndex}`"
+          @add-asset="onAddAsset({ id: item.id, key: item.key })"
+          @delete-asset="onDeleteAsset({ id: item.id, key: item.key })"
+          @input="onInput({ id: item.id, key: item.key, value: $event })"
+        />
+      </div>
+    </el-collapse-item>
+  </el-collapse>
+</div>
diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-builder-sidebar-step.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-builder-sidebar-step.html
new file mode 100644
index 00000000000..848933c31a7
--- /dev/null
+++ b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-builder-sidebar-step.html
@@ -0,0 +1,39 @@
+<component
+  v-model="section"
+  class="cly-content-builder-sidebar-step"
+  :is="wrapperComponent"
+>
+  <div
+    v-if="!collapsible"
+    class="cly-content-builder-sidebar-step__header"
+    :data-test-id="dataTestId"
+  >
+    {{ header }}
+  </div>
+  <component
+    v-bind="bodyComponentProps"
+    class="cly-content-builder-sidebar-step__body"
+    :is="bodyComponent"
+  >
+    <slot name="step-body">
+      <template v-for="input in formattedInputs">
+        <div
+          v-if="input.hasSubHeader"
+          class="cly-content-builder-sidebar-step__sub-header"
+          :key="`${input.id}-sub-header`"
+          :data-test-id="input.dataTestId"
+        >
+          {{ input.subHeader }}
+        </div>
+        <cly-content-builder-sidebar-input
+          v-bind="input"
+          class="cly-content-builder-sidebar-step__input"
+          :key="input.id"
+          @add-asset="onAddAsset({ input, payload: $event })"
+          @delete-asset="onDeleteAsset({ input, payload: $event })"
+          @input="onInputChange({ input, payload: $event })"
+        />
+      </template>
+    </slot>
+  </component>
+</component>
diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html
index 5739273bfcb..12896b1fd8a 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html
@@ -1,96 +1,117 @@
-<div class="cly-vue-content-builder-sidebar-input">
-  <div
-    v-if="subHeader"
-    class="cly-vue-content-builder-sidebar-input__sub-header"
-    :data-test-id="'content-drawer-sidebar-step-' + subHeader.toLowerCase().replaceAll(' ', '-') + '-label'"
+<div
+  class="cly-vue-content-builder-sidebar-input"
+  :class="{
+    'cly-vue-content-builder-sidebar-input--vertical': isVerticalInput,
+    [`cly-vue-content-builder-sidebar-input--${size}`]: !!size
+  }"
+>
+  <label
+    v-if="label"
+    class="cly-vue-content-builder-sidebar-input__label"
+    :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label'"
   >
-    {{ subHeader }}
-  </div>
-  <div
-    class="cly-vue-content-builder-sidebar-input__input-container"
-    :class="{
-      'cly-vue-content-builder-sidebar-input__input-container--vertical': isVerticalInput,
-      [`cly-vue-content-builder-sidebar-input__input-container--${size}`]: !!size
-    }"
-  >
-    <label
-      v-if="label"
-      class="cly-vue-content-builder-sidebar-input__label"
-      :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label'"
+    {{ label }}
+    <i
+      v-if="isLabelTooltipVisible"
+      v-tooltip.left="labelTooltip"
+      :class="labelIcon"
+      :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label-tooltip'"
+    />
+  </label>
+  <slot name="content-builder-layout-step">
+    <component
+      :is="mainComponent"
+      v-bind="computedAttrs"
+      v-loading="isUploadInput && loading"
+      v-model="componentValue"
+      v-tooltip.left="tooltip"
+      class="cly-vue-content-builder-sidebar-input__component"
+      :class="{
+        'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput,
+        'cly-vue-content-builder-sidebar-input__component--upload': isUploadInput,
+        'cly-vue-content-builder-sidebar-input__component--image-radio': isImageRadioInput,
+        'cly-vue-content-builder-sidebar-input__component--list-block': isListBlockInput
+      }"
+      :controls="controlsProp"
+      :disabled="disabled"
+      :options="options"
+      :test-id="'content-drawer-sidebar-step-' + $attrs.id"
+      @add-asset="onAddAsset"
+      @delete-asset="onDeleteAsset"
     >
-      {{ label }}
-      <i
-        v-if="isLabelTooltipVisible"
-        v-tooltip.left="labelTooltip"
-        :class="labelIcon"
-        :data-test-id="'content-drawer-sidebar-step-' + $attrs.id + '-' + label.toLowerCase().replaceAll(' ', '-') + '-label-tooltip'"
-      />
-    </label>
-    <slot name="content-builder-layout-step">
-      <component
-        :is="mainComponent"
-        v-bind="computedAttrs"
-        v-loading="isUploadInput && loading"
-        v-model="componentValue"
-        v-tooltip.left="tooltip"
-        class="cly-vue-content-builder-sidebar-input__component"
-        :class="{
-          'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput,
-          'cly-vue-content-builder-sidebar-input__component--upload': isUploadInput
-        }"
-        :controls="controlsProp"
-        :disabled="disabled"
-        :options="options"
-        :test-id="'content-drawer-sidebar-step-' + $attrs.id"
+      <template
+        v-if="isSuffixVisible"
+        #suffix
       >
-        <template
-          v-if="isSuffixVisible"
-          #suffix
+        {{ suffix }}
+      </template>
+      <template v-if="isComponentWithOptions">
+        <el-option
+          v-for="(option, index) in options"
+          :key="`content-builder-sidebar-input-option-${index}`"
+          class="cly-vue-content-builder-sidebar-input__option"
+          :label="option.label"
+          :value="option.value"
+          :test-id="$attrs.id"
+        />
+      </template>
+      <template v-if="isUploadInput">
+        <img
+          v-if="value"
+          class="cly-vue-content-builder-sidebar-input__upload-value"
+          :src="value"
         >
-          {{ suffix }}
-        </template>
-        <template v-if="isComponentWithOptions">
-          <el-option
-            v-for="(option, index) in options"
-            :key="`content-builder-sidebar-input-option-${index}`"
-            class="cly-vue-content-builder-sidebar-input__option"
-            :label="option.label"
-            :value="option.value"
-            :test-id="$attrs.id"
+        <i
+          v-else
+          class="cly-io cly-io-photograph cly-vue-content-builder-sidebar-input__upload-placeholder"
+        />
+        <div class="cly-vue-content-builder-sidebar-input__upload-actions">
+          <el-button
+            class="cly-vue-content-builder-sidebar-input__upload-action"
+            icon="cly-io cly-io-upload"
+            type="info"
+            @click.stop="onUploadAddButtonClick"
           />
-        </template>
-        <template v-if="isUploadInput">
-          <img
-            v-if="value"
-            class="cly-vue-content-builder-sidebar-input__upload-value"
-            :src="value"
-          >
-          <i
-            v-else
-            class="cly-io cly-io-photograph cly-vue-content-builder-sidebar-input__upload-placeholder"
+          <el-button
+            class="cly-vue-content-builder-sidebar-input__upload-action"
+            icon="cly-io cly-io-trash"
+            type="info"
+            @click.stop="onUploadDeleteButtonClick"
           />
-          <div class="cly-vue-content-builder-sidebar-input__upload-actions">
-            <el-button
-              class="cly-vue-content-builder-sidebar-input__upload-action"
-              icon="cly-io cly-io-upload"
-              type="info"
-              @click.stop="onUploadAddButtonClick"
-            />
-            <el-button
-              class="cly-vue-content-builder-sidebar-input__upload-action"
-              icon="cly-io cly-io-trash"
-              type="info"
-              @click.stop="onUploadDeleteButtonClick"
-            />
+        </div>
+      </template>
+      <template v-else-if="isImageRadioInput">
+        <el-radio
+          v-for="option in options"
+          :key="`content-block-layout-${option.value}`"
+          border
+          class="cly-vue-content-builder-sidebar-input__image-radio"
+          :test-id="'content-layout-type-' + option.value.toLowerCase()"
+          :label="option.value"
+          :value="value"
+          @input="$emit('input', $event)"
+        >
+          <div
+            class="cly-vue-content-builder-sidebar-input__image-radio-content"
+            :class="{
+              'cly-vue-content-builder-sidebar-input__image-radio-content--disabled': option.disabled
+            }"
+          >
+            <div class="square-button-preview">
+              <img :src="option.src">
+            </div>
+            <div class="cly-vue-content-builder-sidebar-input__image-radio-content-label">
+              {{ option.label }}
+            </div>
           </div>
-        </template>
-      </component>
-      <div
-        v-if="isSuffixVisible && type === 'number'"
-        class="cly-vue-content-builder-sidebar-input__number-input-suffix"
-      >
-        {{ suffix }}
-      </div>
-    </slot>
-  </div>
+        </el-radio>
+      </template>
+    </component>
+    <div
+      v-if="isSuffixVisible && type === 'number'"
+      class="cly-vue-content-builder-sidebar-input__number-input-suffix"
+    >
+      {{ suffix }}
+    </div>
+  </slot>
 </div>
diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index 5c9f9e96e0d..a9b32b22dfe 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -66,12 +66,12 @@
         min-height: 48px;
         font-weight: 400;
 
-        // .cly-vue-notification__alert-box__close-icon
+        /* .cly-vue-notification__alert-box__close-icon */
         &__close-icon {
             cursor: pointer;
             color: #81868D;
 
-            // .cly-vue-notification__alert-box__close-icon:hover
+            /* .cly-vue-notification__alert-box__close-icon:hover */
             &:hover {
                 color: #333C48;
             }
@@ -147,7 +147,7 @@
     border-radius: 4px;
     padding: 0px 6px;
 
-    // .cly-vue-status-tag__blink
+    /* .cly-vue-status-tag__blink */
     &__blink {
         display: inline-block;
         position: relative;
@@ -160,7 +160,7 @@
         animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
     }
 
-    // .cly-vue-status-tag__skeleton
+    /* .cly-vue-status-tag__skeleton */
     &__skeleton {
         display: inline-block;
         position: relative;
@@ -173,51 +173,51 @@
         animation: blinker 1.5s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
     }
 
-    // .cly-vue-status-tag--blue
+    /* .cly-vue-status-tag--blue */
     &--blue {
         background-color: #E6F0FB;
         color: #017AFF;
 
-        // .cly-vue-status-tag--blue .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--blue .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             background-color: #017AFF;
         }
     }
 
-    // .cly-vue-status-tag--gray
+    /* .cly-vue-status-tag--gray */
     &--gray {
         background-color: #F5F5F5;
         color: #BDBDBD;
 
-        // .cly-vue-status-tag--gray .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--gray .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             background-color: #BDBDBD;
         }
     }
 
-    // .cly-vue-status-tag--green
+    /* .cly-vue-status-tag--green */
     &--green {
         background-color: #EBFAEE;
         color: #12AF51;
         
-        // .cly-vue-status-tag--green .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--green .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             background-color: #12AF51;
         }
     }
 
-    // .cly-vue-status-tag--red
+    /* .cly-vue-status-tag--red */
     &--red {
         background-color: #FBECE5;
         color: #D23F00;
         
-        // .cly-vue-status-tag--red .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--red .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             background-color: #D23F00;
         }
     }
 
-    // .cly-vue-status-tag--small
+    /* .cly-vue-status-tag--small */
     &--small {
         font-size: 12px;
         line-height: 18px;
@@ -225,7 +225,7 @@
         align-items: baseline;
         font-weight: 500;
 
-        // .cly-vue-status-tag--small .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--small .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             /*
                 NOTE: This is a hack to make the blinking dot align with the blinking line
@@ -234,7 +234,7 @@
             top: 1px;
         }
 
-        // .cly-vue-status-tag--small .cly-vue-status-tag__skeleton
+        /* .cly-vue-status-tag--small .cly-vue-status-tag__skeleton */
         & .cly-vue-status-tag__skeleton {
             /*
                 NOTE: This is a hack to make the blinking line align with the blinking dot
@@ -245,12 +245,12 @@
         }
     }
     
-    // .cly-vue-status-tag--yellow
+    /* .cly-vue-status-tag--yellow */
     &--yellow {
         background-color: #FCF5E5;
         color: #CDAD7A;
         
-        // .cly-vue-status-tag--yellow .cly-vue-status-tag__blink
+        /* .cly-vue-status-tag--yellow .cly-vue-status-tag__blink */
         & .cly-vue-status-tag__blink {
             background-color: #CDAD7A;
         }
@@ -1246,7 +1246,7 @@
         position: relative;
         display: block;
 
-        // .cly-vue-color-picker__body
+        /* .cly-vue-color-picker__body */
         &__body {
             position: absolute;
             bottom: 0;
@@ -1263,7 +1263,7 @@
 
             background-color: #ffffff;
 
-            // .cly-vue-color-picker__body .vc-sketch
+            /* .cly-vue-color-picker__body .vc-sketch */
             & .vc-sketch {
                 background-color: transparent;
                 padding: 12px;
@@ -1272,36 +1272,36 @@
                 border-radius: 0;
                 width: 251px;
 
-                // .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap
+                /* .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap */
                 & .vc-sketch-saturation-wrap {
                     height: calc(251px - 180px);
                     bottom: 12px;
 
-                    // .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap .vc-saturation
+                    /* .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap .vc-saturation */
                     & .vc-saturation {
                         height: 251px;
                     }
                 }
 
-                // .cly-vue-color-picker__body .vc-sketch .vc-sketch-presets
+                /* .cly-vue-color-picker__body .vc-sketch .vc-sketch-presets */
                 & .vc-sketch-presets {
                     display: none;
                 }
             }
 
-            // .cly-vue-color-picker__body--left
+            /* .cly-vue-color-picker__body--left */
             &--left {
                 right: 0;
             }
 
-            // .cly-vue-color-picker__body--right
+            /* .cly-vue-color-picker__body--right */
             &--right {
                 right: 0;
                 transform: translate(-50%, 100%);
             }
         }
 
-        // .cly-vue-color-picker__buttons-container
+        /* .cly-vue-color-picker__buttons-container */
         &__buttons-container {
             display: flex;
             align-items: center;
@@ -1309,7 +1309,7 @@
             padding-right: 12px;
         }
 
-        // .cly-vue-color-picker__input
+        /* .cly-vue-color-picker__input */
         &__input {
             box-sizing: border-box;
             width: 100%;
@@ -1330,7 +1330,7 @@
             text-transform: uppercase;
         }
 
-        // .cly-vue-color-picker__input-arrow
+        /* .cly-vue-color-picker__input-arrow */
         &__input-arrow {
             position: absolute;
             top: 50%;
@@ -1340,7 +1340,7 @@
             height: 16px;
             width: 16px;
 
-            // .cly-vue-color-picker__input-arrow i
+            /* .cly-vue-color-picker__input-arrow i */
             i {
                 font-size: 16px;
                 line-height: 16px;
@@ -1349,31 +1349,31 @@
                 justify-content: center;
             }
 
-            // .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-open
+            /* .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-open */
             & .cly-vue-color-picker__input-arrow-icon-open {
                 display: none;
             }
 
-            // .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-closed
+            /* .cly-vue-color-picker__input-arrow .cly-vue-color-picker__input-arrow-icon-closed */
             & .cly-vue-color-picker__input-arrow-icon-closed {
                 display: block;
             }
 
-            // .cly-vue-color-picker__input-arrow--open
+            /* .cly-vue-color-picker__input-arrow--open */
             &--open {
-                // .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-open
+                /* .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-open */
                 & .cly-vue-color-picker__input-arrow-icon-open {
                     display: block;
                 }
 
-                // .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-closed
+                /* .cly-vue-color-picker__input-arrow--open .cly-vue-color-picker__input-arrow-icon-closed */
                 & .cly-vue-color-picker__input-arrow-icon-closed {
                     display: none;
                 }
             }
         }
 
-        // .cly-vue-color-picker__input-container
+        /* .cly-vue-color-picker__input-container */
         &__input-container {
             position: relative;
             cursor: pointer;
@@ -1383,7 +1383,7 @@
             max-width: 138px;
         }
 
-        // .cly-vue-color-picker__input-drop
+        /* .cly-vue-color-picker__input-drop */
         &__input-drop {
             position: absolute;
             top: 0;
@@ -1392,7 +1392,7 @@
             height: 100%;
         }
 
-        // .cly-vue-color-picker__input-drop-container
+        /* .cly-vue-color-picker__input-drop-container */
         &__input-drop-container {
             position: absolute;
             top: 50%;
@@ -1851,10 +1851,10 @@
         }
 
         &--half-screen {
-            // .cly-vue-drawer__steps-view {
+            /* .cly-vue-drawer__steps-view { */
             //     width: 50%;
             // }
-            // .cly-vue-drawer__sidecars-view {
+            /* .cly-vue-drawer__sidecars-view { */
             //     width: 50%;
             // }
             .cly-vue-drawer__footer {
@@ -1951,7 +1951,7 @@
             box-sizing: border-box;
         }
 
-        // .cly-vue-drawer__title-container
+        /* .cly-vue-drawer__title-container */
         &__title-container {
             margin: 24px 32px;
         }
@@ -1961,7 +1961,7 @@
             margin-bottom: 24px !important;
         }
 
-        // .cly-vue-drawer__close-button
+        /* .cly-vue-drawer__close-button */
         &__close-button {
             display: flex;
             align-items: center;
@@ -1973,7 +1973,7 @@
             cursor: pointer;
             height: 20px;
 
-            // .cly-vue-drawer__close-button:hover
+            /* .cly-vue-drawer__close-button:hover */
             &:hover {
                 color: #333;
                 transition: color 1s;
@@ -4035,7 +4035,7 @@
                 color: #81868D;
             }
         }
-        // .circle {
+        /* .circle { */
         //     width: 250px;
         //     height: 250px;
         //     border-radius: 125px;
@@ -4354,20 +4354,190 @@
         color: #a7aeb8;
         margin-left: 10px;
         &--enabled {
-          font-size: 14px;
-          color: #333c48;
+            font-size: 14px;
+            color: #333c48;
         }
         &--enabled-color {
-          font-size: 14px;
-          color: #0064de;
-          margin-left: 5px;
+            font-size: 14px;
+            color: #0064de;
+            margin-left: 5px;
         }
         &--disabled {
-          font-size: 14px;
-          color: #333c48;
-          margin-left: 10px;
+            font-size: 14px;
+            color: #333c48;
+            margin-left: 10px;
         }
-    }		
+    }
+}
+
+.cly-content-block-list-input {
+    /* .cly-content-block-list-input__list-block */
+    &__list-block {
+        padding: 16px;
+        border-radius: 8px;
+        background-color: #F8FAFD;
+
+        /* .cly-content-block-list-input__list-block .cly-content-block-list-input__list-block-field:not(:first-child) */
+        & .cly-content-block-list-input__list-block-field:not(:first-child) {
+            margin-top: 16px;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__arrow */
+        & .el-collapse-item__arrow {
+            display: none;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__header */
+        & .el-collapse-item__header {
+            padding: 0 !important;
+            border: none !important;
+            background: transparent;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__wrap */
+        & .el-collapse-item__wrap {
+            border: none !important;
+            background: transparent;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__content */
+        & .el-collapse-item__content {
+            padding-bottom: 0 !important;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__header:not(.is-active) .cly-content-block-list-input__list-block-header-icon--open */
+        & .el-collapse-item__header:not(.is-active) .cly-content-block-list-input__list-block-header-icon--open {
+            display: flex;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__header:not(.is-active) .cly-content-block-list-input__list-block-header-icon--close */
+        & .el-collapse-item__header:not(.is-active) .cly-content-block-list-input__list-block-header-icon--close {
+            display: none;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__header.is-active .cly-content-block-list-input__list-block-header-icon--open */
+        & .el-collapse-item__header.is-active .cly-content-block-list-input__list-block-header-icon--open {
+            display: none;
+        }
+
+        /* .cly-content-block-list-input__list-block .el-collapse-item__header.is-active .cly-content-block-list-input__list-block-header-icon--close */
+        & .el-collapse-item__header.is-active .cly-content-block-list-input__list-block-header-icon--close {
+            display: flex;
+        }
+
+        /* .cly-content-block-list-input__list-block:not(:first-child) */
+        &:not(:first-child) {
+            margin-top: 8px;
+        }
+    }
+
+    /* .cly-content-block-list-input__list-block-fields */
+    &__list-block-fields {
+        margin-top: 16px;
+    }
+
+    /* .cly-content-block-list-input__list-block-header */
+    &__list-block-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    /* .cly-content-block-list-input__list-block-header-display */
+    &__list-block-header-display {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 12px;
+    }
+
+    /* .cly-content-block-list-input__list-block-header-display-icon */
+    &__list-block-header-display-icon {
+        height: 16px;
+        width: 16px;
+    }
+
+    /* .cly-content-block-list-input__list-block-header-display-title */
+    &__list-block-header-display-title {
+        margin: 0;
+        color: #333C48;
+        font-family: Inter;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 16px;
+        text-transform: none;
+    }
+
+    /* .cly-content-block-list-input__list-block-header-icon */
+    &__list-block-header-icon {
+        cursor: pointer;
+        width: 16px;
+        height: 16px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.cly-content-builder-sidebar-step {
+    /* .cly-content-builder-sidebar-step .el-collapse-item__content */
+    & .el-collapse-item__content {
+        padding: 0;
+    }
+
+    /* .cly-content-builder-sidebar-step .el-collapse-item__wrap */
+    & .el-collapse-item__wrap {
+        border: none;
+    }
+
+    /* .cly-content-builder-sidebar-step .el-collapse-item__header */
+    & .el-collapse-item__header {
+        color: #424243;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+
+        height: auto;
+        line-height: normal;
+        border: none;
+        transition: none;
+
+        /* .cly-content-builder-sidebar-step .el-collapse-item__header i */
+        & i {
+            margin-right: 4px;
+        }
+    }
+
+    /* .cly-content-builder-sidebar-step__header */
+    &__header {
+        color: #424243;
+        font-size: 12px;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+    }
+
+    /* .cly-content-builder-sidebar-step__input */
+    &__input {
+        margin-top: 16px;
+
+        /* .cly-content-builder-sidebar-step__sub-header + .cly-content-builder-sidebar-step__input */
+        & + & {
+            margin-top: 8px;
+        }
+    }
+
+    /* .cly-content-builder-sidebar-step__sub-header */
+    &__sub-header {
+        margin-top: 24px;
+        color: #81868D;
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 16px;
+    }
 }
 
 .cly-vue-content-builder {
@@ -4383,7 +4553,7 @@
 
     background-color: white;
 
-    &__layout-steps {
+    /* &__layout-steps {
         padding: 0 16px;
         .el-collapse-item__wrap {
             overflow: visible;
@@ -4392,9 +4562,9 @@
             padding-bottom: 0 !important;
         }
         background-color: #FFF
-    }
+    } */
 
-    // .cly-vue-content-builder__layout-header
+    /* .cly-vue-content-builder__layout-header */
     &__layout-header {
         box-sizing: border-box;
         display: block;
@@ -4489,14 +4659,14 @@
     flex-wrap: wrap;
     background-color: #FFFFFF;
 
-    // .cly-vue-content-builder-header__actions
+    /* .cly-vue-content-builder-header__actions */
     &__actions {
         display: flex;
         align-items: center;
         justify-content: flex-end;
     }
 
-    // .cly-vue-content-builder-header__close-button
+    /* .cly-vue-content-builder-header__close-button */
     &__close-button {
         cursor: pointer;
         display: flex;
@@ -4508,7 +4678,7 @@
         box-shadow: 0px 1px 2px #D1D1D1;
         margin-right: 24px;
 
-        // .cly-vue-content-builder-header__close-button i
+        /* .cly-vue-content-builder-header__close-button i */
         i {
             color: #616165;
             font-weight: 700;
@@ -4516,7 +4686,7 @@
         }
     }
 
-    // .cly-vue-content-builder-header__info
+    /* .cly-vue-content-builder-header__info */
     &__info {
         display: flex;
         flex-direction: column;
@@ -4524,7 +4694,7 @@
         justify-content: center;
     }
 
-    // .cly-vue-content-builder-header__info-meta
+    /* .cly-vue-content-builder-header__info-meta */
     &__info-meta {
         display: flex;
         align-items: center;
@@ -4538,9 +4708,9 @@
         line-height: 16px;
     }
 
-    // .cly-vue-content-builder-header__input
+    /* .cly-vue-content-builder-header__input */
     &__input {
-        // .cly-vue-content-builder-header__input .el-input__inner
+        /* .cly-vue-content-builder-header__input .el-input__inner */
         & .el-input__inner { 
             height: initial;
             padding: 0;
@@ -4556,38 +4726,38 @@
             line-height: 24px;
             color: #333C48;
 
-            // .cly-vue-content-builder-header__input .el-input__inner:focus
+            /* .cly-vue-content-builder-header__input .el-input__inner:focus */
             &:focus {
                 box-shadow: none;
             }
         }
 
-        // .cly-vue-content-builder-header__input:hover .el-input__inner
-        // .cly-vue-content-builder-header__input--editing .el-input__inner
+        /* .cly-vue-content-builder-header__input:hover .el-input__inner */
+        /* .cly-vue-content-builder-header__input--editing .el-input__inner */
         &:hover .el-input__inner,
         &--editing .el-input__inner {
             border-color: #333C48;
         }
     }
 
-    // .cly-vue-content-builder-header__input-container
+    /* .cly-vue-content-builder-header__input-container */
     &__input-container {
         display: block;
         cursor: pointer;
     }
 
-    // .cly-vue-content-builder-header__left
+    /* .cly-vue-content-builder-header__left */
     &__left {
         display: flex;
         align-items: center;
         justify-content: flex-start;
     }
 
-    // .cly-vue-content-builder-header__options-button
+    /* .cly-vue-content-builder-header__options-button */
     &__options-button {
         margin-left: 8px;
 
-        // .cly-vue-content-builder-header__options-button.cly-vue-more-options .el-button
+        /* .cly-vue-content-builder-header__options-button.cly-vue-more-options .el-button */
         &.cly-vue-more-options .el-button {
             padding: 8px;
             border-radius: 8px;
@@ -4595,24 +4765,24 @@
         }
     }
 
-    // .cly-vue-content-builder-header__save-button
+    /* .cly-vue-content-builder-header__save-button */
     &__save-button {
         border-radius: 8px;
 
-        // .cly-vue-content-builder-header__badge + .cly-vue-content-builder-header__save-button
+        /* .cly-vue-content-builder-header__badge + .cly-vue-content-builder-header__save-button */
         .cly-vue-content-builder-header__badge + & {
             margin-left: 16px;
         }
     }
 
-    // .cly-vue-content-builder-header__tabs
+    /* .cly-vue-content-builder-header__tabs */
     &__tabs {
-        // .cly-vue-content-builder-header__tabs .cly-vue-tabs__primary-tab-list
+        /* .cly-vue-content-builder-header__tabs .cly-vue-tabs__primary-tab-list */
         & .cly-vue-tabs__primary-tab-list {
             padding: 0;
         }
 
-        // .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab
+        /* .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab */
         & .cly-vue-tabs__tab {
             padding: 8px 12px;
             border-radius: 8px;
@@ -4621,28 +4791,28 @@
             font-weight: 500;
             line-height: 20px;
 
-            // .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab:not(:first-child)
+            /* .cly-vue-content-builder-header__tabs .cly-vue-tabs__tab:not(:first-child) */
             &:not(:first-child) {
                 margin-left: 8px;
             }
         }
     }
 
-    // .cly-vue-content-builder-header__toggle
+    /* .cly-vue-content-builder-header__toggle */
     &__toggle {
         margin-right: 16px;
     }
 
-    // .cly-vue-content-builder-header__version
+    /* .cly-vue-content-builder-header__version */
     &__version {
         text-decoration: underline;
 
-        // .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by
+        /* .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by */
         & + .cly-vue-content-builder-header__created-by {
             position: relative;
             margin-left: 12px;
 
-            // .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by::before
+            /* .cly-vue-content-builder-header__version + .cly-vue-content-builder-header__created-by::before */
             &::before {
                 content: '·';
                 position: absolute;
@@ -4658,18 +4828,23 @@
 
 .cly-vue-content-builder-sidebar-input {
     position: relative;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
 
-    // .cly-vue-content-builder-sidebar-input__component
+    /* .cly-vue-content-builder-sidebar-input__component */
     &__component {
         max-width: 50%;
         width: auto;
         box-shadow: none;
 
-        // .cly-vue-content-builder-sidebar-input__component.el-input-number
+        /* .cly-vue-content-builder-sidebar-input__component.el-input-number */
         &.el-input-number {
             position: relative;
 
-            // .cly-vue-content-builder-sidebar-input__component.el-input-number .el-input__inner
+            /* .cly-vue-content-builder-sidebar-input__component.el-input-number .el-input__inner */
             & .el-input__inner {
                 text-align: left;
                 padding: 6px 10px;
@@ -4677,7 +4852,7 @@
             }
         }
 
-        // .cly-vue-content-builder-sidebar-input__component .el-input__count
+        /* .cly-vue-content-builder-sidebar-input__component .el-input__count */
         & .el-input__count {
             position: absolute;
             top: 0;
@@ -4688,14 +4863,14 @@
             font-weight: 400;
             line-height: 16px;
 
-            // .cly-vue-content-builder-sidebar-input__component .el-input__count .el-input__count-inner
+            /* .cly-vue-content-builder-sidebar-input__component .el-input__count .el-input__count-inner */
             & .el-input__count-inner {
                 padding: 0;
                 background: transparent;
             }
         }
 
-        // .cly-vue-content-builder-sidebar-input__component .el-input__inner
+        /* .cly-vue-content-builder-sidebar-input__component .el-input__inner */
         & .el-input__inner {
             font-size: 14px;
             font-weight: 400;
@@ -4707,18 +4882,18 @@
             border-radius: 6px;
             padding: 6px 10px;
 
-            // .cly-vue-content-builder-sidebar-input__component .el-input__inner:hover
+            /* .cly-vue-content-builder-sidebar-input__component .el-input__inner:hover */
             &:hover {
                 border-color: #0166D6;
             }
         }
 
-        // .cly-vue-content-builder-sidebar-input__component .el-input__suffix
+        /* .cly-vue-content-builder-sidebar-input__component .el-input__suffix */
         & .el-input__suffix {
             right: 0;
         }
 
-        // .cly-vue-content-builder-sidebar-input__component .el-input__suffix-inner
+        /* .cly-vue-content-builder-sidebar-input__component .el-input__suffix-inner */
         & .el-input__suffix-inner {
             padding: 6px 10px;
             padding-left: 0;
@@ -4726,41 +4901,102 @@
             width: 16px;
         }
 
-        // .cly-vue-content-builder-sidebar-input__component.el-input--suffix
+        /* .cly-vue-content-builder-sidebar-input__component.el-input--suffix */
         &.el-input--suffix {
-            // .cly-vue-content-builder-sidebar-input__component.el-input--suffix .el-input__inner
+            /* .cly-vue-content-builder-sidebar-input__component.el-input--suffix .el-input__inner */
             & .el-input__inner {
                 padding-right: 34px;
             }
         }
 
-        // .cly-vue-content-builder-sidebar-input__component--slider
+        /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor */
+        &.el-tiptap-editor {
+            max-width: initial;
+            width: 100%;
+
+            /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor .el-tiptap-editor__menu-bubble */
+            .el-tiptap-editor__menu-bubble {
+                display: none;
+            }
+
+            /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor .el-tiptap-editor__menu-bar */
+            .el-tiptap-editor__menu-bar {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                flex-wrap: wrap;
+                gap: 8px;
+
+                border-top-left-radius: 6px !important;
+                border-top-right-radius: 6px !important;
+                padding: 8px 10px;
+            }
+
+            /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor .el-tiptap-editor__command-button */
+            .el-tiptap-editor__command-button {
+                border: none;
+                margin: 0;
+                width: 16px;
+                height: 16px;
+            }
+
+            /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor .el-tiptap-editor__content */
+            .el-tiptap-editor__content {
+                padding: 8px 10px;
+                min-height: 40px;
+                border-bottom-left-radius: 6px;
+                border-bottom-right-radius: 6px;
+                border-bottom: 1px solid #cfd6e4 !important;
+            }
+
+            /* .cly-vue-content-builder-sidebar-input__component.el-tiptap-editor .el-tiptap-editor__footer */
+            .el-tiptap-editor__footer {
+                display: none;
+            }
+        }
+
+        /* .cly-vue-content-builder-sidebar-input__component--image-radio */
+        &--image-radio {
+            max-width: initial;
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        /* .cly-vue-content-builder-sidebar-input__component--list-block */
+        &--list-block {
+            max-width: initial;
+            width: 100%;
+        }
+
+        /* .cly-vue-content-builder-sidebar-input__component--slider */
         &--slider {
             width: 100%;
 
-            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__bar
+            /* .cly-vue-content-builder-sidebar-input__component--slider .el-slider__bar */
             & .el-slider__bar {
                 background-color: #0166D6;
             }
 
-            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button
+            /* .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button */
             & .el-slider__button {
                 border: 1px solid #0166D6;
             }
 
-            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button-wrapper
+            /* .cly-vue-content-builder-sidebar-input__component--slider .el-slider__button-wrapper */
             & .el-slider__button-wrapper {
                 z-index: 0;
             }
 
-            // .cly-vue-content-builder-sidebar-input__component--slider .el-slider__runway
+            /* .cly-vue-content-builder-sidebar-input__component--slider .el-slider__runway */
             & .el-slider__runway {
                 margin: 0;
                 background-color: #E2E4E8;
             }
         }
 
-        // .cly-vue-content-builder-sidebar-input__component--upload
+        /* .cly-vue-content-builder-sidebar-input__component--upload */
         &--upload {
             position: relative;
             display: block;
@@ -4768,12 +5004,12 @@
             height: 144px;
             max-width: initial;
 
-            // .cly-vue-content-builder-sidebar-input__component--upload .el-upload
+            /* .cly-vue-content-builder-sidebar-input__component--upload .el-upload */
             & .el-upload {
                 width: 100%;
                 height: 100%;
 
-                // .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger
+                /* .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger */
                 & .el-upload-dragger {
                     border: none;
                     border-radius: 8px;
@@ -4787,7 +5023,7 @@
                     width: 100%;
                     height: 100%;
 
-                    // .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger::hover
+                    /* .cly-vue-content-builder-sidebar-input__component--upload .el-upload .el-upload-dragger::hover */
                     &:hover {
                         background: #0166D60D;
                     }
@@ -4796,54 +5032,59 @@
         }
     }
 
-    // .cly-vue-content-builder-sidebar-input__input-container
-    &__input-container {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8px;
+    /* .cly-vue-content-builder-sidebar-input__image-radio */
+    &__image-radio {
+        /* .cly-vue-content-builder-sidebar-input__image-radio.el-radio */
+        &.el-radio {
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+            padding: 8px;
+            margin: 0;
 
-        // .cly-vue-content-builder-sidebar-input__input-container--small
-        &--small {
-            // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload)
-            & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
-                max-width: 70px;
+            /* .cly-vue-content-builder-sidebar-input__image-radio.el-radio.is-bordered */
+            &.is-bordered {
+                height: auto;
+                width: 154px;
+                margin: 0 !important;
             }
+        }
 
-            // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component--upload
-            & .cly-vue-content-builder-sidebar-input__component--upload {
-                max-height: 64px;
-            }
+        /* .cly-vue-content-builder-sidebar-input__image-radio .el-radio__input */
+        & .el-radio__input {
+            display: none;
         }
 
-        // .cly-vue-content-builder-sidebar-input__input-container--large
-        &--large {
-            // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload)
-            & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
-                max-width: 100%;
-            }
+        /* .cly-vue-content-builder-sidebar-input__image-radio .el-radio__input.is-disabled */
+        & .el-radio__input.is-disabled {
+            cursor: not-allowed;
+        }
 
-            // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component--upload
-            & .cly-vue-content-builder-sidebar-input__component--upload {
-                height: 224px;
-            }
+        /* .cly-vue-content-builder-sidebar-input__image-radio .el-radio__label */
+        & .el-radio__label {
+            padding: 0;
         }
+    }
 
-        // .cly-vue-content-builder-sidebar-input__input-container--vertical
-        &--vertical {
-            flex-direction: column;
-            align-items: flex-start;
+    /* .cly-vue-content-builder-sidebar-input__image-radio-content */
+    &__image-radio-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
-            // .cly-vue-content-builder-sidebar-input__input-container--vertical .cly-vue-content-builder-sidebar-input__component
-            & .cly-vue-content-builder-sidebar-input__component {
-                width: 100%;
-                max-width: 100%;
-            }
+        /* .cly-vue-content-builder-sidebar-input__image-radio-content--disabled */
+        &--disabled {
+            opacity: 0.7;
         }
     }
 
-    // .cly-vue-content-builder-sidebar-input__label
+    /* .cly-vue-content-builder-sidebar-input__image-radio-content-label */
+    &__image-radio-content-label {
+        margin-top: 16px;
+    }
+
+    /* .cly-vue-content-builder-sidebar-input__label */
     &__label {
         display: flex;
         align-items: baseline;
@@ -4855,7 +5096,7 @@
         font-weight: 500;
         line-height: 16px;
 
-        // .cly-vue-content-builder-sidebar-input__label i
+        /* .cly-vue-content-builder-sidebar-input__label i */
         i {
             margin-left: 4px;
             font-size: 13px;
@@ -4864,7 +5105,7 @@
         }
     }
 
-    // .cly-vue-content-builder-sidebar-input__number-input-suffix
+    /* .cly-vue-content-builder-sidebar-input__number-input-suffix */
     &__number-input-suffix {
         position: absolute;
         top: 0;
@@ -4876,22 +5117,13 @@
         font-size: 14px;
         line-height: 20px;
     }
-
-    // .cly-vue-content-builder-sidebar-input__sub-header
-    &__sub-header {
-        color: #81868D;
-        font-size: 13px;
-        font-weight: 500;
-        line-height: 16px;
-        margin-bottom: 16px;
-    }
     
-    // .cly-vue-content-builder-sidebar-input__upload-action
+    /* .cly-vue-content-builder-sidebar-input__upload-action */
     &__upload-action {
         height: 24px;
         width: 24px;
 
-        // .cly-vue-content-builder-sidebar-input__upload-action.el-button
+        /* .cly-vue-content-builder-sidebar-input__upload-action.el-button */
         &.el-button {
             background-color: #FFFFFF;
             border-radius: 6px;
@@ -4901,7 +5133,7 @@
             align-items: center;
             justify-content: center;
 
-            // .cly-vue-content-builder-sidebar-input__upload-action.el-button i
+            /* .cly-vue-content-builder-sidebar-input__upload-action.el-button i */
             i {
                 width: 16px;
                 height: 16px;
@@ -4909,14 +5141,14 @@
                 color: #81868D;
             }
 
-            // .cly-vue-content-builder-sidebar-input__upload-action.el-button:hover
+            /* .cly-vue-content-builder-sidebar-input__upload-action.el-button:hover */
             &:hover {
                 border-color: #0166D6;
             }
         }
     }
 
-    // .cly-vue-content-builder-sidebar-input__upload-actions
+    /* .cly-vue-content-builder-sidebar-input__upload-actions */
     &__upload-actions {
         position: absolute;
         top: 8px;
@@ -4928,7 +5160,7 @@
         gap: 4px;
     }
 
-    // .cly-vue-content-builder-sidebar-input__upload-placeholder
+    /* .cly-vue-content-builder-sidebar-input__upload-placeholder */
     &__upload-placeholder {
         color: #A7AEB8;
         height: 48px;
@@ -4936,7 +5168,7 @@
         font-size: 48px;
     }
 
-    // .cly-vue-content-builder-sidebar-input__upload-value
+    /* .cly-vue-content-builder-sidebar-input__upload-value */
     &__upload-value {
         width: auto;
         height: 100%;
@@ -4944,6 +5176,44 @@
         max-width: 100%; // image won't exceed the width of its container
         max-height: 100%; //
     }
+
+    /* .cly-vue-content-builder-sidebar-input__input--small */
+    &--small {
+        /* .cly-vue-content-builder-sidebar-input__input--small .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) */
+        & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
+            max-width: 70px;
+        }
+
+        /* .cly-vue-content-builder-sidebar-input__input--small .cly-vue-content-builder-sidebar-input__component--upload */
+        & .cly-vue-content-builder-sidebar-input__component--upload {
+            max-height: 64px;
+        }
+    }
+
+    /* .cly-vue-content-builder-sidebar-input__input--large */
+    &--large {
+        /* .cly-vue-content-builder-sidebar-input__input--large .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) */
+        & .cly-vue-content-builder-sidebar-input__component:not(.cly-vue-content-builder-sidebar-input__component--upload) {
+            max-width: 100%;
+        }
+
+        /* .cly-vue-content-builder-sidebar-input__input--large .cly-vue-content-builder-sidebar-input__component--upload */
+        & .cly-vue-content-builder-sidebar-input__component--upload {
+            height: 224px;
+        }
+    }
+
+    /* .cly-vue-content-builder-sidebar-input__input--vertical */
+    &--vertical {
+        flex-direction: column;
+        align-items: flex-start;
+
+        /* .cly-vue-content-builder-sidebar-input__input--vertical .cly-vue-content-builder-sidebar-input__component */
+        & .cly-vue-content-builder-sidebar-input__component {
+            width: 100%;
+            max-width: 100%;
+        }
+    }
 }
 
 .cly-option-swapper {
@@ -4951,7 +5221,7 @@
     align-items: center;
     justify-content: center;
 
-    // .cly-option-swapper__option
+    /* .cly-option-swapper__option */
     &__option {
         cursor: pointer;
         padding: 8px 10px;
@@ -4964,44 +5234,44 @@
         flex-grow: 1;
         text-align: center;
 
-        // .cly-option-swapper__option--active:not(.cly-option-swapper__option--disabled):not(.cly-option-swapper__option--no-highlight)
+        /* .cly-option-swapper__option--active:not(.cly-option-swapper__option--disabled):not(.cly-option-swapper__option--no-highlight) */
         &--active:not(#{&}--disabled):not(#{&}--no-highlight) {
             background: rgba(#0166D6, 0.1);
             border-color: #0166D6;
             color: #0166D6;
         }
 
-        // .cly-option-swapper__option--disabled
+        /* .cly-option-swapper__option--disabled */
         &--disabled {
             cursor: not-allowed;
             background: #E2E4E8;
             opacity: 0.5;
 
-            // .cly-option-swapper__option--disabled.has-tooltip
+            /* .cly-option-swapper__option--disabled.has-tooltip */
             &.has-tooltip {
                 cursor: not-allowed;
             }
         }
 
-        // .cly-option-swapper__option--first
+        /* .cly-option-swapper__option--first */
         &--first {
             border-top-left-radius: 6px;
             border-bottom-left-radius: 6px;
         }
 
-        // .cly-option-swapper__option--last
+        /* .cly-option-swapper__option--last */
         &--last {
             border-top-right-radius: 6px;
             border-bottom-right-radius: 6px;
         }
         
-        // .cly-option-swapper__option--disabled.cly-option-swapper__option--active
+        /* .cly-option-swapper__option--disabled.cly-option-swapper__option--active */
         &--no-highlight#{&}--active {
             background: #F6F6F6;
         }
     }
 
-    // .cly-option-swapper--disabled
+    /* .cly-option-swapper--disabled */
     &--disabled {
         cursor: not-allowed;
         opacity: 0.5;

From 78a6679f0fb43a0d2fe432d241e9aeeff128442f Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Tue, 2 Sep 2025 13:55:56 +0100
Subject: [PATCH 2/8] fix: allow color picker to overflow step container

---
 frontend/express/public/stylesheets/vue/clyvue.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index a9b32b22dfe..0a3f056ac89 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -4489,6 +4489,7 @@
 
     /* .cly-content-builder-sidebar-step .el-collapse-item__wrap */
     & .el-collapse-item__wrap {
+        overflow: visible;
         border: none;
     }
 

From eef9ff8786aceda62b4269f197d8ca309e0fe3bb Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Mon, 8 Sep 2025 14:26:16 +0100
Subject: [PATCH 3/8] fix: alphabetically order props

---
 .../javascripts/countly/vue/components/content.js      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js
index 830474866be..1b7e93cd407 100644
--- a/frontend/express/public/javascripts/countly/vue/components/content.js
+++ b/frontend/express/public/javascripts/countly/vue/components/content.js
@@ -570,6 +570,11 @@
                 type: String
             },
 
+            size: {
+                default: null,
+                type: String
+            },
+
             subHeader: {
                 default: null,
                 type: String
@@ -590,11 +595,6 @@
                 type: [String, Number, Boolean, Object, Array]
             },
 
-            size: {
-                default: null,
-                type: String
-            },
-
             withComponentTooltip: {
                 default: false,
                 type: Boolean

From a08acdb7bb466fd1650ac0bfb8d2be1430da8b86 Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Fri, 12 Sep 2025 17:34:45 +0100
Subject: [PATCH 4/8] feat: improve color picker styles

---
 .../countly/vue/components/content.js         |  25 +-
 .../countly/vue/components/input.js           | 208 ++++++++++++--
 .../vue/templates/UI/color-picker.html        |  53 +++-
 .../public/stylesheets/vue/clyvue.scss        | 272 ++++++++++++++++++
 4 files changed, 514 insertions(+), 44 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js
index 1b7e93cd407..9d5aad9bc6d 100644
--- a/frontend/express/public/javascripts/countly/vue/components/content.js
+++ b/frontend/express/public/javascripts/countly/vue/components/content.js
@@ -673,24 +673,17 @@
             },
 
             computedAttrs() {
-                if (this.isTextareaInput) {
-                    return {
-                        ...this.$attrs,
-                        extensions: this.textareaExtensions
-                    };
-                }
-
-                if (this.isUploadInput) {
-                    return {
-                        ...this.$attrs,
+                return {
+                    ...this.$attrs,
+                    ...this.isColorPickerInput && { newUI: true },
+                    ...this.isTextareaInput && { extensions: this.textareaExtensions },
+                    ...this.isUploadInput && {
                         action: '',
                         drag: true,
                         multiple: false,
                         showFileList: false
-                    };
-                }
-
-                return this.$attrs;
+                    }
+                };
             },
 
             controlsProp() {
@@ -701,6 +694,10 @@
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN;
             },
 
+            isColorPickerInput() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER;
+            },
+
             isComponentWithOptions() {
                 return this.isDropdownInput && Array.isArray(this.options) && this.options.length;
             },
diff --git a/frontend/express/public/javascripts/countly/vue/components/input.js b/frontend/express/public/javascripts/countly/vue/components/input.js
index 70d66c02eb0..1533f303290 100644
--- a/frontend/express/public/javascripts/countly/vue/components/input.js
+++ b/frontend/express/public/javascripts/countly/vue/components/input.js
@@ -4,6 +4,9 @@
 
     var _mixins = countlyVue.mixins;
     var HEX_COLOR_REGEX = new RegExp('^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$', 'i');
+    const COLOR_ALPHA = 'alpha';
+    const COLOR_FORMAT_HEX = 'hex';
+    const COLOR_FORMAT_RGB = 'rgb';
 
     Vue.component("cly-colorpicker", countlyVue.components.create({
         template: CV.T('/javascripts/countly/vue/templates/UI/color-picker.html'),
@@ -12,7 +15,16 @@
             picker: window.VueColor.Sketch
         },
 
+        mixins: [
+            _mixins.i18n
+        ],
+
         props: {
+            newUI: {
+                type: Boolean,
+                default: false
+            },
+
             placement: {
                 default: 'left',
                 type: String
@@ -39,12 +51,10 @@
             'input'
         ],
 
-        mixins: [
-            _mixins.i18n
-        ],
-
-        data: function() {
+        data() {
             return {
+                colorByFormats: {},
+
                 isOpened: false,
 
                 previousColor: null
@@ -53,65 +63,211 @@
 
         computed: {
             bodyClasses() {
-                return ['cly-vue-color-picker__body--' + this.placement];
+                return {
+                    [`cly-vue-color-picker__body--${this.placement}`]: true,
+                    'cly-vue-color-picker__body--new-ui': this.isNewUIApplied
+                };
+            },
+
+            colorAlpha: {
+                get() {
+                    const alpha = typeof this.colorByFormats[COLOR_ALPHA] === 'number' ?
+                        this.colorByFormats[COLOR_ALPHA] :
+                        0;
+
+                    return Math.round(100 * alpha);
+                },
+                set(value) {
+                    const valueAsNumber = +value;
+
+                    if (valueAsNumber >= 0 && valueAsNumber <= 100) {
+                        this.colorByFormats[COLOR_ALPHA] = valueAsNumber ? valueAsNumber / 100 : 0;
+                    }
+                }
             },
 
             dropStyles() {
-                return { color: this.localValue };
+                return { backgroundColor: `rgba(${Object.values(this.pickerColor).join(', ')})` };
             },
 
-            localValue: {
+            hexColor: {
                 get() {
-                    return (this.value || this.resetValue);
+                    const hexColor = this.colorByFormats[COLOR_FORMAT_HEX];
+
+                    return hexColor.startsWith('#') ? hexColor.slice(1) : hexColor;
                 },
                 set(value) {
-                    let finalValue = value;
+                    this.colorByFormats[COLOR_FORMAT_HEX] = value;
+                }
+            },
 
-                    if (!finalValue.startsWith('#')) {
-                        finalValue = `#${finalValue}`;
+            inputValue: {
+                get() {
+                    return this.rgbToHex(this.pickerColor);
+                },
+                set(value) {
+                    if (value.match(HEX_COLOR_REGEX)) {
+                        this.pickerColor = this.hexToRgb(value, true);
                     }
+                }
+            },
 
-                    if (finalValue.match(HEX_COLOR_REGEX)) {
-                        this.$emit('input', finalValue);
-                    }
+            isNewUIApplied() {
+                return this.newUI;
+            },
+
+            pickerColor: {
+                get() {
+                    return this.hexToRgb(this.value || this.resetValue, true);
+                },
+                set(rgbColor) {
+                    this.$emit('input', this.rgbToHex(rgbColor, true));
+                }
+            },
+
+            rgbColor: {
+                get() {
+                    return this.colorByFormats[COLOR_FORMAT_RGB];
+                },
+                set(value) {
+                    this.colorByFormats[COLOR_FORMAT_RGB] = JSON.parse(JSON.stringify(value));
                 }
             }
         },
 
         watch: {
+            [`colorByFormats.${COLOR_ALPHA}`]: {
+                handler(value) {
+                    if (typeof value === 'number') {
+                        this.pickerColor = this.rgbColor;
+                    }
+                }
+            },
+
+            [`colorByFormats.${COLOR_FORMAT_HEX}`]: {
+                handler(value) {
+                    if (value) {
+                        const hexValue = `#${value}`;
+
+                        if (hexValue.match(HEX_COLOR_REGEX)) {
+                            this.pickerColor = this.hexToRgb(hexValue);
+                        }
+                    }
+                }
+            },
+
+            [`colorByFormats.${COLOR_FORMAT_RGB}`]: {
+                handler(value) {
+                    if (value) {
+                        this.pickerColor = value;
+                    }
+                }
+            },
+
             isOpened(value) {
                 if (value) {
                     this.previousColor = JSON.parse(JSON.stringify(this.value));
                 }
+            },
+
+            value: {
+                handler(value) {
+                    if (this.isNewUIApplied && value) {
+                        this.setPickerInputValues();
+                    }
+                },
+                immediate: true
             }
         },
 
         methods: {
-            onInputContainerClick() {
-                this.isOpened = true;
+            closePicker() {
+                this.isOpened = false;
             },
 
-            close() {
-                this.isOpened = false;
+            hexToRgb(hex, includeAlpha = false) {
+                let hexString = hex.replace('#', '');
+
+                if (hexString.length === 3) {
+                    hexString = hexString.split('').map(c => c + c).join('');
+                }
+
+                return {
+                    r: parseInt(hexString.slice(0, 2), 16) || 0,
+                    g: parseInt(hexString.slice(2, 4), 16) || 0,
+                    b: parseInt(hexString.slice(4, 6), 16) || 0,
+                    a: includeAlpha && hexString.length === 8 ? parseInt(hexString.slice(6, 8), 16) / 255 : 1
+                };
             },
 
             onCancelClick() {
-                this.localValue = this.previousColor;
-                this.close();
+                this.inputValue = this.previousColor;
+                this.closePicker();
+            },
+
+            onClickOutside() {
+                this.closePicker();
             },
 
             onConfirmClick() {
-                this.$emit('change', this.localValue);
-                this.close();
+                this.$emit('change', this.inputValue);
+                this.closePicker();
+            },
+
+            onInputContainerClick() {
+                this.isOpened = true;
             },
 
             onPickerInput(color) {
-                this.localValue = color.hex8 || color.hex;
+                const { a = 0, ...rgb } = color.rgba;
+
+                const alpha = Math.round(a * 100);
+
+                if (alpha !== this.colorAlpha) {
+                    this.colorAlpha = alpha;
+                }
+
+                if (!_.isEqual(this.rgbColor, rgb)) {
+                    this.pickerColor = rgb;
+                }
             },
 
             onResetClick() {
-                this.localValue = this.resetValue;
-                this.close();
+                this.inputValue = this.resetValue;
+                this.closePicker();
+            },
+
+            onRGBInput(key, value) {
+                this.rgbColor = JSON.parse(JSON.stringify({
+                    ...this.rgbColor,
+                    [key]: +value
+                }));
+            },
+
+            rgbToHex(rgbColor, includeAlpha = false) {
+                const { r, g, b } = rgbColor || {};
+                const hexString = `#${this.valueToHex(r)}${this.valueToHex(g)}${this.valueToHex(b)}`;
+                const opacity = this.colorAlpha ? Math.round((this.colorAlpha / 100) * 255) : 0;
+
+                return `${hexString}${includeAlpha ? this.valueToHex(opacity) : ''}`;
+            },
+
+            setPickerInputValues() {
+                const { a, ...rgb } = this.pickerColor;
+
+                if (!_.isEqual(this.rgbColor, rgb)) {
+                    this.colorByFormats = JSON.parse(JSON.stringify({
+                        [COLOR_ALPHA]: a,
+                        [COLOR_FORMAT_RGB]: rgb,
+                        [COLOR_FORMAT_HEX]: this.rgbToHex(rgb)
+                    }));
+                }
+            },
+
+            valueToHex(value) {
+                const hex = value.toString(16);
+
+                return hex.length === 1 ? '0' + hex : hex;
             }
         }
     }));
diff --git a/frontend/express/public/javascripts/countly/vue/templates/UI/color-picker.html b/frontend/express/public/javascripts/countly/vue/templates/UI/color-picker.html
index 06a5bece2ff..b39323f3940 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/UI/color-picker.html
+++ b/frontend/express/public/javascripts/countly/vue/templates/UI/color-picker.html
@@ -3,7 +3,7 @@
     class="cly-vue-color-picker__input-container"
     :data-test-id="testId"
     @click.stop="onInputContainerClick"
-  >
+    >
     <div
       class="cly-vue-color-picker__input-drop-container"
       :data-test-id="testId + '-cly-color-picker-img-wrapper'"
@@ -15,11 +15,13 @@
       />
     </div>
     <input
-      v-model="localValue"
+      v-model="inputValue"
       class="cly-vue-color-picker__input"
+      :class="{ 'cly-vue-color-picker__input--new-ui': isNewUIApplied }"
       type="text"
     />
     <div
+      v-if="!isNewUIApplied"
       class="cly-vue-color-picker__input-arrow"
       :class="{ 'cly-vue-color-picker__input-arrow--open': isOpened }"
     >
@@ -29,16 +31,59 @@
   </div>
   <div
     v-if="isOpened"
-    v-click-outside="close"
+    v-click-outside="onClickOutside"
     class="cly-vue-color-picker__body"
     :class="bodyClasses"
   >
     <picker
       class="cly-vue-color-picker__picker"
+      :disable-fields="isNewUIApplied"
       :preset-colors="[]"
-      :value="localValue"
+      ref="pickerComponent"
+      :value="pickerColor"
       @input="onPickerInput"
     />
+    <div
+      v-if="isNewUIApplied"
+      class="cly-vue-color-picker__color-inputs-container"
+    >
+      <div class="cly-vue-color-picker__color-inputs-wrapper">
+        <el-input
+          v-model="colorAlpha"
+          class="cly-vue-color-picker__color-input cly-vue-color-picker__color-input--alpha"
+          max="100"
+          min="0"
+          type="number"
+        >
+          <template #append>
+            <span>%</span>
+          </template>
+        </el-input>
+        <el-input
+          v-model="hexColor"
+          class="cly-vue-color-picker__color-input cly-vue-color-picker__color-input--hex"
+        >
+          <template #prepend>
+            <span>#</span>
+          </template>
+        </el-input>
+      </div>
+      <div class="cly-vue-color-picker__color-input-rgb">
+        <el-input
+          v-for="key in Object.keys(rgbColor || {})"
+          :key="`rgb-input-for-${key}`"
+          max="255"
+          min="0"
+          type="number"
+          :value="rgbColor[key]"
+          @input="onRGBInput(key, $event)"
+        >
+          <template #prepend>
+            <span>{{ key }}</span>
+          </template>
+        </el-input>
+      </div>
+    </div>
     <div class="cly-vue-color-picker__buttons-container">
       <cly-button
         class="cly-vue-color-picker__button"
diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index 0a3f056ac89..4ad81e58758 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -1299,6 +1299,127 @@
                 right: 0;
                 transform: translate(-50%, 100%);
             }
+
+            /* cly-vue-color-picker__body--new-ui */
+            &--new-ui {
+                box-sizing: border-box;
+                width: 248px;
+                height: 432px;
+                padding: 8px;
+                border-radius: 16px;
+                background: #FFF;
+                box-shadow: 0 33px 9px 0 rgba(120, 120, 120, 0.00),
+                    0 21px 9px 0 rgba(120, 120, 120, 0.00),
+                    0 12px 7px 0 rgba(120, 120, 120, 0.00),
+                    0 5px 5px 0 rgba(120, 120, 120, 0.00),
+                    0 1px 3px 0 rgba(120, 120, 120, 0.00);
+
+                /* .cly-vue-color-picker__body--new-ui .cly-vue-color-picker__button */
+                & .cly-vue-color-picker__button {
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 20px;
+                    border-radius: 6px;
+                    padding: 6px 10px;
+                }
+
+                /* .cly-vue-color-picker__body--new-ui .vc-sketch */
+                & .vc-sketch {
+                    box-sizing: border-box;
+                    /*  232 = picker dropdown with (248) - 2 * horizontal padding (2 * 8px) */
+                    width: 232px;
+                    /* 276 = controls height (28px) + controls top margin (16px) + saturation height (232px) */
+                    height: 276px;
+                    padding: 0;
+
+                    /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls */
+                    & .vc-sketch-controls {
+                        margin-top: 16px;
+
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-alpha-picker */
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-hue-picker */
+                        & .vc-alpha-picker,
+                        & .vc-hue-picker {
+                            height: 8px;
+                            width: 8px;
+                            background: transparent;
+                            border: 2px solid #fff;
+                            border-radius: 50%;
+                            transform: translate(-2px, -2px);
+                        }
+
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-sketch-alpha-wrap */
+                        & .vc-sketch-alpha-wrap {
+                            margin-top: 8px;
+                        }
+
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-sketch-color-wrap */
+                        & .vc-sketch-color-wrap {
+                            display: none;
+                        }
+
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-sketch-sliders */
+                        & .vc-sketch-sliders {
+                            padding: 0;
+                        }
+
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-sketch-sliders .vc-alpha-gradient */
+                        /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-controls .vc-sketch-sliders .vc-hue */
+                        & .vc-sketch-sliders .vc-alpha-gradient,
+                        & .vc-sketch-sliders .vc-hue {
+                            border-radius: 8px;
+                        }
+                    }
+
+                    /* .cly-vue-color-picker__body--new-ui .vc-sketch .vc-sketch-saturation-wrap .vc-saturation .vc-saturation-circle */
+                    & .vc-saturation .vc-saturation-circle {
+                        width: 16px;
+                        height: 16px;
+                        box-shadow: none;
+                        border: 4px solid white;
+                        transform: translate(-8px, -8px);
+                    }
+
+                    /* .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap */
+                    & .vc-sketch-saturation-wrap {
+                        /*  232 = picker dropdown with (248) - 2 * horizontal padding (2 * 8px) */
+                        width: 232px;
+                        /*  232 = picker dropdown height (248) - 2 * vertical padding (2 * 8px) */
+                        height: 232px;
+                        border-radius: 12px;
+                        padding-bottom: 0;
+                        bottom: 0;
+
+                        /* .cly-vue-color-picker__body .vc-sketch .vc-sketch-saturation-wrap .vc-saturation */
+                        & .vc-saturation {
+                            /*  232 = picker dropdown with (248) - 2 * horizontal padding (2 * 8px) */
+                            width: 232px;
+                            /*  232 = picker dropdown height (248) - 2 * vertical padding (2 * 8px) */
+                            height: 232px;
+                            border-radius: 12px;
+                        }
+
+                    }
+                }
+
+                /* cly-vue-color-picker__body--new-ui .cly-vue-color-picker__buttons-container */
+                & .cly-vue-color-picker__buttons-container {
+                    justify-content: flex-end;
+                    margin-top: 8px;
+                    padding: 0;
+                    gap: 4px;
+
+                    /* cly-vue-color-picker__body--new-ui .cly-vue-color-picker__buttons-container .cly-vue-color-picker__button */
+                    & .cly-vue-color-picker__button {
+                        border-radius: 8px;
+                        margin-left: 0;
+                    }
+                }
+            }
+
+            & .cly-vue-color-picker__buttons-container {
+                margin-top: 16px;
+            }
         }
 
         /* .cly-vue-color-picker__buttons-container */
@@ -1309,6 +1430,152 @@
             padding-right: 12px;
         }
 
+        /* cly-vue-color-picker__color-input */
+        &__color-input {
+            position: relative;
+
+            /* cly-vue-color-picker__color-input .el-input__inner */
+            & .el-input__inner {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 20px;
+                color: #383a3f;
+                background-color: #fff;
+                border: 1px solid #e2e4e8;
+                border-radius: 6px;
+                padding: 6px 10px;
+
+                &::-webkit-inner-spin-button {
+                    -webkit-appearance: none;
+                    margin: 0;
+                }
+            }
+
+            /* cly-vue-color-picker__color-input.el-input-group--append .el-input__inner */
+            &.el-input-group--append .el-input__inner {
+                padding-right: 28px;
+            }
+
+            /* cly-vue-color-picker__color-input.el-input-group--prepend .el-input__inner */
+            &.el-input-group--prepend .el-input__inner {
+                padding-left: 28px;
+            }
+
+            /* cly-vue-color-picker__color-input .el-input-group__append */
+            & .el-input-group__append {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 8px;
+                width: 8px;
+                background: none;
+                border: none;
+                border-radius: 0;
+                color: #81868d;
+            }
+
+            /* cly-vue-color-picker__color-input .el-input-group__prepend */
+            & .el-input-group__prepend {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 8px;
+                width: 8px;
+                background: none;
+                border: none;
+                border-radius: 0;
+                color: #81868d;
+            }
+
+            /* cly-vue-color-picker__color-input--alpha */
+            &--alpha {
+                max-width: 30%;
+            }
+        }
+
+        /* .cly-vue-color-picker__color-input-rgb */
+        &__color-input-rgb {
+            display: flex;
+            align-items: center;
+
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            color: #383a3f;
+            background-color: #fff;
+            border: 1px solid #e2e4e8;
+            border-radius: 6px;
+
+            /* .cly-vue-color-picker__color-input-rgb .el-input__inner */
+            & .el-input__inner {
+                border: none;
+                box-shadow: none;
+                text-align: center;
+                padding: 6px;
+
+                /* .cly-vue-color-picker__color-input-rgb .el-input__inner::-webkit-inner-spin-button */
+                &::-webkit-inner-spin-button {
+                    -webkit-appearance: none;
+                    margin: 0;
+                }
+
+                /* .cly-vue-color-picker__color-input-rgb .el-input__inner::first-child */
+                &::first-child {
+                    padding-left: 10px;
+                }
+
+                /* .cly-vue-color-picker__color-input-rgb .el-input__inner::last-child */
+                &::last-child {
+                    padding-right: 10px;
+                }
+            }
+
+            /* .cly-vue-color-picker__color-input-rgb .el-input__inner .el-input-group__prepend */
+            & .el-input-group__prepend {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 8px;
+                width: 8px;
+                background: none;
+                border: none;
+                border-radius: 0;
+                text-transform: uppercase;
+
+                font-size: 12px;
+                color: #81868d;
+            }
+        }
+
+        /* cly-vue-color-picker__color-inputs-container */
+        &__color-inputs-container {
+            margin-top: 16px;
+
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        /* .cly-vue-color-picker__color-inputs-wrapper */
+        &__color-inputs-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 8px;
+        }
+
         /* .cly-vue-color-picker__input */
         &__input {
             box-sizing: border-box;
@@ -1328,6 +1595,11 @@
             border: 1px solid #CFD6E4;
             border-radius: 4px;
             text-transform: uppercase;
+
+            /* cly-vue-color-picker__input--new-ui */
+            &--new-ui {
+                padding-right: 6px;
+            }
         }
 
         /* .cly-vue-color-picker__input-arrow */

From baff2f07cfa8edc8ce00fa1ef96a611f1bb2dc9c Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Tue, 14 Oct 2025 10:14:57 +0100
Subject: [PATCH 5/8] fix: make slider input have same height as the other
 inputs

---
 frontend/express/public/stylesheets/vue/clyvue.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index 4ad81e58758..eb62bd85525 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -5245,7 +5245,10 @@
 
         /* .cly-vue-content-builder-sidebar-input__component--slider */
         &--slider {
+            display: inline-flex;
+            align-items: center;
             width: 100%;
+            height: 32px;
 
             /* .cly-vue-content-builder-sidebar-input__component--slider .el-slider__bar */
             & .el-slider__bar {

From bc71346dc2b489dbf2931c2e757904b45efc55bc Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Tue, 14 Oct 2025 10:15:38 +0100
Subject: [PATCH 6/8] fix: make selected button context more perceptible

---
 frontend/express/public/stylesheets/vue/clyvue.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index eb62bd85525..3e5f884ff83 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -5541,9 +5541,15 @@
             border-bottom-right-radius: 6px;
         }
         
-        /* .cly-option-swapper__option--disabled.cly-option-swapper__option--active */
-        &--no-highlight#{&}--active {
+        /* .cly-option-swapper__option--no-highlight */
+        &--no-highlight {
             background: #F6F6F6;
+
+            /* .cly-option-swapper__option--no-highlight.cly-option-swapper__option--active */
+            &.cly-option-swapper__option--active {
+                background: #FFFFFF;
+                font-weight: 500;
+            }
         }
     }
 

From 20803323bdd12258346714b76c1e8f7aac44d001 Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Wed, 22 Oct 2025 11:16:12 +0100
Subject: [PATCH 7/8] fix: prevent alpha from going to 0 on old color picker UI

---
 .../express/public/javascripts/countly/vue/components/input.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/input.js b/frontend/express/public/javascripts/countly/vue/components/input.js
index 1533f303290..700bf5f1b79 100644
--- a/frontend/express/public/javascripts/countly/vue/components/input.js
+++ b/frontend/express/public/javascripts/countly/vue/components/input.js
@@ -172,7 +172,7 @@
 
             value: {
                 handler(value) {
-                    if (this.isNewUIApplied && value) {
+                    if (value) {
                         this.setPickerInputValues();
                     }
                 },

From 73c45712da8c1200f87d336682e4f81bd2917816 Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Wed, 22 Oct 2025 12:57:38 +0100
Subject: [PATCH 8/8] chore: commit to trigger tests

---
 .../express/public/javascripts/countly/vue/components/input.js   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/input.js b/frontend/express/public/javascripts/countly/vue/components/input.js
index 700bf5f1b79..384006a65fe 100644
--- a/frontend/express/public/javascripts/countly/vue/components/input.js
+++ b/frontend/express/public/javascripts/countly/vue/components/input.js
@@ -220,7 +220,6 @@
 
             onPickerInput(color) {
                 const { a = 0, ...rgb } = color.rgba;
-
                 const alpha = Math.round(a * 100);
 
                 if (alpha !== this.colorAlpha) {