@sc-360-v2/storefront-cms-library 0.3.29 → 0.3.31

package/dist/submit-quote.scss

@@ -2,16 +2,27 @@
   display: flex;
   gap: 24px;
   padding: 32px;
+  width: 100%;
+  justify-content: space-between;
 
   .quote-items {
     flex: 2;
+    min-height: calc(100% - 61px);
+    overflow-y: auto;
   }
 
   .quote-item {
     padding: 32px 0;
     display: flex;
     gap: 24px;
-    border-bottom: 1px dotted #d0d0d0;
+    border-bottom: 1px dashed var(--_gray-400);
+    padding-right: 10px;
+    &:first-child {
+      padding-top: 0;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
 
     .quote-item__image {
       width: 120px;
@@ -28,29 +39,53 @@
 
       .quote-item__header {
         display: flex;
-        flex-direction: row;
-        gap: 10px;
-        margin-bottom: 20px;
-        padding-bottom: 20px;
-        border-bottom: 1px dotted #d0d0d0;
+        flex-direction: column;
+        // gap: 16px;
+        margin-bottom: 16px;
+        padding-bottom: 16px;
+        border-bottom: 1px dashed var(--_gray-400);
+        // align-items: center;
 
         .quote-item__title {
-          font-size: 18px;
-          font-weight: 600;
-          color: #111;
+          font-size: 16px;
+          font-weight: 500;
+          color: var(--_gray-900);
+          // &:after {
+          //   width: 1px;
+          //   height: 10px;
+          //   background: var(--_gray-600);
+          //   display: inline-block;
+          //   content: "";
+          //   margin-left: 16px;
+          // }
         }
 
         .quote-item__meta {
           display: flex;
-          gap: 10px;
-          font-size: 18px;
-          color: #363636;
+          gap: 6px;
+          font-size: 14px;
+          font-weight: 400;
+          color: var(--_gray-600);
+          span {
+            &::after {
+              width: 1px;
+              height: 10px;
+              background: var(--_gray-600);
+              content: "";
+              display: inline-block;
+              margin-left: 6px;
+            }
+            &:last-child::after {
+              width: 0 !important;
+              margin: 0 !important;
+            }
+          }
         }
       }
 
       .quote-item__row {
         display: flex;
-        gap: 60px;
+        gap: 48px;
         align-items: flex-start;
 
         .field {
@@ -61,13 +96,14 @@
           label {
             margin-bottom: 6px;
             font-weight: 500;
-            color: #333;
+            color: var(--_gray-700);
           }
 
           .value {
-            font-weight: 600;
-            font-size: 16px;
-            color: #111;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 38px;
+            color: var(--_gray-900);
           }
 
           input {
@@ -75,7 +111,7 @@
             padding: 8px 12px;
             font-size: 15px;
             border: 1px solid #ccc;
-            border-radius: 6px;
+            border-radius: 4px;
             outline: none;
             width: 130px;
 
@@ -84,7 +120,10 @@
               box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
             }
           }
-
+          .input-with-prefix:focus-within {
+            border-color: #007bff; /* Or any highlight color */
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+          }
           .input-with-prefix {
             display: flex;
             align-items: center;
@@ -93,13 +132,13 @@
             overflow: hidden;
             width: 130px;
             height: 40px;
-
             span {
-              background-color: #f9f9f9;
               padding: 0 8px;
               font-size: 15px;
-              color: #444;
-              border-right: 1px solid #ccc;
+              color: var(--_gray-500);
+              svg{
+                vertical-align: middle;
+              }
             }
 
             input {
@@ -122,6 +161,7 @@
           .quote-total {
             display: flex;
             flex-direction: column;
+            gap: 6px;
 
             > div {
               display: flex;
@@ -131,30 +171,34 @@
 
               .label {
                 font-size: 14px;
-                color: #444;
+                color: var(--_gray-700);
+                line-height: 20px;
+                font-weight: 500;
               }
 
               .amount {
                 font-size: 18px;
                 font-weight: 700;
-                color: #111;
+                color: var(--_gray-900);
+                line-height: 28px;
+                min-width: 80px;
               }
             }
 
             small {
-              font-size: 13px;
-              color: #888;
-              margin-top: 4px;
+              font-size: 14px;
+              font-weight: 400;
+              line-height: 20px;
+              color: var(--_gray-500);
             }
-
             &.discounted {
               .label {
                 color: #198754;
               }
 
-              .amount {
-                color: #198754;
-              }
+              // .amount {
+              //   color: #198754;
+              // }
             }
           }
         }
@@ -163,50 +207,69 @@
   }
 
   .quote-summary {
-    background: #f8f9fa;
+    // background: #f8f9fa;
     border: 1px solid #e3e3e3;
-    border-radius: 8px;
-    padding: 24px;
+    border-radius: 4px;
+    // padding: 24px;
     width: 100%;
     max-width: 400px;
 
     h3 {
-      font-size: 18px;
-      font-weight: 600;
-      margin-bottom: 20px;
-      color: #333;
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--_gray-900);
+      background: #f5f5f5;
+      line-height: 24px;
+      padding: 12px;
+      border-radius: 4px 4px 0 0;
+    }
+    .quote-summary-body {
+      padding: 0 16px 16px 16px;
     }
 
     &__row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 12px 0;
-      border-bottom: 1px dotted #ccc;
-      margin-bottom: 4px;
-
+      padding: 16px 0;
+      border-bottom: 1px dashed var(--_gray-400);
       .label {
         font-size: 14px;
-        color: #666;
+        font-weight: 400;
+        line-height: 20px;
+        color: var(--_gray-500);
+      }
+      .label-quote {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+        color: #1f1930;
       }
 
       .value {
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 500;
-        color: #333;
+        color: var(--_gray-900);
+        line-height: 20px;
 
         &.highlight {
-          font-size: 24px;
+          font-size: 20px;
           font-weight: 700;
-          color: #000;
+          color: #1f1930;
         }
       }
 
       &--quoted {
-        margin-bottom: 20px;
+        margin-bottom: 16px;
       }
     }
-
+    .label-notes {
+      margin-bottom: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--_gray-700);
+      display: inline-block;
+    }
     &__notes {
       width: 100%;
       height: 100px;
@@ -231,13 +294,13 @@
 
     &__button {
       width: 100%;
-      padding: 14px;
+      padding: 12px;
       background-color: #1a40f2;
       color: #fff;
       font-size: 16px;
       font-weight: 600;
       border: none;
-      border-radius: 6px;
+      border-radius: 4px;
       cursor: pointer;
       transition: background-color 0.2s ease;
 

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

@@ -0,0 +1,27 @@
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
+import { BuilderAttributes, CMSElementInterface } from "../common";
+export interface LoaderStyleProperties extends CommonStyleProperties {
+    minHeight?: MinHeightValue;
+    height?: HeightValue;
+    minWidth?: MinWidthValue;
+    maxWidth?: MaxWidthValue;
+    maxHeight?: MaxHeightValue;
+    gridArea?: GridAreaValue;
+    boxSizing?: BoxSizingValue;
+    padding?: PaddingValue;
+    justifySelf?: JustifySelfValue;
+    alignSelf?: AlignSelfValue;
+}
+export declare const getDefaultStyles: () => LoaderStyleProperties;
+export interface CMSLoaderInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: LoaderStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+    content: string;
+}

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

@@ -328,6 +328,7 @@ export declare const CMSElementsListEnum: {
     BADGE: string;
     CART_ATTRIBUTES: string;
     LANGUAGE_MENU: string;
+    LOADER: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

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

@@ -83,4 +83,5 @@ import * as filterResultsSchema from "./elements/filter-results/index";
 import * as productSizeChartSchema from "./elements/product-sizechart/index";
 import * as badgeSchema from "./elements/badge/index";
 import * as cartAttributesSchema from "./elements/cart-attributes/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, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, };
+import * as loaderSchema from "./elements/loader/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, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, };

package/dist/types/builder/interfaces/global.d.ts

@@ -1,3 +1,4 @@
+import { HorizontalOrientation, PositionValue, VerticalOrientation } from "../../global/types";
 import { LightBoxV2ElementInterface } from "../elements/light-box-v2";
 import { CMSDeviceVisibilityHiddenTypeEnums, CMSElementEditTypes, CMSCustomEventServiceTypesEnum, CMSComponentImportTypeEnum } from "../enums";
 import "./cms-tools";
@@ -148,3 +149,15 @@ export interface FlexCustomEventInterface {
     displayType?: CMSComponentImportTypeEnum;
     item?: any;
 }
+export type FlexPositionDataType = {
+    type: PositionValue;
+    horizontal: {
+        orientation: HorizontalOrientation;
+        offset: Record<string, CMSIBSizeInterface>;
+    };
+    vertical: {
+        orientation: VerticalOrientation;
+        offset: Record<string, CMSIBSizeInterface>;
+    };
+    zIndex: string;
+};