@sc-360-v2/storefront-cms-library 0.0.7 → 0.0.8

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

@@ -1,5 +1,6 @@
+import { CMSElementEditTypes } from "../../enums";
 import { CMSIBCommonInterface } from "../../interfaces/global";
-import { CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+import { CMSElementEditPopupInterface } from "./common";
 export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
 }
 interface ControlInterface {
@@ -32,7 +33,6 @@ export interface VideoControlInterface {
         selectorKey?: string;
         icon?: CMSIBCommonInterface;
         iconSize?: CMSIBCommonInterface;
-        iconColor?: CMSIBCommonInterface;
     };
     video?: {
         selectorKey?: string;
@@ -60,7 +60,11 @@ export declare enum VideoSelectorKeysEnum {
     CONTENT = "content",
     VIDEO_PLAYER_TEXT = "videoPlayerText",
     PLAY_PAUSE = "playPause",
-    VIDEO = "video"
+    VIDEO = "video",
+    VIDEO_WIDGET_LAYOUT = "videoWidgetLayout",
+    VIDEO_WIDGET_DESIGN = "videoWidgetDesign",
+    VIDEO_TEXT_LAYOUT = "videoTextLayout",
+    VIDEO_TEXT_CONTAINER_DESIGN = "videoTextContainerDesign"
 }
 export interface SelectorKeys {
     LAYOUT: string;
@@ -70,5 +74,209 @@ export interface SelectorKeys {
     PLAY_PAUSE: string;
     VIDEO: string;
 }
-export declare const getDefaultData: () => CMSVideoEditPopupInterface<VideoControlInterface & VideoControlInterface & VideoControlInterface & CMSElementEditPopupLayoutInterface>;
+export declare const getDefaultData: () => {
+    layout: {
+        selectorKey: VideoSelectorKeysEnum;
+        width: {
+            value: string;
+            unit: number;
+        };
+        height: {
+            value: string;
+            unit: number;
+            property?: any;
+            propertyType?: any;
+            isReadOnly?: boolean | undefined;
+            parentRef?: string | undefined;
+        };
+        margin: import("../../interfaces/global").CSSPaddingValues | undefined;
+        padding: {
+            value: string;
+            unit: number;
+            isAll?: boolean | undefined;
+            sides?: import("../../interfaces/global").PaddingSides | import("../../interfaces/global").BorderSides | undefined;
+            property?: string | undefined;
+            iscss?: boolean | undefined;
+            propertyType?: any;
+        };
+        autoplay: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        showControls: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        loopVideo: {
+            value: boolean;
+            propertyType: CMSElementEditTypes;
+        };
+        loopCount: {
+            value: number;
+            propertyType: CMSElementEditTypes;
+        };
+        positionType: CMSIBCommonInterface | undefined;
+        pinTo: CMSIBCommonInterface | undefined;
+    };
+    content: {
+        selectorKey: VideoSelectorKeysEnum;
+        videoFile: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        showVideoTitle: {
+            value: boolean;
+            propertyType: CMSElementEditTypes;
+        };
+        videoTitle: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        showVideoDescription: {
+            value: boolean;
+            propertyType: CMSElementEditTypes;
+        };
+        videoDescription: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        showCustomVideoThumbnail: {
+            value: boolean;
+            propertyType: CMSElementEditTypes;
+        };
+        thumbnailImage: {
+            value: string;
+            propertyType: CMSElementEditTypes;
+        };
+        image: {
+            value: {
+                src: string;
+            };
+            propertyType: CMSElementEditTypes;
+        };
+    };
+    design: {
+        selectorKey: VideoSelectorKeysEnum;
+        videoWidgetLayout: {
+            selectorKey: VideoSelectorKeysEnum;
+            verticalAlignment: {
+                value: string;
+                property: string;
+                propertyType: CMSElementEditTypes;
+            };
+            widgetTextAndItemSpacing: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+            textPosition: {
+                value: string;
+                property: string;
+                propertyType: CMSElementEditTypes;
+            };
+        };
+        videoWidgetDesign: {
+            selectorKey: VideoSelectorKeysEnum;
+            backgroundColor: CMSIBCommonInterface;
+            borderColor: CMSIBCommonInterface;
+            borderStyle: CMSIBCommonInterface;
+            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+            showBorder: CMSIBCommonInterface;
+            showShadow: CMSIBCommonInterface;
+            shadowColor: CMSIBCommonInterface;
+            blur: import("../../interfaces/global").CMSIBSizeInterface;
+            spread: import("../../interfaces/global").CMSIBSizeInterface;
+            angle: import("../../interfaces/global").CMSIBSizeInterface;
+            borderRadius: import("../../interfaces/global").CSSPaddingValues;
+            showIcon: CMSIBCommonInterface | undefined;
+            iconSize: import("../../interfaces/global").CMSIBSizeInterface;
+            iconColor: CMSIBCommonInterface;
+            theme: CMSIBCommonInterface;
+            font: CMSIBCommonInterface;
+            fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+            textColor: CMSIBCommonInterface;
+            bold: CMSIBCommonInterface;
+            italic: CMSIBCommonInterface;
+            linethrough: CMSIBCommonInterface;
+            underline: CMSIBCommonInterface;
+            textAlign: CMSIBCommonInterface;
+            characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+            lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+            themeDesc: CMSIBCommonInterface;
+            fontDesc: CMSIBCommonInterface;
+            fontSizeDesc: import("../../interfaces/global").CMSIBSizeInterface;
+            textColorDesc: CMSIBCommonInterface;
+            boldDesc: CMSIBCommonInterface;
+            italicDesc: CMSIBCommonInterface;
+            linethroughDesc: CMSIBCommonInterface;
+            underlineDesc: CMSIBCommonInterface;
+            textAlignDesc: CMSIBCommonInterface;
+            characterSpacingDesc: import("../../interfaces/global").CMSIBSizeInterface | undefined;
+            lineHeightDesc: import("../../interfaces/global").CMSIBSizeInterface;
+        };
+        videoTextLayout: {
+            selectorKey: VideoSelectorKeysEnum;
+            textVerticalPadding: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+            textHorizontalPadding: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+            titleAndDescriptionSpacing: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+        };
+        videoTextContainerDesign: {
+            selectorKey: VideoSelectorKeysEnum;
+            backgroundColor: CMSIBCommonInterface;
+            showBorder: CMSIBCommonInterface;
+            borderStyle: CMSIBCommonInterface;
+            borderColor: CMSIBCommonInterface;
+            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+            borderRadius: import("../../interfaces/global").CSSPaddingValues;
+            showShadow: CMSIBCommonInterface;
+            shadowColor: CMSIBCommonInterface;
+            angle: import("../../interfaces/global").CMSIBSizeInterface;
+            spread: import("../../interfaces/global").CMSIBSizeInterface;
+            blur: import("../../interfaces/global").CMSIBSizeInterface;
+        };
+        playPause: {
+            selectorKey: VideoSelectorKeysEnum;
+            playIcon: {
+                value: string;
+                property: string;
+                propertyType: CMSElementEditTypes;
+            };
+            pauseIcon: {
+                value: string;
+                property: string;
+                propertyType: CMSElementEditTypes;
+            };
+            size: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+            iconColor: CMSIBCommonInterface;
+            backgroundShape: {
+                value: string;
+                property: string;
+                unit: number;
+                propertyType: CMSElementEditTypes;
+            };
+            backgroundColor: CMSIBCommonInterface;
+        };
+    };
+};
 export {};

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

@@ -27,10 +27,10 @@ export type ResponsiveBehaviourTypes = "proportional-scaling" | "fixed-height" |
 export type SizeTypeValue = "inline" | "block" | string;
 export type GlobalImageAttributes = "src" | "alt" | "width" | "height" | "loading" | "crossOrigin" | "referrerPolicy";
 export type GlobalTextAttributes = "lang" | "dir" | "title" | "aria-label" | "aria-hidden" | "aria-live" | "tabIndex" | "role";
-export type ImageBuilderAttributes = "dataDivType" | "dataType" | "dataElementType" | "dataWidgetType";
+export type ImageBuilderAttributes = "dataDivType" | "dataType" | "dataElementType" | "dataWidgetType" | "dataElementSubChild";
 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";
+export type CommonBuilderAttributes = "dataDivType" | "dataType" | "dataElementType" | "dataWidgetType" | "dataElementSubChild";
 export type GlobalTableAttributes = "cellPadding" | "cellSpacing" | "border" | "width" | "height" | "align" | "bgColor" | "frame" | "headers" | "rows" | "rules";
 export type ObjectFitValue = "fill" | "contain" | "cover" | "none" | "scale-down" | string;
 export type ObjectPositionValue = string;

package/package.json

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

package/dist/faq.scss

@@ -1,136 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-
-[data-div-type="element"] {
-  &[data-element-type="faq"] {
-    // 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;
-    }
-
-    .accordion-element {
-      background-color: var(--_ctm-dn-fq-wt-bd-cr, var(--_tst-dn-fq-wt-bd-cr));
-      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
-      display: flex;
-      flex-direction: column;
-      --_sf-gp: 16px;
-      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
-      row-gap: var(--_sf-gp);
-      width: 100%;
-      // height: 100%;
-      border-color: var(--_ctm-dn-fq-wt-br-cr, var(--_tst-dn-fq-wt-br-cr));
-      border-style: var(--_ctm-dn-fq-wt-br-se, var(--_tst-dn-fq-wt-br-se));
-      border-width: var(--_ctm-dn-fq-wt-br-wh, var(--_tst-dn-fq-wt-br-wh));
-      border-radius: var(--_ctm-dn-fq-wt-br-rs, var(--_tst-dn-fq-wt-br-rs));
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-dn-fq-wt-sw-ae, var(--_tst-dn-fq-wt-sw-ae))
-          var(--_ctm-dn-fq-wt-sw-br, var(--_tst-dn-fq-wt-sw-br))
-          var(--_ctm-dn-fq-wt-sw-sd, var(--_tst-dn-fq-wt-sw-sd))
-          var(--_ctm-dn-fq-wt-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
-      );
-
-      &[data-divider-show="true"] {
-        --_sf-dvdr: 1px solid var(--_ctm-dn-dr-bd-cr, var(--_tst-dn-dr-bd-cr));
-        --_sf-dvdr-gap: var(--_sf-gp);
-      }
-      &[data-icon-position="Left"] {
-        --_sf-fd: row-reverse;
-        --_sf-jc: flex-end;
-      }
-      &[data-show-icon="false"] {
-        --_sf-show-icon-ff: none;
-      }
-    }
-
-    .accordion-item {
-      width: 100%;
-      display: grid;
-      overflow: clip;
-      grid-template-rows: var(
-        --_self-active-gtr,
-        minmax(var(--_ctm-dn-in-in-se, var(--_tst-dn-in-in-se)), auto) 0px
-      );
-      // transition: grid-template-rows 0.45s ease-in-out;
-
-      --_sf-pd-cd: var(--_sf-dvdr-gap);
-      &:not(:last-of-type) {
-        border-block-end: var(--_sf-dvdr);
-      }
-
-      &[data-state="open"] {
-        // overflow: inherit;
-        --_self-active-gtr: minmax(var(--_ctm-dn-in-in-se, var(--_tst-dn-in-in-se)), auto)
-          minmax(50px, auto);
-
-        --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
-        --_sf-dc-mb: var(--_sf-cd-gp);
-        --_sf-tt-pd: 0px;
-        --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);
-      }
-    }
-    .accordion-title {
-      display: flex;
-      flex-direction: var(--_sf-fd, row);
-      align-content: center;
-      gap: var(--_sf-cd-gp);
-      align-items: center;
-      justify-content: var(--_sf-jc, space-between);
-      cursor: pointer;
-      padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
-
-      p {
-        padding-inline: var(--_sf-cd-gp);
-        color: var(--_ctm-dn-te-tt-cr, var(--_tst-dn-te-tt-cr));
-        font-family: var(--_ctm-dn-te-tt-ft-fy, var(--_tst-dn-te-tt-ft-fy)), sans-serif;
-        font-size: var(--_ctm-dn-te-tt-ft-se, var(--_tst-dn-te-tt-ft-se));
-        font-weight: var(--_ctm-dn-te-tt-ft-wt, var(--_tst-dn-te-tt-ft-wt));
-        font-style: var(--_ctm-dn-te-tt-ft-se-ic, var(--_tst-dn-te-tt-ft-se-ic));
-        text-align: var(--_ctm-dn-te-tt-tt-an, var(--_tst-dn-te-tt-tt-an));
-        letter-spacing: var(--_ctm-dn-te-tt-lr-sg, var(--_tst-dn-te-tt-lr-sg));
-        line-height: var(--_ctm-dn-te-tt-le-ht, var(--_tst-dn-te-tt-le-ht));
-      }
-      .icon {
-        display: var(--_sf-show-icon-ff, flex);
-        svg {
-          width: var(--_ctm-dn-in-in-se, var(--_tst-dn-in-in-se));
-          height: var(--_ctm-dn-in-in-se, var(--_tst-dn-in-in-se));
-          path {
-            stroke: var(--_ctm-dn-in-in-c1, var(--_tst-dn-in-in-c1));
-          }
-        }
-      }
-    }
-    .accordion-description {
-      // margin-block-start: calc(-1 * var(--_sf-dc-mb));
-      padding-block-end: var(--_sf-dc-pd-bt);
-      p {
-        color: var(--_ctm-dn-dn-tt-cr, var(--_tst-dn-dn-tt-cr));
-        font-family: var(--_ctm-dn-dn-tt-ft-fy, var(--_tst-dn-dn-tt-ft-fy)), sans-serif;
-        font-size: var(--_ctm-dn-dn-tt-ft-se, var(--_tst-dn-dn-tt-ft-se));
-        font-weight: var(--_ctm-dn-dn-tt-ft-wt, var(--_tst-dn-dn-tt-ft-wt));
-        font-style: var(--_ctm-dn-dn-tt-ft-se-ic, var(--_tst-dn-dn-tt-ft-se-ic));
-        text-align: var(--_ctm-dn-dn-tt-tt-an, var(--_tst-dn-dn-tt-tt-an));
-        letter-spacing: var(--_ctm-dn-dn-tt-lr-sg, var(--_tst-dn-dn-tt-lr-sg));
-        line-height: var(--_ctm-dn-dn-tt-le-ht, var(--_tst-dn-dn-tt-le-ht));
-      }
-    }
-  }
-}