@sc-360-v2/storefront-cms-library 0.2.82 → 0.2.85

package/dist/code-temp.scss

@@ -4,8 +4,8 @@
 [data-div-type="element"] {
   &[data-element-type="code"] {
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
-    width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
-    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
+    // margin: var(--_ctm-lt-mn, --_tst-lt-mn);
     // min-height: ;
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
     // --_aspect-ratio: calc(

package/dist/form-preview.scss

@@ -144,4 +144,16 @@
     color: #777;
     line-height: 1.4;
   }
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }

package/dist/login.scss

@@ -178,6 +178,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        // margin: var(--_ctm-lt-mn);
+        padding: var(--_ctm-lt-pg);
       }
 
       // Login Box

package/dist/product.scss

@@ -89,6 +89,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     & > div {
       &.wrapper {
         width: 100%;
+        grid-template-columns: 100% !important;
         // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
       }
     }

package/dist/quick-links.scss

@@ -30,13 +30,15 @@
       .quick__links__container .items__container {
         display: flex;
         flex-direction: column;
+        gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
       }
     }
-    &[data-display-style="Wrap horizontal"] {
+    &[data-display-style="Wrap Horizontal"] {
       .quick__links__container .items__container {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
       }
     }
 
@@ -314,9 +316,7 @@
       }
 
       .items__container {
-        gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
         .links__item {
-          display: inline;
           background-color: var(
             --_ctm-mob-dn-im-se-bd-cr,
             var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))

package/dist/search.scss

@@ -51,6 +51,13 @@
     .search-container {
       width: 100%;
       height: 100%;
+      &.dropdown {
+        &:focus-within {
+          .dropdown__options {
+            display: block;
+          }
+        }
+      }
     }
 
     .search-wrapper {
@@ -134,7 +141,7 @@
         border: none;
         padding-left: 10px;
         border-radius: 4px;
-        cursor: pointer;
+        // cursor: pointer;
         transition: 0.3s;
         svg {
           width: var(
@@ -162,7 +169,7 @@
 
     .dropdown__options {
       list-style: none;
-      margin: 4px 0 0;
+      margin: 3px 0 0;
       max-height: 200px;
       overflow-y: auto;
       border: 1px solid var(--_gray-200);
@@ -171,7 +178,7 @@
       position: absolute;
       width: 100%;
       z-index: 1000;
-      display: block; /* Hidden by default */
+      // display: none; /* Hidden by default */
       cursor: pointer;
       transition: background 0.2s;
 
@@ -249,9 +256,9 @@
     }
 
     /* Optional: show dropdown when input is focused (basic) */
-    .dropdown:focus-within .dropdown-options {
-      display: block;
-    }
+    // .dropdown:focus-within .dropdown-options {
+    //   display: block;
+    // }
 
     &[data-show-shadow="false"] {
       --_show-shadow: none;

package/dist/spotlight.scss

@@ -0,0 +1,125 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="spotlight"] {
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% *
+          var(
+            --_ctm-mob-ele-nw-wh-vl,
+            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
+          )
+      )
+    );
+    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
+    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .spotlight__section {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 8px;
+      .spotlight__heading {
+        position: relative;
+        .spotlight__text {
+          color: var(
+            --_ctm-mob-dn-spl-tt-cr,
+            var(--_ctm-tab-dn-spl-tt-cr, var(--_ctm-dn-spl-tt-cr))
+          );
+          font-family: var(
+              --_ctm-mob-dn-spl-tt-ft-fy,
+              var(--_ctm-tab-dn-spl-tt-ft-fy, var(--_ctm-dn-spl-tt-ft-fy))
+            ),
+            sans-serif;
+          font-size: var(
+            --_ctm-mob-dn-spl-tt-ft-se,
+            var(--_ctm-tab-dn-spl-tt-ft-se, var(--_ctm-dn-spl-tt-ft-se))
+          );
+          font-weight: var(
+            --_ctm-mob-dn-spl-tt-ft-wt,
+            var(--_ctm-tab-dn-spl-tt-ft-wt, var(--_ctm-dn-spl-tt-ft-wt))
+          );
+          font-style: var(
+            --_ctm-mob-dn-spl-tt-ft-se-ic,
+            var(--_ctm-tab-dn-spl-tt-ft-se-ic, var(--_ctm-dn-spl-tt-ft-se-ic))
+          );
+          text-align: var(
+            --_ctm-mob-dn-spl-tt-tt-an,
+            var(--_ctm-tab-dn-spl-tt-tt-an, var(--_ctm-dn-spl-tt-tt-an))
+          );
+          letter-spacing: var(
+            --_ctm-mob-dn-spl-tt-lr-sg,
+            var(--_ctm-tab-dn-spl-tt-lr-sg, var(--_ctm-dn-spl-tt-lr-sg))
+          );
+          line-height: var(
+            --_ctm-mob-dn-spl-tt-le-ht,
+            var(--_ctm-tab-dn-spl-tt-le-ht, var(--_ctm-dn-spl-tt-le-ht))
+          );
+          text-decoration: var(
+            --_ctm-mob-dn-spl-tt-ue,
+            var(--_ctm-tab-dn-spl-tt-ue, var(--_ctm-dn-spl-tt-ue))
+          );
+          background-color: var(
+            --_ctm-mob-dn-spl-tt-bd-cr,
+            var(--_ctm-tab-dn-spl-tt-bd-cr, var(--_ctm-dn-spl-tt-bd-cr))
+          );
+          border-color: var(
+            --_ctm-mob-dn-spl-tt-br-cr,
+            var(--_ctm-tab-dn-spl-tt-br-cr, var(--_ctm-dn-spl-tt-br-cr))
+          );
+          border-style: var(
+            --_ctm-mob-dn-spl-tt-br-se,
+            var(--_ctm-tab-dn-spl-tt-br-se, var(--_ctm-dn-spl-tt-br-se))
+          );
+          border-width: var(
+            --_ctm-mob-dn-spl-tt-br-wh,
+            var(--_ctm-tab-dn-spl-tt-br-wh, var(--_ctm-dn-spl-tt-br-wh))
+          );
+          border-radius: var(
+            --_ctm-mob-dn-spl-tt-br-rs,
+            var(--_ctm-tab-dn-spl-tt-br-rs, var(--_ctm-dn-spl-tt-br-rs))
+          );
+          box-shadow: var(
+            --_show-text-content-shadow,
+            var(
+                --_ctm-mob-dn-spl-tt-sw-ae,
+                var(--_ctm-tab-dn-spl-tt-sw-ae, var(--_ctm-dn-spl-tt-sw-ae))
+              )
+              var(
+                --_ctm-mob-dn-spl-tt-sw-br,
+                var(--_ctm-tab-dn-spl-tt-sw-br, var(--_ctm-dn-spl-tt-sw-br))
+              )
+              var(
+                --_ctm-mob-dn-spl-tt-sw-sd,
+                var(--_ctm-tab-dn-spl-tt-sw-sd, var(--_ctm-dn-spl-tt-sw-sd))
+              )
+              var(
+                --_ctm-mob-dn-spl-tt-sw-cr,
+                var(--_ctm-tab-dn-spl-tt-sw-cr, var(--_ctm-dn-spl-tt-sw-cr))
+              )
+          );
+        }
+      }
+    }
+
+    &[data-widget-shadow="false"] {
+      --_show-shadow: none;
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/types/builder/elements/form-builder/index.d.ts

@@ -15,34 +15,35 @@ export declare enum ScreenSizeEnums {
     Mobile = "mobile"
 }
 export declare enum FormComponentTypeEnum {
+    Button = "button",
+    Content = "content",
+    Custom = "custom",
     Input = "input",
     Select = "select",
-    Textarea = "textarea",
-    Button = "button",
-    Content = "content"
+    Textarea = "textarea"
 }
 export declare enum FormElementTypeEnum {
-    Text = "text",
+    Button = "button",
+    Checkbox = "checkbox",
+    Date = "date",
+    DateTime = "datetime-local",
     Email = "email",
-    Tel = "tel",
-    Url = "url",
+    File = "file",
+    Heading = "heading",
+    Month = "month",
     Number = "number",
     Password = "password",
-    Date = "date",
-    Textarea = "textarea",
-    Select = "select",
-    Checkbox = "checkbox",
     Radio = "radio",
-    Button = "button",
-    Heading1 = "heading1",
-    Heading2 = "heading2",
-    Paragraph = "paragraph",
-    Image = "image",
-    Video = "video",
-    ListUnordered = "list-unordered",
-    ListOrdered = "list-ordered",
-    Link = "link",
-    Html = "html"
+    Rating = "rating",
+    ResetButton = "reset",
+    Select = "select",
+    SubmitButton = "submit",
+    Tel = "tel",
+    Text = "text",
+    Textarea = "textarea",
+    Time = "time",
+    Url = "url",
+    Week = "week"
 }
 export interface FormComponentConfig {
     icon?: string;
@@ -103,3 +104,12 @@ export interface FormGridLayoutInterface {
     minH?: number;
     minW?: number;
 }
+export declare enum FormConfirmationOption {
+    ShowMessage = 1,
+    RedirectToURL = 2,
+    ClearForm = 3
+}
+export declare enum FormMessageDisplay {
+    Custom = 1,
+    Always = 2
+}

package/dist/types/builder/elements/spotlight/index.d.ts

@@ -0,0 +1,63 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { AlignSelfValue, BoxSizingValue, GridAreaValue, HeightValue, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue, DisplayValue, MarginValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { CMSGridsContainer } from "../grid";
+import { BuilderAttributes } from "../common";
+export interface SpotlightStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+    display?: DisplayValue;
+    rowGap?: string;
+    columnGap?: string;
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+    marginLeft?: MarginValue;
+    marginTop?: MarginValue;
+    marginBottom?: MarginValue;
+    marginRight?: MarginValue;
+}
+export declare const getDefaultStyles: () => SpotlightStyleProperties;
+export declare const getSectionDefaultStyles: () => SpotlightStyleProperties;
+export interface VariationConditionInterface {
+    customer?: any[];
+    user?: any[];
+    relation?: any;
+}
+export interface SectionVariationInterface {
+    condition?: VariationConditionInterface;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType">;
+        HTML?: SpotlightStyleProperties;
+        CUSTOM?: any;
+    };
+    styles?: SpotlightStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    sectionStyles?: CommonStyleProperties;
+    grids?: CMSGridsContainer;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    highestGrid?: number | any;
+    gtc?: CMSGridsContainer;
+    gtr?: CMSGridsContainer;
+    childIds: any[];
+}
+export interface CMSSpotlightInterface {
+    id?: string | number;
+    uniqueKey?: string | number;
+    variations?: {
+        [key: string]: SectionVariationInterface;
+    };
+    styles?: SpotlightStyleProperties;
+    sort?: number;
+    dataContentType?: string;
+    isMaximized?: boolean;
+    parentKey?: any;
+    childIdsV2?: any[];
+    children?: any;
+}

package/dist/types/builder/enums/index.d.ts

@@ -62,7 +62,8 @@ export declare enum CMSToolIdTypes {
     gridSwapBtn = "cms-grid-swap-btn",
     lightBox = "cms_lt_bx_mn",
     lightBoxV2Wrapper = "cms-light-box-wrapper",
-    marchandiserSetsWrapper = "cms-marchandiser-sets-wrapper"
+    marchandiserSetsWrapper = "cms-marchandiser-sets-wrapper",
+    spotlightWrapper = "cms-spotlight-wrapper"
 }
 export declare enum CMSElementSelectors {
     iframeSelector = "iframe[data-title='iframe__playground']",
@@ -121,7 +122,8 @@ export declare enum CMSElementSelectors {
     imageHotspot = "div[data-element-type='imageHotspot']",
     gridSwapBtn = "div[data-cms-tool='cms-grid-swap-btn']",
     lightBox = "#cms_lt_bx_mn",
-    marchandiserSetsElement = "div[data-element-type='marchandiserSets']"
+    marchandiserSetsElement = "div[data-element-type='marchandiserSets']",
+    spotlightElement = "div[data-element-type='spotlight']"
 }
 export declare enum CMSToolAttributes {
     id = "data-cms-tool",
@@ -295,6 +297,8 @@ export declare const CMSElementsListEnum: {
     BUY_FOR_WITH_TABS: string;
     BUY_FOR_TABS_CONTENT_CONTAINER: string;
     TOASTER: string;
+    SPOTLIGHT: string;
+    BUNDLE_DETAILS: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

package/dist/types/builder/index.d.ts

@@ -68,4 +68,5 @@ import * as addOrderSchema from "./elements/add-order/index";
 import * as buyForTabsSchema from "./elements/buy-for-tab/index";
 import * as buyForTabsContainerSchema from "./elements/buy-for-tab-container/index";
 import * as toasterSchema from "./elements/toaster/index";
-export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, toasterSchema, };
+import * as spotlightSchema from "./elements/spotlight";
+export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, toasterSchema, spotlightSchema, };