@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.96

package/dist/tooltip.scss

@@ -0,0 +1,276 @@
+.tooltipWrapper {
+  position: relative;
+  display: inline-block;
+  &:hover {
+    .tooltipBox {
+      opacity: 1;
+    }
+  }
+}
+
+.tooltipBox {
+  position: absolute;
+  z-index: 1000;
+  background-color: #333;
+  color: #fff;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  visibility: visible;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  max-width: 250px;
+  width: max-content;
+  max-height: 100px;
+  word-wrap: break-word;
+  white-space: normal;
+
+  &.top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  &.top-left {
+    bottom: 100%;
+    left: 0;
+    transform: translateX(0);
+    margin-bottom: 8px;
+  }
+
+  &.top-right {
+    bottom: 100%;
+    right: 0;
+    transform: translateX(0);
+    margin-bottom: 8px;
+  }
+
+  &.top-center {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 8px;
+  }
+
+  &.bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  &.bottom-left {
+    top: 100%;
+    left: 0;
+    transform: translateX(0);
+    margin-top: 8px;
+  }
+
+  &.bottom-right {
+    top: 100%;
+    right: 0;
+    transform: translateX(0);
+    margin-top: 8px;
+  }
+
+  &.bottom-center {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 8px;
+  }
+
+  &.left {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  &.left-top {
+    right: 100%;
+    top: 0;
+    transform: translateY(0);
+    margin-right: 8px;
+  }
+
+  &.left-center {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+  }
+
+  &.left-bottom {
+    right: 100%;
+    bottom: 0;
+    transform: translateY(0);
+    margin-right: 8px;
+  }
+
+  &.right {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+
+  &.right-top {
+    left: 100%;
+    top: 0;
+    transform: translateY(0);
+    margin-left: 8px;
+  }
+
+  &.right-center {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 8px;
+  }
+
+  &.right-bottom {
+    left: 100%;
+    bottom: 0;
+    transform: translateY(0);
+    margin-left: 8px;
+  }
+}
+
+.tooltipArrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+
+  &.top {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 4px 4px 0 4px;
+    border-color: #333 transparent transparent transparent;
+  }
+
+  &.top-left {
+    bottom: -4px;
+    left: 10px;
+    transform: translateX(0);
+    border-width: 4px 4px 0 4px;
+    border-color: #333 transparent transparent transparent;
+  }
+
+  &.top-right {
+    bottom: -4px;
+    right: 10px;
+    transform: translateX(0);
+    border-width: 4px 4px 0 4px;
+    border-color: #333 transparent transparent transparent;
+  }
+
+  &.top-center {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 4px 4px 0 4px;
+    border-color: #333 transparent transparent transparent;
+  }
+
+  &.bottom {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.bottom-left {
+    top: -4px;
+    left: 10px;
+    transform: translateX(0);
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.bottom-right {
+    top: -4px;
+    right: 10px;
+    transform: translateX(0);
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.bottom-center {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 4px 4px 4px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.left {
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 4px 0 4px 4px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.left-top {
+    right: -4px;
+    top: 10px;
+    transform: translateY(0);
+    border-width: 4px 0 4px 4px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.left-center {
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 4px 0 4px 4px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.left-bottom {
+    right: -4px;
+    bottom: 10px;
+    transform: translateY(0);
+    border-width: 4px 0 4px 4px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.right {
+    left: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 4px 4px 4px 0;
+    border-color: transparent #333 transparent transparent;
+  }
+
+  &.right-top {
+    left: -4px;
+    top: 10px;
+    transform: translateY(0);
+    border-width: 4px 4px 4px 0;
+    border-color: transparent #333 transparent transparent;
+  }
+
+  &.right-center {
+    left: -4px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 4px 4px 4px 0;
+    border-color: transparent #333 transparent transparent;
+  }
+
+  &.right-bottom {
+    left: -4px;
+    bottom: 10px;
+    transform: translateY(0);
+    border-width: 4px 4px 4px 0;
+    border-color: transparent #333 transparent transparent;
+  }
+}

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

@@ -42,7 +42,10 @@ export declare enum CMSToolIdTypes {
     addGlobalSectionsPopup = "cms-add-global-sections-popup",
     containerElement = "div[data-element-type='container']",
     repeaterWrapper = "cms-repeater-wrapper",
-    repeaterItemWrapper = "cms-repeater-item-wrapper"
+    repeaterItemWrapper = "cms-repeater-item-wrapper",
+    cmsElementFullView = "cms-element-full-view",
+    productWrapper = "cms-product-wrapper",
+    productDetailsWrapper = "cms-product-details-wrapper"
 }
 export declare enum CMSElementSelectors {
     iframeSelector = "iframe[data-title='iframe__playground']",
@@ -85,7 +88,10 @@ export declare enum CMSElementSelectors {
     stackWrapper = "div[data-div-type='cms-stack-wrapper']",
     containerElement = "div[data-element-type='container']",
     repeaterElement = "div[data-element-type='repeater']",
-    repeaterItemElement = "div[data-element-type='repeater-item']"
+    repeaterItemElement = "div[data-element-type='repeater-item']",
+    cmsElementFullView = "div[data-cms-tool='cms-element-full-view']",
+    productElement = "div[data-element-type='product']",
+    productDetailsElement = "div[data-element-type='productDetails']"
 }
 export declare enum CMSToolAttributes {
     id = "data-cms-tool",
@@ -191,4 +197,5 @@ export declare const CMSElementsListEnum: {
     PRODUCT_OPTIONS: string;
     REPEATER: string;
     REPEATER_ITEM: string;
+    PRODUCT_DETAILS: string;
 };

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

@@ -137,7 +137,8 @@ export declare enum AmountEstimatorsSelectorKeysEnum {
     SHOW_MORE_ITEMS_BUTTON = "showMoreItemsButton",
     HOVER_STATE = "hover",
     DEFAULT_STATE = "default",
-    SELECTED_STATE = "selectedState"
+    SELECTED_STATE = "selectedState",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -11,6 +11,7 @@ import * as gallerySlider from "./gallery-slider";
 import * as grid from "./grid";
 import * as image from "./image";
 import * as product from "./product";
+import * as productDetails from "./productDetails";
 import * as imageHotspot from "./imageHotspot";
 import * as map from "./map";
 import * as paymentMethods from "./paymentMethods";
@@ -42,4 +43,5 @@ import * as profile from "./profile";
 import * as repeater from "./repeater";
 import * as repeaterItem from "./repeaterItem";
 import * as menu from "./menu";
-export { amountEstimator, bulkVariantPicker, button, code, 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, };
+import * as productOptions from "./productOptions";
+export { amountEstimator, bulkVariantPicker, button, code, 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, };

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

@@ -44,6 +44,7 @@ export interface selfDesignInterface {
 export declare enum ButtonSelectorKeysEnum {
     HOVER_STATE = "hover",
     DEFAULT_STATE = "default",
+    SELECTED_STATE = "selected",
     LAYOUT = "layout",
     DESIGN = "design",
     ADD_TO_CART = "addToCart",

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

@@ -1,42 +1,17 @@
 import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
-interface controlInterface {
-    value: string | boolean;
-    propertyType: string;
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
 }
-export interface selfLayoutInterface {
+interface selfLayoutInterface {
     selectorKey: string;
-    imageAndDetailsSpacing: controlInterface;
-    itemSpacing: controlInterface;
-    imagePosition: controlInterface;
 }
 export interface selfDesignInterface {
     selectorKey: string;
 }
-export interface selfContentInterface {
-    selectorKey: string;
-    productName: controlInterface;
-    productCodes: controlInterface;
-    variantCodes: controlInterface;
-    productImages: controlInterface;
-    prices: controlInterface;
-    productDescription: controlInterface;
-    showOptions: controlInterface;
-    allowBulkOrdering: controlInterface;
-    actions: controlInterface;
-    quickView: controlInterface;
-    addToCart: controlInterface;
-    wishlist: controlInterface;
-    buyNow: controlInterface;
-    addToQuote: controlInterface;
-    showUOMs: controlInterface;
-    showVolumePricing: controlInterface;
-    showInventory: controlInterface;
-    storeAvailability: controlInterface;
-}
-export declare enum sectionSelectorKeysEnum {
+export declare enum SelectorKeysEnum {
     LAYOUT = "layout",
     DESIGN = "design",
-    CONTENT = "content"
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
 }
-export declare const getDefaultData: (contentWidth: any) => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

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

@@ -0,0 +1,42 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface controlInterface {
+    value: string | boolean;
+    propertyType: string;
+}
+export interface selfLayoutInterface {
+    selectorKey: string;
+    imageAndDetailsSpacing: controlInterface;
+    itemSpacing: controlInterface;
+    imagePosition: controlInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export interface selfContentInterface {
+    selectorKey: string;
+    productName: controlInterface;
+    productCodes: controlInterface;
+    variantCodes: controlInterface;
+    productImages: controlInterface;
+    prices: controlInterface;
+    productDescription: controlInterface;
+    showOptions: controlInterface;
+    allowBulkOrdering: controlInterface;
+    actions: controlInterface;
+    quickView: controlInterface;
+    addToCart: controlInterface;
+    wishlist: controlInterface;
+    buyNow: controlInterface;
+    addToQuote: controlInterface;
+    showUOMs: controlInterface;
+    showVolumePricing: controlInterface;
+    showInventory: controlInterface;
+    storeAvailability: controlInterface;
+}
+export declare enum sectionSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content"
+}
+export declare const getDefaultData: (contentWidth: any) => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,59 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    itemSpacing: CMSIBCommonInterface;
+    showOptionsToSelect: CMSIBCommonInterface;
+    showNoOfOptions: CMSIBCommonInterface;
+    noOfOptionsToShowUpfront: CMSIBCommonInterface;
+    showRemainingOptionsAs: CMSIBCommonInterface;
+    whenClicked: CMSIBCommonInterface;
+    buttonText: CMSIBCommonInterface;
+    dividerBetweenOptions: CMSIBCommonInterface;
+    optionTitleValueSpacing: CMSIBCommonInterface;
+    displayValues: CMSIBCommonInterface;
+    swatchItemSpacing: CMSIBCommonInterface;
+    swatchItemPadding: CMSIBCommonInterface;
+    optionItemSpacing: CMSIBCommonInterface;
+    optionItemPadding: CMSIBCommonInterface;
+    swatchMaxItemsToDisplay: CMSIBCommonInterface;
+    swatchOverFlowItems: CMSIBCommonInterface;
+    singleSelectDisplayValues: CMSIBCommonInterface;
+    singleSelectItemSpacing: CMSIBCommonInterface;
+    singleSelectItemPadding: CMSIBCommonInterface;
+    singleSelectMaxItemsToDisplay: CMSIBCommonInterface;
+    singleSelectOverFlowItems: CMSIBCommonInterface;
+    swatchDropdownOptionsSpacing: CMSIBCommonInterface;
+    swatchDropdownOptionsPadding: CMSIBCommonInterface;
+    swatchDropdownStyle: CMSIBCommonInterface;
+    swatchOptionAndListSpacing: CMSIBCommonInterface;
+    swatchDropdownListItemSpacing: CMSIBCommonInterface;
+    swatchDropdownListItemPadding: CMSIBCommonInterface;
+    swatchDividerBetweenLIstItems: CMSIBCommonInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+    backgroundColor?: CMSIBCommonInterface;
+    borderColor?: CMSIBCommonInterface;
+    borderStyle?: CMSIBCommonInterface;
+    borderPerSlide?: CMSIBCommonInterface;
+    showBorder?: CMSIBCommonInterface;
+    showShadow?: CMSIBCommonInterface;
+    shadowColor?: CMSIBCommonInterface;
+    blur?: CMSIBCommonInterface;
+    spread?: CMSIBCommonInterface;
+    angle?: CMSIBCommonInterface;
+    borderRadius?: CMSIBCommonInterface;
+    iconSize: CMSIBCommonInterface;
+    iconColor: CMSIBCommonInterface;
+    [key: string]: any;
+}
+export declare enum ButtonSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    FAQ_WIDGET = "faqWidget",
+    COLLAPSED_ACCRORDION_ITEM = "collapsedAccordionItem",
+    EXPANDED_ACCRORDION_ITEM = "expandedAccordionItem",
+    DIVIDER = "divider"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -32,7 +32,8 @@ export interface selfDesignInterface {
 }
 export declare enum selfSelectorKeysEnum {
     LAYOUT = "layout",
-    DESIGN = "design"
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/helper/helper-functions.d.ts

@@ -1 +1,2 @@
 export declare const dateTimeFormat: (dateString: string | number, isTime?: boolean, formatStr?: string, timeZone?: string, locale?: string) => string | null;
+export declare function createQueryStringForCollection(queryObject: any): string;