@elementor/editor-components 3.33.0-299 → 3.33.0-300

package/dist/index.js

@@ -37,12 +37,13 @@ module.exports = __toCommonJS(index_exports);
 // src/init.ts
 var import_editor = require("@elementor/editor");
 var import_editor_canvas6 = require("@elementor/editor-canvas");
-var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_elements_panel = require("@elementor/editor-elements-panel");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
-var import_i18n8 = require("@wordpress/i18n");
+var import_store22 = require("@elementor/store");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/component-instance-transformer.ts
 var import_editor_canvas = require("@elementor/editor-canvas");
@@ -155,6 +156,7 @@ var selectLoadStatus = (state) => state[SLICE_NAME].loadStatus;
 var selectStylesDefinitions = (state) => state[SLICE_NAME].styles ?? {};
 var selectUnpublishedData = (state) => state[SLICE_NAME].unpublishedData;
 var getCreatedThisSession = (state) => state[SLICE_NAME].createdThisSession;
+var selectComponent = (state, componentId) => state[SLICE_NAME].data.find((component) => component.id === componentId);
 var selectComponents = (0, import_store2.__createSelector)(
   selectData,
   selectUnpublishedData,
@@ -175,6 +177,10 @@ var selectCreatedThisSession = (0, import_store2.__createSelector)(
   getCreatedThisSession,
   (createdThisSession) => createdThisSession
 );
+var selectOverridableProps = (0, import_store2.__createSelector)(
+  selectComponent,
+  (component) => component?.overridableProps
+);
 
 // src/utils/component-document-data.ts
 var getComponentDocumentData = async (id) => {
@@ -1220,11 +1226,170 @@ var EditModeDialog = ({ lockedBy }) => {
   )), /* @__PURE__ */ React10.createElement(import_ui6.DialogActions, null, /* @__PURE__ */ React10.createElement(import_ui6.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui3.closeDialog }, (0, import_i18n6.__)("Close", "elementor"))))));
 };
 
+// src/components/overridable-props/overridable-prop-indicator.tsx
+var React12 = __toESM(require("react"));
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_store13 = require("@elementor/store");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+
+// src/prop-types/component-overridable-prop-type.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_schema2 = require("@elementor/schema");
+var componentOverridablePropTypeUtil = (0, import_editor_props.createPropUtils)(
+  "overridable",
+  import_schema2.z.object({
+    override_key: import_schema2.z.string(),
+    default_value: import_schema2.z.object({
+      $$type: import_schema2.z.string(),
+      value: import_schema2.z.unknown()
+    }).nullable()
+  })
+);
+
+// src/components/overridable-props/indicator.tsx
+var React11 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_icons6 = require("@elementor/icons");
+var import_ui7 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+var SIZE = "tiny";
+var IconContainer = (0, import_ui7.styled)(import_ui7.Box)`
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.2s ease-in-out;
+
+	& > svg {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% );
+		width: 10px;
+		height: 10px;
+		fill: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke: ${({ theme }) => theme.palette.primary.contrastText};
+		stroke-width: 2px;
+	}
+`;
+var Content = (0, import_ui7.styled)(import_ui7.Box)`
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	width: 16px;
+	height: 16px;
+	margin-inline: ${({ theme }) => theme.spacing(0.5)};
+
+	&:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate( -50%, -50% ) rotate( 45deg );
+		width: 5px;
+		height: 5px;
+		border-radius: 1px;
+		background-color: ${({ theme }) => theme.palette.primary.main};
+		transition: all 0.1s ease-in-out;
+	}
+
+	&:hover,
+	&.enlarged {
+		&:before {
+			width: 12px;
+			height: 12px;
+			border-radius: 2px;
+		}
+
+		.icon {
+			opacity: 1;
+		}
+	}
+`;
+var Indicator = (0, import_react7.forwardRef)(({ triggerProps, isOpen, isOverridable }, ref) => /* @__PURE__ */ React11.createElement(Content, { ref, ...triggerProps, className: isOpen || isOverridable ? "enlarged" : "" }, /* @__PURE__ */ React11.createElement(
+  IconContainer,
+  {
+    className: "icon",
+    "aria-label": isOverridable ? (0, import_i18n7.__)("Overridable property", "elementor") : (0, import_i18n7.__)("Make prop overridable", "elementor")
+  },
+  isOverridable ? /* @__PURE__ */ React11.createElement(import_icons6.CheckIcon, { fontSize: SIZE }) : /* @__PURE__ */ React11.createElement(import_icons6.PlusIcon, { fontSize: SIZE })
+)));
+
+// src/components/overridable-props/overridable-prop-indicator.tsx
+var FORBIDDEN_KEYS = ["_cssid", "attributes"];
+function OverridablePropIndicator() {
+  const { bind, value } = (0, import_editor_controls.useBoundProp)();
+  const currentDocument = (0, import_editor_documents2.getV1CurrentDocument)();
+  if (currentDocument.config.type !== COMPONENT_DOCUMENT_TYPE || !currentDocument.id) {
+    return null;
+  }
+  if (!isPropAllowed(bind)) {
+    return null;
+  }
+  const overridableProps = selectOverridableProps((0, import_store13.__getState)(), currentDocument.id);
+  const isOverridable = componentOverridablePropTypeUtil.isValid(value);
+  return /* @__PURE__ */ React12.createElement(
+    Content2,
+    {
+      componentId: currentDocument.id,
+      isOverridable,
+      overridableProps
+    }
+  );
+}
+function Content2({ isOverridable, overridableProps }) {
+  const {
+    element: { id: elementId }
+  } = (0, import_editor_editing_panel.useElement)();
+  const { bind } = (0, import_editor_controls.useBoundProp)();
+  const popupState = (0, import_ui8.usePopupState)({
+    variant: "popover"
+  });
+  const triggerProps = (0, import_ui8.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui8.bindPopover)(popupState);
+  const overridableConfig = Object.values(overridableProps?.props ?? {}).find(
+    (prop) => prop.elementId === elementId && prop.propKey === bind
+  );
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(import_ui8.Tooltip, { placement: "top", title: (0, import_i18n8.__)("Override Property", "elementor") }, /* @__PURE__ */ React12.createElement(
+    Indicator,
+    {
+      triggerProps,
+      isOpen: !!popoverProps.open,
+      isOverridable
+    }
+  )), /* @__PURE__ */ React12.createElement(
+    import_ui8.Popover,
+    {
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { my: 2.5 }
+      },
+      ...popoverProps
+    },
+    JSON.stringify(overridableConfig)
+  ));
+}
+function isPropAllowed(bind) {
+  return !FORBIDDEN_KEYS.includes(bind);
+}
+
 // src/create-component-type.ts
 var import_editor_canvas5 = require("@elementor/editor-canvas");
-var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_i18n7 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 var TYPE = "e-component";
 function createComponentType(options) {
   const legacyWindow = window;
@@ -1242,7 +1407,7 @@ function createComponentView(options) {
     legacyWindow = window;
     eventsManagerConfig = this.legacyWindow.elementorCommon.eventsManager.config;
     isComponentCurrentlyEdited() {
-      const currentDocument = (0, import_editor_documents2.getCurrentDocument)();
+      const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
       return currentDocument?.id === this.getComponentId();
     }
     afterSettingsResolve(settings) {
@@ -1283,7 +1448,7 @@ function createComponentView(options) {
             {
               name: "edit component",
               icon: "eicon-edit",
-              title: () => (0, import_i18n7.__)("Edit Component", "elementor"),
+              title: () => (0, import_i18n9.__)("Edit Component", "elementor"),
               isEnabled: () => true,
               callback: (_, eventData) => this.editComponent(eventData)
             }
@@ -1359,22 +1524,22 @@ function setInactiveRecursively(model) {
 }
 
 // src/populate-store.ts
-var import_react7 = require("react");
-var import_store13 = require("@elementor/store");
+var import_react8 = require("react");
+var import_store15 = require("@elementor/store");
 function PopulateStore() {
-  (0, import_react7.useEffect)(() => {
-    (0, import_store13.__dispatch)(loadComponents());
+  (0, import_react8.useEffect)(() => {
+    (0, import_store15.__dispatch)(loadComponents());
   }, []);
   return null;
 }
 
 // src/store/components-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_store14 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 var componentsStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
   key: "components-styles",
   priority: 100,
-  subscribe: (cb) => (0, import_store14.__subscribeWithSelector)(
+  subscribe: (cb) => (0, import_store16.__subscribeWithSelector)(
     (state) => state[SLICE_NAME],
     () => {
       cb();
@@ -1382,29 +1547,29 @@ var componentsStylesProvider = (0, import_editor_styles_repository.createStylesP
   ),
   actions: {
     all: () => {
-      return selectFlatStyles((0, import_store14.__getState)());
+      return selectFlatStyles((0, import_store16.__getState)());
     },
     get: (id) => {
-      return selectFlatStyles((0, import_store14.__getState)()).find((style) => style.id === id) ?? null;
+      return selectFlatStyles((0, import_store16.__getState)()).find((style) => style.id === id) ?? null;
     }
   }
 });
 
 // src/store/remove-component-styles.ts
-var import_store16 = require("@elementor/store");
+var import_store18 = require("@elementor/store");
 function removeComponentStyles(id) {
   apiClient.invalidateComponentConfigCache(id);
-  (0, import_store16.__dispatch)(slice.actions.removeStyles({ id }));
+  (0, import_store18.__dispatch)(slice.actions.removeStyles({ id }));
 }
 
 // src/sync/create-components-before-save.ts
 var import_editor_elements5 = require("@elementor/editor-elements");
-var import_store18 = require("@elementor/store");
+var import_store20 = require("@elementor/store");
 async function createComponentsBeforeSave({
   container,
   status
 }) {
-  const unpublishedComponents = selectUnpublishedComponents((0, import_store18.__getState)());
+  const unpublishedComponents = selectUnpublishedComponents((0, import_store20.__getState)());
   if (!unpublishedComponents.length) {
     return;
   }
@@ -1412,7 +1577,7 @@ async function createComponentsBeforeSave({
     const uidToComponentId = await createComponents(unpublishedComponents, status);
     const elements = container.model.get("elements").toJSON();
     updateComponentInstances(elements, uidToComponentId);
-    (0, import_store18.__dispatch)(
+    (0, import_store20.__dispatch)(
       slice.actions.add(
         unpublishedComponents.map((component) => ({
           id: uidToComponentId.get(component.uid),
@@ -1421,7 +1586,7 @@ async function createComponentsBeforeSave({
         }))
       )
     );
-    (0, import_store18.__dispatch)(slice.actions.resetUnpublished());
+    (0, import_store20.__dispatch)(slice.actions.resetUnpublished());
   } catch (error) {
     throw new Error(`Failed to publish components and update component instances: ${error}`);
   }
@@ -1507,13 +1672,13 @@ var beforeSave = ({ container, status }) => {
 var COMPONENT_DOCUMENT_TYPE2 = "elementor_component";
 function init() {
   import_editor_styles_repository2.stylesRepository.register(componentsStylesProvider);
-  (0, import_store20.__registerSlice)(slice);
+  (0, import_store22.__registerSlice)(slice);
   (0, import_editor_canvas6.registerElementType)(
     TYPE,
     (options) => createComponentType({ ...options, showLockedByModal: openEditModeDialog })
   );
   (0, import_editor_v1_adapters6.registerDataHook)("dependency", "editor/documents/close", (args) => {
-    const document = (0, import_editor_documents3.getV1CurrentDocument)();
+    const document = (0, import_editor_documents4.getV1CurrentDocument)();
     if (document.config.type === COMPONENT_DOCUMENT_TYPE2) {
       args.mode = "autosave";
     }
@@ -1523,7 +1688,7 @@ function init() {
   window.elementorCommon.__beforeSave = beforeSave;
   (0, import_editor_elements_panel.injectTab)({
     id: "components",
-    label: (0, import_i18n8.__)("Components", "elementor"),
+    label: (0, import_i18n10.__)("Components", "elementor"),
     component: Components
   });
   (0, import_editor.injectIntoTop)({
@@ -1539,12 +1704,18 @@ function init() {
     component: EditComponent
   });
   (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.commandStartEvent)("editor/documents/attach-preview"), () => {
-    const { id, config } = (0, import_editor_documents3.getV1CurrentDocument)();
+    const { id, config } = (0, import_editor_documents4.getV1CurrentDocument)();
     if (id) {
       removeComponentStyles(id);
     }
     loadComponentsStyles(config?.elements ?? []);
   });
+  (0, import_editor_editing_panel2.registerFieldIndicator)({
+    fieldType: import_editor_editing_panel2.FIELD_TYPE.SETTINGS,
+    id: "component-overridable-prop",
+    priority: 1,
+    indicator: OverridablePropIndicator
+  });
   import_editor_canvas6.settingsTransformersRegistry.register("component-instance", componentInstanceTransformer);
   import_editor_canvas6.settingsTransformersRegistry.register("overridable", componentOverridableTransformer);
 }