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

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/profile.d.ts

@@ -25,6 +25,7 @@ interface selfLayoutInterface {
     afterLoginDynamicLabel1: CMSIBCommonInterface;
     afterLoginDynamicLabel2: CMSIBCommonInterface;
     textAvatarSize: CMSIBCommonInterface;
+    alignment: CMSIBCommonInterface;
 }
 interface selfContentInterface {
     selectorKey: string;
@@ -105,6 +106,17 @@ export interface selfDesignInterface {
         selectorKey: string;
         [key: string]: any;
     };
+    icon: {
+        selectorKey: string;
+        defaultState: {
+            selectorKey: string;
+            [key: string]: any;
+        };
+        hoverState: {
+            selectorKey: string;
+            [key: string]: any;
+        };
+    };
 }
 export declare enum profileSelectorKeysEnum {
     LAYOUT = "layout",
@@ -120,7 +132,10 @@ export declare enum profileSelectorKeysEnum {
     DROPDOWN_ITEMS_DEFAULT_STYLE = "dropdownItemsDefaultStyle",
     DROPDOWN_CONTAINER_STYLE = "dropdownContainerStyle",
     EXPAND_ICON = "expandIcon",
-    COLLAPSE_ICON = "collapseIcon"
+    COLLAPSE_ICON = "collapseIcon",
+    ICON = "icon",
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.5.43",
+  "version": "0.5.44",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {