@elementor/editor-controls 4.3.0-1058 → 4.3.0-1060

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -5315,11 +5315,21 @@ var AspectRatioControl = createControl(({ label }) => {
5315
5315
 
5316
5316
  // src/controls/svg-media-control.tsx
5317
5317
  import * as React81 from "react";
5318
- import { useState as useState16 } from "react";
5318
+ import { useEffect as useEffect16, useState as useState16 } from "react";
5319
5319
  import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
5320
- import { svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
5320
+ import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
5321
5321
  import { UploadIcon as UploadIcon2 } from "@elementor/icons";
5322
- import { Button as Button5, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled9, ThemeProvider } from "@elementor/ui";
5322
+ import {
5323
+ Box as Box15,
5324
+ Button as Button5,
5325
+ Card as Card2,
5326
+ CardMedia as CardMedia2,
5327
+ CardOverlay as CardOverlay2,
5328
+ CircularProgress as CircularProgress3,
5329
+ Stack as Stack13,
5330
+ styled as styled9,
5331
+ ThemeProvider
5332
+ } from "@elementor/ui";
5323
5333
  import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
5324
5334
  import { __ as __32 } from "@wordpress/i18n";
5325
5335
 
@@ -5383,10 +5393,49 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
5383
5393
  isPending ? /* @__PURE__ */ React80.createElement(CircularProgress2, { size: 24 }) : __31("Enable", "elementor")
5384
5394
  )));
5385
5395
 
5396
+ // src/controls/open-icon-library.ts
5397
+ import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
5398
+ var SVG_ICON_LIBRARY = "svg";
5399
+ function isSvgLibrarySelection(icon) {
5400
+ return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
5401
+ }
5402
+ function openIconLibrary({ selected, onSelect } = {}) {
5403
+ const iconManager = window.elementor?.iconManager;
5404
+ if (!iconManager) {
5405
+ return;
5406
+ }
5407
+ iconManager.loadIconLibraries();
5408
+ iconManager.show({
5409
+ view: createIconManagerControlView(selected, onSelect)
5410
+ });
5411
+ }
5412
+ function enqueueIconFonts(library) {
5413
+ window.elementor?.helpers?.enqueueIconFonts?.(library);
5414
+ }
5415
+ function createIconManagerControlView(selected, onSelect) {
5416
+ return {
5417
+ model: {
5418
+ get: () => false
5419
+ },
5420
+ getControlValue: () => selected ?? { value: "", library: "" },
5421
+ setValue: (icon) => {
5422
+ onSelect?.(icon);
5423
+ },
5424
+ applySavedValue: () => void 0
5425
+ };
5426
+ }
5427
+ function createIconPropValue(icon, library) {
5428
+ return {
5429
+ value: stringPropTypeUtil14.create(icon),
5430
+ library: stringPropTypeUtil14.create(library)
5431
+ };
5432
+ }
5433
+
5386
5434
  // src/controls/svg-media-control.tsx
5387
5435
  var TILE_SIZE = 8;
5388
5436
  var TILE_WHITE = "transparent";
5389
5437
  var TILE_BLACK = "#c1c1c1";
5438
+ var ICON_PREVIEW_FONT_SIZE = 50;
5390
5439
  var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
5391
5440
  var StyledCard = styled9(Card2)`
5392
5441
  background-color: white;
@@ -5408,21 +5457,24 @@ var StyledCardMediaContainer = styled9(Stack13)`
5408
5457
  `;
5409
5458
  var MODE_BROWSE = { mode: "browse" };
5410
5459
  var MODE_UPLOAD = { mode: "upload" };
5411
- var SvgMediaControl = createControl(() => {
5412
- const { value, setValue } = useBoundProp(svgSrcPropTypeUtil);
5413
- const id = value?.id;
5414
- const url = value?.url;
5460
+ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
5461
+ const { value: svgValue, setValue: setSvgValue } = useBoundProp(svgSrcPropTypeUtil);
5462
+ const { value: iconValue, setValue: setIconValue } = useBoundProp(iconPropTypeUtil);
5463
+ const id = svgValue?.id;
5464
+ const url = svgValue?.url;
5415
5465
  const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
5416
5466
  const src = attachment?.url ?? url?.value ?? null;
5417
5467
  const { data: allowSvgUpload } = useUnfilteredFilesUpload();
5418
5468
  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState16(false);
5419
5469
  const { isAdmin } = useCurrentUserCapabilities();
5470
+ const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
5471
+ const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
5420
5472
  const { open } = useWpMediaFrame2({
5421
5473
  mediaTypes: ["svg"],
5422
5474
  multiple: false,
5423
5475
  selected: id?.value || null,
5424
5476
  onSelect: (selectedAttachment) => {
5425
- setValue({
5477
+ setSvgValue({
5426
5478
  id: {
5427
5479
  $$type: "image-attachment-id",
5428
5480
  value: selectedAttachment.id
@@ -5444,18 +5496,36 @@ var SvgMediaControl = createControl(() => {
5444
5496
  open(openOptions);
5445
5497
  }
5446
5498
  };
5499
+ const handleIconLibrarySelect = (icon) => {
5500
+ if (!showIconLibrary) {
5501
+ return;
5502
+ }
5503
+ if (isSvgLibrarySelection(icon)) {
5504
+ setSvgValue({
5505
+ id: icon.value.id ? {
5506
+ $$type: "image-attachment-id",
5507
+ value: icon.value.id
5508
+ } : null,
5509
+ url: icon.value.url ? urlPropTypeUtil4.create(icon.value.url) : null
5510
+ });
5511
+ return;
5512
+ }
5513
+ if (typeof icon.value === "string") {
5514
+ setIconValue(createIconPropValue(icon.value, icon.library));
5515
+ }
5516
+ };
5447
5517
  const infotipProps = {
5448
5518
  title: __32("Sorry, you can't upload that file yet.", "elementor"),
5449
5519
  description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, __32("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), __32("file uploads.", "elementor")),
5450
5520
  isEnabled: !isAdmin
5451
5521
  };
5452
- return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React81.createElement(
5453
- CardMedia2,
5522
+ return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React81.createElement(
5523
+ SvgMediaPreview,
5454
5524
  {
5455
- component: "img",
5456
- image: src,
5457
- alt: __32("Preview SVG", "elementor"),
5458
- sx: { maxHeight: "140px", width: "50px" }
5525
+ isFetching,
5526
+ src,
5527
+ iconClassName: selectedIconClass,
5528
+ iconLibrary: selectedIconLibrary
5459
5529
  }
5460
5530
  )), /* @__PURE__ */ React81.createElement(
5461
5531
  CardOverlay2,
@@ -5476,7 +5546,20 @@ var SvgMediaControl = createControl(() => {
5476
5546
  "aria-label": "Select SVG"
5477
5547
  },
5478
5548
  __32("Select SVG", "elementor")
5479
- ), /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
5549
+ ), showIconLibrary ? /* @__PURE__ */ React81.createElement(
5550
+ Button5,
5551
+ {
5552
+ size: "tiny",
5553
+ variant: "text",
5554
+ color: "inherit",
5555
+ onClick: () => openIconLibrary({
5556
+ selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
5557
+ onSelect: handleIconLibrarySelect
5558
+ }),
5559
+ "aria-label": __32("Icon library", "elementor")
5560
+ },
5561
+ __32("Icon library", "elementor")
5562
+ ) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
5480
5563
  Button5,
5481
5564
  {
5482
5565
  size: "tiny",
@@ -5491,6 +5574,41 @@ var SvgMediaControl = createControl(() => {
5491
5574
  )))))
5492
5575
  ))));
5493
5576
  });
5577
+ function SvgMediaPreview({
5578
+ isFetching,
5579
+ src,
5580
+ iconClassName,
5581
+ iconLibrary
5582
+ }) {
5583
+ useEffect16(() => {
5584
+ if (iconLibrary) {
5585
+ enqueueIconFonts(iconLibrary);
5586
+ }
5587
+ }, [iconLibrary]);
5588
+ if (isFetching) {
5589
+ return /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" });
5590
+ }
5591
+ if (iconClassName) {
5592
+ return /* @__PURE__ */ React81.createElement(
5593
+ Box15,
5594
+ {
5595
+ component: "i",
5596
+ className: iconClassName,
5597
+ "aria-label": __32("Preview icon", "elementor"),
5598
+ sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
5599
+ }
5600
+ );
5601
+ }
5602
+ return /* @__PURE__ */ React81.createElement(
5603
+ CardMedia2,
5604
+ {
5605
+ component: "img",
5606
+ image: src,
5607
+ alt: __32("Preview SVG", "elementor"),
5608
+ sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
5609
+ }
5610
+ );
5611
+ }
5494
5612
 
5495
5613
  // src/controls/video-media-control.tsx
5496
5614
  import * as React82 from "react";
@@ -5612,7 +5730,7 @@ import {
5612
5730
  backgroundOverlayPropTypeUtil,
5613
5731
  colorPropTypeUtil as colorPropTypeUtil3
5614
5732
  } from "@elementor/editor-props";
5615
- import { Box as Box15, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
5733
+ import { Box as Box16, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
5616
5734
  import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
5617
5735
  import { __ as __38 } from "@wordpress/i18n";
5618
5736
 
@@ -5628,7 +5746,7 @@ import {
5628
5746
  colorStopPropTypeUtil,
5629
5747
  gradientColorStopPropTypeUtil,
5630
5748
  numberPropTypeUtil as numberPropTypeUtil5,
5631
- stringPropTypeUtil as stringPropTypeUtil14
5749
+ stringPropTypeUtil as stringPropTypeUtil15
5632
5750
  } from "@elementor/editor-props";
5633
5751
  import { UnstableGradientBox } from "@elementor/ui";
5634
5752
  var BackgroundGradientColorControl = createControl(() => {
@@ -5636,13 +5754,13 @@ var BackgroundGradientColorControl = createControl(() => {
5636
5754
  const handleChange = (newValue) => {
5637
5755
  const transformedValue = createTransformableValue(newValue);
5638
5756
  if (transformedValue.positions) {
5639
- transformedValue.positions = stringPropTypeUtil14.create(newValue.positions.join(" "));
5757
+ transformedValue.positions = stringPropTypeUtil15.create(newValue.positions.join(" "));
5640
5758
  }
5641
5759
  setValue(transformedValue);
5642
5760
  };
5643
5761
  const createTransformableValue = (newValue) => ({
5644
5762
  ...newValue,
5645
- type: stringPropTypeUtil14.create(newValue.type),
5763
+ type: stringPropTypeUtil15.create(newValue.type),
5646
5764
  angle: numberPropTypeUtil5.create(newValue.angle),
5647
5765
  stops: gradientColorStopPropTypeUtil.create(
5648
5766
  newValue.stops.map(
@@ -5678,7 +5796,7 @@ var BackgroundGradientColorControl = createControl(() => {
5678
5796
  );
5679
5797
  });
5680
5798
  var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.create({
5681
- type: stringPropTypeUtil14.create("linear"),
5799
+ type: stringPropTypeUtil15.create("linear"),
5682
5800
  angle: numberPropTypeUtil5.create(180),
5683
5801
  stops: gradientColorStopPropTypeUtil.create([
5684
5802
  colorStopPropTypeUtil.create({
@@ -5718,7 +5836,7 @@ var BackgroundImageOverlayAttachment = () => {
5718
5836
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
5719
5837
  import * as React85 from "react";
5720
5838
  import { useRef as useRef15 } from "react";
5721
- import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil15 } from "@elementor/editor-props";
5839
+ import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
5722
5840
  import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
5723
5841
  import { LetterXIcon, LetterYIcon } from "@elementor/icons";
5724
5842
  import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
@@ -5737,7 +5855,7 @@ var backgroundPositionOptions = [
5737
5855
  ];
5738
5856
  var BackgroundImageOverlayPosition = () => {
5739
5857
  const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
5740
- const stringPropContext = useBoundProp(stringPropTypeUtil15);
5858
+ const stringPropContext = useBoundProp(stringPropTypeUtil16);
5741
5859
  const isCustom = !!backgroundImageOffsetContext.value;
5742
5860
  const rowRef = useRef15(null);
5743
5861
  const handlePositionChange = (event) => {
@@ -5813,7 +5931,7 @@ var BackgroundImageOverlayRepeat = () => {
5813
5931
  // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
5814
5932
  import * as React87 from "react";
5815
5933
  import { useRef as useRef16 } from "react";
5816
- import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
5934
+ import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
5817
5935
  import {
5818
5936
  ArrowBarBothIcon,
5819
5937
  ArrowsMaximizeIcon,
@@ -5852,7 +5970,7 @@ var sizeControlOptions = [
5852
5970
  ];
5853
5971
  var BackgroundImageOverlaySize = () => {
5854
5972
  const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
5855
- const stringPropContext = useBoundProp(stringPropTypeUtil16);
5973
+ const stringPropContext = useBoundProp(stringPropTypeUtil17);
5856
5974
  const isCustom = !!backgroundImageScaleContext.value;
5857
5975
  const rowRef = useRef16(null);
5858
5976
  const handleSizeChange = (size) => {
@@ -6014,7 +6132,7 @@ var ItemContent2 = () => {
6014
6132
  gradient: initialBackgroundGradientOverlay.value
6015
6133
  });
6016
6134
  const { rowRef } = useRepeaterContext();
6017
- return /* @__PURE__ */ React88.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
6135
+ return /* @__PURE__ */ React88.createElement(Box16, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box16, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
6018
6136
  Tabs,
6019
6137
  {
6020
6138
  size: "small",
@@ -6163,7 +6281,7 @@ var BackgroundClipField = () => {
6163
6281
  import * as React90 from "react";
6164
6282
  import { useMemo as useMemo12 } from "react";
6165
6283
  import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
6166
- import { Box as Box16 } from "@elementor/ui";
6284
+ import { Box as Box17 } from "@elementor/ui";
6167
6285
  var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
6168
6286
  var RepeatableControl = createControl(
6169
6287
  ({
@@ -6309,7 +6427,7 @@ var ItemLabel4 = ({ value }) => {
6309
6427
  const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
6310
6428
  const isReadOnly = !!childProps?.readOnly;
6311
6429
  const color = getTextColor(isReadOnly, showPlaceholder);
6312
- return /* @__PURE__ */ React90.createElement(Box16, { component: "span", color }, label);
6430
+ return /* @__PURE__ */ React90.createElement(Box17, { component: "span", color }, label);
6313
6431
  };
6314
6432
  var getAllProperties = (pattern) => {
6315
6433
  const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -6322,7 +6440,7 @@ import { useMemo as useMemo13, useState as useState17 } from "react";
6322
6440
  import {
6323
6441
  isTransformable,
6324
6442
  keyValuePropTypeUtil,
6325
- stringPropTypeUtil as stringPropTypeUtil17
6443
+ stringPropTypeUtil as stringPropTypeUtil18
6326
6444
  } from "@elementor/editor-props";
6327
6445
  import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
6328
6446
  import { __ as __40 } from "@wordpress/i18n";
@@ -6394,7 +6512,7 @@ var KeyValueControl = createControl((props = {}) => {
6394
6512
  });
6395
6513
  return;
6396
6514
  }
6397
- const extractedValue = stringPropTypeUtil17.extract(newChangedValue);
6515
+ const extractedValue = stringPropTypeUtil18.extract(newChangedValue);
6398
6516
  setSessionState((prev) => ({
6399
6517
  ...prev,
6400
6518
  [fieldType]: extractedValue
@@ -6434,7 +6552,7 @@ var KeyValueControl = createControl((props = {}) => {
6434
6552
 
6435
6553
  // src/controls/position-control.tsx
6436
6554
  import * as React92 from "react";
6437
- import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil18 } from "@elementor/editor-props";
6555
+ import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
6438
6556
  import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
6439
6557
  import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
6440
6558
  import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
@@ -6453,7 +6571,7 @@ var positionOptions = [
6453
6571
  ];
6454
6572
  var PositionControl = () => {
6455
6573
  const positionContext = useBoundProp(positionPropTypeUtil);
6456
- const stringPropContext = useBoundProp(stringPropTypeUtil18);
6574
+ const stringPropContext = useBoundProp(stringPropTypeUtil19);
6457
6575
  const isCustom = !!positionContext.value;
6458
6576
  const placeholder = positionContext.placeholder ? "custom" : stringPropContext.placeholder ?? null;
6459
6577
  const handlePositionChange = (event) => {
@@ -6496,7 +6614,7 @@ import * as React105 from "react";
6496
6614
  import { useRef as useRef25 } from "react";
6497
6615
  import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
6498
6616
  import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
6499
- import { bindTrigger as bindTrigger5, Box as Box20, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
6617
+ import { bindTrigger as bindTrigger5, Box as Box21, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
6500
6618
  import { __ as __51 } from "@wordpress/i18n";
6501
6619
 
6502
6620
  // src/controls/transform-control/initial-values.ts
@@ -6552,7 +6670,7 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
6552
6670
 
6553
6671
  // src/controls/transform-control/transform-content.tsx
6554
6672
  import * as React99 from "react";
6555
- import { Box as Box17, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
6673
+ import { Box as Box18, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
6556
6674
  import { __ as __46 } from "@wordpress/i18n";
6557
6675
 
6558
6676
  // src/controls/transform-control/functions/move.tsx
@@ -6823,7 +6941,7 @@ var TransformContent = () => {
6823
6941
  rotate: initialRotateValue.value,
6824
6942
  skew: initialSkewValue.value
6825
6943
  });
6826
- return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box17, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box17, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
6944
+ return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box18, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box18, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
6827
6945
  Tabs2,
6828
6946
  {
6829
6947
  size: "small",
@@ -6863,7 +6981,7 @@ var TransformIcon = ({ value }) => {
6863
6981
 
6864
6982
  // src/controls/transform-control/transform-label.tsx
6865
6983
  import * as React101 from "react";
6866
- import { Box as Box18 } from "@elementor/ui";
6984
+ import { Box as Box19 } from "@elementor/ui";
6867
6985
  import { __ as __47 } from "@wordpress/i18n";
6868
6986
  var orderedAxis = ["x", "y", "z"];
6869
6987
  var formatLabel = (value, functionType) => {
@@ -6894,14 +7012,14 @@ var TransformLabel = (props) => {
6894
7012
  }
6895
7013
  };
6896
7014
  var Label2 = ({ label, value }) => {
6897
- return /* @__PURE__ */ React101.createElement(Box18, { component: "span" }, label, ": ", value);
7015
+ return /* @__PURE__ */ React101.createElement(Box19, { component: "span" }, label, ": ", value);
6898
7016
  };
6899
7017
 
6900
7018
  // src/controls/transform-control/transform-settings-control.tsx
6901
7019
  import * as React104 from "react";
6902
7020
  import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
6903
7021
  import { AdjustmentsIcon } from "@elementor/icons";
6904
- import { bindPopover as bindPopover6, Box as Box19, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
7022
+ import { bindPopover as bindPopover6, Box as Box20, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
6905
7023
  import { __ as __50 } from "@wordpress/i18n";
6906
7024
 
6907
7025
  // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
@@ -7011,7 +7129,7 @@ var TransformSettingsControl = ({
7011
7129
  }
7012
7130
  ),
7013
7131
  /* @__PURE__ */ React104.createElement(Divider4, null),
7014
- /* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box19, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
7132
+ /* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box20, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
7015
7133
  );
7016
7134
  };
7017
7135
 
@@ -7033,7 +7151,7 @@ var TransformRepeaterControl = createControl(
7033
7151
  }
7034
7152
  );
7035
7153
  var ToolTip = /* @__PURE__ */ React105.createElement(
7036
- Box20,
7154
+ Box21,
7037
7155
  {
7038
7156
  component: "span",
7039
7157
  "aria-label": void 0,
@@ -7100,13 +7218,13 @@ var TransformBasePopoverTrigger = ({
7100
7218
 
7101
7219
  // src/controls/transition-control/transition-repeater-control.tsx
7102
7220
  import * as React108 from "react";
7103
- import { useEffect as useEffect16, useMemo as useMemo16, useState as useState18 } from "react";
7221
+ import { useEffect as useEffect17, useMemo as useMemo16, useState as useState18 } from "react";
7104
7222
  import {
7105
7223
  createArrayPropUtils as createArrayPropUtils3,
7106
7224
  selectionSizePropTypeUtil as selectionSizePropTypeUtil2
7107
7225
  } from "@elementor/editor-props";
7108
7226
  import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
7109
- import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box22, Typography as Typography8 } from "@elementor/ui";
7227
+ import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box23, Typography as Typography8 } from "@elementor/ui";
7110
7228
  import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
7111
7229
  import { __ as __54 } from "@wordpress/i18n";
7112
7230
 
@@ -7337,7 +7455,7 @@ import { useMemo as useMemo15, useRef as useRef27 } from "react";
7337
7455
  import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
7338
7456
  import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
7339
7457
  import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
7340
- import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box21, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
7458
+ import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box22, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
7341
7459
  import { __ as __53 } from "@wordpress/i18n";
7342
7460
 
7343
7461
  // src/utils/tracking.ts
@@ -7465,7 +7583,7 @@ var TransitionSelector = ({
7465
7583
  left: rect.right + 36
7466
7584
  };
7467
7585
  };
7468
- return /* @__PURE__ */ React107.createElement(Box21, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
7586
+ return /* @__PURE__ */ React107.createElement(Box22, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
7469
7587
  UnstableTag3,
7470
7588
  {
7471
7589
  variant: "outlined",
@@ -7497,7 +7615,7 @@ var TransitionSelector = ({
7497
7615
  icon: VariationsIcon,
7498
7616
  disabledItems: includeCurrentValueInOptions(value, disabledItems),
7499
7617
  categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
7500
- Box21,
7618
+ Box22,
7501
7619
  {
7502
7620
  sx: {
7503
7621
  display: "flex",
@@ -7639,7 +7757,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
7639
7757
  icon: /* @__PURE__ */ React108.createElement(InfoCircleFilledIcon3, null)
7640
7758
  },
7641
7759
  /* @__PURE__ */ React108.createElement(AlertTitle3, null, __54("Transitions", "elementor")),
7642
- /* @__PURE__ */ React108.createElement(Box22, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
7760
+ /* @__PURE__ */ React108.createElement(Box23, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
7643
7761
  );
7644
7762
  var TransitionRepeaterControl = createControl(
7645
7763
  ({
@@ -7665,7 +7783,7 @@ var TransitionRepeaterControl = createControl(
7665
7783
  });
7666
7784
  return set;
7667
7785
  }, [proInstalled]);
7668
- useEffect16(() => {
7786
+ useEffect17(() => {
7669
7787
  if (!value || value.length === 0) {
7670
7788
  return;
7671
7789
  }
@@ -7677,7 +7795,7 @@ var TransitionRepeaterControl = createControl(
7677
7795
  setValue(sanitized);
7678
7796
  }
7679
7797
  }, [allowedTransitionSet]);
7680
- useEffect16(() => {
7798
+ useEffect17(() => {
7681
7799
  recentlyUsedListGetter().then(setRecentlyUsedList);
7682
7800
  }, [recentlyUsedListGetter]);
7683
7801
  const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
@@ -7711,9 +7829,9 @@ var TransitionRepeaterControl = createControl(
7711
7829
  // src/controls/date-time-control.tsx
7712
7830
  import * as React109 from "react";
7713
7831
  import * as dayjs from "dayjs";
7714
- import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
7832
+ import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
7715
7833
  import { DateTimePropTypeUtil } from "@elementor/editor-props";
7716
- import { Box as Box23, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
7834
+ import { Box as Box24, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
7717
7835
  var DATE_FORMAT = "YYYY-MM-DD";
7718
7836
  var TIME_FORMAT = "HH:mm";
7719
7837
  var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -7757,10 +7875,10 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
7757
7875
  const base = dayjs.default();
7758
7876
  return base.hour(h).minute(m).second(0).millisecond(0);
7759
7877
  };
7760
- return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box23, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
7878
+ return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box24, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
7761
7879
  DatePicker,
7762
7880
  {
7763
- value: parseDateValue(stringPropTypeUtil19.extract(value?.date)),
7881
+ value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
7764
7882
  onChange: (v) => handleChange({ date: v }, { bind: "date" }),
7765
7883
  disabled: inputDisabled,
7766
7884
  slotProps: {
@@ -7772,7 +7890,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
7772
7890
  )), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
7773
7891
  TimePicker,
7774
7892
  {
7775
- value: parseTimeValue(stringPropTypeUtil19.extract(value?.time)),
7893
+ value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
7776
7894
  onChange: (v) => handleChange({ time: v }, { bind: "time" }),
7777
7895
  disabled: inputDisabled,
7778
7896
  slotProps: {
@@ -7962,15 +8080,15 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
7962
8080
  };
7963
8081
 
7964
8082
  // src/controls/inline-editing-control.tsx
7965
- import * as React115 from "react";
7966
- import { useCallback as useCallback4 } from "react";
8083
+ import * as React117 from "react";
8084
+ import { useCallback as useCallback4, useState as useState20 } from "react";
7967
8085
  import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
7968
- import { Box as Box25 } from "@elementor/ui";
8086
+ import { Box as Box27 } from "@elementor/ui";
7969
8087
 
7970
8088
  // src/components/inline-editor.tsx
7971
8089
  import * as React114 from "react";
7972
- import { useEffect as useEffect17, useRef as useRef28 } from "react";
7973
- import { Box as Box24 } from "@elementor/ui";
8090
+ import { useEffect as useEffect18, useRef as useRef28 } from "react";
8091
+ import { Box as Box25 } from "@elementor/ui";
7974
8092
  import Bold from "@tiptap/extension-bold";
7975
8093
  import Document from "@tiptap/extension-document";
7976
8094
  import HardBreak from "@tiptap/extension-hard-break";
@@ -7986,7 +8104,7 @@ import Underline from "@tiptap/extension-underline";
7986
8104
  import { EditorContent, useEditor } from "@tiptap/react";
7987
8105
 
7988
8106
  // src/utils/inline-editing.ts
7989
- import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
8107
+ import { escapedHtmlPropTypeUtil, htmlV3PropTypeUtil, stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
7990
8108
  function isEmpty(value = "") {
7991
8109
  if (!value) {
7992
8110
  return true;
@@ -8008,7 +8126,7 @@ function extractInlineHtmlContent(propValue) {
8008
8126
  return escapedHtmlPropTypeUtil.extract(propValue) ?? "";
8009
8127
  }
8010
8128
  const htmlV3 = htmlV3PropTypeUtil.extract(propValue);
8011
- return stringPropTypeUtil20.extract(htmlV3?.content ?? null) ?? "";
8129
+ return stringPropTypeUtil21.extract(htmlV3?.content ?? null) ?? "";
8012
8130
  }
8013
8131
 
8014
8132
  // src/components/inline-editor.tsx
@@ -8027,6 +8145,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
8027
8145
  onBlur = void 0,
8028
8146
  expectedTag = null,
8029
8147
  onEditorCreate,
8148
+ onEditorDestroy,
8030
8149
  wrapperClassName,
8031
8150
  onSelectionEnd,
8032
8151
  mountElement = null
@@ -8111,6 +8230,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
8111
8230
  }
8112
8231
  },
8113
8232
  onCreate: onEditorCreate ? ({ editor: mountedEditor }) => onEditorCreate(mountedEditor) : void 0,
8233
+ onDestroy: onEditorDestroy ? () => onEditorDestroy() : void 0,
8114
8234
  onBlur: mountElement ? void 0 : () => onBlurRef.current?.(),
8115
8235
  onSelectionUpdate: onSelectionEnd ? ({ editor: updatedEditor }) => onSelectionEnd(updatedEditor.view) : void 0
8116
8236
  });
@@ -8126,11 +8246,11 @@ var InlineEditor = React114.forwardRef((props, ref) => {
8126
8246
  if (mountElement) {
8127
8247
  return null;
8128
8248
  }
8129
- return /* @__PURE__ */ React114.createElement(Box24, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
8249
+ return /* @__PURE__ */ React114.createElement(Box25, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
8130
8250
  });
8131
8251
  var useOnUpdate = (callback, dependencies) => {
8132
8252
  const hasMounted = useRef28(false);
8133
- useEffect17(() => {
8253
+ useEffect18(() => {
8134
8254
  if (hasMounted.current) {
8135
8255
  callback();
8136
8256
  } else {
@@ -8139,194 +8259,531 @@ var useOnUpdate = (callback, dependencies) => {
8139
8259
  }, dependencies);
8140
8260
  };
8141
8261
 
8142
- // src/controls/inline-editing-control.tsx
8143
- var InlineEditingControl = createControl(
8144
- ({
8145
- sx,
8146
- attributes,
8147
- props
8148
- }) => {
8149
- const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
8150
- const { value: rawValue } = usePropKeyContext();
8151
- const content = value ?? extractInlineHtmlContent(rawValue);
8152
- const handleChange = useCallback4(
8153
- (newValue) => {
8154
- const html = newValue ?? "";
8155
- setValue(html);
8156
- },
8157
- [setValue]
8158
- );
8159
- return /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
8160
- Box25,
8161
- {
8162
- sx: {
8163
- p: 0.8,
8164
- border: "1px solid",
8165
- borderColor: "grey.200",
8166
- borderRadius: "8px",
8167
- transition: "border-color .2s ease, box-shadow .2s ease",
8168
- "&:hover": {
8169
- borderColor: "black"
8170
- },
8171
- "&:focus-within": {
8172
- borderColor: "black",
8173
- boxShadow: "0 0 0 1px black"
8174
- },
8175
- "& .ProseMirror:focus": {
8176
- outline: "none"
8177
- },
8178
- "& .ProseMirror": {
8179
- minHeight: "70px",
8180
- fontSize: "12px",
8181
- "& a": {
8182
- color: "inherit"
8183
- },
8184
- "& .elementor-inline-editor-reset": {
8185
- margin: 0,
8186
- padding: 0
8187
- },
8188
- "&.is-empty::before": {
8189
- content: "attr(data-placeholder)",
8190
- color: "text.tertiary",
8191
- pointerEvents: "none",
8192
- position: "absolute",
8193
- opacity: 0.6
8194
- }
8195
- },
8196
- ".strip-styles *": {
8197
- all: "unset"
8198
- },
8199
- ...sx
8200
- },
8201
- ...attributes,
8202
- ...props
8203
- },
8204
- /* @__PURE__ */ React115.createElement(InlineEditor, { value: content, setValue: handleChange, placeholder: placeholder ?? null })
8205
- ));
8206
- }
8207
- );
8208
-
8209
- // src/controls/email-form-action-control/index.tsx
8210
- import * as React119 from "react";
8211
- import { emailsPropTypeUtil } from "@elementor/editor-props";
8212
- import { CollapsibleContent } from "@elementor/editor-ui";
8213
- import { Box as Box26, Divider as Divider5, Stack as Stack20 } from "@elementor/ui";
8262
+ // src/components/inline-editor-toolbar.tsx
8263
+ import * as React116 from "react";
8264
+ import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
8265
+ import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
8266
+ import {
8267
+ BoldIcon,
8268
+ ItalicIcon,
8269
+ LinkIcon as LinkIcon3,
8270
+ MinusIcon as MinusIcon2,
8271
+ StrikethroughIcon,
8272
+ SubscriptIcon,
8273
+ SuperscriptIcon,
8274
+ UnderlineIcon
8275
+ } from "@elementor/icons";
8276
+ import {
8277
+ Box as Box26,
8278
+ IconButton as IconButton9,
8279
+ ToggleButton as ToggleButton3,
8280
+ ToggleButtonGroup as ToggleButtonGroup2,
8281
+ toggleButtonGroupClasses,
8282
+ Tooltip as Tooltip10,
8283
+ usePopupState as usePopupState10
8284
+ } from "@elementor/ui";
8285
+ import { useEditorState } from "@tiptap/react";
8214
8286
  import { __ as __58 } from "@wordpress/i18n";
8215
8287
 
8216
- // src/controls/email-form-action-control/fields.tsx
8217
- import * as React118 from "react";
8218
- import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
8219
- import { Grid as Grid34, Stack as Stack19 } from "@elementor/ui";
8288
+ // src/components/url-popover.tsx
8289
+ import * as React115 from "react";
8290
+ import { useEffect as useEffect19, useRef as useRef29 } from "react";
8291
+ import { ExternalLinkIcon } from "@elementor/icons";
8292
+ import { bindPopover as bindPopover8, Popover as Popover8, Stack as Stack19, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
8220
8293
  import { __ as __57 } from "@wordpress/i18n";
8221
-
8222
- // src/hooks/use-form-field-suggestions.ts
8223
- import { getContainer as getContainer2, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
8224
- import { stringPropTypeUtil as stringPropTypeUtil21 } from "@elementor/editor-props";
8225
- import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
8226
- var FORM_FIELD_WIDGET_TYPES = [
8227
- "e-form-input",
8228
- "e-form-textarea",
8229
- "e-form-checkbox",
8230
- "e-form-radio-button",
8231
- "e-form-select",
8232
- "e-form-date-picker",
8233
- "e-form-time-picker"
8234
- ];
8235
- var FORM_ELEMENT_TYPE = "e-form";
8236
- var CSS_ID_PROP_KEY = "_cssid";
8237
- function isFormFieldWidgetType(widgetType) {
8238
- return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
8239
- }
8240
- function extractStringPropValue(value) {
8241
- return stringPropTypeUtil21.extract(value);
8242
- }
8243
- function getSettingWithDefault(child, widgetType, key) {
8244
- const fromGet = child.settings.get(key);
8245
- if (fromGet !== null && fromGet !== void 0) {
8246
- return fromGet;
8247
- }
8248
- const schema = getWidgetsCache()?.[widgetType]?.atomic_props_schema;
8249
- return schema?.[key]?.default ?? null;
8250
- }
8251
- function getFieldCssId(child, widgetType) {
8252
- return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
8253
- }
8254
- function getFormContainer(elementId) {
8255
- let container = getContainer2(elementId);
8256
- while (container) {
8257
- if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
8258
- return container;
8294
+ var UrlPopover = ({
8295
+ popupState,
8296
+ restoreValue,
8297
+ anchorRef,
8298
+ value,
8299
+ onChange,
8300
+ openInNewTab,
8301
+ onToggleNewTab
8302
+ }) => {
8303
+ const inputRef = useRef29(null);
8304
+ useEffect19(() => {
8305
+ if (popupState.isOpen) {
8306
+ requestAnimationFrame(() => inputRef.current?.focus());
8259
8307
  }
8260
- container = container.parent ?? null;
8261
- }
8262
- return null;
8263
- }
8264
- function useFormFieldSuggestions(options) {
8265
- return useListenTo2(
8266
- [
8267
- v1ReadyEvent(),
8268
- commandEndEvent2("document/elements/create"),
8269
- commandEndEvent2("document/elements/delete"),
8270
- commandEndEvent2("document/elements/set-settings")
8271
- ],
8272
- () => {
8273
- const selectedElements = getSelectedElements3();
8274
- const selectedElement = selectedElements[0];
8275
- if (!selectedElement) {
8276
- return [];
8277
- }
8278
- const formContainer = getFormContainer(selectedElement.id);
8279
- if (!formContainer?.children) {
8280
- return [];
8281
- }
8282
- const suggestions = [];
8283
- const seenCssIds = /* @__PURE__ */ new Set();
8284
- formContainer.children.forEachRecursive?.((child) => {
8285
- const widgetType = child.model.get("widgetType");
8286
- if (!widgetType || !isFormFieldWidgetType(widgetType)) {
8287
- return;
8288
- }
8289
- if (options?.inputType) {
8290
- const typeValue = extractStringPropValue(getSettingWithDefault(child, widgetType, "type"));
8291
- if (typeValue !== options.inputType) {
8292
- return;
8293
- }
8294
- }
8295
- const cssId = getFieldCssId(child, widgetType);
8296
- if (!cssId || seenCssIds.has(cssId)) {
8297
- return;
8298
- }
8299
- seenCssIds.add(cssId);
8300
- suggestions.push({ label: cssId, value: cssId });
8301
- });
8302
- return suggestions;
8308
+ }, [popupState.isOpen]);
8309
+ const handleClose = () => {
8310
+ restoreValue();
8311
+ popupState.close();
8312
+ };
8313
+ return /* @__PURE__ */ React115.createElement(
8314
+ Popover8,
8315
+ {
8316
+ slotProps: {
8317
+ paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
8318
+ },
8319
+ ...bindPopover8(popupState),
8320
+ anchorOrigin: { vertical: "top", horizontal: "left" },
8321
+ transformOrigin: { vertical: "top", horizontal: "left" },
8322
+ onClose: handleClose
8303
8323
  },
8304
- []
8324
+ /* @__PURE__ */ React115.createElement(Stack19, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
8325
+ TextField11,
8326
+ {
8327
+ value,
8328
+ onChange,
8329
+ size: "tiny",
8330
+ fullWidth: true,
8331
+ placeholder: __57("Type a URL", "elementor"),
8332
+ inputProps: { ref: inputRef },
8333
+ color: "secondary",
8334
+ InputProps: { sx: { borderRadius: "8px" } },
8335
+ onKeyUp: (event) => event.key === "Enter" && handleClose()
8336
+ }
8337
+ ), /* @__PURE__ */ React115.createElement(Tooltip9, { title: __57("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
8338
+ ToggleButton2,
8339
+ {
8340
+ size: "tiny",
8341
+ value: "newTab",
8342
+ selected: openInNewTab,
8343
+ onClick: onToggleNewTab,
8344
+ "aria-label": __57("Open in a new tab", "elementor"),
8345
+ sx: { borderRadius: "8px" }
8346
+ },
8347
+ /* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
8348
+ )))
8305
8349
  );
8306
- }
8307
-
8308
- // src/controls/email-form-action-control/email-chips-field.tsx
8309
- import * as React116 from "react";
8310
- import { useMemo as useMemo17, useState as useState19 } from "react";
8311
- import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
8312
- import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField11 } from "@elementor/ui";
8350
+ };
8313
8351
 
8314
- // src/controls/email-form-action-control/utils.ts
8315
- import { z } from "@elementor/schema";
8316
- import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
8317
- var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
8318
- var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
8319
- function isValidEmail(email) {
8320
- return z.string().email().safeParse(email).success;
8321
- }
8322
- var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
8323
- function isFormFieldShortcode(value) {
8324
- return FORM_FIELD_SHORTCODE_PATTERN.test(value);
8325
- }
8326
- var shouldShowMentionsInfo = () => {
8327
- if (!hasProInstalled3()) {
8328
- return true;
8329
- }
8352
+ // src/components/inline-editor-toolbar.tsx
8353
+ var InlineEditorToolbar = ({
8354
+ editor,
8355
+ elementId,
8356
+ sx = {},
8357
+ inControlPanel = false
8358
+ }) => {
8359
+ const [urlValue, setUrlValue] = useState19("");
8360
+ const [openInNewTab, setOpenInNewTab] = useState19(false);
8361
+ const toolbarRef = useRef30(null);
8362
+ const linkPopupState = usePopupState10({ variant: "popover" });
8363
+ const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
8364
+ const editorState = useEditorState({
8365
+ editor,
8366
+ selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
8367
+ });
8368
+ const formatButtonsList = useMemo17(() => {
8369
+ const buttons = Object.values(formatButtons);
8370
+ if (isElementClickable) {
8371
+ return buttons.filter((button) => button.action !== "link");
8372
+ }
8373
+ return buttons;
8374
+ }, [isElementClickable]);
8375
+ const handleLinkClick = () => {
8376
+ const linkAttrs = editor.getAttributes("link");
8377
+ setUrlValue(linkAttrs.href || "");
8378
+ setOpenInNewTab(linkAttrs.target === "_blank");
8379
+ linkPopupState.open(toolbarRef.current);
8380
+ };
8381
+ const handleUrlChange = (event) => {
8382
+ setUrlValue(event.target.value);
8383
+ };
8384
+ const handleToggleNewTab = () => {
8385
+ setOpenInNewTab(!openInNewTab);
8386
+ };
8387
+ const handleUrlSubmit = () => {
8388
+ if (urlValue) {
8389
+ editor.chain().focus().setLink({
8390
+ href: urlValue,
8391
+ target: openInNewTab ? "_blank" : "_self"
8392
+ }).run();
8393
+ } else {
8394
+ editor.chain().focus().unsetLink().run();
8395
+ }
8396
+ if (elementId) {
8397
+ window.dispatchEvent(
8398
+ new CustomEvent("elementor:inline-link-changed", {
8399
+ detail: { elementId }
8400
+ })
8401
+ );
8402
+ }
8403
+ linkPopupState.close();
8404
+ };
8405
+ useEffect20(() => {
8406
+ if (!inControlPanel) {
8407
+ editor?.commands?.focus();
8408
+ }
8409
+ }, [editor, inControlPanel]);
8410
+ return /* @__PURE__ */ React116.createElement(
8411
+ Box26,
8412
+ {
8413
+ ref: toolbarRef,
8414
+ sx: {
8415
+ display: "inline-flex",
8416
+ gap: 0.5,
8417
+ padding: 0.5,
8418
+ borderRadius: "8px",
8419
+ backgroundColor: "background.paper",
8420
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
8421
+ alignItems: "center",
8422
+ visibility: linkPopupState.isOpen ? "hidden" : "visible",
8423
+ pointerEvents: linkPopupState.isOpen ? "none" : "all",
8424
+ ...sx,
8425
+ ...inControlPanel && {
8426
+ width: "100%",
8427
+ justifyContent: "center",
8428
+ flexDirection: "row",
8429
+ backgroundColor: "transparent",
8430
+ boxShadow: "none",
8431
+ borderWidth: "0",
8432
+ borderBottom: "1px solid",
8433
+ borderBottomColor: "grey.200",
8434
+ borderRadius: "0",
8435
+ position: "absolute",
8436
+ top: "0",
8437
+ left: "0"
8438
+ }
8439
+ }
8440
+ },
8441
+ /* @__PURE__ */ React116.createElement(Tooltip10, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
8442
+ /* @__PURE__ */ React116.createElement(
8443
+ ToggleButtonGroup2,
8444
+ {
8445
+ value: editorState,
8446
+ size: "tiny",
8447
+ sx: {
8448
+ display: "flex",
8449
+ gap: 0.5,
8450
+ border: "none",
8451
+ [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
8452
+ borderRadius: "8px",
8453
+ border: "none",
8454
+ marginLeft: 0,
8455
+ "&.Mui-selected": {
8456
+ marginLeft: 0
8457
+ },
8458
+ "& + &.Mui-selected": {
8459
+ marginLeft: 0
8460
+ }
8461
+ },
8462
+ ...inControlPanel && {
8463
+ justifyContent: "space-between",
8464
+ width: "100%",
8465
+ "& svg": {
8466
+ width: "0.7rem",
8467
+ height: "0.7rem",
8468
+ fill: "black"
8469
+ }
8470
+ }
8471
+ }
8472
+ },
8473
+ formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip10, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
8474
+ ToggleButton3,
8475
+ {
8476
+ value: button.action,
8477
+ "aria-label": button.label,
8478
+ size: "tiny",
8479
+ onClick: () => {
8480
+ if (button.action === "link") {
8481
+ handleLinkClick();
8482
+ } else {
8483
+ button.method?.(editor);
8484
+ }
8485
+ editor?.commands?.focus();
8486
+ }
8487
+ },
8488
+ button.icon
8489
+ )))
8490
+ ),
8491
+ /* @__PURE__ */ React116.createElement(
8492
+ UrlPopover,
8493
+ {
8494
+ popupState: linkPopupState,
8495
+ anchorRef: toolbarRef,
8496
+ restoreValue: handleUrlSubmit,
8497
+ value: urlValue,
8498
+ onChange: handleUrlChange,
8499
+ openInNewTab,
8500
+ onToggleNewTab: handleToggleNewTab
8501
+ }
8502
+ )
8503
+ );
8504
+ };
8505
+ var checkIfElementIsClickable = (elementId) => {
8506
+ const container = getContainer2(elementId);
8507
+ const type = container?.model.get("widgetType");
8508
+ const isButton = type === "e-button";
8509
+ const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
8510
+ return isButton || hasLink;
8511
+ };
8512
+ var toolbarButtons = {
8513
+ clear: {
8514
+ label: __58("Clear", "elementor"),
8515
+ icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
8516
+ action: "clear",
8517
+ method: (editor) => {
8518
+ editor.chain().focus().clearNodes().unsetAllMarks().run();
8519
+ }
8520
+ },
8521
+ bold: {
8522
+ label: __58("Bold", "elementor"),
8523
+ icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
8524
+ action: "bold",
8525
+ method: (editor) => {
8526
+ editor.chain().focus().toggleBold().run();
8527
+ }
8528
+ },
8529
+ italic: {
8530
+ label: __58("Italic", "elementor"),
8531
+ icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
8532
+ action: "italic",
8533
+ method: (editor) => {
8534
+ editor.chain().focus().toggleItalic().run();
8535
+ }
8536
+ },
8537
+ underline: {
8538
+ label: __58("Underline", "elementor"),
8539
+ icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
8540
+ action: "underline",
8541
+ method: (editor) => {
8542
+ editor.chain().focus().toggleUnderline().run();
8543
+ }
8544
+ },
8545
+ strike: {
8546
+ label: __58("Strikethrough", "elementor"),
8547
+ icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
8548
+ action: "strike",
8549
+ method: (editor) => {
8550
+ editor.chain().focus().toggleStrike().run();
8551
+ }
8552
+ },
8553
+ superscript: {
8554
+ label: __58("Superscript", "elementor"),
8555
+ icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
8556
+ action: "superscript",
8557
+ method: (editor) => {
8558
+ editor.chain().focus().toggleSuperscript().run();
8559
+ }
8560
+ },
8561
+ subscript: {
8562
+ label: __58("Subscript", "elementor"),
8563
+ icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
8564
+ action: "subscript",
8565
+ method: (editor) => {
8566
+ editor.chain().focus().toggleSubscript().run();
8567
+ }
8568
+ },
8569
+ link: {
8570
+ label: __58("Link", "elementor"),
8571
+ icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
8572
+ action: "link",
8573
+ method: null
8574
+ }
8575
+ };
8576
+ var { clear: clearButton, ...formatButtons } = toolbarButtons;
8577
+ var possibleFormats = Object.keys(formatButtons);
8578
+
8579
+ // src/controls/inline-editing-control.tsx
8580
+ var InlineEditingControl = createControl(({ sx, attributes, props, context: { elementId } }) => {
8581
+ const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
8582
+ const { value: rawValue } = usePropKeyContext();
8583
+ const content = value ?? extractInlineHtmlContent(rawValue);
8584
+ const [editor, setEditor] = useState20(null);
8585
+ const handleChange = useCallback4(
8586
+ (newValue) => {
8587
+ const html = newValue ?? "";
8588
+ setValue(html);
8589
+ },
8590
+ [setValue]
8591
+ );
8592
+ return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box27, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
8593
+ InlineEditorToolbar,
8594
+ {
8595
+ editor,
8596
+ elementId,
8597
+ sx: {
8598
+ boxShadow: "none",
8599
+ border: "1px solid",
8600
+ borderColor: "grey.200",
8601
+ mb: 0.5
8602
+ },
8603
+ inControlPanel: true
8604
+ }
8605
+ ), /* @__PURE__ */ React117.createElement(
8606
+ Box27,
8607
+ {
8608
+ sx: {
8609
+ p: 0.8,
8610
+ border: "1px solid",
8611
+ borderColor: "grey.200",
8612
+ borderRadius: "8px",
8613
+ transition: "border-color .2s ease, box-shadow .2s ease",
8614
+ "&:hover": {
8615
+ borderColor: "black"
8616
+ },
8617
+ "&:focus-within": {
8618
+ borderColor: "black",
8619
+ boxShadow: "0 0 0 1px black"
8620
+ },
8621
+ "& .ProseMirror:focus": {
8622
+ outline: "none"
8623
+ },
8624
+ "& .ProseMirror": {
8625
+ minHeight: "100px",
8626
+ fontSize: "12px",
8627
+ "& a": {
8628
+ color: "inherit"
8629
+ },
8630
+ "& .elementor-inline-editor-reset": {
8631
+ margin: 0,
8632
+ padding: 0
8633
+ },
8634
+ "&.is-empty::before": {
8635
+ content: "attr(data-placeholder)",
8636
+ color: "text.tertiary",
8637
+ pointerEvents: "none",
8638
+ position: "absolute",
8639
+ opacity: 0.6
8640
+ }
8641
+ },
8642
+ ".strip-styles *": {
8643
+ all: "unset"
8644
+ },
8645
+ ...sx
8646
+ },
8647
+ ...attributes,
8648
+ ...props
8649
+ },
8650
+ /* @__PURE__ */ React117.createElement(
8651
+ InlineEditor,
8652
+ {
8653
+ value: content,
8654
+ setValue: handleChange,
8655
+ placeholder: placeholder ?? null,
8656
+ onEditorCreate: setEditor,
8657
+ onEditorDestroy: () => setEditor(null),
8658
+ sx: {
8659
+ paddingBlockStart: 5
8660
+ }
8661
+ }
8662
+ )
8663
+ )));
8664
+ });
8665
+
8666
+ // src/controls/email-form-action-control/index.tsx
8667
+ import * as React121 from "react";
8668
+ import { emailsPropTypeUtil } from "@elementor/editor-props";
8669
+ import { CollapsibleContent } from "@elementor/editor-ui";
8670
+ import { Box as Box28, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
8671
+ import { __ as __60 } from "@wordpress/i18n";
8672
+
8673
+ // src/controls/email-form-action-control/fields.tsx
8674
+ import * as React120 from "react";
8675
+ import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
8676
+ import { Grid as Grid34, Stack as Stack20 } from "@elementor/ui";
8677
+ import { __ as __59 } from "@wordpress/i18n";
8678
+
8679
+ // src/hooks/use-form-field-suggestions.ts
8680
+ import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
8681
+ import { stringPropTypeUtil as stringPropTypeUtil22 } from "@elementor/editor-props";
8682
+ import { __privateUseListenTo as useListenTo2, commandEndEvent as commandEndEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
8683
+ var FORM_FIELD_WIDGET_TYPES = [
8684
+ "e-form-input",
8685
+ "e-form-textarea",
8686
+ "e-form-checkbox",
8687
+ "e-form-radio-button",
8688
+ "e-form-select",
8689
+ "e-form-date-picker",
8690
+ "e-form-time-picker"
8691
+ ];
8692
+ var FORM_ELEMENT_TYPE = "e-form";
8693
+ var CSS_ID_PROP_KEY = "_cssid";
8694
+ function isFormFieldWidgetType(widgetType) {
8695
+ return FORM_FIELD_WIDGET_TYPES.includes(widgetType);
8696
+ }
8697
+ function extractStringPropValue(value) {
8698
+ return stringPropTypeUtil22.extract(value);
8699
+ }
8700
+ function getSettingWithDefault(child, widgetType, key) {
8701
+ const fromGet = child.settings.get(key);
8702
+ if (fromGet !== null && fromGet !== void 0) {
8703
+ return fromGet;
8704
+ }
8705
+ const schema = getWidgetsCache()?.[widgetType]?.atomic_props_schema;
8706
+ return schema?.[key]?.default ?? null;
8707
+ }
8708
+ function getFieldCssId(child, widgetType) {
8709
+ return extractStringPropValue(getSettingWithDefault(child, widgetType, CSS_ID_PROP_KEY));
8710
+ }
8711
+ function getFormContainer(elementId) {
8712
+ let container = getContainer3(elementId);
8713
+ while (container) {
8714
+ if (container.model.get("elType") === FORM_ELEMENT_TYPE) {
8715
+ return container;
8716
+ }
8717
+ container = container.parent ?? null;
8718
+ }
8719
+ return null;
8720
+ }
8721
+ function useFormFieldSuggestions(options) {
8722
+ return useListenTo2(
8723
+ [
8724
+ v1ReadyEvent(),
8725
+ commandEndEvent2("document/elements/create"),
8726
+ commandEndEvent2("document/elements/delete"),
8727
+ commandEndEvent2("document/elements/set-settings")
8728
+ ],
8729
+ () => {
8730
+ const selectedElements = getSelectedElements3();
8731
+ const selectedElement = selectedElements[0];
8732
+ if (!selectedElement) {
8733
+ return [];
8734
+ }
8735
+ const formContainer = getFormContainer(selectedElement.id);
8736
+ if (!formContainer?.children) {
8737
+ return [];
8738
+ }
8739
+ const suggestions = [];
8740
+ const seenCssIds = /* @__PURE__ */ new Set();
8741
+ formContainer.children.forEachRecursive?.((child) => {
8742
+ const widgetType = child.model.get("widgetType");
8743
+ if (!widgetType || !isFormFieldWidgetType(widgetType)) {
8744
+ return;
8745
+ }
8746
+ if (options?.inputType) {
8747
+ const typeValue = extractStringPropValue(getSettingWithDefault(child, widgetType, "type"));
8748
+ if (typeValue !== options.inputType) {
8749
+ return;
8750
+ }
8751
+ }
8752
+ const cssId = getFieldCssId(child, widgetType);
8753
+ if (!cssId || seenCssIds.has(cssId)) {
8754
+ return;
8755
+ }
8756
+ seenCssIds.add(cssId);
8757
+ suggestions.push({ label: cssId, value: cssId });
8758
+ });
8759
+ return suggestions;
8760
+ },
8761
+ []
8762
+ );
8763
+ }
8764
+
8765
+ // src/controls/email-form-action-control/email-chips-field.tsx
8766
+ import * as React118 from "react";
8767
+ import { useMemo as useMemo18, useState as useState21 } from "react";
8768
+ import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
8769
+ import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
8770
+
8771
+ // src/controls/email-form-action-control/utils.ts
8772
+ import { z } from "@elementor/schema";
8773
+ import { hasProInstalled as hasProInstalled3, isVersionGreaterOrEqual as isVersionGreaterOrEqual2 } from "@elementor/utils";
8774
+ var MIN_PRO_VERSION_FOR_MENTIONS = "4.1.0";
8775
+ var CHIP_TRIGGER_KEYS = /* @__PURE__ */ new Set([" ", ","]);
8776
+ function isValidEmail(email) {
8777
+ return z.string().email().safeParse(email).success;
8778
+ }
8779
+ var FORM_FIELD_SHORTCODE_PATTERN = /^\[[^[\]]+]$/;
8780
+ function isFormFieldShortcode(value) {
8781
+ return FORM_FIELD_SHORTCODE_PATTERN.test(value);
8782
+ }
8783
+ var shouldShowMentionsInfo = () => {
8784
+ if (!hasProInstalled3()) {
8785
+ return true;
8786
+ }
8330
8787
  const proVersion = window.elementorPro?.config?.version;
8331
8788
  if (!proVersion) {
8332
8789
  return false;
@@ -8345,10 +8802,10 @@ function resolveMention(raw, suggestions) {
8345
8802
  }
8346
8803
  var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
8347
8804
  const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
8348
- const [inputValue, setInputValue] = useState19("");
8805
+ const [inputValue, setInputValue] = useState21("");
8349
8806
  const items2 = value || [];
8350
- const selectedValues = items2.map((item) => stringPropTypeUtil22.extract(item)).filter((val) => val !== null);
8351
- const suggestionOptions = useMemo17(
8807
+ const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
8808
+ const suggestionOptions = useMemo18(
8352
8809
  () => suggestions.map((suggestion) => `[${suggestion.value}]`),
8353
8810
  [suggestions]
8354
8811
  );
@@ -8357,7 +8814,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
8357
8814
  if (!address || selectedValues.includes(address) || !isValidRecipient(address)) {
8358
8815
  return;
8359
8816
  }
8360
- setValue([...items2, stringPropTypeUtil22.create(address)]);
8817
+ setValue([...items2, stringPropTypeUtil23.create(address)]);
8361
8818
  setInputValue("");
8362
8819
  };
8363
8820
  const handleChange = (_, newValue) => {
@@ -8367,7 +8824,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
8367
8824
  if (!address || !isValidRecipient(address)) {
8368
8825
  continue;
8369
8826
  }
8370
- updated.push(stringPropTypeUtil22.create(address));
8827
+ updated.push(stringPropTypeUtil23.create(address));
8371
8828
  }
8372
8829
  setValue(updated);
8373
8830
  setInputValue("");
@@ -8383,7 +8840,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
8383
8840
  tryAddChip(inputValue);
8384
8841
  }
8385
8842
  };
8386
- return /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
8843
+ return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
8387
8844
  Autocomplete4,
8388
8845
  {
8389
8846
  fullWidth: true,
@@ -8408,99 +8865,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
8408
8865
  onBlur: handleBlur,
8409
8866
  getOptionLabel: (option) => option,
8410
8867
  isOptionEqualToValue: (option, val) => option === val,
8411
- renderInput: (params) => /* @__PURE__ */ React116.createElement(TextField11, { ...params, placeholder, onKeyDown: handleKeyDown }),
8412
- renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React116.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
8868
+ renderInput: (params) => /* @__PURE__ */ React118.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
8869
+ renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
8413
8870
  }
8414
8871
  ));
8415
8872
  });
8416
- var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React116.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React116.createElement(Grid32, { item: true }, /* @__PURE__ */ React116.createElement(EmailChipsControl, { placeholder, suggestions })));
8873
+ var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
8417
8874
 
8418
8875
  // src/controls/email-form-action-control/email-field.tsx
8419
- import * as React117 from "react";
8876
+ import * as React119 from "react";
8420
8877
  import { Grid as Grid33 } from "@elementor/ui";
8421
- var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React117.createElement(Grid33, { item: true }, /* @__PURE__ */ React117.createElement(TextControl, { placeholder }))));
8878
+ var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
8422
8879
 
8423
8880
  // src/controls/email-form-action-control/fields.tsx
8424
8881
  var SendToField = ({ placeholder }) => {
8425
8882
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
8426
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(
8883
+ return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
8427
8884
  EmailChipsField,
8428
8885
  {
8429
- fieldLabel: __57("Send to", "elementor"),
8886
+ fieldLabel: __59("Send to", "elementor"),
8430
8887
  placeholder,
8431
8888
  suggestions
8432
8889
  }
8433
- ), shouldShowMentionsInfo() && /* @__PURE__ */ React118.createElement(InfoAlert2, null, __57("Type @ or an email field name to insert its submitted value.", "elementor"))));
8890
+ ), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(InfoAlert2, null, __59("Type @ or an email field name to insert its submitted value.", "elementor"))));
8434
8891
  };
8435
- var SubjectField = () => /* @__PURE__ */ React118.createElement(
8892
+ var SubjectField = () => /* @__PURE__ */ React120.createElement(
8436
8893
  EmailField,
8437
8894
  {
8438
8895
  bind: "subject",
8439
- label: __57("Email subject", "elementor"),
8440
- placeholder: __57("New form submission", "elementor")
8896
+ label: __59("Email subject", "elementor"),
8897
+ placeholder: __59("New form submission", "elementor")
8441
8898
  }
8442
8899
  );
8443
8900
  var MessageField = () => {
8444
8901
  const suggestions = useFormFieldSuggestions();
8445
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React118.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Message", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __57(
8902
+ return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Message", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __59(
8446
8903
  "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
8447
8904
  "elementor"
8448
- ) : __57("[all-fields] shortcode sends all fields.", "elementor")))));
8905
+ ) : __59("[all-fields] shortcode sends all fields.", "elementor")))));
8449
8906
  };
8450
- var FromEmailField = () => /* @__PURE__ */ React118.createElement(
8907
+ var FromEmailField = () => /* @__PURE__ */ React120.createElement(
8451
8908
  EmailField,
8452
8909
  {
8453
8910
  bind: "from",
8454
- label: __57("From email", "elementor"),
8455
- placeholder: __57("What email should appear as the sender?", "elementor")
8911
+ label: __59("From email", "elementor"),
8912
+ placeholder: __59("What email should appear as the sender?", "elementor")
8456
8913
  }
8457
8914
  );
8458
- var FromNameField = () => /* @__PURE__ */ React118.createElement(
8915
+ var FromNameField = () => /* @__PURE__ */ React120.createElement(
8459
8916
  EmailField,
8460
8917
  {
8461
8918
  bind: "from-name",
8462
- label: __57("From name", "elementor"),
8463
- placeholder: __57("What name should appear as the sender?", "elementor")
8919
+ label: __59("From name", "elementor"),
8920
+ placeholder: __59("What name should appear as the sender?", "elementor")
8464
8921
  }
8465
8922
  );
8466
8923
  var ReplyToField = () => {
8467
8924
  const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
8468
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React118.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Reply-to", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(
8925
+ return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
8469
8926
  MentionTextAreaControl,
8470
8927
  {
8471
8928
  suggestions: emailSuggestions,
8472
8929
  rows: 1,
8473
8930
  triggerPosition: "start",
8474
- placeholder: __57("You can type @ to insert an email field", "elementor")
8931
+ placeholder: __59("You can type @ to insert an email field", "elementor")
8475
8932
  }
8476
8933
  ))));
8477
8934
  };
8478
8935
  var CcField = () => {
8479
8936
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
8480
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Cc", "elementor"), suggestions }));
8937
+ return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Cc", "elementor"), suggestions }));
8481
8938
  };
8482
8939
  var BccField = () => {
8483
8940
  const suggestions = useFormFieldSuggestions({ inputType: "email" });
8484
- return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React118.createElement(EmailChipsField, { fieldLabel: __57("Bcc", "elementor"), suggestions }));
8941
+ return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Bcc", "elementor"), suggestions }));
8485
8942
  };
8486
- var MetaDataField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React118.createElement(Stack19, { gap: 0.5 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Metadata", "elementor")), /* @__PURE__ */ React118.createElement(
8943
+ var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
8487
8944
  ChipsControl,
8488
8945
  {
8489
8946
  options: [
8490
- { label: __57("Date", "elementor"), value: "date" },
8491
- { label: __57("Time", "elementor"), value: "time" },
8492
- { label: __57("Page URL", "elementor"), value: "page-url" },
8493
- { label: __57("User agent", "elementor"), value: "user-agent" },
8494
- { label: __57("Credit", "elementor"), value: "credit" }
8947
+ { label: __59("Date", "elementor"), value: "date" },
8948
+ { label: __59("Time", "elementor"), value: "time" },
8949
+ { label: __59("Page URL", "elementor"), value: "page-url" },
8950
+ { label: __59("User agent", "elementor"), value: "user-agent" },
8951
+ { label: __59("Credit", "elementor"), value: "credit" }
8495
8952
  ]
8496
8953
  }
8497
8954
  )));
8498
- var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React118.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, __57("Send as", "elementor"))), /* @__PURE__ */ React118.createElement(Grid34, { item: true }, /* @__PURE__ */ React118.createElement(
8955
+ var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
8499
8956
  SelectControl,
8500
8957
  {
8501
8958
  options: [
8502
- { label: __57("HTML", "elementor"), value: "html" },
8503
- { label: __57("Plain Text", "elementor"), value: "plain" }
8959
+ { label: __59("HTML", "elementor"), value: "html" },
8960
+ { label: __59("Plain Text", "elementor"), value: "plain" }
8504
8961
  ]
8505
8962
  }
8506
8963
  ))));
@@ -8509,27 +8966,27 @@ var SendAsField = () => /* @__PURE__ */ React118.createElement(PropKeyProvider,
8509
8966
  var EmailFormActionControl = createControl(
8510
8967
  ({ toPlaceholder, label }) => {
8511
8968
  const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
8512
- return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(Stack20, { gap: 2 }, /* @__PURE__ */ React119.createElement(ControlLabel, null, label ? label + " " + __58("settings", "elementor") : __58("Email settings", "elementor")), /* @__PURE__ */ React119.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React119.createElement(SubjectField, null), /* @__PURE__ */ React119.createElement(MessageField, null), /* @__PURE__ */ React119.createElement(FromEmailField, null), /* @__PURE__ */ React119.createElement(AdvancedSettings, null)));
8969
+ return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + __60("settings", "elementor") : __60("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
8513
8970
  }
8514
8971
  );
8515
- var AdvancedSettings = () => /* @__PURE__ */ React119.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React119.createElement(Box26, { sx: { pt: 2 } }, /* @__PURE__ */ React119.createElement(Stack20, { gap: 2 }, /* @__PURE__ */ React119.createElement(FromNameField, null), /* @__PURE__ */ React119.createElement(ReplyToField, null), /* @__PURE__ */ React119.createElement(CcField, null), /* @__PURE__ */ React119.createElement(BccField, null), /* @__PURE__ */ React119.createElement(Divider5, null), /* @__PURE__ */ React119.createElement(MetaDataField, null), /* @__PURE__ */ React119.createElement(SendAsField, null))));
8972
+ var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box28, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
8516
8973
 
8517
8974
  // src/controls/attachment-type-control.tsx
8518
- import * as React120 from "react";
8975
+ import * as React122 from "react";
8519
8976
  import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
8520
8977
  import { Grid as Grid35 } from "@elementor/ui";
8521
- import { __ as __59 } from "@wordpress/i18n";
8978
+ import { __ as __61 } from "@wordpress/i18n";
8522
8979
  var AttachmentTypeControl = createControl(({ label, options }) => {
8523
- return /* @__PURE__ */ React120.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(SelectControl, { options })), /* @__PURE__ */ React120.createElement(Grid35, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert3, null, __59(
8980
+ return /* @__PURE__ */ React122.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(InfoAlert3, null, __61(
8524
8981
  "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
8525
8982
  "elementor"
8526
8983
  ))));
8527
8984
  });
8528
8985
 
8529
8986
  // src/controls/grid-span-control.tsx
8530
- import * as React121 from "react";
8987
+ import * as React123 from "react";
8531
8988
  import { spanPropTypeUtil } from "@elementor/editor-props";
8532
- import { TextField as TextField12 } from "@elementor/ui";
8989
+ import { TextField as TextField13 } from "@elementor/ui";
8533
8990
  var GridSpanControl = createControl(
8534
8991
  ({
8535
8992
  placeholder: propPlaceholder,
@@ -8546,8 +9003,8 @@ var GridSpanControl = createControl(
8546
9003
  setValue(next === "" ? null : next);
8547
9004
  };
8548
9005
  const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
8549
- return /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(
8550
- TextField12,
9006
+ return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
9007
+ TextField13,
8551
9008
  {
8552
9009
  size: "tiny",
8553
9010
  fullWidth: true,
@@ -8567,23 +9024,23 @@ var GridSpanControl = createControl(
8567
9024
  );
8568
9025
 
8569
9026
  // src/components/promotions/display-conditions-control.tsx
8570
- import * as React123 from "react";
8571
- import { useRef as useRef29 } from "react";
9027
+ import * as React125 from "react";
9028
+ import { useRef as useRef31 } from "react";
8572
9029
  import { SitemapIcon } from "@elementor/icons";
8573
- import { IconButton as IconButton9, Stack as Stack21, Tooltip as Tooltip9 } from "@elementor/ui";
8574
- import { __ as __60 } from "@wordpress/i18n";
9030
+ import { IconButton as IconButton10, Stack as Stack22, Tooltip as Tooltip11 } from "@elementor/ui";
9031
+ import { __ as __62 } from "@wordpress/i18n";
8575
9032
 
8576
9033
  // src/components/promotions/promotion-trigger.tsx
8577
- import * as React122 from "react";
8578
- import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState20 } from "react";
9034
+ import * as React124 from "react";
9035
+ import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
8579
9036
  import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
8580
- import { Box as Box27 } from "@elementor/ui";
9037
+ import { Box as Box29 } from "@elementor/ui";
8581
9038
  function getV4Promotion(key) {
8582
9039
  return window.elementor?.config?.v4Promotions?.[key];
8583
9040
  }
8584
9041
  var PromotionTrigger = forwardRef12(
8585
9042
  ({ promotionKey, children, trackingData }, ref) => {
8586
- const [isOpen, setIsOpen] = useState20(false);
9043
+ const [isOpen, setIsOpen] = useState22(false);
8587
9044
  const promotion = getV4Promotion(promotionKey);
8588
9045
  const toggle = useCallback5(() => {
8589
9046
  setIsOpen((prev) => {
@@ -8594,7 +9051,7 @@ var PromotionTrigger = forwardRef12(
8594
9051
  });
8595
9052
  }, [trackingData]);
8596
9053
  useImperativeHandle(ref, () => ({ toggle }), [toggle]);
8597
- return /* @__PURE__ */ React122.createElement(React122.Fragment, null, promotion && /* @__PURE__ */ React122.createElement(
9054
+ return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
8598
9055
  PromotionInfotip,
8599
9056
  {
8600
9057
  title: promotion.title,
@@ -8608,8 +9065,8 @@ var PromotionTrigger = forwardRef12(
8608
9065
  },
8609
9066
  onCtaClick: () => trackUpgradePromotionClick(trackingData)
8610
9067
  },
8611
- /* @__PURE__ */ React122.createElement(
8612
- Box27,
9068
+ /* @__PURE__ */ React124.createElement(
9069
+ Box29,
8613
9070
  {
8614
9071
  onClick: (e) => {
8615
9072
  e.stopPropagation();
@@ -8617,19 +9074,19 @@ var PromotionTrigger = forwardRef12(
8617
9074
  },
8618
9075
  sx: { cursor: "pointer", display: "inline-flex" }
8619
9076
  },
8620
- children ?? /* @__PURE__ */ React122.createElement(PromotionChip2, null)
9077
+ children ?? /* @__PURE__ */ React124.createElement(PromotionChip2, null)
8621
9078
  )
8622
9079
  ));
8623
9080
  }
8624
9081
  );
8625
9082
 
8626
9083
  // src/components/promotions/display-conditions-control.tsx
8627
- var ARIA_LABEL = __60("Display Conditions", "elementor");
9084
+ var ARIA_LABEL = __62("Display Conditions", "elementor");
8628
9085
  var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
8629
9086
  var DisplayConditionsControl = createControl(() => {
8630
- const triggerRef = useRef29(null);
8631
- return /* @__PURE__ */ React123.createElement(
8632
- Stack21,
9087
+ const triggerRef = useRef31(null);
9088
+ return /* @__PURE__ */ React125.createElement(
9089
+ Stack22,
8633
9090
  {
8634
9091
  direction: "row",
8635
9092
  spacing: 2,
@@ -8638,9 +9095,9 @@ var DisplayConditionsControl = createControl(() => {
8638
9095
  alignItems: "center"
8639
9096
  }
8640
9097
  },
8641
- /* @__PURE__ */ React123.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
8642
- /* @__PURE__ */ React123.createElement(Tooltip9, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React123.createElement(
8643
- IconButton9,
9098
+ /* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
9099
+ /* @__PURE__ */ React125.createElement(Tooltip11, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
9100
+ IconButton10,
8644
9101
  {
8645
9102
  size: "tiny",
8646
9103
  "aria-label": ARIA_LABEL,
@@ -8652,23 +9109,23 @@ var DisplayConditionsControl = createControl(() => {
8652
9109
  borderRadius: 1
8653
9110
  }
8654
9111
  },
8655
- /* @__PURE__ */ React123.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
9112
+ /* @__PURE__ */ React125.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
8656
9113
  ))
8657
9114
  );
8658
9115
  });
8659
9116
 
8660
9117
  // src/components/promotions/attributes-control.tsx
8661
- import * as React124 from "react";
8662
- import { useRef as useRef30 } from "react";
9118
+ import * as React126 from "react";
9119
+ import { useRef as useRef32 } from "react";
8663
9120
  import { PlusIcon as PlusIcon4 } from "@elementor/icons";
8664
- import { Stack as Stack22, Tooltip as Tooltip10 } from "@elementor/ui";
8665
- import { __ as __61 } from "@wordpress/i18n";
8666
- var ARIA_LABEL2 = __61("Attributes", "elementor");
9121
+ import { Stack as Stack23, Tooltip as Tooltip12 } from "@elementor/ui";
9122
+ import { __ as __63 } from "@wordpress/i18n";
9123
+ var ARIA_LABEL2 = __63("Attributes", "elementor");
8667
9124
  var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
8668
9125
  var AttributesControl = createControl(() => {
8669
- const triggerRef = useRef30(null);
8670
- return /* @__PURE__ */ React124.createElement(
8671
- Stack22,
9126
+ const triggerRef = useRef32(null);
9127
+ return /* @__PURE__ */ React126.createElement(
9128
+ Stack23,
8672
9129
  {
8673
9130
  direction: "row",
8674
9131
  spacing: 2,
@@ -8677,8 +9134,8 @@ var AttributesControl = createControl(() => {
8677
9134
  alignItems: "center"
8678
9135
  }
8679
9136
  },
8680
- /* @__PURE__ */ React124.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
8681
- /* @__PURE__ */ React124.createElement(Tooltip10, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React124.createElement(
9137
+ /* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
9138
+ /* @__PURE__ */ React126.createElement(Tooltip12, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
8682
9139
  PlusIcon4,
8683
9140
  {
8684
9141
  "aria-label": ARIA_LABEL2,
@@ -8692,29 +9149,29 @@ var AttributesControl = createControl(() => {
8692
9149
  });
8693
9150
 
8694
9151
  // src/components/icon-buttons/clear-icon-button.tsx
8695
- import * as React125 from "react";
9152
+ import * as React127 from "react";
8696
9153
  import { BrushBigIcon } from "@elementor/icons";
8697
- import { IconButton as IconButton10, styled as styled11, Tooltip as Tooltip11 } from "@elementor/ui";
8698
- var CustomIconButton = styled11(IconButton10)(({ theme }) => ({
9154
+ import { IconButton as IconButton11, styled as styled11, Tooltip as Tooltip13 } from "@elementor/ui";
9155
+ var CustomIconButton = styled11(IconButton11)(({ theme }) => ({
8699
9156
  width: theme.spacing(2.5),
8700
9157
  height: theme.spacing(2.5)
8701
9158
  }));
8702
- var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React125.createElement(Tooltip11, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React125.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React125.createElement(BrushBigIcon, { fontSize: size })));
9159
+ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(Tooltip13, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(BrushBigIcon, { fontSize: size })));
8703
9160
 
8704
9161
  // src/components/repeater/repeater.tsx
8705
- import * as React126 from "react";
8706
- import { useEffect as useEffect18, useState as useState21 } from "react";
9162
+ import * as React128 from "react";
9163
+ import { useEffect as useEffect21, useState as useState23 } from "react";
8707
9164
  import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
8708
9165
  import {
8709
- bindPopover as bindPopover8,
9166
+ bindPopover as bindPopover9,
8710
9167
  bindTrigger as bindTrigger7,
8711
- Box as Box28,
8712
- IconButton as IconButton11,
9168
+ Box as Box30,
9169
+ IconButton as IconButton12,
8713
9170
  Infotip as Infotip4,
8714
- Tooltip as Tooltip12,
8715
- usePopupState as usePopupState10
9171
+ Tooltip as Tooltip14,
9172
+ usePopupState as usePopupState11
8716
9173
  } from "@elementor/ui";
8717
- import { __ as __62 } from "@wordpress/i18n";
9174
+ import { __ as __64 } from "@wordpress/i18n";
8718
9175
  var SIZE12 = "tiny";
8719
9176
  var EMPTY_OPEN_ITEM2 = -1;
8720
9177
  var Repeater3 = ({
@@ -8733,7 +9190,7 @@ var Repeater3 = ({
8733
9190
  isSortable = true,
8734
9191
  adornment = ControlAdornments
8735
9192
  }) => {
8736
- const [openItem, setOpenItem] = useState21(initialOpenItem);
9193
+ const [openItem, setOpenItem] = useState23(initialOpenItem);
8737
9194
  const uniqueKeys = items2.map(
8738
9195
  (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
8739
9196
  );
@@ -8796,8 +9253,8 @@ var Repeater3 = ({
8796
9253
  };
8797
9254
  const isButtonDisabled = disabled || disableAddItemButton;
8798
9255
  const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
8799
- const addButton = /* @__PURE__ */ React126.createElement(
8800
- IconButton11,
9256
+ const addButton = /* @__PURE__ */ React128.createElement(
9257
+ IconButton12,
8801
9258
  {
8802
9259
  size: SIZE12,
8803
9260
  sx: {
@@ -8805,11 +9262,11 @@ var Repeater3 = ({
8805
9262
  },
8806
9263
  disabled: isButtonDisabled,
8807
9264
  onClick: addRepeaterItem,
8808
- "aria-label": __62("Add item", "elementor")
9265
+ "aria-label": __64("Add item", "elementor")
8809
9266
  },
8810
- /* @__PURE__ */ React126.createElement(PlusIcon5, { fontSize: SIZE12 })
9267
+ /* @__PURE__ */ React128.createElement(PlusIcon5, { fontSize: SIZE12 })
8811
9268
  );
8812
- return /* @__PURE__ */ React126.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React126.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React126.createElement(
9269
+ return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
8813
9270
  Infotip4,
8814
9271
  {
8815
9272
  placement: "right",
@@ -8817,20 +9274,20 @@ var Repeater3 = ({
8817
9274
  color: "secondary",
8818
9275
  slotProps: { popper: { sx: { width: 300 } } }
8819
9276
  },
8820
- /* @__PURE__ */ React126.createElement(Box28, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
8821
- ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React126.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
9277
+ /* @__PURE__ */ React128.createElement(Box30, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
9278
+ ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
8822
9279
  const index = uniqueKeys.indexOf(key);
8823
9280
  const value = items2[index];
8824
9281
  if (!value) {
8825
9282
  return null;
8826
9283
  }
8827
- return /* @__PURE__ */ React126.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React126.createElement(
9284
+ return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
8828
9285
  RepeaterItem,
8829
9286
  {
8830
9287
  disabled,
8831
9288
  propDisabled: value?.disabled,
8832
- label: /* @__PURE__ */ React126.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Label, { value, index })),
8833
- startIcon: /* @__PURE__ */ React126.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React126.createElement(itemSettings.Icon, { value })),
9289
+ label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
9290
+ startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
8834
9291
  removeItem: () => removeRepeaterItem(index),
8835
9292
  duplicateItem: () => duplicateRepeaterItem(index),
8836
9293
  toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -8844,7 +9301,7 @@ var Repeater3 = ({
8844
9301
  actions: itemSettings.actions,
8845
9302
  value
8846
9303
  },
8847
- (props) => /* @__PURE__ */ React126.createElement(
9304
+ (props) => /* @__PURE__ */ React128.createElement(
8848
9305
  itemSettings.Content,
8849
9306
  {
8850
9307
  ...props,
@@ -8886,16 +9343,16 @@ var RepeaterItem = ({
8886
9343
  );
8887
9344
  const triggerProps = bindTrigger7(popoverState);
8888
9345
  usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
8889
- const duplicateLabel = __62("Duplicate", "elementor");
8890
- const toggleLabel = propDisabled ? __62("Show", "elementor") : __62("Hide", "elementor");
8891
- const removeLabel = __62("Remove", "elementor");
8892
- return /* @__PURE__ */ React126.createElement(Box28, { sx: { display: "contents" } }, /* @__PURE__ */ React126.createElement(
9346
+ const duplicateLabel = __64("Duplicate", "elementor");
9347
+ const toggleLabel = propDisabled ? __64("Show", "elementor") : __64("Hide", "elementor");
9348
+ const removeLabel = __64("Remove", "elementor");
9349
+ return /* @__PURE__ */ React128.createElement(Box30, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
8893
9350
  RepeaterTag,
8894
9351
  {
8895
9352
  disabled,
8896
9353
  label,
8897
9354
  ref: setRef,
8898
- "aria-label": __62("Open item", "elementor"),
9355
+ "aria-label": __64("Open item", "elementor"),
8899
9356
  ...triggerProps,
8900
9357
  onClick: (e) => {
8901
9358
  triggerProps.onClick(e);
@@ -8904,15 +9361,15 @@ var RepeaterItem = ({
8904
9361
  }
8905
9362
  },
8906
9363
  startIcon,
8907
- actions: /* @__PURE__ */ React126.createElement(React126.Fragment, null, showDuplicate && /* @__PURE__ */ React126.createElement(Tooltip12, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React126.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React126.createElement(Tooltip12, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React126.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React126.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React126.createElement(Tooltip12, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React126.createElement(IconButton11, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React126.createElement(XIcon4, { fontSize: SIZE12 }))))
9364
+ actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(XIcon4, { fontSize: SIZE12 }))))
8908
9365
  }
8909
- ), /* @__PURE__ */ React126.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React126.createElement(Box28, null, children({ anchorEl: ref }))));
9366
+ ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box30, null, children({ anchorEl: ref }))));
8910
9367
  };
8911
9368
  var usePopover = (openOnMount, onOpen, onPopoverClose) => {
8912
- const [ref, setRef] = useState21(null);
8913
- const popoverState = usePopupState10({ variant: "popover" });
8914
- const popoverProps = bindPopover8(popoverState);
8915
- useEffect18(() => {
9369
+ const [ref, setRef] = useState23(null);
9370
+ const popoverState = usePopupState11({ variant: "popover" });
9371
+ const popoverProps = bindPopover9(popoverState);
9372
+ useEffect21(() => {
8916
9373
  if (openOnMount && ref) {
8917
9374
  popoverState.open(ref);
8918
9375
  onOpen?.();
@@ -8930,293 +9387,6 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
8930
9387
  };
8931
9388
  };
8932
9389
 
8933
- // src/components/inline-editor-toolbar.tsx
8934
- import * as React128 from "react";
8935
- import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef32, useState as useState22 } from "react";
8936
- import { getContainer as getContainer3, getElementSetting } from "@elementor/editor-elements";
8937
- import {
8938
- BoldIcon,
8939
- ItalicIcon,
8940
- LinkIcon as LinkIcon3,
8941
- MinusIcon as MinusIcon2,
8942
- StrikethroughIcon,
8943
- SubscriptIcon,
8944
- SuperscriptIcon,
8945
- UnderlineIcon
8946
- } from "@elementor/icons";
8947
- import {
8948
- Box as Box29,
8949
- IconButton as IconButton12,
8950
- ToggleButton as ToggleButton3,
8951
- ToggleButtonGroup as ToggleButtonGroup2,
8952
- toggleButtonGroupClasses,
8953
- Tooltip as Tooltip14,
8954
- usePopupState as usePopupState11
8955
- } from "@elementor/ui";
8956
- import { useEditorState } from "@tiptap/react";
8957
- import { __ as __64 } from "@wordpress/i18n";
8958
-
8959
- // src/components/url-popover.tsx
8960
- import * as React127 from "react";
8961
- import { useEffect as useEffect19, useRef as useRef31 } from "react";
8962
- import { ExternalLinkIcon } from "@elementor/icons";
8963
- import { bindPopover as bindPopover9, Popover as Popover8, Stack as Stack23, TextField as TextField13, ToggleButton as ToggleButton2, Tooltip as Tooltip13 } from "@elementor/ui";
8964
- import { __ as __63 } from "@wordpress/i18n";
8965
- var UrlPopover = ({
8966
- popupState,
8967
- restoreValue,
8968
- anchorRef,
8969
- value,
8970
- onChange,
8971
- openInNewTab,
8972
- onToggleNewTab
8973
- }) => {
8974
- const inputRef = useRef31(null);
8975
- useEffect19(() => {
8976
- if (popupState.isOpen) {
8977
- requestAnimationFrame(() => inputRef.current?.focus());
8978
- }
8979
- }, [popupState.isOpen]);
8980
- const handleClose = () => {
8981
- restoreValue();
8982
- popupState.close();
8983
- };
8984
- return /* @__PURE__ */ React127.createElement(
8985
- Popover8,
8986
- {
8987
- slotProps: {
8988
- paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
8989
- },
8990
- ...bindPopover9(popupState),
8991
- anchorOrigin: { vertical: "top", horizontal: "left" },
8992
- transformOrigin: { vertical: "top", horizontal: "left" },
8993
- onClose: handleClose
8994
- },
8995
- /* @__PURE__ */ React127.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React127.createElement(
8996
- TextField13,
8997
- {
8998
- value,
8999
- onChange,
9000
- size: "tiny",
9001
- fullWidth: true,
9002
- placeholder: __63("Type a URL", "elementor"),
9003
- inputProps: { ref: inputRef },
9004
- color: "secondary",
9005
- InputProps: { sx: { borderRadius: "8px" } },
9006
- onKeyUp: (event) => event.key === "Enter" && handleClose()
9007
- }
9008
- ), /* @__PURE__ */ React127.createElement(Tooltip13, { title: __63("Open in a new tab", "elementor") }, /* @__PURE__ */ React127.createElement(
9009
- ToggleButton2,
9010
- {
9011
- size: "tiny",
9012
- value: "newTab",
9013
- selected: openInNewTab,
9014
- onClick: onToggleNewTab,
9015
- "aria-label": __63("Open in a new tab", "elementor"),
9016
- sx: { borderRadius: "8px" }
9017
- },
9018
- /* @__PURE__ */ React127.createElement(ExternalLinkIcon, { fontSize: "tiny" })
9019
- )))
9020
- );
9021
- };
9022
-
9023
- // src/components/inline-editor-toolbar.tsx
9024
- var InlineEditorToolbar = ({ editor, elementId, sx = {} }) => {
9025
- const [urlValue, setUrlValue] = useState22("");
9026
- const [openInNewTab, setOpenInNewTab] = useState22(false);
9027
- const toolbarRef = useRef32(null);
9028
- const linkPopupState = usePopupState11({ variant: "popover" });
9029
- const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
9030
- const editorState = useEditorState({
9031
- editor,
9032
- selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
9033
- });
9034
- const formatButtonsList = useMemo18(() => {
9035
- const buttons = Object.values(formatButtons);
9036
- if (isElementClickable) {
9037
- return buttons.filter((button) => button.action !== "link");
9038
- }
9039
- return buttons;
9040
- }, [isElementClickable]);
9041
- const handleLinkClick = () => {
9042
- const linkAttrs = editor.getAttributes("link");
9043
- setUrlValue(linkAttrs.href || "");
9044
- setOpenInNewTab(linkAttrs.target === "_blank");
9045
- linkPopupState.open(toolbarRef.current);
9046
- };
9047
- const handleUrlChange = (event) => {
9048
- setUrlValue(event.target.value);
9049
- };
9050
- const handleToggleNewTab = () => {
9051
- setOpenInNewTab(!openInNewTab);
9052
- };
9053
- const handleUrlSubmit = () => {
9054
- if (urlValue) {
9055
- editor.chain().focus().setLink({
9056
- href: urlValue,
9057
- target: openInNewTab ? "_blank" : "_self"
9058
- }).run();
9059
- } else {
9060
- editor.chain().focus().unsetLink().run();
9061
- }
9062
- if (elementId) {
9063
- window.dispatchEvent(
9064
- new CustomEvent("elementor:inline-link-changed", {
9065
- detail: { elementId }
9066
- })
9067
- );
9068
- }
9069
- linkPopupState.close();
9070
- };
9071
- useEffect20(() => {
9072
- editor?.commands?.focus();
9073
- }, [editor]);
9074
- return /* @__PURE__ */ React128.createElement(
9075
- Box29,
9076
- {
9077
- ref: toolbarRef,
9078
- sx: {
9079
- display: "inline-flex",
9080
- gap: 0.5,
9081
- padding: 0.5,
9082
- borderRadius: "8px",
9083
- backgroundColor: "background.paper",
9084
- boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
9085
- alignItems: "center",
9086
- visibility: linkPopupState.isOpen ? "hidden" : "visible",
9087
- pointerEvents: linkPopupState.isOpen ? "none" : "all",
9088
- ...sx
9089
- }
9090
- },
9091
- /* @__PURE__ */ React128.createElement(Tooltip14, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React128.createElement(IconButton12, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
9092
- /* @__PURE__ */ React128.createElement(
9093
- ToggleButtonGroup2,
9094
- {
9095
- value: editorState,
9096
- size: "tiny",
9097
- sx: {
9098
- display: "flex",
9099
- gap: 0.5,
9100
- border: "none",
9101
- [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}, & .${toggleButtonGroupClasses.lastButton}`]: {
9102
- borderRadius: "8px",
9103
- border: "none",
9104
- marginLeft: 0,
9105
- "&.Mui-selected": {
9106
- marginLeft: 0
9107
- },
9108
- "& + &.Mui-selected": {
9109
- marginLeft: 0
9110
- }
9111
- }
9112
- }
9113
- },
9114
- formatButtonsList.map((button) => /* @__PURE__ */ React128.createElement(Tooltip14, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React128.createElement(
9115
- ToggleButton3,
9116
- {
9117
- value: button.action,
9118
- "aria-label": button.label,
9119
- size: "tiny",
9120
- onClick: () => {
9121
- if (button.action === "link") {
9122
- handleLinkClick();
9123
- } else {
9124
- button.method?.(editor);
9125
- }
9126
- editor?.commands?.focus();
9127
- }
9128
- },
9129
- button.icon
9130
- )))
9131
- ),
9132
- /* @__PURE__ */ React128.createElement(
9133
- UrlPopover,
9134
- {
9135
- popupState: linkPopupState,
9136
- anchorRef: toolbarRef,
9137
- restoreValue: handleUrlSubmit,
9138
- value: urlValue,
9139
- onChange: handleUrlChange,
9140
- openInNewTab,
9141
- onToggleNewTab: handleToggleNewTab
9142
- }
9143
- )
9144
- );
9145
- };
9146
- var checkIfElementIsClickable = (elementId) => {
9147
- const container = getContainer3(elementId);
9148
- const type = container?.model.get("widgetType");
9149
- const isButton = type === "e-button";
9150
- const hasLink = !!getElementSetting(elementId, "link")?.value?.destination;
9151
- return isButton || hasLink;
9152
- };
9153
- var toolbarButtons = {
9154
- clear: {
9155
- label: __64("Clear", "elementor"),
9156
- icon: /* @__PURE__ */ React128.createElement(MinusIcon2, { fontSize: "tiny" }),
9157
- action: "clear",
9158
- method: (editor) => {
9159
- editor.chain().focus().clearNodes().unsetAllMarks().run();
9160
- }
9161
- },
9162
- bold: {
9163
- label: __64("Bold", "elementor"),
9164
- icon: /* @__PURE__ */ React128.createElement(BoldIcon, { fontSize: "tiny" }),
9165
- action: "bold",
9166
- method: (editor) => {
9167
- editor.chain().focus().toggleBold().run();
9168
- }
9169
- },
9170
- italic: {
9171
- label: __64("Italic", "elementor"),
9172
- icon: /* @__PURE__ */ React128.createElement(ItalicIcon, { fontSize: "tiny" }),
9173
- action: "italic",
9174
- method: (editor) => {
9175
- editor.chain().focus().toggleItalic().run();
9176
- }
9177
- },
9178
- underline: {
9179
- label: __64("Underline", "elementor"),
9180
- icon: /* @__PURE__ */ React128.createElement(UnderlineIcon, { fontSize: "tiny" }),
9181
- action: "underline",
9182
- method: (editor) => {
9183
- editor.chain().focus().toggleUnderline().run();
9184
- }
9185
- },
9186
- strike: {
9187
- label: __64("Strikethrough", "elementor"),
9188
- icon: /* @__PURE__ */ React128.createElement(StrikethroughIcon, { fontSize: "tiny" }),
9189
- action: "strike",
9190
- method: (editor) => {
9191
- editor.chain().focus().toggleStrike().run();
9192
- }
9193
- },
9194
- superscript: {
9195
- label: __64("Superscript", "elementor"),
9196
- icon: /* @__PURE__ */ React128.createElement(SuperscriptIcon, { fontSize: "tiny" }),
9197
- action: "superscript",
9198
- method: (editor) => {
9199
- editor.chain().focus().toggleSuperscript().run();
9200
- }
9201
- },
9202
- subscript: {
9203
- label: __64("Subscript", "elementor"),
9204
- icon: /* @__PURE__ */ React128.createElement(SubscriptIcon, { fontSize: "tiny" }),
9205
- action: "subscript",
9206
- method: (editor) => {
9207
- editor.chain().focus().toggleSubscript().run();
9208
- }
9209
- },
9210
- link: {
9211
- label: __64("Link", "elementor"),
9212
- icon: /* @__PURE__ */ React128.createElement(LinkIcon3, { fontSize: "tiny" }),
9213
- action: "link",
9214
- method: null
9215
- }
9216
- };
9217
- var { clear: clearButton, ...formatButtons } = toolbarButtons;
9218
- var possibleFormats = Object.keys(formatButtons);
9219
-
9220
9390
  // src/components/size/unstable-size-field.tsx
9221
9391
  import * as React131 from "react";
9222
9392
  import { InputAdornment as InputAdornment6 } from "@elementor/ui";