@wix/editor-react-components 1.2637.0 → 1.2639.0

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

@@ -0,0 +1,330 @@
+import { C as CSS_PROPERTIES, L as LAYOUT, b as DISPLAY_GROUPS, E as ELEMENTS, N as NativeStateType, D as DATA, A as Archetype } from "../chunks/chunk-ZHYIPFVN.js";
+import { g as getSelector } from "../chunks/manifest.js";
+import { a as DisplayNames, d as defaultValues, m as manifestClasses } from "../chunks/constants32.js";
+const LABEL_CSS_PROPERTIES = {
+  font: {
+    defaultValue: "var(--wst-paragraph-2-font)"
+  },
+  lineHeight: {},
+  letterSpacing: {
+    defaultValue: "0.04em"
+  },
+  textDecorationLine: {},
+  textTransform: {},
+  textAlign: {},
+  textShadow: {},
+  color: {
+    defaultValue: "#1e293b"
+  },
+  background: {
+    defaultValue: "#ffb6c1"
+  },
+  borderStartStartRadius: {
+    defaultValue: "0"
+  },
+  borderStartEndRadius: {
+    defaultValue: "20px"
+  },
+  borderEndStartRadius: {
+    defaultValue: "0"
+  },
+  borderEndEndRadius: {
+    defaultValue: "20px"
+  },
+  width: {
+    displayName: "Label Width",
+    defaultValue: "36px"
+  },
+  height: {
+    displayName: "Label Height",
+    defaultValue: "90px"
+  },
+  display: {
+    display: {
+      displayValues: [
+        CSS_PROPERTIES.DISPLAY_VALUE.none,
+        CSS_PROPERTIES.DISPLAY_VALUE.flex
+      ]
+    }
+  }
+};
+const manifest = {
+  id: "9cd0f834-3ca6-4a0d-9361-510cadb42471",
+  type: "wixEditorElements.ImageReveal",
+  description: "A before and after image comparison slider with a draggable divider",
+  editorElement: {
+    selector: getSelector(manifestClasses.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.Slider,
+    data: {
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.tabIndex,
+            DATA.A11Y_ATTRIBUTES.role,
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaLabelledby,
+            DATA.A11Y_ATTRIBUTES.ariaDescribedby,
+            DATA.A11Y_ATTRIBUTES.ariaHidden
+          ]
+        }
+      },
+      beforeImage: {
+        displayName: DisplayNames.root.data.beforeImage,
+        dataType: DATA.DATA_TYPE.image,
+        [DATA.DATA_TYPE.image]: {
+          category: "IMAGE"
+        }
+      },
+      afterImage: {
+        displayName: DisplayNames.root.data.afterImage,
+        dataType: DATA.DATA_TYPE.image,
+        [DATA.DATA_TYPE.image]: {
+          category: "IMAGE"
+        }
+      },
+      beforeLabel: {
+        displayName: DisplayNames.root.data.beforeLabel,
+        dataType: DATA.DATA_TYPE.text,
+        defaultValue: defaultValues.beforeLabel
+      },
+      afterLabel: {
+        displayName: DisplayNames.root.data.afterLabel,
+        dataType: DATA.DATA_TYPE.text,
+        defaultValue: defaultValues.afterLabel
+      },
+      labelPosition: {
+        displayName: DisplayNames.root.data.labelPosition.displayName,
+        dataType: DATA.DATA_TYPE.textEnum,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "horizontal",
+              displayName: DisplayNames.root.data.labelPosition.options.horizontal
+            },
+            {
+              value: "vertical",
+              displayName: DisplayNames.root.data.labelPosition.options.vertical
+            }
+          ]
+        },
+        defaultValue: defaultValues.labelPosition
+      }
+    },
+    elements: {
+      imageRevealDivider: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: getSelector(manifestClasses.divider),
+          displayName: DisplayNames.root.elements.divider,
+          behaviors: {
+            removable: true,
+            selectable: false
+          },
+          cssProperties: {
+            background: {
+              defaultValue: "rgba(255,255,255,0.85)"
+            },
+            width: {
+              displayName: "Line Width",
+              defaultValue: "2px"
+            },
+            display: {
+              display: {
+                displayValues: [
+                  CSS_PROPERTIES.DISPLAY_VALUE.none,
+                  CSS_PROPERTIES.DISPLAY_VALUE.block
+                ]
+              }
+            }
+          }
+        }
+      },
+      imageRevealBtn: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: getSelector(manifestClasses.btn),
+          displayName: DisplayNames.root.elements.btn,
+          behaviors: {
+            removable: true,
+            selectable: false
+          },
+          cssProperties: {
+            background: {
+              defaultValue: "rgba(255,255,255,1)"
+            },
+            border: {
+              defaultValue: "none"
+            },
+            padding: {
+              defaultValue: "9px"
+            },
+            borderRadius: {
+              defaultValue: "50%"
+            },
+            boxShadow: {
+              defaultValue: "0 4px 12px rgba(0,0,0,0.22)"
+            },
+            display: {
+              display: {
+                displayValues: [
+                  CSS_PROPERTIES.DISPLAY_VALUE.none,
+                  CSS_PROPERTIES.DISPLAY_VALUE.flex
+                ]
+              }
+            }
+          },
+          states: {
+            hover: {
+              displayName: "Hover",
+              className: "image-reveal-btn--hover",
+              pseudoClass: NativeStateType.hover
+            },
+            focus: {
+              displayName: "Focus",
+              className: "image-reveal-btn--focus",
+              pseudoClass: NativeStateType.focus
+            },
+            disabled: {
+              displayName: "Disabled",
+              className: "image-reveal-btn--disabled",
+              pseudoClass: NativeStateType.disabled,
+              props: { buttonsDisabled: true }
+            }
+          },
+          elements: {
+            imageRevealArrowIcon: {
+              elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+              inlineElement: {
+                selector: getSelector(manifestClasses.arrowIcon),
+                displayName: DisplayNames.root.elements.arrowIcon,
+                behaviors: {
+                  removable: true,
+                  selectable: false
+                },
+                cssProperties: {
+                  color: {
+                    displayName: "Icon Color",
+                    defaultValue: "#1e293b"
+                  },
+                  display: {
+                    display: {
+                      displayValues: [
+                        CSS_PROPERTIES.DISPLAY_VALUE.none,
+                        CSS_PROPERTIES.DISPLAY_VALUE.block
+                      ]
+                    }
+                  }
+                },
+                displayGroups: {
+                  iconGroup: {
+                    displayName: DisplayNames.root.displayGroups.iconGroup,
+                    groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+                    cssDataType: {
+                      items: ["icon-size"]
+                    }
+                  }
+                },
+                cssCustomProperties: {
+                  "icon-size": {
+                    displayName: "Icon Size",
+                    defaultValue: "18px",
+                    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.length
+                  }
+                }
+              }
+            }
+          },
+          cssCustomProperties: {
+            "arrow-spacing": {
+              displayName: "Spacing",
+              defaultValue: "3px",
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.length
+            }
+          }
+        }
+      },
+      imageRevealLabelBefore: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: getSelector(manifestClasses.labelBefore),
+          displayName: DisplayNames.root.elements.labelBefore,
+          behaviors: {
+            removable: true,
+            selectable: false
+          },
+          cssProperties: LABEL_CSS_PROPERTIES
+        }
+      },
+      imageRevealLabelAfter: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: getSelector(manifestClasses.labelAfter),
+          displayName: DisplayNames.root.elements.labelAfter,
+          behaviors: {
+            removable: true,
+            selectable: false
+          },
+          cssProperties: LABEL_CSS_PROPERTIES
+        }
+      }
+    },
+    displayGroups: {
+      partsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+        elements: {
+          items: [
+            "imageRevealDivider",
+            "imageRevealBtn",
+            "imageRevealLabelBefore",
+            "imageRevealLabelAfter"
+          ]
+        }
+      },
+      textFieldsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["beforeLabel", "afterLabel"]
+        }
+      }
+    },
+    cssProperties: {
+      border: { defaultValue: "none" },
+      borderRadius: {
+        defaultValue: "12px"
+      },
+      boxShadow: {}
+    },
+    cssCustomProperties: {},
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical
+    }
+  },
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 500
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 350
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/ImageReveal/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/ImageReveal"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/ImageReveal" }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -0,0 +1,27 @@
+import { A11y, Direction, Image } from '@wix/editor-react-types';
+type InlineElementProps = {
+    className?: string;
+};
+export type ImageRevealProps = {
+    id: string;
+    className?: string;
+    direction?: Direction;
+    a11y?: A11y;
+    beforeImage?: Image;
+    afterImage?: Image;
+    beforeLabel?: string;
+    afterLabel?: string;
+    labelPosition?: 'horizontal' | 'vertical';
+    buttonsDisabled?: boolean;
+    elementProps?: {
+        imageRevealDivider?: InlineElementProps;
+        imageRevealBtn?: InlineElementProps;
+        imageRevealArrowIcon?: InlineElementProps;
+        imageRevealLabelBefore?: InlineElementProps;
+        imageRevealLabelAfter?: InlineElementProps;
+    };
+    wix?: {
+        presetsWrapperProps?: Record<string, unknown>;
+    };
+};
+export {};

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

@@ -1,33 +1,58 @@
-const HIPAA_SETTINGS_PANEL_ID = "e4a7c1d3-8f2b-4e6a-9d5c-3b1f7a2e8c4d";
+const manifestClasses = {
+  root: "image-reveal",
+  divider: "image-reveal-divider",
+  btn: "image-reveal-btn",
+  arrowIcon: "image-reveal-arrow-icon",
+  labelBefore: "image-reveal-label-before",
+  labelAfter: "image-reveal-label-after"
+};
+const defaultValues = {
+  beforeLabel: "Before",
+  afterLabel: "After",
+  labelPosition: "horizontal"
+};
 const DisplayNames = {
   root: {
-    elementDisplayName: "HIPAA Certification",
-    customActions: {
-      hipaaSettings: "HIPAA Settings"
+    elementDisplayName: "Image Reveal",
+    data: {
+      beforeImage: "Before Image",
+      afterImage: "After Image",
+      beforeLabel: "Before Label",
+      afterLabel: "After Label",
+      labelPosition: {
+        displayName: "Label Position",
+        options: {
+          horizontal: "Horizontal",
+          vertical: "Vertical"
+        }
+      }
     },
-    cssProperties: {
-      color: "Icon Color",
-      backgroundColor: "Background Color"
+    elements: {
+      divider: "Divider",
+      btn: "Buttons",
+      arrowIcon: "Arrow",
+      labelBefore: "Before Label",
+      labelAfter: "After Label"
+    },
+    displayGroups: {
+      iconGroup: "Icon"
     }
   }
 };
-const TRANSLATIONS_NAMESPACE = "ariaLabels";
-const TranslationKeys = {
-  ariaLabelCompliant: "hipaaIcon_aria_label_compliant",
-  ariaLabelActivate: "hipaaIcon_aria_label_activate",
-  activateHeading: "hipaaIcon_activate_heading",
-  activateDescription: "hipaaIcon_activate_description"
-};
-const DefaultTranslations = {
-  ariaLabelCompliant: "HIPAA Compliant",
-  ariaLabelActivate: "HIPAA Certification",
-  activateHeading: "Activate HIPAA",
-  activateDescription: "Go to Manage > Purchase & Activate HIPAA Compliance"
+const CHEVRON_PATH = "M15.5 4.5 8 12l7.5 7.5";
+const DEFAULT_SLIDER_POSITION = 50;
+const SLIDER_STEP = 10;
+const ARIA_LABELS = {
+  prevButton: "Move slider left",
+  nextButton: "Move slider right",
+  handle: "Drag to compare before and after"
 };
 export {
-  DefaultTranslations as D,
-  HIPAA_SETTINGS_PANEL_ID as H,
-  TranslationKeys as T,
-  TRANSLATIONS_NAMESPACE as a,
-  DisplayNames as b
+  ARIA_LABELS as A,
+  CHEVRON_PATH as C,
+  DEFAULT_SLIDER_POSITION as D,
+  SLIDER_STEP as S,
+  DisplayNames as a,
+  defaultValues as d,
+  manifestClasses as m
 };

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

@@ -1,64 +1,33 @@
-const presets = {
-  horizontal: "horizontal",
-  vertical: "vertical"
-};
-const manifestClasses = {
-  root: "heading-text-block",
-  heading: "heading-text-block-heading",
-  title: "heading-text-block-title",
-  subtitle: "heading-text-block-subtitle",
-  caption: "heading-text-block-caption"
-};
-const defaultValues = {
-  headingTag: "h1",
-  heading: "",
-  title: "",
-  subtitle: "",
-  caption: "",
-  partsRowGap: "12px",
-  partsColumnGap: "12px"
-};
+const HIPAA_SETTINGS_PANEL_ID = "e4a7c1d3-8f2b-4e6a-9d5c-3b1f7a2e8c4d";
 const DisplayNames = {
   root: {
-    elementDisplayName: "Heading Text Block",
-    data: {
-      headingTag: {
-        displayName: "Heading Tag",
-        options: {
-          h1: "H1",
-          h2: "H2",
-          h3: "H3",
-          h4: "H4",
-          h5: "H5",
-          h6: "H6"
-        }
-      },
-      heading: "Heading",
-      title: "Title",
-      subtitle: "Subtitle",
-      caption: "Caption"
-    },
-    elements: {
-      heading: "Heading",
-      title: "Title",
-      subtitle: "Subtitle",
-      caption: "Caption"
-    },
-    displayGroups: {
-      partsSpacing: "Parts Spacing"
-    },
-    presets: {
-      horizontal: "Row",
-      vertical: "Stacked"
-    },
+    elementDisplayName: "HIPAA Certification",
     customActions: {
-      layout: "Layout"
+      hipaaSettings: "HIPAA Settings"
+    },
+    cssProperties: {
+      color: "Icon Color",
+      backgroundColor: "Background Color"
     }
   }
 };
+const TRANSLATIONS_NAMESPACE = "ariaLabels";
+const TranslationKeys = {
+  ariaLabelCompliant: "hipaaIcon_aria_label_compliant",
+  ariaLabelActivate: "hipaaIcon_aria_label_activate",
+  activateHeading: "hipaaIcon_activate_heading",
+  activateDescription: "hipaaIcon_activate_description"
+};
+const DefaultTranslations = {
+  ariaLabelCompliant: "HIPAA Compliant",
+  ariaLabelActivate: "HIPAA Certification",
+  activateHeading: "Activate HIPAA",
+  activateDescription: "Go to Manage > Purchase & Activate HIPAA Compliance"
+};
 export {
-  DisplayNames as D,
-  defaultValues as d,
-  manifestClasses as m,
-  presets as p
+  DefaultTranslations as D,
+  HIPAA_SETTINGS_PANEL_ID as H,
+  TranslationKeys as T,
+  TRANSLATIONS_NAMESPACE as a,
+  DisplayNames as b
 };

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

@@ -1,15 +1,64 @@
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const presets = {
+  horizontal: "horizontal",
+  vertical: "vertical"
+};
+const manifestClasses = {
+  root: "heading-text-block",
+  heading: "heading-text-block-heading",
+  title: "heading-text-block-title",
+  subtitle: "heading-text-block-subtitle",
+  caption: "heading-text-block-caption"
+};
+const defaultValues = {
+  headingTag: "h1",
+  heading: "",
+  title: "",
+  subtitle: "",
+  caption: "",
+  partsRowGap: "12px",
+  partsColumnGap: "12px"
+};
 const DisplayNames = {
-  data: {
-    onClick: "On Click",
-    onDblClick: "On Double Click",
-    onMouseIn: "On Mouse In",
-    onMouseOut: "On Mouse Out",
-    onFocus: "On Focus",
-    onBlur: "On Blur"
+  root: {
+    elementDisplayName: "Heading Text Block",
+    data: {
+      headingTag: {
+        displayName: "Heading Tag",
+        options: {
+          h1: "H1",
+          h2: "H2",
+          h3: "H3",
+          h4: "H4",
+          h5: "H5",
+          h6: "H6"
+        }
+      },
+      heading: "Heading",
+      title: "Title",
+      subtitle: "Subtitle",
+      caption: "Caption"
+    },
+    elements: {
+      heading: "Heading",
+      title: "Title",
+      subtitle: "Subtitle",
+      caption: "Caption"
+    },
+    displayGroups: {
+      partsSpacing: "Parts Spacing"
+    },
+    presets: {
+      horizontal: "Row",
+      vertical: "Stacked"
+    },
+    customActions: {
+      layout: "Layout"
+    }
   }
 };
 export {
-  ARIA_LABEL_NAMESPACE as A,
-  DisplayNames as D
+  DisplayNames as D,
+  defaultValues as d,
+  manifestClasses as m,
+  presets as p
 };