@sc-360-v2/storefront-cms-library 0.2.65 → 0.2.66

package/dist/modal.scss

@@ -0,0 +1,142 @@
+// Variables
+$modal_background_color: white;
+$backdrop_color: rgba(0, 0, 0, 0.2);
+$box_shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+$modal_width: 618px;
+$modal_padding: 20px 0;
+$border_radius: 10px;
+$header_font_size: 18px;
+$header_font_weight: 600;
+$close_btn_font_size: 24px;
+$close_btn_size: 35px;
+$footer_btn_background_color: #ffffff;
+$footer_btn_padding: 10px 15px;
+$footer_btn_font_size: 14px;
+$primary_100: var(--Primary-100, #ced4f6);
+$primary_500: var(--Primary-500, #162578);
+$gray_900: var(--Gray-900, #101828);
+$gap_between_elements: 10px;
+$padding_horizontal: 24px;
+$box_shadow_active: 0px 1px 2px rgba(16, 24, 40, 0.05);
+$divider_color: #eaecf0;
+$border_color: #d0d5dd;
+$modal_padding_body: 10px $padding_horizontal;
+$btn_margin: 0 5px;
+$divider_height: 1px;
+$inactive_btn_text_color: #fff;
+$active_btn_text_color: #fff;
+
+@mixin flexbox($justify: flex-start, $align: center, $gap: 12px) {
+  display: flex;
+  justify-content: $justify;
+  align-items: $align;
+  gap: $gap;
+}
+
+.modal-main-element {
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $backdrop_color;
+    z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
+    animation: fadeIn 0.4s forwards;
+    cursor: auto;
+  }
+
+  .modal-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: $modal_background_color;
+    width: var(--_sf-ml-wh, 850px);
+    max-width: min(75%, 850px);
+    padding: $modal_padding;
+    box-shadow: $box_shadow;
+    border-radius: $border_radius;
+    display: flex;
+    flex-direction: column;
+    gap: $gap_between_elements;
+    z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    cursor: auto;
+
+    &.media__modal {
+      width: 60%;
+
+      .modal-body {
+        padding: 0 16px;
+        overflow: hidden;
+      }
+
+      .modal-footer {
+        justify-content: flex-end;
+        gap: 12px;
+      }
+    }
+  }
+
+  .modal-header {
+    padding: 0 $padding_horizontal;
+    position: relative;
+
+    h2 {
+      font-size: $header_font_size;
+      font-weight: $header_font_weight;
+      margin: 0;
+      color: $gray_900;
+    }
+
+    p {
+      font-size: 14px;
+      color: #475467;
+      margin-top: 4px;
+    }
+
+    .modal-close-btn {
+      position: absolute;
+      right: $padding_horizontal;
+      top: 10px;
+      width: $close_btn_size;
+      height: $close_btn_size;
+      font-size: $close_btn_font_size;
+      background: none;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: $modal_padding_body;
+    font-size: 14px;
+    color: $gray_900;
+  }
+
+  .modal-footer {
+    @include flexbox(flex-end, center, 10px);
+    padding: 10px $padding_horizontal;
+    border-top: 1px solid $divider_color;
+    flex-wrap: wrap;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}

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

@@ -42,7 +42,6 @@ export interface SectionVariationInterface {
         CUSTOM?: any;
     };
     styles?: SectionStyleProperties;
-    editedStyles?: CommonStyleProperties;
     sectionStyles?: CommonStyleProperties;
     grids?: CMSGridsContainer;
     responsiveBehaviour: ResponsiveBehaviourTypes;
@@ -50,11 +49,12 @@ export interface SectionVariationInterface {
     gtc?: CMSGridsContainer;
     gtr?: CMSGridsContainer;
     childIds: any[];
-    varaitionId?: string | any;
     default?: boolean;
     uniqueKey?: any;
     selfKey?: any;
     childIdsV2?: any[];
+    editedStyles?: Record<string, any>;
+    controls?: Record<string, any>;
 }
 export interface CMSSectionInterface {
     id?: string | number;
@@ -70,4 +70,6 @@ export interface CMSSectionInterface {
     pageId?: string;
     deviceVisibility?: CMSDeviceVisibilityOptionInterface;
     dynamicRulesId?: any;
+    editedStyles?: Record<string, any>;
+    controls?: Record<string, any>;
 }

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

@@ -277,6 +277,8 @@ export declare const CMSElementsListEnum: {
     SEARCH_RESULTS_HEADING: string;
     ITEM_STOCK: string;
     CART_DETAILS: string;
+    CART_SUMMARY: string;
+    ALLOCATION_DETAILS: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

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

@@ -0,0 +1,16 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -5,6 +5,7 @@ export interface SectionEditPopupInterface extends CMSElementEditPopupInterface
 interface selfLayoutInterface {
     selectorKey: string;
     displayStyle: CMSIBCommonInterface;
+    displayType: CMSIBCommonInterface;
     rowsToDisplay: CMSIBCommonInterface;
     spacingBetweenItems: CMSIBCommonInterface;
     overflowControl: CMSIBCommonInterface;

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

@@ -0,0 +1,21 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+    showTitle: CMSIBCommonInterface;
+    showNumberOfItems: CMSIBCommonInterface;
+    showEnterCouponCode: CMSIBCommonInterface;
+    showSubTotal: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -69,4 +69,6 @@ import * as iconLibrary from "./iconLibrary";
 import * as searchResultsHeading from "./searchResultsHeading";
 import * as itemStock from "./itemStock";
 import * as cartDetails from "./cartDetails";
-export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, };
+import * as cartSummary from "./cartSummary";
+import * as allocationDetails from "./allocationDetails";
+export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, allocationDetails, };

package/dist/widget.scss

@@ -71,3 +71,5 @@
 @use "./breadcrumbs.scss";
 @use "./icon-library.scss";
 @use "./form-preview.scss";
+@use "./customization-tree.scss";
+@use "./modal.scss";

package/package.json

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