@sc-360-v2/storefront-cms-library 0.1.7 → 0.1.9

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

@@ -16,7 +16,7 @@ export interface selfContentInterface {
     selectorKey: string;
     productName: controlInterface;
     productCodes: controlInterface;
-    varientCodes: controlInterface;
+    variantCodes: controlInterface;
     productImages: controlInterface;
     prices: controlInterface;
     productDescription: controlInterface;

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

@@ -6,7 +6,7 @@ interface selfLayoutInterface {
     dividerBetweenItems: CMSIBCommonInterface;
     itemSpacing: CMSIBCommonInterface;
     itemPadding: CMSIBCommonInterface;
-    ItemContentAlignment: CMSIBCommonInterface;
+    itemContentAlignment: CMSIBCommonInterface;
     overflowItems: CMSIBCommonInterface;
     maxItemsToDisplay: CMSIBCommonInterface;
     header: CMSIBCommonInterface;

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

@@ -0,0 +1,25 @@
+import { AlignItemsValue, JustifyContentValue, StackDirectionType } from "../../../global/types";
+import { CMSIBCommonInterface, PaddingProps } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    direction: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: StackDirectionType;
+    };
+    itemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & PaddingProps;
+    justifyContent: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: JustifyContentValue;
+    };
+    alignItems: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: AlignItemsValue;
+    };
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum selfSelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design"
+}
+export declare const getDefaultData: (contentWidth: any) => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,39 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    displayFormat: CMSIBCommonInterface;
+    showUOMPrice: CMSIBCommonInterface;
+    itemSpacing: CMSIBCommonInterface;
+    maxItemsToDisplay: CMSIBCommonInterface;
+    overflowControl: CMSIBCommonInterface;
+    onClick: CMSIBCommonInterface;
+    header: CMSIBCommonInterface;
+    headerHeight: CMSIBCommonInterface;
+    rowHeight: CMSIBCommonInterface;
+    headerDivider: CMSIBCommonInterface;
+    rowDivider: CMSIBCommonInterface;
+    columnDivider: CMSIBCommonInterface;
+    alternativeRowColors: CMSIBCommonInterface;
+    headerCellPadding: CMSIBCommonInterface;
+    rowCellPadding: CMSIBCommonInterface;
+    contentAlignment: CMSIBCommonInterface;
+    rowsPerPage: CMSIBCommonInterface;
+    paginationType: CMSIBCommonInterface;
+    paginationAliginment: CMSIBCommonInterface;
+    imageBehavior: CMSIBCommonInterface;
+    itemsPerRow: CMSIBCommonInterface;
+    itemPadding: CMSIBCommonInterface;
+    ItemContentAlignment: CMSIBCommonInterface;
+    overflowItems: CMSIBCommonInterface;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum UOMSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -0,0 +1,119 @@
+import { CMSIBCommonInterface } from "../../interfaces/global";
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+interface selfLayoutInterface {
+    selectorKey: string;
+    optionSelection: CMSIBCommonInterface;
+    displayStyle: CMSIBCommonInterface;
+    displayOutOfStockValues: CMSIBCommonInterface;
+    notifyMeButton: CMSIBCommonInterface;
+    quantitySelectorForVariantSelector: CMSIBCommonInterface;
+    dividerBetweenItems: CMSIBCommonInterface;
+    optionTitleValueSpacing: CMSIBCommonInterface;
+    remainingDisplayStyle: CMSIBCommonInterface;
+    allowUserToSearch: CMSIBCommonInterface;
+    allowUserToFilter: CMSIBCommonInterface;
+    swatchTypeDisplayStyle: {
+        selectorKey: string;
+        displayValues: CMSIBCommonInterface;
+        itemPadding: CMSIBCommonInterface;
+        itemSpacing: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        swatchImageType: CMSIBCommonInterface;
+    };
+    singleSelectDisplayStyle: {
+        selectorKey: string;
+        displayValues: CMSIBCommonInterface;
+        itemSpacing: CMSIBCommonInterface;
+        itemPadding: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        imageBehaviour: CMSIBCommonInterface;
+        itemsPerRow: CMSIBCommonInterface;
+        itemContentAlignment: CMSIBCommonInterface;
+        overflowDirection: CMSIBCommonInterface;
+    };
+    dropdownDisplayStyle: {
+        selectorKey: string;
+        dropdownOptionsSpacing: CMSIBCommonInterface;
+        dropdownOptionsPadding: CMSIBCommonInterface;
+        dropdownStyle: CMSIBCommonInterface;
+        optionAndListSpacing: CMSIBCommonInterface;
+        dropdownListItemSpacing: CMSIBCommonInterface;
+        dropdownListItemPadding: CMSIBCommonInterface;
+        dividerBetweenListItems: CMSIBCommonInterface;
+        maxItemsToDisplay: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+    };
+    groupedOptionsDisplayStyle: {
+        selectorKey: string;
+        groupsDisplayStyle: CMSIBCommonInterface;
+        groupSpacing: CMSIBCommonInterface;
+        groupPadding: CMSIBCommonInterface;
+        groupHeaderAndOptionSpacing: CMSIBCommonInterface;
+        tabDirection: CMSIBCommonInterface;
+        tabLayout: CMSIBCommonInterface;
+        tabAlignment: CMSIBCommonInterface;
+        tabSpacing: CMSIBCommonInterface;
+        tabAndContainerSpacing: CMSIBCommonInterface;
+        tabHorizontalPadding: CMSIBCommonInterface;
+        tabVerticalPadding: CMSIBCommonInterface;
+        containerPadding: CMSIBCommonInterface;
+        overflowItems: CMSIBCommonInterface;
+        tabRowSpacing: CMSIBCommonInterface;
+        expandIconPositon: CMSIBCommonInterface;
+        expandFirstItemByDefault: CMSIBCommonInterface;
+        allowMultipleOpenItems: CMSIBCommonInterface;
+        itemDividers: CMSIBCommonInterface;
+        accordionSpacing: CMSIBCommonInterface;
+        accordionAndContainerSpacing: CMSIBCommonInterface;
+        accordionHorizontalPadding: CMSIBCommonInterface;
+        accordionVerticalPadding: CMSIBCommonInterface;
+        groupAndContainerSpacing: CMSIBCommonInterface;
+        groupHorizontalPadding: CMSIBCommonInterface;
+        groupVerticalPadding: CMSIBCommonInterface;
+        canCollapseGroups: CMSIBCommonInterface;
+        collapseIconPosition: CMSIBCommonInterface;
+    };
+    tableDisplayStyle: {
+        selectorKey: string;
+        header: CMSIBCommonInterface;
+        headerHeight: CMSIBCommonInterface;
+        rowHeight: CMSIBCommonInterface;
+        headerDivider: CMSIBCommonInterface;
+        rowDivider: CMSIBCommonInterface;
+        columnDivider: CMSIBCommonInterface;
+        alternativeRowColors: CMSIBCommonInterface;
+        headerCellPadding: CMSIBCommonInterface;
+        rowCellPadding: CMSIBCommonInterface;
+        contentAlignment: CMSIBCommonInterface;
+        rowsPerPage: CMSIBCommonInterface;
+        overflowControl: CMSIBCommonInterface;
+        showMoreRows: CMSIBCommonInterface;
+        paginationType: CMSIBCommonInterface;
+        paginationAliginment: CMSIBCommonInterface;
+    };
+    groupedTableDisplayStyle: {
+        selectorKey: string;
+        groupsDisplayStyle: CMSIBCommonInterface;
+        groupSpacing: CMSIBCommonInterface;
+        groupPadding: CMSIBCommonInterface;
+        groupHeaderAndOptionSpacing: CMSIBCommonInterface;
+    };
+}
+interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum VariantPickerSelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    SWATFH_TYPE_DISPLAY_STYLE = "swatchTypeDisplayStyle",
+    SINGLE_SELECT_DISPLAY_STYLE = "singleSelectDisplayStyle",
+    DROPDOWN_DISPLAY_STYLE = "dropdownDisplayStyle",
+    GROUPED_OPTION_DISPLAY_STYLE = "groupedOptionsDisplayStyle",
+    TABLE_DISPLAY_STYLE = "tableDisplayStyle",
+    GROUPED_TABLE_DISPLAY_STYLE = "groupedTableDisplayStyle"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

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

@@ -32,5 +32,6 @@ export type CMSEditControlsTypes = "Slider" | "Settings" | string;
 export type GlobalVideoAttributes = "src" | "poster" | "controls" | "autoplay" | "loop" | "muted" | "preload" | "crossOrigin" | "playsInline";
 export type CommonBuilderAttributes = "dataDivType" | "dataType" | "dataElementType" | "dataWidgetType" | "dataElementSubChild";
 export type GlobalTableAttributes = "cellPadding" | "cellSpacing" | "border" | "width" | "height" | "align" | "bgColor" | "frame" | "headers" | "rows" | "rules";
+export type StackDirectionType = "horizontal" | "vertical";
 export type ObjectFitValue = "fill" | "contain" | "cover" | "none" | "scale-down" | string;
 export type ObjectPositionValue = string;

package/dist/uom-selector.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="uomSelector"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/variable.scss

@@ -0,0 +1,128 @@
+@use "sass:list";
+@use "sass:map";
+
+body {
+  --_container-width: 1366px;
+  --_builder-breakpoint: 1024px;
+  --_sidebar-small-width: 428px;
+  --_sidebar-big-width: 600px;
+  --_dotted-input-width: 55px;
+  --_settings-tab-width: 370px;
+  --_settings-tab-top: 170px;
+  --_settings-tab-default-value: 10px;
+  --_themesettings-button-minwidth: 165px;
+
+  --_element-settngs-popup-mxheight: 500px;
+  --_element-settngs-popup-gap: 12px;
+
+  --_d-flex: flex;
+  --_flex-wrap: wrap;
+  --_d-inline-flex: inline-flex;
+  --_d-grid: grid;
+  --_d-block: block;
+  --_d-none: none;
+
+  --_p-absolute: absolute;
+  --_p-fixed: fixed;
+  --_p-sticky: sticky;
+  --_p-static: static;
+  --_p-relative: relative;
+
+  --_f-row: row;
+  --_f-column: column;
+  --_justify_start: flex-start;
+  --_justify-center: center;
+  --_justify-between: space-between;
+  --_justify-end: flex-end;
+
+  --_align-center: center;
+  --_align-start: start;
+  --_align-left: left;
+  --_align-items-flex-start: flex-start;
+
+  --_shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  --_shadow-x1: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+  --_shadow-x3: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);
+  --_shadow-md: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.1);
+
+  --_shadow-lg: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  --_higher-zIndex: 99999;
+
+  --_cms-map-at-zIndex: 9;
+  --_cms-zoom-at-zIndex: 10;
+  --_cs-canvas-img-zIndex: 9;
+  --_cs-pl-zIndex: 8;
+  --_cms-properties-zIndex: 7;
+  --_cms-sidebar-zIndex: 6;
+  --_cs-cms-root-zIndex: 5;
+  --_add-element-zIndex: 3;
+  --_cs-et-zIndex: 2;
+  --_it-gl-zIndex: 1;
+  --_cms-et-pe-zIndex: 1;
+
+  --_inline-toolbar-zIndex: 9999;
+  --_white: #fff;
+  --_body-bg: #f7f8fa;
+  --_gray-25: #fcfcfd;
+  --_gray-50: #f9fafb;
+  --_gray-100: #f2f4f7;
+  --_gray-200: #eaecf0;
+  --_gray-300: #d0d5dd;
+  --_gray-400: #98a2b3;
+  --_gray-500: #667085;
+  --_gray-600: #475467;
+  --_gray-700: #344054;
+  --_gray-900: #101828;
+  --_base-white: #fff;
+  --_base-black: #000;
+  --_border-light-color: #eaecf0;
+  --_gray-bg: #d9d9d9;
+  --_gray-bg-r: 217;
+  --_gray-bg-g: 217;
+  --_gray-bg-b: 217;
+  --_bg-overlay: rgba(52, 64, 84, 0.4);
+  --_gray-blue-300: #b3b8db;
+  --_red-500: #f04438;
+
+  --_accent-color-2-500: #583fff;
+  --_success-800: #05603a;
+
+  --_primary-25: #f5f6fd;
+  --_primary-50: #e2e5fa;
+  --_primary-100: #ced4f6;
+  --_primary-200: #a8b2ef;
+  --_primary-300: #8190e8;
+  --_primary-400: #243dc6;
+  --_primary-500: #162578;
+  --_primary-600: #132067;
+  --_primary-700: #111c5b;
+
+  --_success-50: #ecfdf3;
+  --_success-200: #a6f4c5;
+  --_success-600: #039855;
+  --_success-700: #027a48;
+
+  --_red-300: #fda29b;
+  --_red-100: #fee4e2;
+  --_warning-50: #fffaeb;
+  --_warning-200: #fedf89;
+  --_warning-300: #fec84b;
+  --_warning-500: #f79009;
+  --_warning-600: #dc6803;
+  --_warning-700: #fec84b;
+
+  --_error-700: #b42318;
+  --_error-500: #f04438;
+  --_error-200: #fecdca;
+  --_error-50: #fef3f2;
+
+  --_transition-duration: 0.45s;
+  --_transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  --_user-select-none: none;
+  --scroll-page: 0;
+}
+
+.pac-container {
+  z-index: calc(var(--_higher-zIndex) + var(--_cms-map-at-zIndex));
+}

package/dist/variant-picker.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+@use "sass:list";
+
+[data-div-type="element"] {
+  &[data-element-type="variantPicker"] {
+    // width: var(--_lt-wh);
+    // height: var(--_lt-ht);
+    // margin: var(--_lt-mn);
+    // padding: var(--_lt-pg);
+    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
+    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    margin: var(--_ctm-lt-mn, --_tst-lt-mn);
+    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
+    // height: ;
+    aspect-ratio: 1 / var(--_sf-aspect-ratio);
+    --_aspect-ratio: calc(
+      1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
+    );
+
+    & > .wrapper {
+      width: 100%;
+      // height: 100%;
+    }
+    &[data-show-shadow="false"] {
+      --_show-shadow: none;
+    }
+  }
+}

package/dist/video.scss

@@ -1,6 +1,7 @@
 [data-div-type="element"] {
   &[data-element-type="video"] {
-    width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
+    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);
     --_aspect-ratio: calc(
@@ -167,8 +168,9 @@
       }
       .video__thumbnail {
         position: relative;
+        width: 100%;
         .placeholder__img {
-          max-width: 100%;
+          width: 100%;
           // position: absolute;
           // left: 0;
           // top: 0;

package/dist/volume-pricing.scss

@@ -24,5 +24,23 @@
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
+    table {
+      font-family: arial, sans-serif;
+      border-collapse: collapse;
+      width: 100%;
+      height: 100%;
+    }
+
+    td,
+    th {
+      border: 1px solid #dddddd;
+      text-align: center;
+      padding: 8px;
+    }
+
+    tr:nth-child(even) {
+      // background-color: #dddddd;
+    }
   }
 }

package/package.json

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