@sc-360-v2/storefront-cms-library 0.2.41 → 0.2.43

package/dist/search.scss

@@ -0,0 +1,63 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="search"] {
+    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);
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    position: relative;
+
+    & > .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .search-element {
+      width: var(--_sf-el-wh-st-mx, 100%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .search-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        border: 1px solid var(--_ctm-border-color, #ccc);
+        border-radius: 4px;
+        padding: 5px;
+        background-color: var(--_ctm-bg-color, #fff);
+      }
+
+      .search-icon {
+        font-size: 16px;
+        margin-right: 5px;
+      }
+
+      .search-input {
+        flex-grow: 1;
+        border: none;
+        outline: none;
+        padding: 5px;
+        color: var(--_ctm-text-color, #333);
+        background: transparent;
+      }
+
+      .search-button {
+        display: var(--_ctm-btn-display, block);
+        padding: 5px 10px;
+        background: var(--_ctm-btn-bg, #007bff);
+        color: var(--_ctm-btn-text, #fff);
+        border: none;
+        cursor: pointer;
+      }
+    }
+
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

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

@@ -23,4 +23,5 @@ export interface CMSCartInterface extends Omit<CMSElementInterface, "attributes"
     };
     styles: CartStyleProperties;
     childrenStyles?: CommonStyleProperties;
+    content: string;
 }

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

@@ -27,4 +27,5 @@ export interface CMSImageInterface extends Omit<CMSElementInterface, "attributes
     };
     styles: ImageStyleProperties;
     childrenStyles?: CommonStyleProperties;
+    isMaximized?: boolean;
 }

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

@@ -0,0 +1,41 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { BuilderAttributes } from "../common";
+export interface LayouterAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+}
+export interface LayouterStyleProperties extends CommonStyleProperties {
+    minHeight?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    gridArea?: string;
+    display?: DisplayValue;
+    boxSizing?: string;
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+}
+export declare const getDefaultStyles: () => LayouterStyleProperties;
+export interface LayouterInterface {
+    variationId?: string;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType">;
+        HTML?: LayouterAttributes;
+        CUSTOM?: any;
+    };
+    styles?: LayouterStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    children?: any;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    childIds: any[];
+    uniqueKey?: any;
+    previewImage?: string;
+    isMaximized?: boolean;
+}

package/dist/types/builder/elements/layouter-item/index.d.ts

@@ -0,0 +1,39 @@
+import { CommonStyleProperties } from "../../../global/style-properties";
+import { CMSHTMLAttributes } from "../../../global/attributes";
+import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
+import { BuilderAttributes } from "../common";
+export interface LayouterItemAttributes extends CMSHTMLAttributes {
+    role?: string;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    id?: string;
+    className?: string;
+    lang?: string;
+}
+export interface LayouterItemStyleProperties extends CommonStyleProperties {
+    minHeight?: string;
+    height?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    gridArea?: string;
+    display?: DisplayValue;
+    boxSizing?: string;
+    gridTemplateRows?: string;
+    gridTemplateColumns?: string;
+}
+export declare const getDefaultStyles: () => LayouterItemStyleProperties;
+export interface LayouterItemInterface {
+    variationId?: string;
+    attributes?: {
+        BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType">;
+        HTML?: LayouterItemAttributes;
+        CUSTOM?: any;
+    };
+    styles?: LayouterItemStyleProperties;
+    editedStyles?: CommonStyleProperties;
+    children?: any;
+    responsiveBehaviour: ResponsiveBehaviourTypes;
+    childIds: any[];
+    uniqueKey?: any;
+}

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

@@ -64,4 +64,5 @@ export interface CMSProductDetailInterface {
     styles?: ProductDetailStyleAttributes;
     sort?: number;
     dataContentType?: string;
+    isMaximized?: boolean;
 }

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

@@ -23,4 +23,5 @@ export interface CMSProfileInterface extends Omit<CMSElementInterface, "attribut
     };
     styles: ProfileStyleProperties;
     childrenStyles?: CommonStyleProperties;
+    content: string;
 }

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

@@ -23,4 +23,5 @@ export interface CMSScrollInterface extends Omit<CMSElementInterface, "attribute
     };
     styles: ScrollStyleProperties;
     childrenStyles?: CommonStyleProperties;
+    content?: string;
 }

package/dist/types/builder/elements/search/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 SearchStyleProperties 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: () => SearchStyleProperties;
+export interface CMSSearchInterface extends Omit<CMSElementInterface, "attributes"> {
+    attributes: {
+        HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
+        BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
+        CUSTOM: any;
+    };
+    styles: SearchStyleProperties;
+    childrenStyles?: CommonStyleProperties;
+    content?: string;
+}

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

@@ -44,7 +44,9 @@ export declare enum CMSToolIdTypes {
     addGlobalSectionsPopup = "cms-add-global-sections-popup",
     containerElement = "div[data-element-type='container']",
     repeaterWrapper = "cms-repeater-wrapper",
+    layouterWrapper = "cms-layouter-wrapper",
     repeaterItemWrapper = "cms-repeater-item-wrapper",
+    layouterItemWrapper = "cms-layouter-item-wrapper",
     cmsElementFullView = "cms-element-full-view",
     productWrapper = "cms-product-wrapper",
     productDetailsWrapper = "cms-product-details-wrapper",
@@ -244,6 +246,7 @@ export declare const CMSElementsListEnum: {
     RFQS: string;
     LIGHTBOXV2: string;
     ALLOCATIONS: string;
+    SEARCH: string;
     LAYOUTER: string;
     LAYOUTER_ITEM: string;
 };

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

@@ -46,5 +46,8 @@ import * as brandSchema from "./elements/brand/index";
 import * as brandImageSchema from "./elements/brand-image/index";
 import * as bundleSchema from "./elements/bundle/index";
 import * as lightBoxV2Schema from "./elements/light-box-v2/index";
+import * as searchSchema from "./elements/search/index";
+import * as layouterSchema from "./elements/layouter/index";
+import * as layouterItemSchema from "./elements/layouter-item/index";
 import commonFunctions from "./utilities/global";
-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, };
+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, };

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

@@ -57,4 +57,7 @@ import * as quotes from "./quotes";
 import * as rfqs from "./rfqs";
 import * as lightBoxV2 from "./lightBoxV2";
 import * as allocations from "./allocations";
-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, };
+import * as search from "./search";
+import * as layouter from "./layouter";
+import * as layouterItem from "./layouter-item";
+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, };

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

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

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

@@ -0,0 +1,59 @@
+import { AlignItemsValue, JustifyContentValue, LayouterDisplayStyleType, RepeaterSliderControlTypes } from "../../../../components/global/types";
+import { CMSCSSUnitTypesEnums } from "../../enums";
+import { CMSIBCommonInterface, CMSIBSizeInterface, PaddingProps } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayStyle: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: LayouterDisplayStyleType;
+    };
+    itemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & PaddingProps;
+    justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: JustifyContentValue;
+    };
+    alignItems: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: AlignItemsValue;
+    };
+    setItemsPerRow: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        isShow: boolean;
+        value: string | number | any;
+    };
+    minColumnWidth: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    minRowHeight: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    setItemsPerSlide: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+    };
+    sliderControl: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: RepeaterSliderControlTypes;
+    };
+    arrowIconSize: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    dotSize: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string | number | any;
+        unit: CMSCSSUnitTypesEnums;
+    };
+    controlActiveColor: CMSIBCommonInterface;
+    selectedSlideControlTheme?: CMSIBCommonInterface;
+    autoplay: CMSIBCommonInterface;
+    autoplayDuration: CMSIBSizeInterface;
+    stopOnMouseEnter: CMSIBCommonInterface;
+    stopOnInteraction: CMSIBCommonInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum selfSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,56 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    whenClicked: CMSIBCommonInterface;
+    showSearchText: CMSIBCommonInterface;
+    searchText: CMSIBCommonInterface;
+    showNoOfItems: CMSIBCommonInterface;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+    searchBar: {
+        selectorKey: string;
+        backgroundColor: CMSIBCommonInterface;
+        borderColor: CMSIBCommonInterface;
+        borderStyle: CMSIBCommonInterface;
+        borderPerSlide: CMSIBCommonInterface;
+        showBorder: CMSIBCommonInterface;
+        showShadow: CMSIBCommonInterface;
+        shadowColor: CMSIBCommonInterface;
+        blur: CMSIBCommonInterface;
+        spread: CMSIBCommonInterface;
+        angle: CMSIBCommonInterface;
+        borderRadius: CMSIBCommonInterface;
+    };
+    searchIcon: {
+        selectorKey: string;
+        showIcon: CMSIBCommonInterface | undefined;
+        iconSize: CMSIBCommonInterface;
+        iconColor: CMSIBCommonInterface;
+        icon: CMSIBCommonInterface;
+    };
+    placeholderText: {
+        selectorKey: string;
+        font: CMSIBCommonInterface;
+        fontSize: CMSIBCommonInterface;
+        textColor: CMSIBCommonInterface;
+        bold: CMSIBCommonInterface;
+        italic: CMSIBCommonInterface;
+        linethrough: CMSIBCommonInterface;
+        underline: CMSIBCommonInterface;
+        textAlign: CMSIBCommonInterface;
+        characterSpacing: CMSIBCommonInterface;
+        lineHeight: CMSIBCommonInterface;
+    };
+}
+export declare enum searchSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    SEARCHBAR = "searchBar",
+    PLACEHOLDER_TEXT = "placeholderText",
+    SEARCH_ICON = "searchIcon",
+    MINI_CART_TEXT = "miniSearchText"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -39,3 +39,4 @@ export type RepeaterDisplayStyleType = "grid" | "list" | "slider" | "cards";
 export type RepeaterSliderControlTypes = "Arrows & Dots" | "Arrows" | "Dots" | "None";
 export type DeviceVisibilityByOptionsType = "HTML" | "CSS" | "NONE";
 export type CustomEventCallback<T = any> = (data: T) => void;
+export type LayouterDisplayStyleType = "rows" | "columns" | "slider" | "grid";

package/dist/widget.scss

@@ -58,3 +58,4 @@
 @use "./past-orders.scss";
 @use "./quotes.scss";
 @use "./rfqs.scss";
+@use "./search.scss";

package/package.json

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