@wix/editor-react-components 1.2153.0

package/dist/site/components/TextMarquee/manifest.js

@@ -0,0 +1,181 @@
+import { C as CSS_PROPERTIES, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+const running_text = {
+  settings: {
+    movement_direction_label: "Movement direction",
+    text_speed_label: "Text speed",
+    pause_on_hover: {
+      title: "Pause on hover"
+    },
+    movement_direction: {
+      dropdown_ltr_label: "Left to right",
+      dropdown_rtl_label: "Right to left"
+    },
+    space_between_items: "Space between items",
+    separator_color: "Separator color",
+    separator_scale: "Separator scale"
+  }
+};
+const DefaultTranslations = {
+  changeSeparator: "Change Separator"
+};
+const manifest = {
+  id: "64d7d13f-8f09-47e3-9eea-9c02e3f602c2",
+  description: "Text Marquee",
+  type: "wixEditorElements.TextMarquee",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.stretched
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: ".text-marquee",
+    displayName: "Running Text",
+    archetype: Archetype.Text,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: false,
+      disablePositioning: false
+    },
+    displayFilters: {
+      data: {
+        hide: ["svg", "isDecorative"]
+      },
+      cssCustomProperties: {
+        hide: ["separator-scale", "opacity"]
+      },
+      actions: {
+        hide: ["media"]
+      }
+    },
+    customActions: {
+      vectorArtColors: {
+        displayName: DefaultTranslations.changeSeparator,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "e1d54c0c-66be-4e77-840d-ed4a192e0b42"
+          }
+        }
+      }
+    },
+    data: {
+      movementDirection: {
+        displayName: running_text.settings.movement_direction_label,
+        dataType: DATA.DATA_TYPE.textEnum,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "ltr",
+              displayName: running_text.settings.movement_direction.dropdown_ltr_label
+            },
+            {
+              value: "rtl",
+              displayName: running_text.settings.movement_direction.dropdown_rtl_label
+            }
+          ]
+        },
+        defaultValue: "ltr"
+      },
+      speed: {
+        displayName: running_text.settings.text_speed_label,
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 9
+      },
+      pauseOnHover: {
+        displayName: running_text.settings.pause_on_hover.title,
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      isDecorative: {
+        displayName: "Is Decorative",
+        dataType: DATA.DATA_TYPE.booleanValue,
+        defaultValue: false
+      },
+      svg: {
+        displayName: "Separator",
+        dataType: DATA.DATA_TYPE.vectorArt,
+        disableDeletion: true
+      },
+      text: {
+        displayName: "Text",
+        dataType: DATA.DATA_TYPE.text,
+        defaultValue: "Text Marquee"
+      },
+      link: {
+        displayName: "Link",
+        dataType: DATA.DATA_TYPE.link
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.ariaHidden,
+            DATA.A11Y_ATTRIBUTES.tag
+          ]
+        }
+      }
+    },
+    cssProperties: {
+      font: {
+        displayName: "Font"
+      },
+      color: {
+        displayName: "Color"
+      }
+    },
+    cssCustomProperties: {
+      spaceBetweenItems: {
+        displayName: running_text.settings.space_between_items,
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        defaultValue: "10px"
+      },
+      separatorFillColor: {
+        displayName: running_text.settings.separator_color,
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        defaultValue: "#000000"
+      },
+      "separator-scale": {
+        displayName: running_text.settings.separator_scale,
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.number,
+        number: {
+          max: "1",
+          min: "0",
+          multiplier: "0.1"
+        },
+        defaultValue: 1
+      },
+      opacity: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.opacity
+      }
+    },
+    helpArticle: {
+      kbId: "a7b52521-d7f1-465c-a477-b80151a9389e"
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/TextMarquee/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/TextMarquee"
+    },
+    editor: {
+      componentUrl: "./site/components/TextMarquee/component.preview.tsx",
+      serviceDependencies: ["@wix/viewer-service-environment"],
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    sdk: {
+      url: "./site/components/TextMarquee/sdk.ts"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/TextMarquee/panels/SeparatorPanel/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SeparatorPanelData } from '../common/types';
+import { Translations } from './translations/consts';
+export type SeparatorPanelProps = {
+    marqueeData: SeparatorPanelData | null;
+    updateData: (newData: Partial<SeparatorPanelData>) => Promise<void>;
+    resetData: () => void;
+    translations: Translations;
+};
+declare const SeparatorPanel: ({ marqueeData, updateData, resetData, translations, }: SeparatorPanelProps) => React.JSX.Element | null;
+export default SeparatorPanel;

package/dist/site/components/TextMarquee/panels/SeparatorPanel/translations/consts.d.ts

@@ -0,0 +1,12 @@
+export declare const TranslationKeys: {
+    readonly changeSeparator: "running_text.action_bar.change_separator";
+    readonly titleLabel: "running_text.change_separator.title_label";
+    readonly colorOpacityLabel: "running_textchange_separator.color_opacity_label";
+    readonly opacityLabel: "running_textchange_separator.opacity_label";
+    readonly sizeLabel: "running_text.change_separator.size_label";
+    readonly hoverReplace: "running_text.change_separator.hover_replace";
+    readonly hoverDelete: "running_text.change_separator.hover_delete";
+    readonly addSeparatorShape: "running_text.change_separator.add_separator.hover_add_separator_shape";
+};
+export type Translations = Record<keyof typeof TranslationKeys, string>;
+export declare const DefaultTranslations: Translations;

package/dist/site/components/TextMarquee/panels/bi/events.d.ts

@@ -0,0 +1,4 @@
+import { SeparatorPanelStyles } from '../common/types';
+export declare const panel_name = "Separator Settings";
+export declare const component_type = "wixEditorElements.TextMarquee";
+export declare const actions: Record<keyof SeparatorPanelStyles, string>;

package/dist/site/components/TextMarquee/panels/bi/utils.d.ts

@@ -0,0 +1,7 @@
+import { SeparatorPanelData } from '../common/types';
+type BiLogger = {
+    report: (params: Record<string, any>) => void;
+};
+type SvgData = SeparatorPanelData['data']['svg'];
+export declare const reportSeparatorChange: (biLogger: BiLogger, prevSvg: SvgData, newSvg: SvgData | undefined) => void;
+export {};

package/dist/site/components/TextMarquee/panels/common/ColorAndOpacityPicker.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SeparatorPanelData } from './types';
+import { Translations } from '../SeparatorPanel/translations/consts';
+type ColorAndOpacityProps = {
+    isColorable: boolean;
+    marqueeData: SeparatorPanelData;
+    updateData: (newData: Partial<SeparatorPanelData>) => void;
+    translations: Translations;
+};
+export declare const ColorAndOpacityPicker: React.FC<ColorAndOpacityProps>;
+export {};

package/dist/site/components/TextMarquee/panels/common/ShapeSizeSlider.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { SeparatorPanelData } from './types';
+import { Translations } from '../SeparatorPanel/translations/consts';
+type SeparatorScaleSliderProps = {
+    marqueeData: SeparatorPanelData;
+    updateData: (newData: Partial<SeparatorPanelData>) => void;
+    translations: Translations;
+};
+export declare const SeparatorScaleSlider: React.FC<SeparatorScaleSliderProps>;
+export {};

package/dist/site/components/TextMarquee/panels/common/SvgMediaPicker.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { SeparatorPanelData } from './types';
+import { Translations } from '../SeparatorPanel/translations/consts';
+type SvgMediaPickerProps = {
+    setIsColorable: (isColorable: boolean) => void;
+    marqueeData: SeparatorPanelData;
+    updateData: (newData: Partial<SeparatorPanelData>) => Promise<void>;
+    resetData: () => void;
+    translations: Translations;
+};
+export declare const SvgMediaPicker: (props: SvgMediaPickerProps) => React.JSX.Element;
+export {};

package/dist/site/components/TextMarquee/panels/common/types.d.ts

@@ -0,0 +1,23 @@
+import { SvgType } from '../../../../../types/vendored/document-services-types';
+export type SeparatorPanelData = {
+    data: {
+        svg?: {
+            type: 'Builder.VectorArt';
+            uri: string;
+        };
+        movementDirection?: string;
+        speed?: number;
+        pauseOnHover?: boolean;
+        isDecorative?: boolean;
+        text?: string;
+        link?: any;
+        svgType: SvgType;
+    };
+    styles?: Partial<SeparatorPanelStyles>;
+};
+export type SeparatorPanelStyles = {
+    separatorFillColor?: string;
+    opacity?: string;
+    'separator-scale'?: string;
+    spaceBetweenItems?: string;
+};

package/dist/site/components/TextMarquee/panels/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/TextMarquee/panels/panel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/site/components/TextMarquee/sdk.d.ts

@@ -0,0 +1,30 @@
+import { MouseEventHandler } from 'react';
+import { CorvidSDKFactory } from '../../../types/vendored/editor-elements-types-corvid';
+import { TextMarqueeBuilderProps } from './TextMarquee.types';
+export declare const TEXT_MARQUEE_SDK_TYPE = "$w.TextMarquee";
+type Direction = 'ltr' | 'rtl';
+interface TTextMarqueeSDK {
+    type: string;
+    text: string;
+    speed: number;
+    movementDirection: Direction;
+    textDirection: Direction;
+    pauseOnHover: boolean;
+    link: TextMarqueeBuilderProps['link'];
+    svg: TextMarqueeBuilderProps['svg'];
+    onClick: (callback: MouseEventHandler) => void;
+    onDblClick: (callback: MouseEventHandler) => void;
+    onMouseEnter: (callback: MouseEventHandler) => void;
+    onMouseLeave: (callback: MouseEventHandler) => void;
+    toJSON: () => {
+        type: string;
+        text: string;
+        speed: number;
+        movementDirection: Direction;
+        textDirection: Direction;
+        pauseOnHover: boolean;
+    };
+}
+export declare const createTextMarqueeSdk: CorvidSDKFactory<TextMarqueeBuilderProps, TTextMarqueeSDK>;
+declare const _default: CorvidSDKFactory<object, object, object>;
+export default _default;

package/dist/site/components/TextMarquee/sdk.js

@@ -0,0 +1,87 @@
+import { c as createA11ySdk } from "../chunks/a11ySdk.js";
+import { c as composeSDKFactories } from "../chunks/composeSDKFactories.js";
+import { e as elementSdkFactory } from "../chunks/elementSdk.js";
+const TEXT_MARQUEE_SDK_TYPE = "$w.TextMarquee";
+const DEFAULT_SPEED = 9;
+const createTextMarqueeSdk = (api) => {
+  const { props, setProps } = api;
+  return {
+    get type() {
+      return TEXT_MARQUEE_SDK_TYPE;
+    },
+    get text() {
+      return props.text || "";
+    },
+    set text(value) {
+      setProps({ text: value || "" });
+    },
+    get speed() {
+      return props.speed ?? DEFAULT_SPEED;
+    },
+    set speed(value) {
+      setProps({ speed: value });
+    },
+    get movementDirection() {
+      return props.movementDirection || "ltr";
+    },
+    set movementDirection(value) {
+      setProps({ movementDirection: value || "ltr" });
+    },
+    get textDirection() {
+      return props.textDirection || "ltr";
+    },
+    set textDirection(value) {
+      setProps({ textDirection: value || "ltr" });
+    },
+    get pauseOnHover() {
+      return props.pauseOnHover ?? false;
+    },
+    set pauseOnHover(value) {
+      setProps({ pauseOnHover: value });
+    },
+    get link() {
+      return props.link;
+    },
+    set link(value) {
+      setProps({ link: value });
+    },
+    get svg() {
+      return props.svg;
+    },
+    set svg(value) {
+      setProps({ svg: value });
+    },
+    onClick(callback) {
+      setProps({ onClick: callback });
+    },
+    onDblClick(callback) {
+      setProps({ onDblClick: callback });
+    },
+    onMouseEnter(callback) {
+      setProps({ onMouseEnter: callback });
+    },
+    onMouseLeave(callback) {
+      setProps({ onMouseLeave: callback });
+    },
+    toJSON() {
+      return {
+        type: TEXT_MARQUEE_SDK_TYPE,
+        text: props.text || "",
+        speed: props.speed ?? DEFAULT_SPEED,
+        movementDirection: props.movementDirection || "ltr",
+        textDirection: props.textDirection || "ltr",
+        pauseOnHover: props.pauseOnHover ?? false
+      };
+    }
+  };
+};
+const sdk = composeSDKFactories([
+  elementSdkFactory(TEXT_MARQUEE_SDK_TYPE),
+  createTextMarqueeSdk,
+  createA11ySdk({ a11yProperty: "a11y" })
+]);
+export {
+  TEXT_MARQUEE_SDK_TYPE,
+  createTextMarqueeSdk,
+  sdk as default
+};

package/dist/site/components/TextMarquee/utils.d.ts

@@ -0,0 +1 @@
+export declare const panelToDataSpeed: (speed: number) => number;

package/dist/site/components/TransparentVideo/TransparentVideo.types.d.ts

@@ -0,0 +1,49 @@
+import { VideoUploadProps } from '../VideoUpload/VideoUpload.types';
+export declare enum VideoStartType {
+    auto = "auto",
+    click = "click",
+    hover = "hover"
+}
+export declare enum VideoEndType {
+    loop = "loop",
+    replayOnClick = "replayOnClick",
+    stop = "stop"
+}
+export type TransparentVideoFilterEffect = {
+    effectType?: FilterEffectType;
+    duotoneDark?: string;
+    duotoneLight?: string;
+    brightness?: number;
+    isCustom?: boolean;
+    contrast?: number;
+    hue?: number;
+    saturation?: number;
+    invert?: boolean;
+};
+export interface TransparentVideoProps extends VideoUploadProps {
+    showPoster: boolean;
+    videoStartType: VideoStartType;
+    videoEndType: VideoEndType;
+    filterEffect?: TransparentVideoFilterEffect;
+}
+export interface TransparentVideoBuilderProps extends TransparentVideoFilterEffect, VideoUploadProps {
+    showPoster: boolean;
+    videoStartType: VideoStartType;
+    videoEndType: VideoEndType;
+    filterEffectRecolorVideo?: boolean;
+}
+export type VideoBoxCommonProps = {
+    filterEffect?: TransparentVideoFilterEffect;
+};
+export declare enum VideoPlayingState {
+    playing = "playing",
+    paused = "paused",
+    ended = "ended"
+}
+export declare enum FilterEffectType {
+    tvDuotone = "tvDuotone",
+    tvMonotoneDark = "tvMonotoneDark",
+    tvMonotoneLight = "tvMonotoneLight",
+    grayscale = "grayscale",
+    tvHue = "tvHue"
+}

package/dist/site/components/TransparentVideo/assets/MutedIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const MutedIcon: () => React.JSX.Element;

package/dist/site/components/TransparentVideo/assets/NoneThumbnailIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const NoneThumbnailIcon: () => React.JSX.Element;

package/dist/site/components/TransparentVideo/assets/PauseIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const PauseIcon: () => React.JSX.Element;

package/dist/site/components/TransparentVideo/assets/PlayIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const PlayIcon: () => React.JSX.Element;

package/dist/site/components/TransparentVideo/assets/UnMutedIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const UnMutedIcon: () => React.JSX.Element;

package/dist/site/components/TransparentVideo/component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TransparentVideoBuilderProps } from './TransparentVideo.types';
+declare function TransparentVideo(props: TransparentVideoBuilderProps): React.JSX.Element;
+export default TransparentVideo;