@wix/editor-react-components 1.2736.0 → 1.2737.0

package/dist/site/components/chunks/constants19.js

@@ -1,61 +1,103 @@
-const DEFAULT_ANIMATION_DURATION = 0.2;
-const AnimatedSvgIds = {
-  animatedSvg: "animatedSvg",
-  animatedTagPath: "animatedPath",
-  animateTagForward: "animateForward",
-  animateTagBackward: "animateBackward"
-};
-var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
-  AnimationDirection2["FORWARD"] = "Forward";
-  AnimationDirection2["BACKWARD"] = "Backward";
-  return AnimationDirection2;
-})(AnimationDirection || {});
-const AnimatedDataAttributes = {
-  [
-    "Forward"
-    /* FORWARD */
-  ]: "data-animated-end-path",
-  [
-    "Backward"
-    /* BACKWARD */
-  ]: "data-animated-start-path"
-};
-const TestIds = {
-  animatedSvg: "animated-svg",
-  animateTagForward: "animate-tag-forward",
-  animateTagBackward: "animate-tag-backward"
-};
-const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "animated-icon--hover" },
-    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
-    selected: { displayName: "Selected", className: "animated-icon--selected" }
-  }
-};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Animated Icon",
-    customActions: {
-      animatedIcon: {
-        displayName: "Icon"
-      }
-    },
+    elementDisplayName: "Text Box",
     data: {
-      duration: "Duration"
+      value: "Value",
+      defaultValue: "Default text",
+      label: "Label",
+      tooltip: "Tooltip",
+      placeholder: "Placeholder",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      minLength: "Minimum characters",
+      maxLength: "Maximum characters",
+      description: "Helper text"
     },
     cssCustomProperties: {
-      size: "Size",
-      fill: "Color",
-      rotation: "Rotation"
+      gap: "Space between label and field",
+      labelAlignment: "Label alignment",
+      descriptionSpacing: "Space between field and helper text"
+    }
+  },
+  input: {
+    elementDisplayName: "Input",
+    cssCustomProperties: {
+      placeholderTextColor: "Placeholder text color",
+      borderColor: "Border color",
+      borderWidth: "Border width",
+      resize: "Resize"
+    },
+    options: {
+      resizeOff: "Off",
+      resizeVertical: "Vertical",
+      resizeBoth: "Both"
+    },
+    displayGroups: {
+      borderGroup: "Border"
     }
+  },
+  label: {
+    elementDisplayName: "Label"
+  },
+  description: {
+    elementDisplayName: "Helper text"
+  }
+};
+const DesignStates = {
+  input: {
+    hover: { displayName: "Hover", className: "textbox__input--hover" },
+    focus: { displayName: "Focus", className: "textbox__input--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "textbox__input--disabled"
+    },
+    invalid: { displayName: "Error", className: "textbox__input--invalid" }
   }
 };
+const defaultValues = {
+  defaultValue: "",
+  label: "Label",
+  tooltip: "",
+  placeholder: "Enter your text here...",
+  description: "",
+  required: false,
+  readOnly: false,
+  disabled: false
+};
+const VALIDATION_MESSAGES = {
+  valueMissing: "This field is required",
+  tooShort: (minLength) => `Please use at least ${minLength} characters`,
+  tooLong: (maxLength) => `Please use no more than ${maxLength} characters`
+};
+const TestIds = {
+  root: "textbox-root",
+  input: "textbox-input",
+  label: "textbox-label",
+  requiredIndicator: "textbox-required-indicator",
+  tooltipButton: "textbox-tooltip-button",
+  description: "textbox-description",
+  errorMessage: "textbox-error-message"
+};
+const selectors = {
+  root: "textbox",
+  input: "textbox__input",
+  label: "textbox__label",
+  description: "textbox__description"
+};
+const semanticClassNames = {
+  input: "textbox__input",
+  label: "textbox__label",
+  requiredIndicator: "textbox__required-indicator",
+  description: "textbox__description",
+  errorMessage: "textbox__error-message"
+};
 export {
-  AnimatedSvgIds as A,
-  DEFAULT_ANIMATION_DURATION as D,
+  DesignStates as D,
   TestIds as T,
-  AnimatedDataAttributes as a,
-  AnimationDirection as b,
-  DesignStates as c,
-  DisplayNames as d
+  VALIDATION_MESSAGES as V,
+  semanticClassNames as a,
+  DisplayNames as b,
+  defaultValues as d,
+  selectors as s
 };

package/dist/site/components/chunks/constants2.js

@@ -1,131 +1,52 @@
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Time Picker",
-    data: {
-      value: "Selected time",
-      defaultValue: "Default time",
-      granularity: {
-        displayName: "Time precision",
-        options: {
-          hour: "Hours only",
-          minute: "Hours and minutes",
-          second: "Hours, minutes and seconds"
-        }
-      },
-      hourCycle: {
-        displayName: "Hour format",
-        options: {
-          auto: "Auto (locale)",
-          h12: "12-hour",
-          h24: "24-hour"
-        }
-      },
-      shouldForceLeadingZeros: "Always show leading zeros",
-      tooltip: "Tooltip",
-      label: "Label",
-      description: "Helper text",
-      minTime: "Earliest time (HH:MM)",
-      maxTime: "Latest time (HH:MM)",
-      required: "Required",
-      readOnly: "Read only",
-      disabled: "Disabled",
-      clearable: "Show clear button"
-    },
-    designStates: {
-      hover: "Hover",
-      focus: "Focus",
-      disabled: "Disabled"
-    },
-    elements: {
-      label: "Label",
-      timeInput: "Time input",
-      description: "Helper text",
-      segment: "Segment"
-    },
-    cssCustomProperties: {
-      labelSpacing: "Label spacing"
+var ScrollSpeed = /* @__PURE__ */ ((ScrollSpeed2) => {
+  ScrollSpeed2["slow"] = "slow";
+  ScrollSpeed2["normal"] = "normal";
+  ScrollSpeed2["fast"] = "fast";
+  return ScrollSpeed2;
+})(ScrollSpeed || {});
+const ROOT_CLASS = "video-scrub";
+const DEFAULT_VIDEO_RATIO = 9 / 16;
+const SCROLL_VH_PER_SECOND = {
+  [ScrollSpeed.slow]: 30,
+  [ScrollSpeed.normal]: 20.8,
+  [ScrollSpeed.fast]: 12
+};
+const MIN_SCROLL_VH = 50;
+const MAX_SCROLL_VH = 1e3;
+const mp4 = (quality, width, height) => ({
+  quality,
+  width,
+  height,
+  types: [
+    {
+      format: "mp4",
+      uri: `video/11062b_953b517691e34052afc53ccacc33fc67/${quality}/mp4/file.mp4`
     }
+  ]
+});
+const DEFAULT_VIDEO = {
+  name: "Neutral Living Room",
+  uri: "",
+  duration: 12.5,
+  hasAudio: false,
+  sources: [
+    mp4("360p", 640, 360),
+    mp4("480p", 854, 480),
+    mp4("720p", 1280, 720),
+    mp4("1080p", 1920, 1080)
+  ],
+  poster: {
+    uri: "11062b_953b517691e34052afc53ccacc33fc67f000.jpg",
+    width: 2560,
+    height: 1440
   }
 };
-const defaultValues = {
-  granularity: "minute",
-  hourCycle: "auto",
-  shouldForceLeadingZeros: false,
-  tooltip: "",
-  label: "",
-  description: "",
-  required: false,
-  readOnly: false,
-  disabled: false,
-  clearable: false
-};
-var HourCycleValues = /* @__PURE__ */ ((HourCycleValues2) => {
-  HourCycleValues2["Auto"] = "auto";
-  HourCycleValues2["H12"] = "12";
-  HourCycleValues2["H24"] = "24";
-  return HourCycleValues2;
-})(HourCycleValues || {});
-const DesignStates = {
-  timeInput: {
-    hover: {
-      displayName: DisplayNames.root.designStates.hover,
-      className: "timePicker__group--hover"
-    },
-    focus: {
-      displayName: DisplayNames.root.designStates.focus,
-      className: "timePicker__group--focus"
-    },
-    disabled: {
-      displayName: DisplayNames.root.designStates.disabled,
-      className: "timePicker__group--disabled"
-    }
-  },
-  segment: {
-    focus: {
-      displayName: DisplayNames.root.designStates.focus,
-      className: "timePicker__segment--focus"
-    }
-  }
-};
-const EMPTY_VALUE = "";
-const TRANSLATIONS_NAMESPACE = "timePicker";
-const TranslationKeys = {
-  ariaLabel: "timePicker_aria_label",
-  clearButton: "timePicker_clear_button"
-};
-const DefaultTranslations = {
-  ariaLabel: "Time picker",
-  clearButton: "Clear"
-};
-const TestIds = {
-  root: "timepicker-root",
-  group: "timepicker-group",
-  field: "timepicker-field",
-  clearButton: "timepicker-clear-button",
-  tooltipButton: "timepicker-tooltip-button",
-  errorMessage: "timepicker-error-message",
-  requiredIndicator: "timepicker-required-indicator"
-};
-const selectors = {
-  root: "timePicker",
-  label: "timePicker__label",
-  requiredIndicator: "timePicker__required-indicator",
-  group: "timePicker__group",
-  description: "timePicker__description",
-  segment: "timePicker__segment",
-  errorMessage: "timePicker__error-message"
-};
-const VALUE_MISSING_MESSAGE = "This field is required";
 export {
-  DefaultTranslations as D,
-  EMPTY_VALUE as E,
-  HourCycleValues as H,
-  TestIds as T,
-  VALUE_MISSING_MESSAGE as V,
-  TRANSLATIONS_NAMESPACE as a,
-  TranslationKeys as b,
-  DisplayNames as c,
-  defaultValues as d,
-  DesignStates as e,
-  selectors as s
+  DEFAULT_VIDEO as D,
+  MAX_SCROLL_VH as M,
+  ROOT_CLASS as R,
+  ScrollSpeed as S,
+  SCROLL_VH_PER_SECOND as a,
+  MIN_SCROLL_VH as b,
+  DEFAULT_VIDEO_RATIO as c
 };

package/dist/site/components/chunks/constants20.js

@@ -1,57 +1,61 @@
-const classes = {
-  tabs: "tabs",
-  tabMenu: "tab-menu",
-  tabMenuItemsWrapper: "tab-menu-items-wrapper",
-  tabMenuItems: "tab-menu-items",
-  menuItem: "menu-item",
-  scrollButton: "scroll-button",
-  tabContentContainer: "tab-content-container",
-  tabContentItem: "tab-content-item"
+const DEFAULT_ANIMATION_DURATION = 0.2;
+const AnimatedSvgIds = {
+  animatedSvg: "animatedSvg",
+  animatedTagPath: "animatedPath",
+  animateTagForward: "animateForward",
+  animateTagBackward: "animateBackward"
 };
-const OVERFLOW_BEHAVIOR = {
-  WRAP: "wrap"
+var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
+  AnimationDirection2["FORWARD"] = "Forward";
+  AnimationDirection2["BACKWARD"] = "Backward";
+  return AnimationDirection2;
+})(AnimationDirection || {});
+const AnimatedDataAttributes = {
+  [
+    "Forward"
+    /* FORWARD */
+  ]: "data-animated-end-path",
+  [
+    "Backward"
+    /* BACKWARD */
+  ]: "data-animated-start-path"
+};
+const TestIds = {
+  animatedSvg: "animated-svg",
+  animateTagForward: "animate-tag-forward",
+  animateTagBackward: "animate-tag-backward"
 };
 const DesignStates = {
-  menuItem: {
-    hover: { displayName: "Hover", className: "tabs__item--hover" },
-    selected: { displayName: "Selected", className: "tabs__item--selected" }
+  root: {
+    hover: { displayName: "Hover", className: "animated-icon--hover" },
+    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
+    selected: { displayName: "Selected", className: "animated-icon--selected" }
+  }
+};
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Animated Icon",
+    customActions: {
+      animatedIcon: {
+        displayName: "Icon"
+      }
+    },
+    data: {
+      duration: "Duration"
+    },
+    cssCustomProperties: {
+      size: "Size",
+      fill: "Color",
+      rotation: "Rotation"
+    }
   }
 };
-const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
-  "menu-item-background",
-  "menu-item-box-shadow",
-  "menu-item-color",
-  "menu-item-text-decoration-line",
-  "menu-item-letter-spacing",
-  "menu-item-text-shadow",
-  "menu-item-text-align",
-  "menu-item-flex",
-  "menu-item-border-width-top",
-  "menu-item-border-width-bottom",
-  "menu-item-border-width-inline-start",
-  "menu-item-border-width-inline-end",
-  "menu-item-border-style-top",
-  "menu-item-border-style-bottom",
-  "menu-item-border-style-inline-start",
-  "menu-item-border-style-inline-end",
-  "menu-item-border-color-top",
-  "menu-item-border-color-bottom",
-  "menu-item-border-color-inline-start",
-  "menu-item-border-color-inline-end",
-  "menu-item-border-radius-start-start",
-  "menu-item-border-radius-start-end",
-  "menu-item-border-radius-end-start",
-  "menu-item-border-radius-end-end",
-  "menu-item-padding-top",
-  "menu-item-padding-bottom",
-  "menu-item-padding-inline-start",
-  "menu-item-padding-inline-end"
-];
-const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
-  DesignStates as D,
-  OVERFLOW_BEHAVIOR as O,
-  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
-  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
-  classes as c
+  AnimatedSvgIds as A,
+  DEFAULT_ANIMATION_DURATION as D,
+  TestIds as T,
+  AnimatedDataAttributes as a,
+  AnimationDirection as b,
+  DesignStates as c,
+  DisplayNames as d
 };

package/dist/site/components/chunks/constants21.js

@@ -1,60 +1,57 @@
-const COMPONENT_TYPE = "wixEditorElements.Button";
-const TestIds = {
-  buttonContent: "buttonContent",
-  buttonLabel: "stylablebutton-label"
+const classes = {
+  tabs: "tabs",
+  tabMenu: "tab-menu",
+  tabMenuItemsWrapper: "tab-menu-items-wrapper",
+  tabMenuItems: "tab-menu-items",
+  menuItem: "menu-item",
+  scrollButton: "scroll-button",
+  tabContentContainer: "tab-content-container",
+  tabContentItem: "tab-content-item"
 };
-const TRANSITION_DURATION = 400;
-const DEFAULT_ICON_POSITION = "row-reverse";
-const SEMANTIC_CLASS_NAMES = {
-  root: "button",
-  buttonLabel: "button__label"
+const OVERFLOW_BEHAVIOR = {
+  WRAP: "wrap"
 };
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "button--hover" },
-    disabled: { displayName: "Disabled", className: "button--disabled" }
-  },
-  label: {
-    hover: { displayName: "Hover", className: "button__label--hover" },
-    disabled: { displayName: "Disabled", className: "button__label--disabled" }
-  }
-};
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Button",
-    data: {
-      disabled: "Disabled"
-    },
-    cssProperties: {
-      gap: "Space between text and icon"
-    },
-    cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "icon-position": "Icon position"
-    },
-    presets: {
-      baseButton: "Base Button"
-    },
-    iconPosition: {
-      beforeText: "Before text",
-      afterText: "After text",
-      belowText: "Below text",
-      aboveText: "Above text"
-    }
-  },
-  label: {
-    elementDisplayName: "Text",
-    cssProperties: {
-      font: "Typography"
-    }
+  menuItem: {
+    hover: { displayName: "Hover", className: "tabs__item--hover" },
+    selected: { displayName: "Selected", className: "tabs__item--selected" }
   }
 };
+const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
+  "menu-item-background",
+  "menu-item-box-shadow",
+  "menu-item-color",
+  "menu-item-text-decoration-line",
+  "menu-item-letter-spacing",
+  "menu-item-text-shadow",
+  "menu-item-text-align",
+  "menu-item-flex",
+  "menu-item-border-width-top",
+  "menu-item-border-width-bottom",
+  "menu-item-border-width-inline-start",
+  "menu-item-border-width-inline-end",
+  "menu-item-border-style-top",
+  "menu-item-border-style-bottom",
+  "menu-item-border-style-inline-start",
+  "menu-item-border-style-inline-end",
+  "menu-item-border-color-top",
+  "menu-item-border-color-bottom",
+  "menu-item-border-color-inline-start",
+  "menu-item-border-color-inline-end",
+  "menu-item-border-radius-start-start",
+  "menu-item-border-radius-start-end",
+  "menu-item-border-radius-end-start",
+  "menu-item-border-radius-end-end",
+  "menu-item-padding-top",
+  "menu-item-padding-bottom",
+  "menu-item-padding-inline-start",
+  "menu-item-padding-inline-end"
+];
+const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
-  COMPONENT_TYPE as C,
   DesignStates as D,
-  SEMANTIC_CLASS_NAMES as S,
-  TRANSITION_DURATION as T,
-  TestIds as a,
-  DisplayNames as b,
-  DEFAULT_ICON_POSITION as c
+  OVERFLOW_BEHAVIOR as O,
+  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
+  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
+  classes as c
 };