@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

package/dist/widget.scss

@@ -70,7 +70,21 @@
 @use "./login.scss";
 @use "./breadcrumbs.scss";
 @use "./icon-library.scss";
+@use "./search-results-heading.scss";
 @use "./form-preview.scss";
+@use "./cart-details.scss";
+@use "./item-stock.scss";
+@use "./cart-summary.scss";
 @use "./customization-tree.scss";
 @use "./modal.scss";
+@use "./allocationDetails.scss";
+@use "./line.scss";
+@use "./cartDropdownOverlay.scss";
+@use "./shareCartSideBar.scss";
+@use "./editCartItem.scss";
+@use "./tab-v2.scss";
 @use "./marchandiserSets.scss";
+@use "./tab-container.scss";
+@use "./quick-links.scss";
+@use "./add-order.scss";
+@use "./buyFor.scss";

package/package.json

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

package/dist/editor-core.scss

@@ -1,537 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "./tools/add-button.scss";
-@use "./elements/section.scss";
-@use "./elements/grid.scss";
-@use "./elements/container.scss";
-@use "./elements/stack.scss";
-@use "./elements/repeater.scss";
-@use "./elements/repeater-item.scss";
-
-$dropElementSelector: "[data-drop-element='cms-drop-element']";
-$activeElementSelector: "[data-has-clicked='true']";
-$elementSelector: "[data-div-type='element']";
-$gridSelector: "[data-div-type='grid']";
-$elementLayer: "[data-layer-div-type='element']";
-$suggestionSelector: ".suggestion-container";
-$dblclickSelector: "[data-cms-tt-ee-dbl-clkd='true']";
-$containerElement: "[data-element-type='container']";
-$stackElement: "[data-element-type='stack']";
-$repeaterElement: "[data-element-type='repeater']";
-$repeaterItemElement: "[data-element-type='repeater-item']";
-$productElement: "[data-element-type='product']";
-$productDetailsElement: "[data-element-type='productDetails']";
-$tabsElement: "[data-element-type='tabs']";
-$categoryElement: "[data-element-type='category']";
-$categoryWidgetElement: "[data-element-type='categoryWidget']";
-$brandElement: "[data-element-type='brand']";
-$bundleElement: "[data-element-type='bundle']";
-$subCategoryElement: "[data-element-type='subCategory']";
-$resizerElement: "[data-cms-tool='cms-element-resizer']";
-$gallerySlider: "[data-element-type='gallerySlider']";
-
-$dataLayerHover: "[data-layer-hover='true']";
-// --_sf-el-lr-op
-
-$sfOverlayColor: #e2e5faa3;
-
-@mixin dataLayerHoverMixin($value: 0) {
-  &::before {
-    content: "";
-    position: var(--_p-absolute);
-    inset: 0 0 0 0;
-    z-index: calc(var(--_higher-zIndex) + var(--_data-layer-zIndex));
-    background: #{$sfOverlayColor};
-    border: 0.5px solid var(--_accent-color-2-500);
-  }
-  &::after {
-    content: attr(data-element-type);
-    position: var(--_p-absolute);
-    top: 0px;
-    left: 2px;
-    color: var(--_sf-ol-cr, var(--_accent-color-2-500));
-    z-index: calc(var(--_higher-zIndex) + var(--_data-layer-zIndex));
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 18px;
-    text-transform: capitalize;
-    transform: translateY(calc((-1 * var(--_sf-gp-vl, 5px)) - 100%));
-  }
-}
-
-[data-page-id="cms__template__editor"] {
-  [data-page-id="page-wrapper"] {
-    // display: var(--_d-grid);
-    // padding-block-end: 50px;
-
-    &[data-child-empty="true"] {
-      align-items: center;
-      height: 100%;
-    }
-  }
-  [data-div-type="section"] {
-    position: var(--_p-relative);
-    width: 100%;
-    // max-width: calc(100% - 1px) !important;
-    display: var(--_d-flex) !important;
-    flex-direction: column;
-    justify-self: stretch;
-    align-self: stretch;
-    // overflow-x: clip;
-    --_vertical-horizontal-btn-size: 20px;
-    // padding: 4px;
-    justify-content: center;
-
-    --_sf-element-vt-pd: max(
-      0.5px,
-      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-    --_sf-element-hr-pd: max(
-      0.5px,
-      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
-    );
-
-    // [drop-over-element="true"] {
-    //   * {
-    //     pointer-events: none !important;
-    //   }
-    // }
-
-    &[data-child-count="0"] {
-      & > [data-div-type="cms-section-wrapper"] {
-        display: var(--_d-none) !important;
-      }
-    }
-
-    &[data-cms-element-dragging="true"],
-    &[data-nochildhover-resizer="true"],
-    &:has([data-cms-element-resizer="true"]) {
-      --_child-pointer-events-section: none;
-      pointer-events: none !important;
-    }
-
-    &[data-nochildhover-resizer="true"] {
-      // --_child-pointer-events-section: none;
-      // pointer-events: none !important;
-      // --_vertical-horizontal-btn-size: 300px;
-      --_addSpan-display: var(--_d-none);
-      // --_resizer-span-size: 100px;
-      // overflow-y: clip;
-      // overflow-clip-margin: 100px;
-
-      div {
-        &[data-div-type="cms-section-wrapper"],
-        &.styles__wrapper {
-          min-height: calc(var(--_self-resizing-minHeight, 0) * 1px) !important;
-        }
-      }
-    }
-
-    &:has(button[data-div-type="Add row"][data-has-fullyfilled="true"]:hover) {
-      // pointer-events: none;
-      button {
-        &[data-div-type="Add column"] {
-          display: var(--_d-none);
-          // pointer-events: none;
-          // opacity: 0;
-        }
-      }
-    }
-
-    // --_cms-children-zIndex: 2;
-    // --_cms-layers-zIndex: 1;
-    &:has([data-cms-tool="cms-grid-swap-content-element"]) {
-      --_cms-children-zIndex: -1;
-    }
-    & > .wrapper {
-      // width: 100%;
-    }
-
-    // &:has([data-cms-tool="add-grid-button"]:hover) {
-    //   &,
-    //   *:not([data-cms-tool="add-grid-button"], [data-cms-tool="add-grid-button"] *) {
-    //     pointer-events: none !important;
-    //   }
-    // }
-
-    :is(#{$elementSelector}, #{$gridSelector}) {
-      &:not(#{$activeElementSelector}) {
-        &#{$dataLayerHover} {
-          // @extend .dataLayerHover;
-          @include dataLayerHoverMixin(0);
-        }
-      }
-    }
-
-    & [data-div-type="grid"] {
-      word-break: break-all;
-      position: var(--_p-relative);
-
-      &#{$dataLayerHover} {
-        // @extend .dataLayerHover;
-        @include dataLayerHoverMixin(0);
-      }
-      & > .wrapper {
-        height: 100% !important;
-        display: var(--_d-grid);
-      }
-      &#{$activeElementSelector} {
-        --_self-child-element-pointerEvents: all;
-      }
-
-      div {
-        &[data-div-type="cms-grid-wrapper"] {
-          div {
-            &:is(
-                #{$repeaterElement},
-                #{$repeaterElement},
-                #{$containerElement},
-                #{$stackElement},
-                #{$productDetailsElement},
-                #{$categoryWidgetElement},
-                #{$categoryElement},
-                #{$subCategoryElement},
-                #{$productElement},
-                #{$gallerySlider},
-                #{$brandElement},
-                #{$bundleElement},
-                #{$tabsElement}
-              ) 
-              // &#{$repeaterElement},
-              // &#{$repeaterItemElement},
-              // &#{$containerElement},
-              // &#{$stackElement},
-              // &#{$productDetailsElement},
-              // &#{$productElement},
-            {
-              &,
-              &:has([data-cms-tool="cms-grid-swap-content-element"]) {
-                [data-div-type="wrapper__layer"] {
-                  position: var(--_p-absolute);
-                  inset: 0 0 0 0;
-                  border: 1px solid var(--_accent-color-2-500);
-                  z-index: 2;
-                  pointer-events: none;
-                  visibility: var(--_sf-vt-zz, hidden);
-                  opacity: var(--_sf-op-zz, 0);
-                }
-                & > div {
-                  &.wrapper {
-                    & > div {
-                      &:is(&#{$repeaterItemElement}) {
-                        &#{$activeElementSelector} {
-                          cursor: auto;
-                        }
-                        &:has(:not(#{$activeElementSelector}#{$elementSelector})) {
-                          & > div {
-                            &[data-div-type="wrapper__layer"] {
-                              border-width: 2px;
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-                &:has(#{$activeElementSelector}#{$elementSelector}),
-                :is(#{$repeaterItemElement})#{$activeElementSelector},
-                &:has([data-cms-tool="cms-grid-swap-content-element"]) {
-                  & > div {
-                    &[data-div-type="wrapper__layer"] {
-                      --_sf-vt-zz: visible;
-                      --_sf-op-zz: 1;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          & > div {
-            &#{$activeElementSelector}#{$elementSelector} {
-              // z-index: var(--_higher-zIndex);
-              z-index: calc(var(--_cms-sl-df-zIndex) + var(--_higher-zIndex) + 2);
-              position: var(--_p-relative);
-            }
-          }
-        }
-      }
-      & * {
-        // position: var(--_p-relative);
-        // z-index: var(--_cms-children-zIndex);
-        // pointer-events: var(--_self-child-element-pointerEvents, none);
-      }
-
-      div {
-        &[data-div-type="element"] {
-          pointer-events: var(--_self-child-inside-element-pointerEvents, none);
-          position: var(--_p-relative);
-
-          &[data-ruler-state="true"] {
-            &::before {
-              content: "";
-              position: var(--_p-absolute);
-              inset: 0 0 0 0;
-              border: 1px solid var(--_cms-ruler-color-v2);
-              // border: 1px solid #e2e5fa;
-            }
-          }
-
-          &[data-element-type="text"] {
-            &:has(#{$suggestionSelector}) {
-              &,
-              #{$suggestionSelector} {
-                z-index: calc(var(--_higher-zIndex) + var(--_cms-map-at-zIndex)) !important;
-              }
-            }
-            .text_editor_main .editor {
-              width: 100% !important;
-            }
-
-            &:not(#{$dblclickSelector}) {
-              * {
-                &:not([data-layer-element-type="text"], #{$resizerElement}, #{$resizerElement} *) {
-                  pointer-events: none !important;
-                }
-              }
-            }
-            &#{$dblclickSelector} {
-              cursor: auto !important;
-            }
-
-            #{$suggestionSelector} {
-              position: var(--_p-fixed);
-              max-width: 400px;
-              max-height: 400px;
-              overflow-y: auto;
-              background: var(--_body-bg);
-              padding: 10px;
-              border: 1px solid var(--_gray-200);
-              transform: translateY(calc(10px - (1px * var(--_gl-st-cms, 0))));
-              // transform: translateY(10px);
-              box-shadow: var(--_shadow-md);
-            }
-          }
-          &:has([data-is-rendering="false"]) {
-            background: transparent !important;
-            border: none !important;
-          }
-          & > .wrapper {
-            &[data-is-rendering="false"] {
-              opacity: 0 !important;
-            }
-          }
-          &:not(#{$activeElementSelector}) {
-            pointer-events: none !important;
-            --_self-child-inside-element-pointerEvents: all;
-            cursor: move;
-            & > .wrapper {
-              border: none;
-              & > div {
-                &#{$resizerElement} {
-                  --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-none));
-                  --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 0);
-                  --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, hidden);
-                }
-              }
-            }
-          }
-          &#{$activeElementSelector} {
-            --_self-child-inside-element-pointerEvents: all;
-            pointer-events: all !important;
-            z-index: var(--_higher-zIndex);
-            cursor: move;
-            & > div {
-              &[data-layer-div-type="element"] {
-                --_sf-nw-dp-vl: var(--_d-none);
-                --_sf-nw-op-vl: -1;
-              }
-            }
-
-            &:is(#{$dropElementSelector}) {
-              & > .wrapper {
-                & > #{$elementSelector} {
-                  &:not(#{$activeElementSelector}) {
-                    pointer-events: none;
-                  }
-                  & > #{$elementLayer} {
-                    --_sf-el-lr-op: 1;
-                  }
-                }
-              }
-            }
-            &:is(#{$dropElementSelector}):not(:has(#{$activeElementSelector}#{$elementSelector})),
-            &:not(#{$dropElementSelector}) {
-              & > .wrapper {
-                // border: var(--_sf-el-wr-br-at-vl, none);
-                & > div {
-                  &#{$resizerElement} {
-                    --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
-                    --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
-                    --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
-                  }
-                }
-              }
-            }
-            // &:is([data-drop-element="cms-drop-element"]) {
-            //   &:not(:has([data-has-clicked="true"])) {
-            //     & > .wrapper {
-            //       border: var(--_sf-el-wr-br-at-vl, none);
-            //       & > div {
-            //         &[data-cms-tool="cms-element-resizer"] {
-            //           --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
-            //           --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
-            //           --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
-            //         }
-            //       }
-            //     }
-            //   }
-            // }
-            // &:not([data-drop-element="cms-drop-element"]) {
-            //   & > .wrapper {
-            //     border: var(--_sf-el-wr-br-at-vl, none);
-            //     & > div {
-            //       &[data-cms-tool="cms-element-resizer"] {
-            //         --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
-            //         --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
-            //         --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
-            //       }
-            //     }
-            //   }
-            // }
-            &:not(:has(#{$activeElementSelector})) {
-              // &:not(:has([data-has-clicked="true"][data-layer-div-type="element"])) {
-              // & > .wrapper {
-              //   border: var(--_sf-el-wr-br-at-vl, none);
-              //   & > div {
-              //     &[data-cms-tool="cms-element-resizer"] {
-              //       --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
-              //       --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
-              //       --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
-              //     }
-              //   }
-              // }
-            }
-            &:has([data-cms-element-resizer="true"]) {
-              pointer-events: none;
-            }
-            // & > .wrapper {
-            //   border: var(--_sf-el-wr-br-at-vl, none);
-            //   & > div {
-            //     &[data-cms-tool="cms-element-resizer"] {
-            //       --_sf-rsr-dp-ac-vl: var(--_sf-rsr-dp-vl, var(--_d-flex));
-            //       --_sf-rsr-op-ac-vl: var(--_sf-rsr-op-ac-dr-vl, 1);
-            //       --_sf-rsr-vt-ac-vl: var(--_sf-rsr-vt-ac-dr-vl, visible);
-            //     }
-            //   }
-            // }
-          }
-          &:is(
-              #{$containerElement},
-              #{$stackElement},
-              #{$repeaterElement},
-              #{$productDetailsElement},
-              #{$categoryElement},
-              #{$categoryWidgetElement},
-              #{$subCategoryElement},
-              #{$productElement},
-              #{$brandElement},
-              #{$bundleElement},
-              #{$tabsElement}
-            ) {
-            &:has(#{$activeElementSelector}) {
-              --_sf-ct-pi-nw: none;
-            }
-            & > .wrapper {
-              &[data-div-type="cms-container-wrapper"] {
-                display: var(--_d-grid);
-              }
-              &[data-div-type="cms-container-wrapper"],
-              &[data-div-type="cms-stack-wrapper"],
-              &[data-div-type="cms-repeater-wrapper"],
-              &[data-div-type="cms-product-details-wrapper"],
-              &[data-div-type="cms-category-widget-wrapper"],
-              &[data-div-type="cms-category-wrapper"],
-              &[data-div-type="cms-sub-category-wrapper"],
-              &[data-div-type="cms-brand-wrapper"],
-              &[data-div-type="cms-bundle-wrapper"],
-              &[data-div-type="cms-tabs-wrapper"],
-              &[data-div-type="cms-product-wrapper"] {
-                height: 100%;
-                pointer-events: var(--_sf-ct-pi-nw);
-                // &,
-                // * {
-                // }
-              }
-            }
-          }
-          &[data-cms-element-resizer="true"] {
-            --_sf-rsr-op-ac-vl-cr-sp: 0;
-            --_sf-rsr-dt-vl-dp: var(--_d-flex);
-          }
-          &[data-cms-element-dragging="true"] {
-            // --_sf-rsr-dp-vl: var(--_d-none);
-            // --_sf-rsr-op-ac-dr-vl: 0;
-            // --_sf-rsr-vt-ac-dr-vl: hidden;
-            --_sf-rsr-op-ac-vl-cr-sp: 0;
-            --_sf-el-wr-br-at-vl: 1px solid var(--_accent-color-2-500);
-            * {
-              pointer-events: none;
-            }
-          }
-        }
-      }
-    }
-
-    [class="wrapper-layer"],
-    [data-type="wrapper-layer"] {
-      position: var(--_p-absolute);
-      visibility: hidden;
-      display: var(--_d-none);
-    }
-  }
-
-  div {
-    &[data-cms-tool="cms-grid-swap-content-element"] {
-      position: var(--_p-absolute) !important;
-      // display: var(--_d-none);
-      pointer-events: none;
-      left: 50%;
-      top: 0;
-      transform: translateX(-50%);
-      background: var(--_primary-600);
-      color: var(--_base-white);
-      border-radius: 0 0 4px 4px;
-      padding: 4px 8px;
-      font-size: 12px;
-      width: max-content;
-      line-height: 1;
-      font-weight: 700;
-      text-transform: uppercase;
-      z-index: calc(var(--_higher-zIndex) + var(--_cms-properties-zIndex) + 3);
-
-      &[data-cms-drag-message-element="true"] {
-        background: var(--_red-900);
-        font-size: 10px;
-        max-width: 75%;
-        text-align: center;
-        word-wrap: break-word;
-      }
-    }
-  }
-}
-
-[data-cms-tool="cms-custom-tooltip"] {
-  background: var(--_primary-100);
-  color: var(--_primary-600);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 4px 8px;
-  border-radius: 4px;
-  // position: var(--_p-absolute);
-  position: var(--_p-fixed);
-  left: calc(1px * var(--_cms-tooltip-left));
-  top: calc(1px * var(--_cms-tooltip-top));
-  transform: translate(25%, 100%);
-  z-index: var(--_higher-zIndex);
-}

package/dist/tab-panel.scss

@@ -1,93 +0,0 @@
-// Define SCSS Variables
-$tp-panel-margin: 80px auto;
-$tp-panel-width: 1200px;
-$tp-panel-height: 300px;
-$tp-panel-border-width: 3px;
-$tp-panel-border-color: #907fff;
-$tp-tab-padding: 10px;
-$tp-tab-min-width: 130px;
-$tp-tab-min-height: 50px;
-$tp-tab-bg-hover: #d3d3d3;
-$tp-tab-bg-selected: #243dc6;
-$tp-tab-border-radius: 6px 6px 0 0;
-$tp-tab-color-selected: white;
-$tp-content-bg: #f3f2f9;
-$tp-divider-color: #400;
-$tp-scrollbar-width: none;
-$tp-scrollbar-style: none;
-
-.tp-tab-panel {
-  margin: $tp-panel-margin;
-  width: $tp-panel-width;
-  height: $tp-panel-height;
-  border: $tp-panel-border-width solid $tp-panel-border-color;
-  display: flex;
-  flex-direction: column;
-
-  &--hr {
-    flex-direction: column;
-  }
-
-  &--vr {
-    flex-direction: row;
-  }
-
-  &__header {
-    background-color: #fff;
-    white-space: nowrap;
-    overflow-x: auto;
-    display: flex;
-    overflow-y: scroll;
-    scrollbar-width: $tp-scrollbar-width;
-    -ms-overflow-style: $tp-scrollbar-style;
-
-    &--hr {
-      flex-direction: row;
-    }
-
-    &--vr {
-      flex-direction: column;
-    }
-  }
-
-  &__tab {
-    flex: 0 0 auto;
-    text-align: center;
-    padding: $tp-tab-padding;
-    cursor: pointer;
-    transition: background-color 0.3s;
-    min-width: $tp-tab-min-width;
-    min-height: $tp-tab-min-height;
-    box-sizing: border-box;
-    align-content: center;
-
-    &:hover {
-      background-color: $tp-tab-bg-hover;
-    }
-
-    &--selected {
-      background-color: $tp-tab-bg-selected;
-      border-radius: $tp-tab-border-radius;
-      color: $tp-tab-color-selected;
-    }
-  }
-
-  &__content {
-    background-color: $tp-content-bg;
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
-
-  &__divider {
-    border: none;
-
-    &--hr {
-      border-top: $tp-panel-border-width solid $tp-divider-color;
-    }
-
-    &--vr {
-      border-left: $tp-panel-border-width solid $tp-divider-color;
-    }
-  }
-}