@sc-360-v2/storefront-cms-library 0.3.26 → 0.3.27

package/dist/modal.scss

@@ -4,7 +4,7 @@ $modal_background_color: white;
 $backdrop_color: rgba(0, 0, 0, 0.2);
 $box_shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 $modal_width: 618px;
-$modal_padding: 20px 0;
+$modal_padding: 24px;
 $border_radius: 10px;
 $header_font_size: 18px;
 $header_font_weight: 600;
@@ -16,7 +16,7 @@ $footer_btn_font_size: 14px;
 $primary_100: var(--Primary-100, #ced4f6);
 $primary_500: var(--Primary-500, #162578);
 $gray_900: var(--Gray-900, #101828);
-$gap_between_elements: 10px;
+$gap_between_elements: 24px;
 $padding_horizontal: 24px;
 $box_shadow_active: 0px 1px 2px rgba(16, 24, 40, 0.05);
 $divider_color: #eaecf0;
@@ -53,7 +53,7 @@ $active_btn_text_color: #fff;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color: $modal_background_color;
-    width: var(--_sf-ml-wh, 850px);
+    width: var(--_sf-ml-wh, 450px);
     max-width: min(75%, 850px);
     padding: $modal_padding;
     box-shadow: $box_shadow;
@@ -62,16 +62,12 @@ $active_btn_text_color: #fff;
     flex-direction: column;
     gap: $gap_between_elements;
     z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
-    max-height: calc(100vh - 40px);
-    min-height: 250px;
-    overflow-y: auto;
     cursor: auto;
 
     &.media__modal {
       width: 60%;
 
       .modal-body {
-        padding: 0 16px;
         overflow: hidden;
       }
 
@@ -83,8 +79,10 @@ $active_btn_text_color: #fff;
   }
 
   .modal-header {
-    padding: 0 $padding_horizontal;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     h2 {
       font-size: $header_font_size;
@@ -100,9 +98,6 @@ $active_btn_text_color: #fff;
     }
 
     .modal-close-btn {
-      position: absolute;
-      right: $padding_horizontal;
-      top: 10px;
       width: $close_btn_size;
       height: $close_btn_size;
       font-size: $close_btn_font_size;
@@ -121,19 +116,43 @@ $active_btn_text_color: #fff;
   }
 
   .modal-body {
-    padding: $modal_padding_body;
     font-size: 14px;
     color: $gray_900;
   }
 
   .modal-footer {
     @include flexbox(flex-end, center, 10px);
-    padding: 10px $padding_horizontal;
-    border-top: 1px solid $divider_color;
     flex-wrap: wrap;
     bottom: 0;
-    position: absolute;
     width: 100%;
+
+    .modal-footer-wrapper {
+      display: flex;
+      width: 100%;
+      gap: 8px;
+
+      .modal-footer-white-btn {
+        padding: 12px 24px;
+        border-radius: 4px;
+        background-color: #fff;
+        color: #243dc6;
+        font-weight: 600;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+
+      .modal-footer-danger-btn {
+        padding: 12px 24px;
+        border-radius: 4px;
+        background-color: #d92d20;
+        color: #fff;
+        font-weight: 600;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+    }
   }
 
   @keyframes fadeIn {
@@ -191,7 +210,6 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
 .modalV2-main {
   .modalV2-wrapper {
-    min-height: 50%;
     overflow: hidden !important;
     position: fixed;
     left: 50%;
@@ -201,7 +219,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     background: $white;
     border-radius: $radius-lg;
     // padding: 0px 20px;
-    width: 850px;
+    width: 75%;
+    max-width: calc(1280px - 10%);
     font-family: $font-base;
     box-shadow: $shadow-md;
     z-index: $z-index-wrapper;
@@ -210,7 +229,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     .modal-body {
-      height: calc(100% - 61px);
+      height: auto;
+      display: flex;
+      width: 100%;
+      flex: 1 1 auto;
+      overflow-y: auto;
+
+      .wishlist-modal {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 10px 16px;
+        width: 100%;
+        overflow: scroll;
+      }
     }
     &.fullscreen {
       transition:
@@ -236,8 +268,10 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
 
       .footer-bar {
         border-top: 1px solid $gray-300;
-        padding-top: 16px;
-        margin: 15px 0;
+        margin: 0px;
+        padding: 10px 16px;
+        display: flex;
+        align-items: center;
       }
     }
 
@@ -277,7 +311,22 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           font-weight: 600;
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: 6px;
+          color: var(--_gray-900);
+          line-height: 24px;
+
+          .modal_heading_icon {
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            svg {
+              width: 20px;
+              height: 20px;
+            }
+          }
 
           .count {
             font-weight: 700;
@@ -293,15 +342,23 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
           }
         }
 
-        .actions span {
-          margin-left: 14px;
-          cursor: pointer;
-          font-size: 16px;
-          color: $text-light;
-          transition: color 0.2s;
+        .actions {
+          display: flex;
+          gap: 12px;
+          span {
+            width: 36px;
+            height: 36px;
+            cursor: pointer;
+            font-size: 16px;
+            color: $text-light;
+            transition: color 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-          &:hover {
-            color: $black;
+            &:hover {
+              color: $black;
+            }
           }
         }
       }
@@ -353,16 +410,24 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
       bottom: 0;
       display: flex;
       justify-content: space-between;
-      padding: 15px 0;
+      padding: 10px 16px;
       border-top: 1px solid $gray-300;
-      margin-top: 24px;
       font-size: $font-size-base;
       background: $footer_btn_background_color;
 
-      .summary span {
-        margin-right: 18px;
-        font-weight: 500;
-        color: $text-medium;
+      .summary {
+        display: flex;
+        gap: 24px;
+        span {
+          font-weight: 700;
+          line-height: 20px;
+          font-size: 14px;
+          color: #101828;
+          .footer_label {
+            font-weight: 400;
+            color: #667085;
+          }
+        }
       }
 
       .footer-actions {

package/dist/order-status.scss

@@ -213,14 +213,18 @@
         .success-text {
           h2 {
             margin: 0 0 4px;
-            font-size: 1.1rem;
-            font-weight: 600;
+            font-size: var(--_ctm-dn-dn-tt-ft-se);
+            color: var(--_ctm-dn-dn-tt-cr);
+            font-weight: var(--_ctm-dn-dn-tt-ft-wt);
+            font-family: var(--_ctm-dn-dn-tt-ft-fy);
           }
 
           p {
             margin: 0;
-            font-size: 0.7rem;
-            color: #374151;
+            font-size: var(--_ctm-dn-dn-tt-ft-se-dc);
+            color: var(--_ctm-dn-dn-tt-cr-dc);
+            font-weight: var(--_ctm-dn-dn-tt-ft-wt-dc);
+            font-family: var(--_ctm-dn-dn-tt-ft-fy-dc);
           }
         }
       }

package/dist/quick-order-pad.scss

@@ -15,10 +15,52 @@ $input-padding: 10px 12px;
 
 // .quick-order-main Styles
 .quick-order-main {
+  display: flex;
+  padding: 12px;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+
   .input-group {
     display: flex;
     gap: 12px;
-    margin-bottom: 10px;
+    height: fit-content;
+    align-items: center;
+
+    .quick-order-product-dropdown-section {
+      width: 320px;
+      height: 40px;
+      border: 0.5px solid #d0d5dd;
+      border-radius: 4px;
+
+      .dropdown-input-section {
+        padding: 0px 12px;
+
+        .dropdown-menu {
+          top: 40px;
+
+          .dropdown_menu_ul {
+            .dropdown-opt {
+              height: auto;
+              .dropdown-item {
+                max-height: none;
+
+                .item-image {
+                  width: 42px;
+                  height: 42px;
+                }
+
+                .item-name {
+                  font-size: 16px;
+                  line-height: 24px;
+                  color: #344054;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
 
     .qty-input {
       padding: $input-padding;
@@ -47,9 +89,28 @@ $input-padding: 10px 12px;
       padding: 10px 16px;
       border-radius: $radius;
       font-weight: 600;
-      font-size: $font-size-base;
+      font-size: 14px;
       cursor: pointer;
       transition: background-color 0.2s;
+      display: flex;
+      gap: 4px;
+      line-height: 20px;
+
+      .add-icon {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+          width: 20px;
+          height: 20px;
+          path {
+            stroke: #fff;
+          }
+        }
+      }
       &:hover {
         background-color: $primary-hover;
       }

package/dist/section.scss

@@ -30,6 +30,12 @@ $rp: (
 
 body {
   @include prepareCustomClassCSSProps($rp);
+
+  [data-anim-id="flex-animation-element"] {
+    &:not(.animate__animated) {
+      opacity: 0;
+    }
+  }
 }
 
 section {

package/dist/types/builder/elements/form-builder/index.d.ts

@@ -68,7 +68,8 @@ export declare enum FormElementIdEnum {
     LongAnswer = "LongAnswer",
     Number = "Number",
     Link = "Link",
-    Upload = "Upload",
+    FileUpload = "FileUpload",
+    ImageUpload = "ImageUpload",
     Rating = "Rating",
     SingleChoice = "SingleChoice",
     MultiChoice = "MultiChoice",
@@ -84,49 +85,48 @@ export declare enum FormElementIdEnum {
     LoginButton = "LoginButton",
     SignupButton = "SignupButton",
     Boolean = "boolean",
-    Image = "image",
     Header = "Header",
     Text = "Text",
     TextEditor = "TextEditor"
 }
 export declare enum FormIconEnum {
-    FirstName = "user-01",
-    LastName = "user-02",
-    UserName = "user-03",
-    Email = "mail-02",
-    Password = "lock-01",
-    Phone = "phone-01",
-    DateOfBirth = "calendar-days",
-    Honorific = "badge",
+    FirstName = "firstname-fb",
+    LastName = "lastname-fb",
+    UserName = "users-02",
+    Email = "email-fb",
+    Password = "password-fb",
+    Phone = "phone-fb",
+    DateOfBirth = "dob-fb",
+    Honorific = "honorific-fb",
     Gender = "user-circle",
-    Address = "map-pin",
-    ColorPicker = "droplet",
+    Address = "address-fb",
+    ColorPicker = "colorpicker-fb",
     InputText = "input-type",
-    Percent = "percent-circle",
-    ShortAnswer = "answer-type",
-    LongAnswer = "align-left",
-    Number = "hash",
-    Link = "link-02",
-    Upload = "upload-cloud",
-    Rating = "star",
-    SingleChoice = "circle-dot",
-    MultiChoice = "check-square",
-    DropDown = "chevron-down",
-    Checkbox = "check-box",
-    DatePicker = "calendar",
-    Date = "calendar-1",
-    DateTime = "calendar-clock",
-    Time = "clock",
-    Currency = "dollar-sign",
-    SubmitButton = "send",
-    ResetButton = "rotate-ccw",
+    Percent = "percent-fb",
+    ShortAnswer = "short-answer-fb",
+    LongAnswer = "long-answer-fb",
+    Number = "number-fb",
+    Link = "link-fb",
+    FileUpload = "upload-fb",
+    ImageUpload = "image-upload-fb",
+    Rating = "star-rating-fb",
+    SingleChoice = "single-select-fb",
+    MultiChoice = "multi-select-fb",
+    DropDown = "dropdown-fb",
+    Checkbox = "checkbox-fb",
+    DatePicker = "datepicker-fb",
+    Date = "date-fb",
+    DateTime = "date-and-time-fb",
+    Time = "time-fb",
+    Currency = "currency-fb",
+    SubmitButton = "submit-fb",
+    ResetButton = "reset-fb",
     LoginButton = "log-in",
     SignupButton = "user-plus",
-    Boolean = "toggle-right",
-    Image = "image",
-    Header = "heading-1",
-    Text = "text-align-left",
-    TextEditor = "edit-3"
+    Boolean = "boolean-fb",
+    Header = "heading-fb",
+    Text = "text-fb",
+    TextEditor = "editor-fb"
 }
 export interface FormComponentConfig {
     allowAlphaNumeric?: boolean;
@@ -152,7 +152,7 @@ export interface FormComponentConfig {
     };
     fieldKey?: string;
     fieldType: FormElementTypeEnum;
-    fileTypes?: string[];
+    fileTypes?: number[];
     h: number;
     href?: string;
     html?: string;
@@ -203,7 +203,7 @@ export declare enum ElementSettingEnum {
     REQUIRED = 2,
     PLACEHOLDER = 3,
     DESCRIPTION = 4,
-    RANGE = 5,
+    LIMIT_CHARACTERS = 5,
     MULTI_TOGGLE = 6,
     OPTIONS = 7,
     BUTTON_TYPE = 8,
@@ -219,7 +219,8 @@ export declare enum ElementSettingEnum {
     RESOLUTION = 18,
     DOC_LIMIT = 19,
     FILE_TYPES = 20,
-    DATE_RANGE = 21
+    SHOW_DATE_RANGE = 21,
+    LIMIT_DATE_RANGE = 22
 }
 export interface SidebarElementItem extends FormComponentConfig {
     categoryId?: number;
@@ -271,15 +272,37 @@ export declare enum FormRequiredFieldPlacement {
     BeforeField = 1,
     AfterField = 2
 }
-export declare enum GENDEREnum {
+export declare enum GenderEnum {
     MALE = 1,
     FEMALE = 2,
     OTHER = 3
 }
 export declare const genderConstant: {
     label: string;
-    value: GENDEREnum;
+    value: GenderEnum;
 }[];
+export declare enum ImageTypeEnum {
+    JPG = 1,
+    JPEG = 2,
+    PNG = 3,
+    GIF = 4,
+    TIFF = 5,
+    BMP = 6,
+    WEBP = 7,
+    AVIF = 8
+}
+export declare enum FileTypeEnum {
+    DOC = 1,
+    DOCX = 2,
+    PDF = 3,
+    XLS = 4,
+    XLSX = 5,
+    PPT = 6,
+    PPTX = 7,
+    TXT = 8,
+    RTF = 9,
+    CSV = 10
+}
 export declare enum AttributeDataType {
     STRING = 1,
     DATE = 2,
@@ -297,10 +320,92 @@ export declare enum AttributeDataType {
     SELECT = 14,
     TEXTEDITOR = 15
 }
-export declare function getCompTypeByAttrId(dataTypeId: AttributeDataType): {
-    id: FormElementIdEnum;
-    icon: FormElementIdEnum;
-    type: FormComponentTypeEnum;
+export declare function createAttributeFieldMap(attr: any): {
+    id?: undefined;
+    allowAlphaNumeric?: undefined;
+    allowDecimal?: undefined;
+    allowNegativeNumber?: undefined;
+    allowOnlyOne?: undefined;
+    convertTextToLowerCase?: undefined;
+    convertTextToUpperCase?: undefined;
+    customAttributeKey?: undefined;
+    defaultErrorMessage?: undefined;
+    defaultValue?: undefined;
+    description?: undefined;
+    docLimit?: undefined;
+    fieldType?: undefined;
+    fileTypes?: undefined;
+    icon?: undefined;
+    isMultiple?: undefined;
+    isDateRange?: undefined;
+    label?: undefined;
+    range?: undefined;
+    maxFileSize?: undefined;
+    options?: undefined;
+    placeholder?: undefined;
+    removeSpecialCharacters?: undefined;
+    required?: undefined;
+    resolution?: undefined;
+    showElementProperties?: undefined;
+    specialCharactersToExclude?: undefined;
+    type?: undefined;
+} | {
+    id: any;
+    allowAlphaNumeric: boolean;
+    allowDecimal: any;
+    allowNegativeNumber: any;
+    allowOnlyOne: boolean;
+    convertTextToLowerCase: boolean;
+    convertTextToUpperCase: boolean;
+    customAttributeKey: any;
+    defaultErrorMessage: {
+        value: any;
+        state: boolean;
+    };
+    defaultValue: any;
+    description: {
+        value: any;
+        state: boolean;
+    };
+    docLimit: {
+        value: any;
+        state: boolean;
+    };
     fieldType: FormElementTypeEnum;
-    key: string;
+    fileTypes: number[];
+    icon: FormIconEnum;
+    isMultiple: boolean;
+    isDateRange: boolean;
+    label: {
+        value: any;
+        state: boolean;
+    };
+    range: {
+        value: {
+            min: any;
+            max: any;
+        };
+        state: boolean;
+    };
+    maxFileSize: any;
+    options: any[];
+    placeholder: {
+        value: any;
+        state: boolean;
+    };
+    removeSpecialCharacters: any;
+    required: boolean;
+    resolution: {
+        value: {
+            min: any;
+            max: any;
+        };
+        state: boolean;
+    };
+    showElementProperties: never[];
+    specialCharactersToExclude: {
+        value: any;
+        state: boolean;
+    };
+    type: FormComponentTypeEnum;
 };

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

@@ -71,7 +71,8 @@ export declare enum CMSToolIdTypes {
     spotlightWrapper = "cms-spotlight-wrapper",
     TEXTELEMENTDOBLECLICK = "data-cms-tt-ee-dbl-clkd",
     menuWrapperV2 = "cms-menu-v2-wrapper",
-    menuItemWrapper = "cms-menu-item-wrapper"
+    menuItemWrapper = "cms-menu-item-wrapper",
+    animation = "flex-animation-element"
 }
 export declare enum CMSElementSelectors {
     iframeSelector = "iframe[data-title='iframe__playground']",
@@ -139,6 +140,8 @@ export declare enum CMSToolAttributes {
     id = "data-cms-tool",
     state = "data-cms-state",
     style = "data-style-id",
+    animation = "data-anim-id",
+    animationAttr = "data-anim-type",
     pageId = "data-page-id",
     dataDivType = "data-div-type",
     dataElementSubChild = "data-element-sub-child",
@@ -387,14 +390,16 @@ export declare enum CMSCustomEventsListEnums {
     IMAGE_CROP = "imageCrop",
     IMAGE_CROP_TEMP_DATA = "imageCropTempData",
     FORM_BUILDER_STATE = "formBuilderState",
-    EMBROIDERY_PLAYGROUND_STATE = "embroideryPlaygroundState"
+    EMBROIDERY_PLAYGROUND_STATE = "embroideryPlaygroundState",
+    FLEX_BUILDER_ANIMATION_TEMP_STATE = "flexBuilderAnimationTempState"
 }
 export declare enum FlexAppVersionEnums {
     NESTEDJSON = 1,
     FLATJSON = 2
 }
 export declare enum FlexDefaultValues {
-    FLEXLIGHTBOXCLOSEBTN = "isLightboxCloseIconKey"
+    FLEXLIGHTBOXCLOSEBTN = "isLightboxCloseIconKey",
+    FLEX_ELEMENET_ANIMATION_KEY = "animationData"
 }
 export declare enum SkeletonItems {
     PLACEHOLDER_IMAGE = "/00000000-0000-0000-0000-000000000000/development/img-placeholder.jpg"