@sc-360-v2/storefront-cms-library 0.5.43 → 0.5.45

package/dist/search.scss

@@ -52,8 +52,15 @@
     }
 
     .search-container {
+      display: flex;
       width: 100%;
       height: 100%;
+      padding: var(--_ctm-mob-dn-sh-cr-pg, var(--_ctm-tab-dn-sh-cr-pg, var(--_ctm-dn-sh-cr-pg)));
+      display: flex;
+      gap: var(
+        --_ctm-mob-dn-sh-cr-im-gp,
+        var(--_ctm-tab-dn-sh-cr-im-gp, var(--_ctm-dn-sh-cr-im-gp))
+      );
       transition:
         background-color 0.2s,
         color 0.2s,
@@ -84,10 +91,232 @@
           }
         }
       }
+      // .btn__with__text[data-btn-name="buttonStyles"] {
+      .btn__with__text {
+        &[data-show-shadow="false"] {
+          --_show-shadow: none;
+        }
+        &[data-icon-position="left"] {
+          --_sf-fd-bn: row;
+        }
+        &[data-icon-position="right"] {
+          --_sf-fd-bn: row-reverse;
+        }
+        &[data-icon-position="center"] {
+          --_sf-fd-bn: row;
+        }
+
+        &:hover {
+          --_sf-hr-bd-cr: var(
+            --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
+            var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
+          );
+          --_sf-hr-br-cr: var(
+            --_ctm-mob-dn-rm-bn-hr-se-br-cr,
+            var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
+          );
+          --_sf-hr-br-se: var(
+            --_ctm-mob-dn-rm-bn-hr-se-br-se,
+            var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
+          );
+          --_sf-hr-br-wh: var(
+            --_ctm-mob-dn-rm-bn-hr-se-br-wh,
+            var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
+          );
+          --_sf-hr-br-rs: var(
+            --_ctm-mob-dn-rm-bn-hr-se-br-rs,
+            var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
+          );
+          --_sf-hr-at: var(
+            --_ctm-mob-dn-rm-bn-hr-se-at,
+            var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
+          );
+          --_sf-hr-gp: var(
+            --_ctm-mob-dn-rm-bn-hr-se-gp,
+            var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
+          );
+
+          // for shadow
+          --_sf-hr-sw-ae: var(
+            --_ctm-mob-dn-rm-bn-hr-se-sw-ae,
+            var(--_ctm-tab-dn-rm-bn-hr-se-sw-ae, var(--_ctm-dn-rm-bn-hr-se-sw-ae))
+          );
+          --_sf-hr-sw-br: var(
+            --_ctm-mob-dn-rm-bn-hr-se-sw-br,
+            var(--_ctm-tab-dn-rm-bn-hr-se-sw-br, var(--_ctm-dn-rm-bn-hr-se-sw-br))
+          );
+          --_sf-hr-sw-hr: var(
+            --_ctm-mob-dn-rm-bn-hr-se-sw-hr,
+            var(--_ctm-tab-dn-rm-bn-hr-se-sw-hr, var(--_ctm-dn-rm-bn-hr-se-sw-hr))
+          );
+          --_sf-hr-sw-cr: var(
+            --_ctm-mob-dn-rm-bn-hr-se-sw-cr,
+            var(--_ctm-tab-dn-rm-bn-hr-se-sw-cr, var(--_ctm-dn-rm-bn-hr-se-sw-cr))
+          );
+
+          // for font
+
+          --_sf-hr-cr: var(
+            --_ctm-mob-dn-rm-bn-hr-se-cr,
+            var(--_ctm-tab-dn-rm-bn-hr-se-cr, var(--_ctm-dn-rm-bn-hr-se-cr))
+          );
+          --_sf-hr-ft-fy: var(
+            --_ctm-mob-dn-rm-bn-hr-se-ft-fy,
+            var(--_ctm-tab-dn-rm-bn-hr-se-ft-fy, var(--_ctm-dn-rm-bn-hr-se-ft-fy))
+          );
+          --_sf-hr-ft-se: var(
+            --_ctm-mob-dn-rm-bn-hr-se-ft-se,
+            var(--_ctm-tab-dn-rm-bn-hr-se-ft-se, var(--_ctm-dn-rm-bn-hr-se-ft-se))
+          );
+          --_sf-hr-ft-wt: var(
+            --_ctm-mob-dn-rm-bn-hr-se-ft-wt,
+            var(--_ctm-tab-dn-rm-bn-hr-se-ft-wt, var(--_ctm-dn-rm-bn-hr-se-ft-wt))
+          );
+          --_sf-hr-ft-se-ic: var(
+            --_ctm-mob-dn-rm-bn-hr-se-ft-se-ic,
+            var(--_ctm-tab-dn-rm-bn-hr-se-ft-se-ic, var(--_ctm-dn-rm-bn-hr-se-ft-se-ic))
+          );
+          --_sf-hr-tt-an: var(
+            --_ctm-mob-dn-rm-bn-hr-se-tt-an,
+            var(--_ctm-tab-dn-rm-bn-hr-se-tt-an, var(--_ctm-dn-rm-bn-hr-se-tt-an))
+          );
+          --_sf-hr-lr-sg: var(
+            --_ctm-mob-dn-rm-bn-hr-se-lr-sg,
+            var(--_ctm-tab-dn-rm-bn-hr-se-lr-sg, var(--_ctm-dn-rm-bn-hr-se-lr-sg))
+          );
+          --_sf-hr-le-ht: var(
+            --_ctm-mob-dn-rm-bn-hr-se-le-ht,
+            var(--_ctm-tab-dn-rm-bn-hr-se-le-ht, var(--_ctm-dn-rm-bn-hr-se-le-ht))
+          );
+
+          --_sf-hr-in-se: var(
+            --_ctm-mob-dn-rm-bn-hr-se-in-se,
+            var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
+          );
+          --_sf-hr-in-se: var(
+            --_ctm-mob-dn-rm-bn-hr-se-in-se,
+            var(--_ctm-tab-dn-rm-bn-hr-se-in-se, var(--_ctm-dn-rm-bn-hr-se-in-se))
+          );
+          --_sf-hr-in-c1: var(
+            --_ctm-mob-dn-rm-bn-hr-se-in-c1,
+            var(--_ctm-tab-dn-rm-bn-hr-se-in-c1, var(--_ctm-dn-rm-bn-hr-se-in-c1))
+          );
+          --_sf-hr-ue: var(
+            --_ctm-mob-dn-rm-bn-hr-se-ue,
+            var(--_ctm-tab-dn-rm-bn-hr-se-ue, var(--_ctm-dn-rm-bn-hr-se-ue))
+          );
+
+          // for pading and width
+          --_sf-hr-pg: var(
+            --_ctm-mob-dn-rm-bn-hr-pg,
+            var(--_ctm-tab-dn-rm-bn-hr-pg, var(--_ctm-dn-rm-bn-hr-pg))
+          );
+          --_sf-hr-wh: var(
+            --_ctm-mob-dn-rm-bn-hr-wh,
+            var(--_ctm-tab-dn-rm-bn-hr-wh, var(--_ctm-dn-rm-bn-hr-wh))
+          );
+
+          &[data-hover-show-shadow="false"] {
+            --_hover-show-shadow: none;
+          }
+          &[data-hover-show-icon="false"] {
+            --_hover-show-icon: none;
+          }
+        }
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-bd-cr));
+        white-space: nowrap;
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-pg));
+        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-wh));
+        display: flex;
+        flex-direction: var(--_sf-fd-bn);
+        align-items: center;
+
+        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-at));
+        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-gp));
+
+        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-rs));
+
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-ae))
+          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-br))
+          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-sd))
+          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-sw-cr));
+
+        &[data-show-border="true"] {
+          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-cr));
+
+          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-se));
+
+          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-br-wh));
+        }
+
+        .txt {
+          display: flex;
+
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-cr));
+
+          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-ft-fy));
+
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-ft-se));
+
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-ft-wt));
+
+          font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-ft-se-ic));
+
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-tt-an));
+
+          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-lr-sg));
+
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-le-ht));
+
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
+        }
+
+        .icon {
+          display: var(--_hover-show-icon, var(--_show-icon, flex));
+          svg {
+            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-se));
+            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-se));
+
+            path {
+              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-in-c1));
+            }
+          }
+        }
+        [data-element-style="Text"] {
+          display: inline-block;
+          width: 100%;
+        }
+
+        .icon--hover {
+          // position: absolute;
+          // inset: 0;
+          // opacity: 0;
+          display: none;
+          transition: opacity 0.2s ease;
+        }
+
+        &:hover .icon--hover {
+          // opacity: 1;
+          display: flex;
+        }
+
+        &:hover .icon--default {
+          // opacity: 0;
+          display: none;
+        }
+      }
+    }
+    .search__button {
+      background-color: blue;
+      color: white;
+      white-space: nowrap;
+      padding: 8px 12px;
+      border-radius: 4px;
     }
 
     .search-wrapper {
       display: flex;
+      flex-direction: var(--_sf-fd, row);
       align-items: center;
       width: 100%;
       height: 100%;
@@ -259,11 +488,15 @@
         //   background: #0056b3;
         // }
       }
+      &[data-icon-position="Right"] {
+        --_sf-fd: row-reverse;
+        --_sf-jc: flex-end;
+      }
     }
 
     .dropdown__options {
       list-style: none;
-      margin: 3px 0 0;
+      // margin: 3px 0 0;
       max-height: 200px;
       overflow-y: auto;
       border: 1px solid var(--_gray-200);
@@ -272,6 +505,8 @@
       position: absolute;
       width: 100%;
       z-index: 1000;
+      // top: 58px;
+      top: calc(var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) + 4px);
       // display: none; /* Hidden by default */
       cursor: pointer;
       transition: background 0.2s;

package/dist/types/builder/tools/element-edit/createForm.d.ts

@@ -6,10 +6,12 @@ interface selfLayoutInterface {
 }
 export interface selfDesignInterface {
     selectorKey: string;
+    formContainer: any;
 }
 export declare enum createFormSelectorKeysEnum {
     LAYOUT = "layout",
-    DESIGN = "design"
+    DESIGN = "design",
+    FORM_CONTAINER = "formContainer"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/faq.d.ts

@@ -60,6 +60,12 @@ export interface selfDesignInterface {
         borderRadius?: CMSIBCommonInterface;
     };
     divider: any;
+    infoIcon?: any & {
+        selectorKey?: string;
+        showIcon?: CMSIBCommonInterface;
+        iconColor?: CMSIBCommonInterface;
+        iconSize?: CMSIBCommonInterface;
+    };
 }
 export declare enum ButtonSelectorKeysEnum {
     LAYOUT = "layout",
@@ -67,7 +73,8 @@ export declare enum ButtonSelectorKeysEnum {
     FAQ_WIDGET = "faqWidget",
     COLLAPSED_ACCRORDION_ITEM = "collapsedAccordionItem",
     EXPANDED_ACCRORDION_ITEM = "expandedAccordionItem",
-    DIVIDER = "divider"
+    DIVIDER = "divider",
+    INFO_ICON = "infoIcon"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/imageHotspot.d.ts

@@ -81,8 +81,13 @@ export interface selfDesignInterface {
         angle: CMSIBCommonInterface;
         spread: CMSIBCommonInterface;
         blur: CMSIBCommonInterface;
+        itemGap: CMSIBCommonInterface;
     };
-    tooltipTextDesign: {
+    tooltipTextWrapper: {
+        selectorKey: string;
+        itemGap: CMSIBCommonInterface;
+    };
+    tooltipText: {
         selectorKey: string;
         font: CMSIBCommonInterface;
         fontSize: CMSIBCommonInterface;
@@ -107,13 +112,15 @@ export interface selfDesignInterface {
         cardLayout: controlInterface;
         productCardStyle: controlInterface;
     };
-    tooltipImageDesign: {
+    tooltipImage: {
         selectorKey: string;
         cropRatio: CMSIBCommonInterface;
         zoomImage: CMSIBCommonInterface;
         flip: CMSIBCommonInterface;
         rotate: CMSIBCommonInterface;
         backgroundColor: CMSIBCommonInterface;
+        imageHeight: CMSIBCommonInterface;
+        imageWidth: CMSIBCommonInterface;
         exposure: CMSIBCommonInterface;
         contrast: CMSIBCommonInterface;
         saturation: CMSIBCommonInterface;
@@ -147,9 +154,13 @@ export declare enum SelectorKeysEnum {
     HOTSPOT_IMAGE_STYLE = "hotSpotStyle",
     HOTSPOT_STYLE = "hotspotStyle",
     TOOL_TIP_DESIGN = "tooltipDesign",
-    TOOL_TIP_TEXT = "tooltipTextDesign",
+    TOOL_TIP_TEXT_WRAPPER = "tooltipTextWrapper",
+    TOOL_TIP_TEXT = "tooltipText",
     TOOL_TIP_PRODUCT_DESIGN = "tooltipProductDesign",
-    TOOL_TIP_IMAGE_DESIGN = "tooltipImageDesign"
+    TOOL_TIP_IMAGE = "tooltipImage",
+    TOOL_TIP_BUTTON = "tooltipButton",
+    DEFAULT_STATE = "defaultState",
+    HOVER_STATE = "hoverState"
 }
-export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface & any>;
 export {};

package/dist/types/builder/tools/element-edit/profile.d.ts

@@ -25,6 +25,7 @@ interface selfLayoutInterface {
     afterLoginDynamicLabel1: CMSIBCommonInterface;
     afterLoginDynamicLabel2: CMSIBCommonInterface;
     textAvatarSize: CMSIBCommonInterface;
+    alignment: CMSIBCommonInterface;
 }
 interface selfContentInterface {
     selectorKey: string;
@@ -49,6 +50,9 @@ export interface selfDesignInterface {
     dropdownItemsContainer: {
         selectorKey: string;
         [key: string]: any;
+        showIcon?: CMSIBCommonInterface;
+        iconColor?: CMSIBCommonInterface;
+        iconSize?: CMSIBCommonInterface;
     };
     profileWidget: {
         selectorKey: string;
@@ -120,7 +124,9 @@ export declare enum profileSelectorKeysEnum {
     DROPDOWN_ITEMS_DEFAULT_STYLE = "dropdownItemsDefaultStyle",
     DROPDOWN_CONTAINER_STYLE = "dropdownContainerStyle",
     EXPAND_ICON = "expandIcon",
-    COLLAPSE_ICON = "collapseIcon"
+    COLLAPSE_ICON = "collapseIcon",
+    DEFAULT_STATE = "defaultState",
+    HOVER_STATE = "hoverState"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & selfContentInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/quickLinks.d.ts

@@ -105,6 +105,12 @@ export declare const getDefaultData: () => {
             property: string;
             propertyType: CMSElementEditTypes;
         };
+        dropdownGapBetweenItems: {
+            value: string;
+            unit: number;
+            property: string;
+            propertyType: CMSElementEditTypes;
+        };
         dropdownWidth: {
             value: string;
             unit: number;

package/dist/types/builder/tools/element-edit/rfqs.d.ts

@@ -42,6 +42,44 @@ interface selfDesignInterface {
         arrowSize: CMSIBCommonInterface;
         arrowColor: CMSIBCommonInterface;
     };
+    iconActions: {
+        selectorKey: string;
+        viewIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        printIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        downloadIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        cancelIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+        sendMessageIcon: {
+            selectorKey: string;
+            showIcon: CMSIBCommonInterface;
+            iconSize: CMSIBCommonInterface;
+            iconColor: CMSIBCommonInterface;
+            icon: CMSIBCommonInterface;
+        };
+    };
 }
 export declare enum SelectorKeysEnum {
     LAYOUT = "layout",
@@ -52,7 +90,13 @@ export declare enum SelectorKeysEnum {
     RFQ_ID = "rfqId",
     RAISED_ON = "raisedOn",
     RFQ_STATUS = "rfqStatus",
-    PAGINATION_ARROWS = "pagination-arrows"
+    PAGINATION_ARROWS = "pagination-arrows",
+    ICON_ACTIONS = "iconActions",
+    VIEW_ICON = "viewIcon",
+    PRINT_ICON = "printIcon",
+    DOWNLOAD_ICON = "downloadIcon",
+    CANCEL_ICON = "cancelIcon",
+    SEND_MESSAGE_ICON = "sendMessageIcon"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/search.d.ts

@@ -1,3 +1,4 @@
+import { CMSCSSUnitTypesEnums, CMSElementEditTypes } from "../../enums";
 import { CMSIBCommonInterface } from "../../interfaces/global";
 import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
 interface selfLayoutInterface {
@@ -5,11 +6,23 @@ interface selfLayoutInterface {
     whenClicked: CMSIBCommonInterface;
     showSearchText: CMSIBCommonInterface;
     searchText: CMSIBCommonInterface;
+    iconPosition: CMSIBCommonInterface;
+    searchControl: CMSIBCommonInterface;
     showNoOfItems: CMSIBCommonInterface;
     searchPlaceholderText: CMSIBCommonInterface;
+    buttonPlaceholderText: CMSIBCommonInterface;
 }
 export interface selfDesignInterface {
     selectorKey: string;
+    searchContainer: {
+        selectorKey: string;
+        itemGap: {
+            value: CMSCSSUnitTypesEnums;
+            unit: CMSCSSUnitTypesEnums;
+            property: string;
+            propertyType: CMSElementEditTypes;
+        };
+    };
     searchBar: {
         selectorKey: string;
         backgroundColor: CMSIBCommonInterface;
@@ -71,6 +84,7 @@ export interface selfDesignInterface {
         characterSpacing: CMSIBCommonInterface;
         lineHeight: CMSIBCommonInterface;
     };
+    buttonStyles: any;
 }
 export declare enum searchSelectorKeysEnum {
     LAYOUT = "layout",
@@ -80,7 +94,12 @@ export declare enum searchSelectorKeysEnum {
     SEARCH_ICON = "searchIcon",
     SEARCH_BAR_FOCUS = "searchBarFocus",
     MINI_CART_TEXT = "miniSearchText",
-    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle"
+    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle",
+    BUTTON_STYLES = "buttonStyles",
+    HOVER_STATE = "hoverState",
+    DEFAULT_STATE = "defaultState",
+    SELECTED_STATE = "selected",
+    SEARCHBAR_CONTAINER = "searchBarContainer"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/uomSelector.d.ts

@@ -33,6 +33,10 @@ interface selfDesignInterface {
         selectorKey: string;
         [key: string]: any;
     };
+    label: {
+        selectorKey: string;
+        [key: string]: any;
+    };
     uomTitleStyle: {
         selectorKey: string;
         [key: string]: any;
@@ -128,6 +132,7 @@ export declare enum SelectorKeysEnum {
     CONTENT = "content",
     DESIGN = "design",
     DATA_CONNECTOR = "dataConnector",
+    LABEL = "label",
     ITEM_STYLE = "itemStyle",
     UOM_TITLE_STYLE = "uomTitleStyle",
     UOM_CONVERSION_STYLE = "uomConversionStyle",

package/dist/types/upload-media/types.d.ts

@@ -99,7 +99,7 @@ export interface UploadMediaLabels {
     maxResolutionError: string;
     resolutionRangeError: string;
 }
-export type UploadMediaType = "images" | "image" | "doc" | "all";
+export type UploadMediaType = "images" | "image" | "video" | "doc" | "all";
 export interface UploadMediaProps {
     api: UploadMediaAPI;
     onUploadComplete: (images: UploadResult[]) => void;
@@ -166,6 +166,7 @@ export interface UploadFileInfo {
         width: number;
         height: number;
     } | null;
+    thumbnailUrl?: string;
 }
 export interface SelectedAsset {
     id: string;

package/dist/uom-selector.scss

@@ -75,8 +75,66 @@
       margin-bottom: 6px;
     }
 
+    .meta_text_element {
+      display: block;
+      background-color: var(
+        --_ctm-mob-dn-ll-bd-cr,
+        var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
+      );
+      color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
+      font-family: var(
+        --_ctm-mob-dn-ll-ft-fy,
+        var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy))
+      );
+      font-size: var(--_ctm-mob-dn-ll-ft-se, var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se)));
+      font-weight: var(
+        --_ctm-mob-dn-ll-ft-wt,
+        var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt))
+      );
+      font-style: var(
+        --_ctm-mob-dn-ll-ft-se-ic,
+        var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic))
+      );
+      text-align: var(--_ctm-mob-dn-ll-tt-an, var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an)));
+      letter-spacing: var(
+        --_ctm-mob-dn-ll-lr-sg,
+        var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg))
+      );
+      line-height: var(
+        --_ctm-mob-dn-ll-le-ht,
+        var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht))
+      );
+      text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
+
+      border-color: var(
+        --_show-border,
+        var(--_ctm-mob-dn-ll-br-cr, var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr)))
+      );
+      border-style: var(
+        --_show-border,
+        var(--_ctm-mob-dn-ll-br-se, var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se)))
+      );
+      border-width: var(
+        --_show-border,
+        var(--_ctm-mob-dn-ll-br-wh, var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh)))
+      );
+      border-radius: var(
+        --_ctm-mob-dn-ll-br-rs,
+        var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
+          var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
+          var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
+          var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
+      );
+
+      padding: var(--_ctm-mob-dn-ll-pg, var(--_ctm-tab-dn-ll-pg, var(--_ctm-dn-ll-pg)));
+    }
+
     .uom__selector {
-      padding: 10px;
       width: 100%;
       // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
       .uom__container {
@@ -748,7 +806,7 @@
               flex-wrap: nowrap;
               // overflow-x: auto;
               .item {
-                min-width: 120px;
+                min-width: 3uom__selector0px;
               }
             }
             &[data-overflow-items="None"] {