← All changes
|
assets/js/packages/editor-editing-panel/editor-editing-panel.js
+10
-7757
4.3.4
→
4.0.0-dev4
View file →
| @@ -1,7766 +1,19 @@ | ||
| 1 | -(function(react, _elementor_ui, _elementor_editor_elements, _elementor_editor_props, _elementor_locations, _elementor_session, _elementor_editor_styles_repository, _elementor_utils, _elementor_editor_controls, _elementor_icons, _elementor_editor_ui, _wordpress_i18n, _elementor_editor_styles, _elementor_editor_v1_adapters, _elementor_editor_documents, _elementor_editor_responsive, _elementor_editor_panels, _elementor_menus, _elementor_editor_interactions, _elementor_editor_variables, _elementor_editor_canvas, _elementor_editor, _elementor_schema, _elementor_wp_media) { | |
| 2 | - | |
| 3 | -//#region \0rolldown/runtime.js | |
| 4 | - var __create = Object.create; | |
| 5 | - var __defProp$1 = Object.defineProperty; | |
| 6 | - var __name = (target, value) => __defProp$1(target, "name", { | |
| 7 | - value, | |
| 8 | - configurable: true | |
| 9 | - }); | |
| 10 | - var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | |
| 11 | - var __getOwnPropNames = Object.getOwnPropertyNames; | |
| 12 | - var __getProtoOf = Object.getPrototypeOf; | |
| 13 | - var __hasOwnProp = Object.prototype.hasOwnProperty; | |
| 14 | - var __exportAll = (all, no_symbols) => { | |
| 15 | - let target = {}; | |
| 16 | - for (var name in all) { | |
| 17 | - __defProp$1(target, name, { | |
| 18 | - get: all[name], | |
| 19 | - enumerable: true | |
| 20 | - }); | |
| 21 | - } | |
| 22 | - if (!no_symbols) { | |
| 23 | - __defProp$1(target, Symbol.toStringTag, { value: "Module" }); | |
| 24 | - } | |
| 25 | - return target; | |
| 26 | - }; | |
| 27 | - var __copyProps = (to, from, except, desc) => { | |
| 28 | - if (from && typeof from === "object" || typeof from === "function") { | |
| 29 | - for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) { | |
| 30 | - key = keys[i]; | |
| 31 | - if (!__hasOwnProp.call(to, key) && key !== except) { | |
| 32 | - __defProp$1(to, key, { | |
| 33 | - get: ((k) => from[k]).bind(null, key), | |
| 34 | - enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable | |
| 35 | - }); | |
| 36 | - } | |
| 37 | - } | |
| 38 | - } | |
| 39 | - return to; | |
| 40 | - }; | |
| 41 | - var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp$1(target, "default", { | |
| 42 | - value: mod, | |
| 43 | - enumerable: true | |
| 44 | - }) : target, mod)); | |
| 45 | - | |
| 46 | -//#endregion | |
| 47 | -react = __toESM(react); | |
| 48 | - | |
| 49 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts | |
| 50 | - function addGroupToOptions(options, pluralEntityName) { | |
| 51 | - return options.map((option) => { | |
| 52 | - return { | |
| 53 | - ...option, | |
| 54 | - _group: `Existing ${pluralEntityName ?? "options"}` | |
| 55 | - }; | |
| 56 | - }); | |
| 57 | - } | |
| 58 | - function removeInternalKeys(option) { | |
| 59 | - const { _group, _action, ...rest } = option; | |
| 60 | - return rest; | |
| 61 | - } | |
| 62 | - | |
| 63 | -//#endregion | |
| 64 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-change.ts | |
| 65 | - function useAutocompleteChange(params) { | |
| 66 | - const { options, onSelect, createOption, setInputValue, closeDropdown } = params; | |
| 67 | - if (!onSelect && !createOption) return; | |
| 68 | - const handleChange = async (_, selectedOrInputValue, reason, details) => { | |
| 69 | - const changedOption = details?.option; | |
| 70 | - if (!changedOption || typeof changedOption === "object" && changedOption.fixed) return; | |
| 71 | - const selectedOptions = selectedOrInputValue.filter((option) => typeof option !== "string"); | |
| 72 | - switch (reason) { | |
| 73 | - case "removeOption": | |
| 74 | - updateSelectedOptions(selectedOptions, "removeOption", changedOption); | |
| 75 | - break; | |
| 76 | - case "selectOption": { | |
| 77 | - const selectedOption = changedOption; | |
| 78 | - if (selectedOption._action === "create") { | |
| 79 | - const newOption = selectedOption.value; | |
| 80 | - return createOption?.(newOption); | |
| 81 | - } | |
| 82 | - updateSelectedOptions(selectedOptions, "selectOption", selectedOption); | |
| 83 | - break; | |
| 84 | - } | |
| 85 | - case "createOption": { | |
| 86 | - const inputValue = changedOption; | |
| 87 | - const matchingOption = options.find((option) => option.label.toLocaleLowerCase() === inputValue.toLocaleLowerCase()); | |
| 88 | - if (matchingOption) { | |
| 89 | - selectedOptions.push(matchingOption); | |
| 90 | - updateSelectedOptions(selectedOptions, "selectOption", matchingOption); | |
| 91 | - } else return createOption?.(inputValue); | |
| 92 | - break; | |
| 93 | - } | |
| 94 | - } | |
| 95 | - setInputValue(""); | |
| 96 | - closeDropdown(); | |
| 97 | - }; | |
| 98 | - return handleChange; | |
| 99 | - function updateSelectedOptions(selectedOptions, reason, changedOption) { | |
| 100 | - onSelect?.(selectedOptions.map((option) => removeInternalKeys(option)), reason, removeInternalKeys(changedOption)); | |
| 101 | - } | |
| 102 | - } | |
| 103 | - | |
| 104 | -//#endregion | |
| 105 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-states.ts | |
| 106 | - function useInputState(validate) { | |
| 107 | - const [inputValue, setInputValue] = (0, react.useState)(""); | |
| 108 | - const [error, setError] = (0, react.useState)(null); | |
| 109 | - const handleInputChange = (event) => { | |
| 110 | - const { value } = event.target; | |
| 111 | - setInputValue(value); | |
| 112 | - if (!validate) return; | |
| 113 | - if (!value) { | |
| 114 | - setError(null); | |
| 115 | - return; | |
| 116 | - } | |
| 117 | - const { isValid, errorMessage } = validate(value, "inputChange"); | |
| 118 | - if (isValid) setError(null); | |
| 119 | - else setError(errorMessage); | |
| 120 | - }; | |
| 121 | - const handleInputBlur = () => { | |
| 122 | - setInputValue(""); | |
| 123 | - setError(null); | |
| 124 | - }; | |
| 125 | - return { | |
| 126 | - inputValue, | |
| 127 | - setInputValue, | |
| 128 | - error, | |
| 129 | - setError, | |
| 130 | - inputHandlers: { | |
| 131 | - onChange: handleInputChange, | |
| 132 | - onBlur: handleInputBlur | |
| 133 | - } | |
| 134 | - }; | |
| 135 | - } | |
| 136 | - function useOpenState(initialOpen = false) { | |
| 137 | - const [open, setOpen] = (0, react.useState)(initialOpen); | |
| 138 | - const openDropdown = () => setOpen(true); | |
| 139 | - const closeDropdown = () => setOpen(false); | |
| 140 | - return { | |
| 141 | - open, | |
| 142 | - openDropdown, | |
| 143 | - closeDropdown | |
| 144 | - }; | |
| 145 | - } | |
| 146 | - | |
| 147 | -//#endregion | |
| 148 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-create-option.ts | |
| 149 | - function useCreateOption(params) { | |
| 150 | - const { onCreate, validate, setInputValue, setError, closeDropdown } = params; | |
| 151 | - const [loading, setLoading] = (0, react.useState)(false); | |
| 152 | - if (!onCreate) return { | |
| 153 | - createOption: null, | |
| 154 | - loading: false | |
| 155 | - }; | |
| 156 | - const createOption = async (value) => { | |
| 157 | - setLoading(true); | |
| 158 | - if (validate) { | |
| 159 | - const { isValid, errorMessage } = validate(value, "create"); | |
| 160 | - if (!isValid) { | |
| 161 | - setError(errorMessage); | |
| 162 | - setLoading(false); | |
| 163 | - return; | |
| 164 | - } | |
| 165 | - } | |
| 166 | - try { | |
| 167 | - setInputValue(""); | |
| 168 | - closeDropdown(); | |
| 169 | - await onCreate(value); | |
| 170 | - } catch {} finally { | |
| 171 | - setLoading(false); | |
| 172 | - } | |
| 173 | - }; | |
| 174 | - return { | |
| 175 | - createOption, | |
| 176 | - loading | |
| 177 | - }; | |
| 178 | - } | |
| 179 | - | |
| 180 | -//#endregion | |
| 181 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-filter-options.ts | |
| 182 | - var STRIP_NON_CLASS_CHARS = /[^a-zA-Z0-9_-]/g; | |
| 183 | - function normalizeClassSearch(value) { | |
| 184 | - return value.replace(STRIP_NON_CLASS_CHARS, "").toLowerCase(); | |
| 185 | - } | |
| 186 | - function useFilterOptions(parameters) { | |
| 187 | - const { options, selected, onCreate, entityName } = parameters; | |
| 188 | - const filter = (0, _elementor_ui.createFilterOptions)({ matchFrom: "any" }); | |
| 189 | - const filterOptions = (optionList, params) => { | |
| 190 | - const selectedValues = selected.map((option) => option.value); | |
| 191 | - const filteredOptions = filter(optionList.filter((option) => !selectedValues.includes(option.value)), { | |
| 192 | - ...params, | |
| 193 | - inputValue: normalizeClassSearch(params.inputValue) | |
| 194 | - }); | |
| 195 | - const isExisting = options.some((option) => params.inputValue === option.label); | |
| 196 | - if (Boolean(onCreate) && params.inputValue !== "" && !selectedValues.includes(params.inputValue) && !isExisting) filteredOptions.unshift({ | |
| 197 | - label: `Create "${params.inputValue}"`, | |
| 198 | - value: params.inputValue, | |
| 199 | - _group: `Create a new ${entityName?.singular ?? "option"}`, | |
| 200 | - key: `create-${params.inputValue}`, | |
| 201 | - _action: "create" | |
| 202 | - }); | |
| 203 | - return filteredOptions; | |
| 204 | - }; | |
| 205 | - return filterOptions; | |
| 206 | - } | |
| 207 | - | |
| 208 | -//#endregion | |
| 209 | -//#region packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/creatable-autocomplete.tsx | |
| 210 | - var MIN_INPUT_LENGTH = 2; | |
| 211 | - var CreatableAutocomplete = react.forwardRef(CreatableAutocompleteInner); | |
| 212 | - function CreatableAutocompleteInner({ selected, options, entityName, onSelect, placeholder, onCreate, validate, renderEmptyState, ...props }, ref) { | |
| 213 | - const { inputValue, setInputValue, error, setError, inputHandlers } = useInputState(validate); | |
| 214 | - const { open, openDropdown, closeDropdown } = useOpenState(props.open); | |
| 215 | - const { createOption, loading } = useCreateOption({ | |
| 216 | - onCreate, | |
| 217 | - validate, | |
| 218 | - setInputValue, | |
| 219 | - setError, | |
| 220 | - closeDropdown | |
| 221 | - }); | |
| 222 | - const [internalOptions, internalSelected] = (0, react.useMemo)(() => [options, selected].map((optionsArr) => addGroupToOptions(optionsArr, entityName?.plural)), [ | |
| 223 | - options, | |
| 224 | - selected, | |
| 225 | - entityName?.plural | |
| 226 | - ]); | |
| 227 | - const handleChange = useAutocompleteChange({ | |
| 228 | - options: internalOptions, | |
| 229 | - onSelect, | |
| 230 | - createOption, | |
| 231 | - setInputValue, | |
| 232 | - closeDropdown | |
| 233 | - }); | |
| 234 | - const filterOptions = useFilterOptions({ | |
| 235 | - options, | |
| 236 | - selected, | |
| 237 | - onCreate, | |
| 238 | - entityName | |
| 239 | - }); | |
| 240 | - const freeSolo = Boolean(onCreate) || inputValue.length < MIN_INPUT_LENGTH || void 0; | |
| 241 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Autocomplete, { | |
| 242 | - renderTags: (tagValue, getTagProps) => { | |
| 243 | - return tagValue.map((option, index) => /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 244 | - size: "tiny", | |
| 245 | - ...getTagProps({ index }), | |
| 246 | - key: option.key ?? option.value ?? option.label, | |
| 247 | - label: option.label | |
| 248 | - })); | |
| 249 | - }, | |
| 250 | - ...props, | |
| 251 | - ref, | |
| 252 | - freeSolo, | |
| 253 | - forcePopupIcon: false, | |
| 254 | - multiple: true, | |
| 255 | - clearOnBlur: true, | |
| 256 | - selectOnFocus: true, | |
| 257 | - disableClearable: true, | |
| 258 | - handleHomeEndKeys: true, | |
| 259 | - disabled: loading, | |
| 260 | - open, | |
| 261 | - onOpen: openDropdown, | |
| 262 | - onClose: closeDropdown, | |
| 263 | - disableCloseOnSelect: true, | |
| 264 | - value: internalSelected, | |
| 265 | - options: internalOptions, | |
| 266 | - ListboxComponent: error ? react.forwardRef((_, errorTextRef) => /* @__PURE__ */ react.createElement(ErrorText, { | |
| 267 | - ref: errorTextRef, | |
| 268 | - error | |
| 269 | - })) : void 0, | |
| 270 | - renderGroup: (params) => /* @__PURE__ */ react.createElement(Group, { ...params }), | |
| 271 | - inputValue, | |
| 272 | - renderInput: (params) => { | |
| 273 | - return /* @__PURE__ */ react.createElement(_elementor_ui.TextField, { | |
| 274 | - ...params, | |
| 275 | - error: Boolean(error), | |
| 276 | - placeholder, | |
| 277 | - ...inputHandlers, | |
| 278 | - sx: (theme) => ({ ".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart": { | |
| 279 | - paddingLeft: theme.spacing(.25), | |
| 280 | - paddingRight: theme.spacing(.25) | |
| 281 | - } }) | |
| 282 | - }); | |
| 283 | - }, | |
| 284 | - onChange: handleChange, | |
| 285 | - getOptionLabel: (option) => typeof option === "string" ? option : option.label, | |
| 286 | - getOptionKey: (option) => { | |
| 287 | - if (typeof option === "string") return option; | |
| 288 | - return option.key ?? option.value ?? option.label; | |
| 289 | - }, | |
| 290 | - filterOptions, | |
| 291 | - groupBy: (option) => option._group ?? "", | |
| 292 | - renderOption: (optionProps, option) => { | |
| 293 | - const { _group, label } = option; | |
| 294 | - return /* @__PURE__ */ react.createElement("li", { | |
| 295 | - ...optionProps, | |
| 296 | - style: { | |
| 297 | - display: "block", | |
| 298 | - textOverflow: "ellipsis" | |
| 299 | - }, | |
| 300 | - "data-group": _group | |
| 301 | - }, label); | |
| 302 | - }, | |
| 303 | - noOptionsText: renderEmptyState?.({ | |
| 304 | - searchValue: inputValue, | |
| 305 | - onClear: () => { | |
| 306 | - setInputValue(""); | |
| 307 | - closeDropdown(); | |
| 308 | - } | |
| 309 | - }), | |
| 310 | - isOptionEqualToValue: (option, value) => { | |
| 311 | - if (typeof option === "string") return option === value; | |
| 312 | - return option.value === value.value; | |
| 313 | - } | |
| 314 | - }); | |
| 315 | - } | |
| 316 | - var Group = (params) => { | |
| 317 | - const id = `combobox-group-${(0, react.useId)().replace(/:/g, "_")}`; | |
| 318 | - return /* @__PURE__ */ react.createElement(StyledGroup, { | |
| 319 | - role: "group", | |
| 320 | - "aria-labelledby": id | |
| 321 | - }, /* @__PURE__ */ react.createElement(StyledGroupHeader, { id }, " ", params.group), /* @__PURE__ */ react.createElement(StyledGroupItems, { role: "listbox" }, params.children)); | |
| 322 | - }; | |
| 323 | - var ErrorText = react.forwardRef(({ error = "error" }, ref) => { | |
| 324 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 325 | - ref, | |
| 326 | - sx: (theme) => ({ padding: theme.spacing(2) }) | |
| 327 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 328 | - variant: "caption", | |
| 329 | - sx: { | |
| 330 | - color: "error.main", | |
| 331 | - display: "inline-block" | |
| 332 | - } | |
| 333 | - }, error)); | |
| 334 | - }); | |
| 335 | - var StyledGroup = (0, _elementor_ui.styled)("li")` | |
| 1 | +/*! For license information please see editor-editing-panel.js.LICENSE.txt */ | |
| 2 | +!function(){"use strict";var e={"./packages/packages/core/editor-editing-panel/src/apply-unapply-actions.ts":function(e,t,n){n.r(t),n.d(t,{doApplyClasses:function(){return doApplyClasses},doGetAppliedClasses:function(){return doGetAppliedClasses},doUnapplyClass:function(){return doUnapplyClass}});var r=n("@elementor/editor-documents"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-props");function doGetAppliedClasses(e,t="classes"){return(0,o.getElementSetting)(e,t)?.value||[]}function doApplyClasses(e,t,n="classes"){(0,o.updateElementSettings)({id:e,props:{[n]:s.classesPropTypeUtil.create(t)},withHistory:!1}),(0,r.setDocumentModifiedStatus)(!0)}function doUnapplyClass(e,t,n="classes"){const r=(0,o.getElementSetting)(e,n)?.value||[];if(!r.includes(t))return!1;return doApplyClasses(e,r.filter(e=>e!==t),n),!0}},"./packages/packages/core/editor-editing-panel/src/components/add-or-remove-content.tsx":function(e,t,n){n.r(t),n.d(t,{AddOrRemoveContent:function(){return AddOrRemoveContent}});var r=n("react"),o=n("@elementor/icons"),s=n("@elementor/ui"),a=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx");const i="tiny",AddOrRemoveContent=({isAdded:e,onAdd:t,onRemove:n,children:l,disabled:c,renderLabel:p})=>r.createElement(a.SectionContent,null,r.createElement(s.Stack,{direction:"row",sx:{justifyContent:"space-between",alignItems:"center",marginInlineEnd:-.75}},p(),e?r.createElement(s.IconButton,{size:i,onClick:n,"aria-label":"Remove",disabled:c},r.createElement(o.MinusIcon,{fontSize:i})):r.createElement(s.IconButton,{size:i,onClick:t,"aria-label":"Add",disabled:c},r.createElement(o.PlusIcon,{fontSize:i}))),r.createElement(s.Collapse,{in:e,unmountOnExit:!0},r.createElement(a.SectionContent,null,l)))},"./packages/packages/core/editor-editing-panel/src/components/control-label.tsx":function(e,t,n){n.r(t),n.d(t,{ControlLabel:function(){return ControlLabel}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/ui");const ControlLabel=({children:e})=>r.createElement(s.Stack,{direction:"row",alignItems:"center",justifyItems:"start",gap:.25},r.createElement(o.ControlFormLabel,null,e),r.createElement(o.ControlAdornments,null))},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts":function(e,t,n){function addGroupToOptions(e,t){return e.map(e=>({...e,_group:`Existing ${t??"options"}`}))}function removeInternalKeys(e){const{_group:t,_action:n,...r}=e;return r}n.r(t),n.d(t,{addGroupToOptions:function(){return addGroupToOptions},removeInternalKeys:function(){return removeInternalKeys}})},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/creatable-autocomplete.tsx":function(e,t,n){n.r(t),n.d(t,{CreatableAutocomplete:function(){return p}});var r=n("react"),o=n("@elementor/ui"),s=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts"),a=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-change.ts"),i=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-states.ts"),l=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-create-option.ts"),c=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-filter-options.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const p=r.forwardRef(CreatableAutocompleteInner);function CreatableAutocompleteInner({selected:e,options:t,entityName:n,onSelect:p,placeholder:u,onCreate:m,validate:g,renderEmptyState:y,...f},k){const{inputValue:b,setInputValue:v,error:x,setError:E,inputHandlers:h}=(0,i.useInputState)(g),{open:_,openDropdown:S,closeDropdown:C}=(0,i.useOpenState)(f.open),{createOption:w,loading:T}=(0,l.useCreateOption)({onCreate:m,validate:g,setInputValue:v,setError:E,closeDropdown:C}),[I,P]=(0,r.useMemo)(()=>[t,e].map(e=>(0,s.addGroupToOptions)(e,n?.plural)),[t,e,n?.plural]),D=(0,a.useAutocompleteChange)({options:I,onSelect:p,createOption:w,setInputValue:v,closeDropdown:C}),F=(0,c.useFilterOptions)({options:t,selected:e,onCreate:m,entityName:n}),R=Boolean(m)||b.length<2||void 0;return r.createElement(o.Autocomplete,_extends({renderTags:(e,t)=>e.map((e,n)=>r.createElement(o.Chip,_extends({size:"tiny"},t({index:n}),{key:e.key??e.value??e.label,label:e.label})))},f,{ref:k,freeSolo:R,forcePopupIcon:!1,multiple:!0,clearOnBlur:!0,selectOnFocus:!0,disableClearable:!0,handleHomeEndKeys:!0,disabled:T,open:_,onOpen:S,onClose:C,disableCloseOnSelect:!0,value:P,options:I,ListboxComponent:x?r.forwardRef((e,t)=>r.createElement(d,{ref:t,error:x})):void 0,renderGroup:e=>r.createElement(Group,e),inputValue:b,renderInput:e=>r.createElement(o.TextField,_extends({},e,{error:Boolean(x),placeholder:u},h,{sx:e=>({".MuiAutocomplete-inputRoot.MuiInputBase-adornedStart":{paddingLeft:e.spacing(.25),paddingRight:e.spacing(.25)}})})),onChange:D,getOptionLabel:e=>"string"==typeof e?e:e.label,getOptionKey:e=>"string"==typeof e?e:e.key??e.value??e.label,filterOptions:F,groupBy:e=>e._group??"",renderOption:(e,t)=>{const{_group:n,label:o}=t;return r.createElement("li",_extends({},e,{style:{display:"block",textOverflow:"ellipsis"},"data-group":n}),o)},noOptionsText:y?.({searchValue:b,onClear:()=>{v(""),C()}}),isOptionEqualToValue:(e,t)=>"string"==typeof e?e===t:e.value===t.value}))}const Group=e=>{const t=`combobox-group-${(0,r.useId)().replace(/:/g,"_")}`;return r.createElement(u,{role:"group","aria-labelledby":t},r.createElement(m,{id:t}," ",e.group),r.createElement(g,{role:"listbox"},e.children))},d=r.forwardRef(({error:e="error"},t)=>r.createElement(o.Box,{ref:t,sx:e=>({padding:e.spacing(2)})},r.createElement(o.Typography,{variant:"caption",sx:{color:"error.main",display:"inline-block"}},e))),u=(0,o.styled)("li")` | |
| 336 | 3 | &:not( :last-of-type ) { |
| 337 | - border-bottom: 1px solid ${({ theme }) => theme.palette.divider}; | |
| 4 | + border-bottom: 1px solid ${({theme:e})=>e.palette.divider}; | |
| 338 | 5 | } |
| 339 | -`; | |
| 340 | - var StyledGroupHeader = (0, _elementor_ui.styled)(_elementor_ui.Box)(({ theme }) => ({ | |
| 341 | - position: "sticky", | |
| 342 | - top: "-8px", | |
| 343 | - padding: theme.spacing(1, 2), | |
| 344 | - color: theme.palette.text.tertiary, | |
| 345 | - backgroundColor: theme.palette.primary.contrastText | |
| 346 | - })); | |
| 347 | - var StyledGroupItems = (0, _elementor_ui.styled)("ul")` | |
| 6 | +`,m=(0,o.styled)(o.Box)(({theme:e})=>({position:"sticky",top:"-8px",padding:e.spacing(1,2),color:e.palette.text.tertiary,backgroundColor:e.palette.primary.contrastText})),g=(0,o.styled)("ul")` | |
| 348 | 7 | padding: 0; |
| 349 | -`; | |
| 350 | - | |
| 351 | -//#endregion | |
| 352 | -//#region packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx | |
| 353 | - var Context$3 = (0, react.createContext)(null); | |
| 354 | - function ClassesPropProvider({ children, prop }) { | |
| 355 | - return /* @__PURE__ */ react.createElement(Context$3.Provider, { value: { prop } }, children); | |
| 356 | - } | |
| 357 | - function useClassesProp() { | |
| 358 | - const context = (0, react.useContext)(Context$3); | |
| 359 | - if (!context) throw new Error("useClassesProp must be used within a ClassesPropProvider"); | |
| 360 | - return context.prop; | |
| 361 | - } | |
| 362 | - | |
| 363 | -//#endregion | |
| 364 | -//#region packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx | |
| 365 | - var Context$2 = (0, react.createContext)(null); | |
| 366 | - function ElementProvider({ children, element, elementType, settings }) { | |
| 367 | - return /* @__PURE__ */ react.createElement(Context$2.Provider, { value: { | |
| 368 | - element, | |
| 369 | - elementType, | |
| 370 | - settings | |
| 371 | - } }, children); | |
| 372 | - } | |
| 373 | - function useElement() { | |
| 374 | - const context = (0, react.useContext)(Context$2); | |
| 375 | - if (!context) throw new Error("useElement must be used within a ElementProvider"); | |
| 376 | - return context; | |
| 377 | - } | |
| 378 | - function usePanelElementSetting(propKey) { | |
| 379 | - const context = (0, react.useContext)(Context$2); | |
| 380 | - if (!context) throw new Error("usePanelElementSetting must be used within a ElementProvider"); | |
| 381 | - return context.settings[propKey] ?? null; | |
| 382 | - } | |
| 383 | - | |
| 384 | -//#endregion | |
| 385 | -//#region packages/packages/core/editor-editing-panel/src/errors.ts | |
| 386 | - var ControlTypeNotFoundError = (0, _elementor_utils.createError)({ | |
| 387 | - code: "control_type_not_found", | |
| 388 | - message: "Control type not found." | |
| 389 | - }); | |
| 390 | - var ControlTypeAlreadyRegisteredError = (0, _elementor_utils.createError)({ | |
| 391 | - code: "control_type_already_registered", | |
| 392 | - message: "Control type is already registered." | |
| 393 | - }); | |
| 394 | - var ControlTypeNotRegisteredError = (0, _elementor_utils.createError)({ | |
| 395 | - code: "control_type_not_registered", | |
| 396 | - message: "Control type is not registered." | |
| 397 | - }); | |
| 398 | - var StylesProviderNotFoundError = (0, _elementor_utils.createError)({ | |
| 399 | - code: "provider_not_found", | |
| 400 | - message: "Styles provider not found." | |
| 401 | - }); | |
| 402 | - var StylesProviderCannotUpdatePropsError = (0, _elementor_utils.createError)({ | |
| 403 | - code: "provider_cannot_update_props", | |
| 404 | - message: "Styles provider doesn't support updating props." | |
| 405 | - }); | |
| 406 | - var StyleNotFoundUnderProviderError = (0, _elementor_utils.createError)({ | |
| 407 | - code: "style_not_found_under_provider", | |
| 408 | - message: "Style not found under the provider." | |
| 409 | - }); | |
| 410 | - | |
| 411 | -//#endregion | |
| 412 | -//#region packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx | |
| 413 | - var Context$1 = (0, react.createContext)(null); | |
| 414 | - function StyleProvider({ children, ...props }) { | |
| 415 | - const provider = props.id === null ? null : getProviderByStyleId(props.id); | |
| 416 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 417 | - if (props.id && !provider) throw new StylesProviderNotFoundError({ context: { styleId: props.id } }); | |
| 418 | - const canEdit = userCan(provider?.getKey() ?? "").updateProps; | |
| 419 | - return /* @__PURE__ */ react.createElement(Context$1.Provider, { value: { | |
| 420 | - ...props, | |
| 421 | - provider, | |
| 422 | - canEdit | |
| 423 | - } }, children); | |
| 424 | - } | |
| 425 | - function useStyle() { | |
| 426 | - const context = (0, react.useContext)(Context$1); | |
| 427 | - if (!context) throw new Error("useStyle must be used within a StyleProvider"); | |
| 428 | - return context; | |
| 429 | - } | |
| 430 | - function getProviderByStyleId(styleId) { | |
| 431 | - return _elementor_editor_styles_repository.stylesRepository.getProviders().find((provider) => { | |
| 432 | - return provider.actions.all().find((style) => style.id === styleId); | |
| 433 | - }) ?? null; | |
| 434 | - } | |
| 435 | - function useIsStyle() { | |
| 436 | - return !!(0, react.useContext)(Context$1); | |
| 437 | - } | |
| 438 | - | |
| 439 | -//#endregion | |
| 440 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/consts.ts | |
| 441 | - var PENDING_CLASS_RENAME_SESSION_KEY = "pending-class-rename-id"; | |
| 442 | - | |
| 443 | -//#endregion | |
| 444 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-convert-local.tsx | |
| 445 | - var { Slot: CssClassConvertSlot, inject: injectIntoCssClassConvert } = (0, _elementor_locations.createLocation)(); | |
| 446 | - var CssClassConvert = (props) => { | |
| 447 | - const { element } = useElement(); | |
| 448 | - const elementId = element.id; | |
| 449 | - const currentClassesProp = useClassesProp(); | |
| 450 | - const { setId: setActiveId } = useStyle(); | |
| 451 | - const [, saveValue] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app"); | |
| 452 | - const successCallback = (newId) => { | |
| 453 | - if (!props.styleDef) throw new Error("Style definition is required for converting local class to global class."); | |
| 454 | - onConvert({ | |
| 455 | - newId, | |
| 456 | - elementId, | |
| 457 | - classesProp: currentClassesProp, | |
| 458 | - styleDef: props.styleDef | |
| 459 | - }); | |
| 460 | - saveValue(newId); | |
| 461 | - setActiveId(newId); | |
| 462 | - props.closeMenu(); | |
| 463 | - }; | |
| 464 | - return /* @__PURE__ */ react.createElement(CssClassConvertSlot, { | |
| 465 | - canConvert: !!props.canConvert, | |
| 466 | - styleDef: props.styleDef, | |
| 467 | - successCallback | |
| 468 | - }); | |
| 469 | - }; | |
| 470 | - var onConvert = (opts) => { | |
| 471 | - const { newId, elementId, classesProp } = opts; | |
| 472 | - (0, _elementor_editor_elements.deleteElementStyle)(elementId, opts.styleDef.id); | |
| 473 | - const currentUsedClasses = (0, _elementor_editor_elements.getElementSetting)(elementId, classesProp) || { value: [] }; | |
| 474 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 475 | - id: elementId, | |
| 476 | - props: { [classesProp]: _elementor_editor_props.classesPropTypeUtil.create([newId, ...currentUsedClasses.value]) }, | |
| 477 | - withHistory: false | |
| 478 | - }); | |
| 479 | - }; | |
| 480 | - | |
| 481 | -//#endregion | |
| 482 | -//#region packages/packages/core/editor-editing-panel/src/components/control-label.tsx | |
| 483 | - var ControlLabel = ({ children, infoTooltip }) => { | |
| 484 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 485 | - direction: "row", | |
| 486 | - alignItems: "center", | |
| 487 | - justifyItems: "start", | |
| 488 | - gap: .25 | |
| 489 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, children), infoTooltip && /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 490 | - title: infoTooltip, | |
| 491 | - placement: "top" | |
| 492 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleIcon, { fontSize: "tiny" })), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornments, null)); | |
| 493 | - }; | |
| 494 | - | |
| 495 | -//#endregion | |
| 496 | -//#region packages/packages/core/editor-editing-panel/src/provider-colors-registry.ts | |
| 497 | - var DEFAULT_COLORS = { | |
| 498 | - name: "default", | |
| 499 | - getThemeColor: null | |
| 500 | - }; | |
| 501 | - var providerColorsRegistry = /* @__PURE__ */ new Map(); | |
| 502 | - var registerStyleProviderToColors = (provider, colors) => { | |
| 503 | - providerColorsRegistry.set(provider, colors); | |
| 504 | - }; | |
| 505 | - var getStyleProviderColors = (provider) => providerColorsRegistry.get(provider) ?? DEFAULT_COLORS; | |
| 506 | - | |
| 507 | -//#endregion | |
| 508 | -//#region packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts | |
| 509 | - var getStylesProviderColorName = (provider) => { | |
| 510 | - if (!provider || provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return "default"; | |
| 511 | - if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return "accent"; | |
| 512 | - return getStyleProviderColors(provider).name; | |
| 513 | - }; | |
| 514 | - var getStylesProviderThemeColor = (provider) => { | |
| 515 | - if (!provider || provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return null; | |
| 516 | - if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return (theme) => theme.palette.accent.main; | |
| 517 | - return getStyleProviderColors(provider).getThemeColor; | |
| 518 | - }; | |
| 519 | - function getTempStylesProviderThemeColor(provider) { | |
| 520 | - if ((0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider)) return (theme) => theme.palette.primary.main; | |
| 521 | - return getStylesProviderThemeColor(provider); | |
| 522 | - } | |
| 523 | - | |
| 524 | -//#endregion | |
| 525 | -//#region packages/packages/core/editor-editing-panel/src/utils/tracking/subscribe.ts | |
| 526 | - var trackStyles = (provider, event, data) => { | |
| 527 | - _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider)?.actions.tracking?.({ | |
| 528 | - event, | |
| 529 | - ...data | |
| 530 | - }); | |
| 531 | - }; | |
| 532 | - | |
| 533 | -//#endregion | |
| 534 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-context.tsx | |
| 535 | - var CssClassContext = (0, react.createContext)(null); | |
| 536 | - var useCssClass = () => { | |
| 537 | - const context = (0, react.useContext)(CssClassContext); | |
| 538 | - if (!context) throw new Error("useCssClass must be used within a CssClassProvider"); | |
| 539 | - return context; | |
| 540 | - }; | |
| 541 | - function CssClassProvider({ children, ...contextValue }) { | |
| 542 | - return /* @__PURE__ */ react.createElement(CssClassContext.Provider, { value: contextValue }, children); | |
| 543 | - } | |
| 544 | - | |
| 545 | -//#endregion | |
| 546 | -//#region packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx | |
| 547 | - var StyleIndicator = (0, _elementor_ui.styled)("div", { shouldForwardProp: (prop) => !["isOverridden", "getColor"].includes(prop) })` | |
| 8 | +`},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/index.ts":function(e,t,n){n.r(t),n.d(t,{CreatableAutocomplete:function(){return r.CreatableAutocomplete}});var r=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/creatable-autocomplete.tsx")},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-change.ts":function(e,t,n){n.r(t),n.d(t,{useAutocompleteChange:function(){return useAutocompleteChange}});var r=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/autocomplete-option-internal-properties.ts");function useAutocompleteChange(e){const{options:t,onSelect:n,createOption:o,setInputValue:s,closeDropdown:a}=e;if(!n&&!o)return;return async(e,n,r,i)=>{const l=i?.option;if(!l||"object"==typeof l&&l.fixed)return;const c=n.filter(e=>"string"!=typeof e);switch(r){case"removeOption":updateSelectedOptions(c,"removeOption",l);break;case"selectOption":{const e=l;if("create"===e._action){const t=e.value;return o?.(t)}updateSelectedOptions(c,"selectOption",e);break}case"createOption":{const e=l,n=t.find(t=>t.label.toLocaleLowerCase()===e.toLocaleLowerCase());if(!n)return o?.(e);c.push(n),updateSelectedOptions(c,"selectOption",n);break}}s(""),a()};function updateSelectedOptions(e,t,o){n?.(e.map(e=>(0,r.removeInternalKeys)(e)),t,(0,r.removeInternalKeys)(o))}}},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-autocomplete-states.ts":function(e,t,n){n.r(t),n.d(t,{useInputState:function(){return useInputState},useOpenState:function(){return useOpenState}});var r=n("react");function useInputState(e){const[t,n]=(0,r.useState)(""),[o,s]=(0,r.useState)(null);return{inputValue:t,setInputValue:n,error:o,setError:s,inputHandlers:{onChange:t=>{const{value:r}=t.target;if(n(r),!e)return;if(!r)return void s(null);const{isValid:o,errorMessage:a}=e(r,"inputChange");s(o?null:a)},onBlur:()=>{n(""),s(null)}}}}function useOpenState(e=!1){const[t,n]=(0,r.useState)(e);return{open:t,openDropdown:()=>n(!0),closeDropdown:()=>n(!1)}}},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-create-option.ts":function(e,t,n){n.r(t),n.d(t,{useCreateOption:function(){return useCreateOption}});var r=n("react");function useCreateOption(e){const{onCreate:t,validate:n,setInputValue:o,setError:s,closeDropdown:a}=e,[i,l]=(0,r.useState)(!1);if(!t)return{createOption:null,loading:!1};return{createOption:async e=>{if(l(!0),n){const{isValid:t,errorMessage:r}=n(e,"create");if(!t)return s(r),void l(!1)}try{o(""),a(),await t(e)}catch{}finally{l(!1)}},loading:i}}},"./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/use-filter-options.ts":function(e,t,n){n.r(t),n.d(t,{useFilterOptions:function(){return useFilterOptions}});var r=n("@elementor/ui");function useFilterOptions(e){const{options:t,selected:n,onCreate:o,entityName:s}=e,a=(0,r.createFilterOptions)();return(e,r)=>{const i=n.map(e=>e.value),l=a(e.filter(e=>!i.includes(e.value)),r),c=t.some(e=>r.inputValue===e.label);return Boolean(o)&&""!==r.inputValue&&!i.includes(r.inputValue)&&!c&&l.unshift({label:`Create "${r.inputValue}"`,value:r.inputValue,_group:`Create a new ${s?.singular??"option"}`,key:`create-${r.inputValue}`,_action:"create"}),l}}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-context.tsx":function(e,t,n){n.r(t),n.d(t,{CssClassProvider:function(){return CssClassProvider},useCssClass:function(){return useCssClass}});var r=n("react");const o=(0,r.createContext)(null),useCssClass=()=>{const e=(0,r.useContext)(o);if(!e)throw new Error("useCssClass must be used within a CssClassProvider");return e};function CssClassProvider({children:e,...t}){return r.createElement(o.Provider,{value:t},e)}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-convert-local.tsx":function(e,t,n){n.r(t),n.d(t,{CssClassConvert:function(){return CssClassConvert},CssClassConvertSlot:function(){return d},injectIntoCssClassConvert:function(){return u}});var r=n("react"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-props"),a=n("@elementor/locations"),i=n("@elementor/session"),l=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx");const{Slot:d,inject:u}=(0,a.createLocation)(),CssClassConvert=e=>{const{element:t}=(0,c.useElement)(),n=t.id,o=(0,l.useClassesProp)(),{setId:s}=(0,p.useStyle)(),[,a]=(0,i.useSessionStorage)("last-converted-class-generated-name","app");return r.createElement(d,{canConvert:!!e.canConvert,styleDef:e.styleDef,successCallback:t=>{if(!e.styleDef)throw new Error("Style definition is required for converting local class to global class.");onConvert({newId:t,elementId:n,classesProp:o,styleDef:e.styleDef}),a(t),s(t),e.closeMenu()}})},onConvert=e=>{const{newId:t,elementId:n,classesProp:r}=e;(0,o.deleteElementStyle)(n,e.styleDef.id);const a=(0,o.getElementSetting)(n,r)||{value:[]};(0,o.updateElementSettings)({id:n,props:{[r]:s.classesPropTypeUtil.create([t,...a.value])},withHistory:!1})}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-item.tsx":function(e,t,n){n.r(t),n.d(t,{CssClassItem:function(){return CssClassItem}});var r=n("react"),o=n("@elementor/editor-styles"),s=n("@elementor/editor-styles-repository"),a=n("@elementor/editor-ui"),i=n("@elementor/icons"),l=n("@elementor/session"),c=n("@elementor/ui"),p=n("@wordpress/i18n"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-context.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-menu.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const g="tiny";function CssClassItem(e){const{chipProps:t,icon:n,color:y,fixed:f,...k}=e,{id:b,provider:v,label:x,isActive:E,onClickActive:h,renameLabel:_,setError:S}=k,{elementStates:C}=(0,m.useElementStates)(),{meta:w,setMetaState:T}=(0,d.useStyle)(),I=(0,c.usePopupState)({variant:"popover"}),[P,D]=(0,r.useState)(null),{onDelete:F,...R}=t,{userCan:L}=(0,s.useUserStylesCapability)(),[z,,A]=(0,l.useSessionStorage)("last-converted-class-generated-name","app"),{ref:O,isEditing:B,openEditMode:V,error:M,getProps:U}=(0,a.useEditable)({value:x,onSubmit:_,validation:validateLabel,onError:S}),N=M?"error":y,j=v?s.stylesRepository.getProviderByKey(v)?.actions:null,$=Boolean(j?.update)&&L(v??"")?.update,W=E&&w.state,G=(0,r.useMemo)(()=>w.state&&(0,o.isClassState)(w.state)?C.find(e=>e.value===w.state)?.label:w.state,[w.state,C]);return(0,r.useEffect)(()=>{z&&b===z&&(A(),V())},[b,z]),r.createElement(c.ThemeProvider,{palette:"default"},r.createElement(c.UnstableChipGroup,_extends({ref:D},R,{"aria-label":`Edit ${x}`,role:"group",sx:e=>({"&.MuiChipGroup-root.MuiAutocomplete-tag":{margin:e.spacing(.125)}})}),r.createElement(c.Chip,{size:g,label:B?r.createElement(a.EditableField,_extends({ref:O},U())):r.createElement(a.EllipsisWithTooltip,{maxWidth:"10ch",title:x,as:"div"}),variant:!E||w.state||B?"standard":"filled",shape:"rounded",icon:n,color:N,onClick:()=>{W?T(null):$&&E?V():h(b)},"aria-pressed":E,sx:e=>({lineHeight:1,cursor:E&&$&&!W?"text":"pointer",borderRadius:.75*e.shape.borderRadius+"px","&.Mui-focusVisible":{boxShadow:"none !important"}})}),!B&&r.createElement(c.Chip,_extends({icon:W?void 0:r.createElement(i.DotsVerticalIcon,{fontSize:"tiny"}),size:g,label:W?r.createElement(c.Stack,{direction:"row",gap:.5,alignItems:"center"},r.createElement(c.Typography,{variant:"inherit"},G),r.createElement(i.DotsVerticalIcon,{fontSize:"tiny"})):void 0,variant:"filled",shape:"rounded",color:N},(0,c.bindTrigger)(I),{"aria-label":(0,p.__)("Open CSS Class Menu","elementor"),sx:e=>({borderRadius:.75*e.shape.borderRadius+"px",paddingRight:0,...W?{}:{paddingLeft:0},".MuiChip-label":W?{paddingRight:0}:{padding:0}})}))),r.createElement(u.CssClassProvider,_extends({},k,{handleRename:V}),r.createElement(m.CssClassMenu,{popupState:I,anchorEl:P,fixed:f})))}const validateLabel=e=>{const t=(0,s.validateStyleLabel)(e,"rename");return t.isValid?null:t.errorMessage}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-menu.tsx":function(e,t,n){n.r(t),n.d(t,{CssClassMenu:function(){return CssClassMenu},useElementStates:function(){return useElementStates}});var r=n("react"),o=n("@elementor/editor-styles-repository"),s=n("@elementor/editor-ui"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts"),d=n("./packages/packages/core/editor-editing-panel/src/utils/tracking/subscribe.ts"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-context.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/local-class-sub-menu.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/use-apply-and-unapply-class.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const f=[{key:"normal",value:null,label:(0,i.__)("normal","elementor")},{key:"hover",value:"hover",label:(0,i.__)("hover","elementor")},{key:"focus",value:"focus",label:(0,i.__)("focus","elementor")},{key:"active",value:"active",label:(0,i.__)("active","elementor")}];function CssClassMenu({popupState:e,anchorEl:t,fixed:n}){const{provider:s}=(0,m.useCssClass)(),c=!s||(0,o.isElementsStylesProvider)(s),p=function usePseudoStates(){const{elementType:e}=(0,l.useElement)(),{pseudoStates:t=[]}=e,n=t.map(({name:e,value:t})=>({key:t,value:t,label:e}));return[...f,...n]}();return r.createElement(a.Menu,_extends({MenuListProps:{dense:!0,sx:{minWidth:"160px"}}},(0,a.bindMenu)(e),{anchorEl:t,anchorOrigin:{vertical:"bottom",horizontal:"left"},transformOrigin:{horizontal:"left",vertical:-4},onKeyDown:e=>{e.stopPropagation()},disableAutoFocusItem:!0}),c&&r.createElement(g.LocalClassSubMenu,{popupState:e}),function getMenuItemsByProvider({provider:e,closeMenu:t,fixed:n}){if(!e)return[];const s=o.stylesRepository.getProviderByKey(e),i=s?.actions,l=i?.update,c=!n,p=[l&&r.createElement(RenameClassMenuItem,{key:"rename-class",closeMenu:t}),c&&r.createElement(UnapplyClassMenuItem,{key:"unapply-class",closeMenu:t})].filter(Boolean);p.length&&(p.unshift(r.createElement(a.MenuSubheader,{key:"provider-label",sx:{typography:"caption",color:"text.secondary",pb:.5,pt:1,textTransform:"capitalize"}},s?.labels?.singular)),p.push(r.createElement(a.Divider,{key:"provider-actions-divider"})));return p}({provider:s,closeMenu:e.close,fixed:n}),r.createElement(a.MenuSubheader,{sx:{typography:"caption",color:"text.secondary",pb:.5,pt:1}},(0,i.__)("States","elementor")),p.map(t=>r.createElement(StateMenuItem,{key:t.key,state:t.value,label:t.label,closeMenu:e.close})),r.createElement(ClassStatesMenu,{closeMenu:e.close}))}function ClassStatesMenu({closeMenu:e}){const{elementStates:t,elementTitle:n}=useElementStates();if(!t.length)return null;const o=(0,i.__)("%s States","elementor").replace("%s",n);return r.createElement(r.Fragment,null,r.createElement(a.Divider,null),r.createElement(a.MenuSubheader,{sx:{typography:"caption",color:"text.secondary",pb:.5,pt:1}},o),t.map(t=>r.createElement(StateMenuItem,{key:t.key,state:t.value,label:t.label,closeMenu:e})))}const k={selected:{label:(0,i.__)("selected","elementor")}};function useElementStates(){const{elementType:e}=(0,l.useElement)(),{styleStates:t=[]}=e;return{elementStates:t.map(({value:e,name:t})=>({key:e,value:e,label:k[e]?.label??t})),elementTitle:e.title}}function StateMenuItem({state:e,label:t,closeMenu:n,...l}){const{id:g,provider:y}=(0,m.useCssClass)(),{id:f,setId:k,setMetaState:b,meta:v}=(0,c.useStyle)(),{state:x}=v,{userCan:E}=(0,o.useUserStylesCapability)(),h=function useModifiedStates(e){const{meta:t}=(0,c.useStyle)(),n=o.stylesRepository.all().find(t=>t.id===e);return Object.fromEntries(n?.variants.filter(e=>t.breakpoint===e.meta.breakpoint).map(e=>[e.meta.state??"normal",!0])??[])}(g),_=!e||E(y??"").updateProps,S=h[e??"normal"]??!1,C=!_&&!S,w=g===f,T=e===x&&w;return r.createElement(s.MenuListItem,_extends({},l,{selected:T,disabled:C,sx:{textTransform:"capitalize"},onClick:()=>{w||k(g),(0,d.trackStyles)(y??"","classStateClicked",{classId:g,type:t,source:g?"global":"local"}),b(e),n()}}),r.createElement(s.MenuItemInfotip,{showInfoTip:C,content:(0,i.__)("With your current role, you can only use existing states.","elementor")},r.createElement(a.Stack,{gap:.75,direction:"row",alignItems:"center"},S&&r.createElement(u.StyleIndicator,{"aria-label":(0,i.__)("Has style","elementor"),getColor:(0,p.getTempStylesProviderThemeColor)(y??"")}),t)))}function UnapplyClassMenuItem({closeMenu:e,...t}){const{id:n,label:o,provider:a}=(0,m.useCssClass)(),l=(0,y.useUnapplyClass)();return n?r.createElement(s.MenuListItem,_extends({},t,{onClick:()=>{l({classId:n,classLabel:o}),(0,d.trackStyles)(a??"","classRemoved",{classId:n,classTitle:o,source:"style-tab"}),e()}}),(0,i.__)("Remove","elementor")):null}function RenameClassMenuItem({closeMenu:e}){const{handleRename:t,provider:n}=(0,m.useCssClass)(),{userCan:a}=(0,o.useUserStylesCapability)();if(!n)return null;const l=a(n).update;return r.createElement(s.MenuListItem,{disabled:!l,onClick:()=>{e(),t()}},r.createElement(s.MenuItemInfotip,{showInfoTip:!l,content:(0,i.__)("With your current role, you can use existing classes but can’t modify them.","elementor")},(0,i.__)("Rename","elementor")))}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-selector.tsx":function(e,t,n){n.r(t),n.d(t,{ClassSelectorActionsSlot:function(){return E},CssClassSelector:function(){return CssClassSelector},injectIntoClassSelectorActions:function(){return h}});var r=n("react"),o=n("@elementor/editor-styles-repository"),s=n("@elementor/editor-ui"),a=n("@elementor/icons"),i=n("@elementor/locations"),l=n("@elementor/ui"),c=n("@wordpress/i18n"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts"),g=n("./packages/packages/core/editor-editing-panel/src/utils/tracking/subscribe.ts"),y=n("./packages/packages/core/editor-editing-panel/src/components/creatable-autocomplete/index.ts"),f=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-item.tsx"),k=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/use-apply-and-unapply-class.ts");const b="elementor-css-class-selector",v=50,x={label:(0,c.__)("local","elementor"),value:null,fixed:!0,color:getTempStylesProviderColorName("accent"),icon:r.createElement(a.MapPinIcon,null),provider:null},{Slot:E,inject:h}=(0,i.createLocation)();function CssClassSelector(){const e=function useOptions(){const{element:e}=(0,d.useElement)(),isProviderEditable=e=>!!e.actions.updateProps;return(0,o.useProviders)().filter(isProviderEditable).flatMap(t=>{const n=(0,o.isElementsStylesProvider)(t.getKey()),s=t.actions.all({elementId:e.id});return n&&0===s.length?[x]:s.map(e=>({label:e.label,value:e.id,fixed:n,color:getTempStylesProviderColorName((0,m.getStylesProviderColorName)(t.getKey())),icon:n?r.createElement(a.MapPinIcon,null):null,provider:t.getKey()}))})}(),{id:t,setId:n}=(0,u.useStyle)(),i=(0,r.useRef)(null),[h,_]=(0,r.useState)(null),S=function useHandleSelect(){const e=(0,k.useApplyClass)(),t=(0,k.useUnapplyClass)();return(n,r,o)=>{if(o.value)switch(r){case"selectOption":e({classId:o.value,classLabel:o.label}),(0,g.trackStyles)(o.provider??"","classApplied",{classId:o.value,source:"style-tab"});break;case"removeOption":t({classId:o.value,classLabel:o.label}),(0,g.trackStyles)(o.provider??"","classRemoved",{classId:o.value,source:"style-tab"})}}}(),{create:C,validate:w,entityName:T}=function useCreateAction(){const[e,t]=(0,k.useCreateAndApplyClass)();if(!e||!t)return{};const create=n=>{const{createdId:r}=t({classLabel:n});(0,g.trackStyles)(e.getKey()??"","classCreated",{source:"created",classTitle:n,classId:r})},validate=(t,n)=>function hasReachedLimit(e){return e.actions.all().length>=e.limit}(e)?{isValid:!1,errorMessage:(0,c.__)("You’ve reached the limit of %s classes. Please remove an existing one to create a new class.","elementor").replace("%s",e.limit.toString())}:(0,o.validateStyleLabel)(t,n),n=e.labels.singular&&e.labels.plural?e.labels:void 0;return{create:create,validate:validate,entityName:n}}(),I=function useAppliedOptions(e){const t=(0,p.useClassesProp)(),n=(0,d.usePanelElementSetting)(t)?.value??[],r=e.filter(e=>e.value&&n.includes(e.value)),s=r.some(e=>e.provider&&(0,o.isElementsStylesProvider)(e.provider));s||r.unshift(x);return r}(e),P=I.find(e=>e.value===t)??x,D=I.every(({fixed:e})=>e),{userCan:F}=(0,o.useUserStylesCapability)(),R=!P.provider||F(P.provider).updateProps;return r.createElement(l.Stack,{p:2},r.createElement(l.Stack,{direction:"row",gap:1,alignItems:"center",justifyContent:"space-between"},r.createElement(l.FormLabel,{htmlFor:b,size:"small"},(0,c.__)("Classes","elementor")),r.createElement(l.Stack,{direction:"row",gap:1},r.createElement(E,null))),r.createElement(s.WarningInfotip,{open:Boolean(h),text:h??"",placement:"bottom",width:i.current?.getBoundingClientRect().width,offset:[0,-15]},r.createElement(y.CreatableAutocomplete,{id:b,ref:i,size:"tiny",placeholder:D?(0,c.__)("Type class name","elementor"):void 0,options:e,selected:I,entityName:T,onSelect:S,onCreate:C??void 0,validate:w??void 0,limitTags:v,renderEmptyState:EmptyState,getLimitTagsText:e=>r.createElement(l.Chip,{size:"tiny",variant:"standard",label:`+${e}`,clickable:!0}),renderTags:(e,t)=>e.map((e,o)=>{const s=t({index:o}),a=e.value===P?.value;return r.createElement(f.CssClassItem,{key:s.key,fixed:e.fixed,label:e.label,provider:e.provider,id:e.value,isActive:a,color:a&&e.color?e.color:"default",icon:e.icon,chipProps:s,onClickActive:()=>n(e.value),renameLabel:t=>{if(!e.value)throw new Error("Cannot rename a class without style id");return(0,g.trackStyles)(e.provider??"","classRenamed",{classId:e.value,newValue:t,oldValue:e.label,source:"style-tab"}),updateClassByProvider(e.provider,{label:t,id:e.value})},setError:_})})})),!R&&r.createElement(s.InfoAlert,{sx:{mt:1}},(0,c.__)("With your current role, you can use existing classes but can’t modify them.","elementor")))}const EmptyState=({searchValue:e,onClear:t})=>r.createElement(l.Box,{sx:{py:4}},r.createElement(l.Stack,{gap:1,alignItems:"center",color:"text.secondary",justifyContent:"center",sx:{px:2,m:"auto",maxWidth:"236px"}},r.createElement(a.ColorSwatchIcon,{sx:{transform:"rotate(90deg)"},fontSize:"large"}),r.createElement(l.Typography,{align:"center",variant:"subtitle2"},(0,c.__)("Sorry, nothing matched","elementor"),r.createElement("br",null),"“",e,"”."),r.createElement(l.Typography,{align:"center",variant:"caption",sx:{mb:2}},(0,c.__)("With your current role,","elementor"),r.createElement("br",null),(0,c.__)("you can only use existing classes.","elementor")),r.createElement(l.Link,{color:"text.secondary",variant:"caption",component:"button",onClick:t},(0,c.__)("Clear & try again","elementor")))),updateClassByProvider=(e,t)=>{if(!e)return;const n=o.stylesRepository.getProviderByKey(e);return n?n.actions.update?.(t):void 0};function getTempStylesProviderColorName(e){return"accent"===e?"primary":e}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/local-class-sub-menu.tsx":function(e,t,n){n.r(t),n.d(t,{LocalClassSubMenu:function(){return LocalClassSubMenu}});var r=n("react"),o=n("@elementor/ui"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-convert-local.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/use-can-convert-local-class-to-global.ts");const LocalClassSubMenu=e=>{const{canConvert:t,styleDef:n}=(0,i.useCanConvertLocalClassToGlobal)();return r.createElement(r.Fragment,null,r.createElement(o.MenuSubheader,{sx:{typography:"caption",color:"text.secondary",pb:.5,pt:1}},(0,s.__)("Local Class","elementor")),r.createElement(a.CssClassConvert,{canConvert:t,styleDef:n,closeMenu:e.popupState.close}))}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/use-apply-and-unapply-class.ts":function(e,t,n){n.r(t),n.d(t,{useApplyClass:function(){return useApplyClass},useCreateAndApplyClass:function(){return useCreateAndApplyClass},useUnapplyClass:function(){return useUnapplyClass}});var r=n("react"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-styles-repository"),a=n("@elementor/editor-v1-adapters"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/apply-unapply-actions.ts"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx");function useApplyClass(){const{id:e,setId:t}=(0,d.useStyle)(),{element:n}=(0,p.useElement)(),s=useApply(),l=useUnapply();return(0,r.useMemo)(()=>(0,a.undoable)({do:({classId:t})=>{const n=e;return s(t),n},undo:({classId:e},n)=>{l(e),t(n)}},{title:(0,o.getElementLabel)(n.id),subtitle:({classLabel:e})=>(0,i.__)("class %s applied","elementor").replace("%s",e)}),[e,s,n.id,l,t])}function useUnapplyClass(){const{id:e,setId:t}=(0,d.useStyle)(),{element:n}=(0,p.useElement)(),s=useApply(),l=useUnapply();return(0,r.useMemo)(()=>(0,a.undoable)({do:({classId:t})=>{const n=e;return l(t),n},undo:({classId:e},n)=>{s(e),t(n)}},{title:(0,o.getElementLabel)(n.id),subtitle:({classLabel:e})=>(0,i.__)("class %s removed","elementor").replace("%s",e)}),[e,s,n.id,l,t])}function useCreateAndApplyClass(){const{id:e,setId:t}=(0,d.useStyle)(),[n,o]=(0,s.useGetStylesRepositoryCreateAction)()??[null,null],l=n?.actions.delete,c=useApply(),p=useUnapply(),u=(0,r.useMemo)(()=>{if(n&&o)return(0,a.undoable)({do:({classLabel:t})=>{const n=e,r=o(t);return c(r),{prevActiveId:n,createdId:r}},undo:(e,{prevActiveId:n,createdId:r})=>{p(r),l?.(r),t(n)}},{title:(0,i.__)("Class","elementor"),subtitle:({classLabel:e})=>(0,i.__)("%s created","elementor").replace("%s",e)})},[e,c,o,l,n,t,p]);return n&&u?[n,u]:[null,null]}function useApply(){const{element:e}=(0,p.useElement)(),{setId:t}=(0,d.useStyle)(),{setClasses:n,getAppliedClasses:o}=useClasses();return(0,r.useCallback)(r=>{const s=o();if(s.includes(r))throw new Error(`Class ${r} is already applied to element ${e.id}, cannot re-apply.`);const a=[...s,r];n(a),t(r)},[e.id,o,t,n])}function useUnapply(){const{element:e}=(0,p.useElement)(),{id:t,setId:n}=(0,d.useStyle)(),{setClasses:o,getAppliedClasses:s}=useClasses();return(0,r.useCallback)(r=>{const a=s();if(!a.includes(r))throw new Error(`Class ${r} is not applied to element ${e.id}, cannot unapply it.`);const i=a.filter(e=>e!==r);o(i),t===r&&n(i[0]??null)},[t,e.id,s,n,o])}function useClasses(){const{element:e}=(0,p.useElement)(),t=(0,c.useClassesProp)();return(0,r.useMemo)(()=>({setClasses:n=>{(0,l.doApplyClasses)(e.id,n,t)},getAppliedClasses:()=>(0,l.doGetAppliedClasses)(e.id,t)||[]}),[t,e.id])}},"./packages/packages/core/editor-editing-panel/src/components/css-classes/use-can-convert-local-class-to-global.ts":function(e,t,n){n.r(t),n.d(t,{useCanConvertLocalClassToGlobal:function(){return useCanConvertLocalClassToGlobal}});var r=n("@elementor/editor-styles-repository"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx");const useCanConvertLocalClassToGlobal=()=>{const{element:e}=(0,o.useElement)(),{provider:t,id:n,meta:a}=(0,s.useStyle)(),i=t?.actions.get(n,{elementId:e.id,...a}),l=t&&(0,r.isElementsStylesProvider)(t?.getKey());return{canConvert:!(!l||!(i?.variants||[]).length),isLocalStylesProvider:l,id:n,styleDef:i||null}}},"./packages/packages/core/editor-editing-panel/src/components/custom-css-indicator.tsx":function(e,t,n){n.r(t),n.d(t,{CustomCssIndicator:function(){return CustomCssIndicator}});var r=n("react"),o=n("@elementor/editor-responsive"),s=n("@elementor/editor-styles"),a=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/hooks/use-custom-css.ts"),c=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts"),p=n("./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx");const CustomCssIndicator=()=>{const{customCss:e}=(0,l.useCustomCss)(),{id:t,provider:n,meta:o}=(0,i.useStyle)(),{element:{id:s}}=(0,a.useElement)(),d=r.useMemo(()=>t&&n?n.actions.get(t,{elementId:s}):null,[t,n,s]),u=Boolean(e?.raw?.trim()),m=r.useMemo(()=>!u&&hasInheritedCustomCss(d,o),[u,d,o]);return u?r.createElement(p.StyleIndicator,{getColor:n?(0,c.getStylesProviderThemeColor)(n.getKey()):void 0}):m?r.createElement(p.StyleIndicator,null):null},hasInheritedCustomCss=(e,t)=>{if(!e||!t)return!1;const n=t.breakpoint??"desktop",r=(0,o.getBreakpointsTree)(),a=t.state;return Boolean(function search(t,r){if(!e)return;const o=Boolean((0,s.getVariantByMeta)(e,{breakpoint:t.id,state:a})?.custom_css?.raw?.trim());if(t.id===n)return r;for(const e of t.children??[]){const t=search(e,r||o);if(void 0!==t)return t}}(r,!1))}},"./packages/packages/core/editor-editing-panel/src/components/editing-panel-error-fallback.tsx":function(e,t,n){n.r(t),n.d(t,{EditorPanelErrorFallback:function(){return EditorPanelErrorFallback}});var r=n("react"),o=n("@elementor/ui");function EditorPanelErrorFallback(){return r.createElement(o.Box,{role:"alert",sx:{minHeight:"100%",p:2}},r.createElement(o.Alert,{severity:"error",sx:{mb:2,maxWidth:400,textAlign:"center"}},r.createElement("strong",null,"Something went wrong")))}},"./packages/packages/core/editor-editing-panel/src/components/editing-panel-hooks.tsx":function(e,t,n){n.r(t),n.d(t,{EditingPanelHooks:function(){return EditingPanelHooks}});var r=n("./packages/packages/core/editor-editing-panel/src/hooks/use-open-editor-panel.ts");const EditingPanelHooks=()=>((0,r.useOpenEditorPanel)(),null)},"./packages/packages/core/editor-editing-panel/src/components/editing-panel-tabs.tsx":function(e,t,n){n.r(t),n.d(t,{EditingPanelTabs:function(){return EditingPanelTabs}});var r=n("react"),o=n("@elementor/editor-v1-adapters"),s=n("@elementor/ui"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/contexts/scroll-context.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts"),p=n("./packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts"),d=n("./packages/packages/core/editor-editing-panel/src/components/interactions-tab.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/settings-tab.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-tab.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const EditingPanelTabs=()=>{const{element:e}=(0,i.useElement)();return r.createElement(r.Fragment,{key:e.id},r.createElement(PanelTabContent,null))},PanelTabContent=()=>{const e=(0,c.useDefaultPanelSettings)().defaultTab,t=(0,o.isExperimentActive)("e_interactions"),[n,i]=(0,p.useStateByElement)("tab",e),{getTabProps:g,getTabPanelProps:y,getTabsProps:f}=(0,s.useTabs)(n);return r.createElement(l.ScrollProvider,null,r.createElement(s.Stack,{direction:"column",sx:{width:"100%"}},r.createElement(s.Stack,{sx:{...m.stickyHeaderStyles,top:0}},r.createElement(s.Tabs,_extends({variant:"fullWidth",size:"small",sx:{mt:.5}},f(),{onChange:(e,t)=>{f().onChange(e,t),i(t)}}),r.createElement(s.Tab,_extends({label:(0,a.__)("General","elementor")},g("settings"))),r.createElement(s.Tab,_extends({label:(0,a.__)("Style","elementor")},g("style"))),t&&r.createElement(s.Tab,_extends({label:(0,a.__)("Interactions","elementor")},g("interactions")))),r.createElement(s.Divider,null)),r.createElement(s.TabPanel,_extends({},y("settings"),{disablePadding:!0}),r.createElement(u.SettingsTab,null)),r.createElement(s.TabPanel,_extends({},y("style"),{disablePadding:!0}),r.createElement(m.StyleTab,null)),t&&r.createElement(s.TabPanel,_extends({},y("interactions"),{disablePadding:!0}),r.createElement(d.InteractionsTab,null))))}},"./packages/packages/core/editor-editing-panel/src/components/editing-panel.tsx":function(e,t,n){n.r(t),n.d(t,{EditingPanel:function(){return EditingPanel},PanelHeaderTopSlot:function(){return b},injectIntoPanelHeaderTop:function(){return v}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-elements"),a=n("@elementor/editor-panels"),i=n("@elementor/editor-ui"),l=n("@elementor/icons"),c=n("@elementor/locations"),p=n("@elementor/menus"),d=n("@elementor/session"),u=n("@elementor/ui"),m=n("@wordpress/i18n"),g=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/editing-panel-replacement-registry.tsx"),f=n("./packages/packages/core/editor-editing-panel/src/components/editing-panel-error-fallback.tsx"),k=n("./packages/packages/core/editor-editing-panel/src/components/editing-panel-tabs.tsx");const{Slot:b,inject:v}=(0,c.createLocation)(),{useMenuItems:x}=p.controlActionsMenu,EditingPanel=()=>{const{element:e,elementType:t,settings:n}=(0,s.useSelectedElementSettings)(),c=(0,o.getControlReplacements)(),p=x().default;if(!e||!t)return null;const v=(0,m.__)("Edit %s","elementor").replace("%s",t.title),{component:E}=(0,y.getEditingPanelReplacement)(e,t)??{};let h=r.createElement(r.Fragment,null,r.createElement(a.PanelHeader,null,r.createElement(a.PanelHeaderTitle,null,v),r.createElement(l.AtomIcon,{fontSize:"small",sx:{color:"text.tertiary"}})),r.createElement(a.PanelBody,null,r.createElement(k.EditingPanelTabs,null)));return E&&(h=r.createElement(E,null)),r.createElement(u.ErrorBoundary,{fallback:r.createElement(f.EditorPanelErrorFallback,null)},r.createElement(d.SessionStorageProvider,{prefix:"elementor"},r.createElement(i.ThemeProvider,null,r.createElement(o.ControlActionsProvider,{items:p},r.createElement(o.ControlReplacementsProvider,{replacements:c},r.createElement(g.ElementProvider,{element:e,elementType:t,settings:n},r.createElement(a.Panel,null,r.createElement(b,null),h)))))))}},"./packages/packages/core/editor-editing-panel/src/components/interactions-tab.tsx":function(e,t,n){n.r(t),n.d(t,{InteractionsTab:function(){return InteractionsTab}});var r=n("react"),o=n("@elementor/editor-interactions"),s=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/components/sections-list.tsx");const InteractionsTab=()=>{const{element:e}=(0,s.useElement)();return r.createElement(a.SectionsList,null,r.createElement(o.InteractionsTab,{elementId:e.id}))}},"./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx":function(e,t,n){n.r(t),n.d(t,{PanelDivider:function(){return PanelDivider}});var r=n("react"),o=n("@elementor/ui");const PanelDivider=()=>r.createElement(o.Divider,{sx:{my:.5}})},"./packages/packages/core/editor-editing-panel/src/components/promotions/custom-css.tsx":function(e,t,n){n.r(t),n.d(t,{CustomCssSection:function(){return CustomCssSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx");const i={target_name:"custom_css",location_l2:"style"},CustomCssSection=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StyleTabSection,{section:{name:"Custom CSS",title:(0,s.__)("Custom CSS","elementor"),action:{component:r.createElement(o.PromotionTrigger,{ref:e,promotionKey:"customCss",trackingData:i}),onClick:()=>e.current?.toggle()}}})}},"./packages/packages/core/editor-editing-panel/src/components/promotions/init.tsx":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("@elementor/editor-controls"),o=n("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/components/style-tab.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/components/promotions/custom-css.tsx");const init=()=>{window.elementorPro||((0,s.injectIntoStyleTab)({id:"custom-css",component:a.CustomCssSection,options:{overwrite:!0}}),o.controlsRegistry.register("attributes",r.AttributesControl,"two-columns"),o.controlsRegistry.register("display-conditions",r.DisplayConditionsControl,"two-columns"))}},"./packages/packages/core/editor-editing-panel/src/components/section-content.tsx":function(e,t,n){n.r(t),n.d(t,{SectionContent:function(){return SectionContent}});var r=n("react"),o=n("@elementor/ui");const SectionContent=({gap:e=2,sx:t,children:n,"aria-label":s})=>r.createElement(o.Stack,{gap:e,sx:{...t},"aria-label":s},n)},"./packages/packages/core/editor-editing-panel/src/components/section.tsx":function(e,t,n){n.r(t),n.d(t,{Section:function(){return Section}});var r=n("react"),o=n("@elementor/editor-ui"),s=n("@elementor/ui"),a=n("./packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts");function Section({title:e,children:t,defaultExpanded:n=!1,titleEnd:i,unmountOnExit:l=!0,action:c}){const[p,d]=(0,a.useStateByElement)(e,!!n),u=(0,r.useRef)(null),m=!!c,g=(0,r.useId)(),y=`label-${g}`,f=`content-${g}`;return r.createElement(r.Fragment,null,r.createElement(s.ListItemButton,{id:y,"aria-controls":f,"aria-label":`${e} section`,onClick:()=>{m?c?.onClick():d(!p)},sx:{"&:hover":{backgroundColor:"transparent"}}},r.createElement(s.Stack,{direction:"row",alignItems:"center",justifyItems:"start",flexGrow:1,gap:.5},r.createElement(s.ListItemText,{secondary:e,secondaryTypographyProps:{color:"text.primary",variant:"caption",fontWeight:"bold"},sx:{flexGrow:0,flexShrink:1,marginInlineEnd:1}}),(0,o.getCollapsibleValue)(i,p)),c?.component,r.createElement(o.CollapseIcon,{open:p,color:"secondary",fontSize:"tiny",disabled:m,sx:{ml:1}})),r.createElement(s.Collapse,{id:f,"aria-labelledby":y,in:p,timeout:"auto",unmountOnExit:l},r.createElement(o.SectionRefContext.Provider,{value:u},r.createElement(s.Stack,{ref:u,gap:2.5,p:2,"aria-label":`${e} section content`},t))),r.createElement(s.Divider,null))}},"./packages/packages/core/editor-editing-panel/src/components/sections-list.tsx":function(e,t,n){n.r(t),n.d(t,{SectionsList:function(){return SectionsList}});var r=n("react"),o=n("@elementor/ui");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}function SectionsList(e){return r.createElement(o.List,_extends({disablePadding:!0,component:"div"},e))}},"./packages/packages/core/editor-editing-panel/src/components/settings-control.tsx":function(e,t,n){n.r(t),n.d(t,{SettingsControl:function(){return SettingsControl}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/ui"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/control-type-container.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts"),d=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx");const u=(0,s.styled)("span")` | |
| 9 | + display: contents; | |
| 10 | +`,SettingsControl=({control:{value:e,type:t}})=>{if(!l.controlsRegistry.get(e.type))return null;const n=e.meta?.layout||l.controlsRegistry.getLayout(e.type),o=function populateChildControlProps(e){if(e.childControlType){const t=l.controlsRegistry.get(e.childControlType),n=l.controlsRegistry.getPropTypeUtil(e.childControlType);e={...e,childControlConfig:{component:t,props:e.childControlProps||{},propTypeUtil:n}}}return e}(e.props);return"custom"===n&&(o.label=e.label),"element-control"===t?r.createElement(ControlLayout,{control:e,layout:n,controlProps:o}):r.createElement(c.SettingsField,{bind:e.bind,propDisplayName:e.label||e.bind},r.createElement(ControlLayout,{control:e,layout:n,controlProps:o}))},ControlLayout=({control:e,layout:t,controlProps:n})=>{const l=e.type;return r.createElement(o.ControlAdornmentsProvider,{items:(0,p.getFieldIndicators)("settings")},e.meta?.topDivider&&r.createElement(s.Divider,null),r.createElement(u,{"data-type":"settings-field"},r.createElement(i.ControlTypeContainer,{layout:t},e.label&&"custom"!==t?r.createElement(d.ControlLabel,null,e.label):null,r.createElement(a.Control,{type:l,props:n}))))}},"./packages/packages/core/editor-editing-panel/src/components/settings-tab.tsx":function(e,t,n){n.r(t),n.d(t,{SettingsTab:function(){return SettingsTab}});var r=n("react"),o=n("@elementor/session"),s=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts"),i=n("./packages/packages/core/editor-editing-panel/src/components/section.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/sections-list.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/settings-control.tsx");const SettingsTab=()=>{const{elementType:e,element:t}=(0,s.useElement)(),n=(0,a.useDefaultPanelSettings)();return r.createElement(o.SessionStorageProvider,{prefix:t.id},r.createElement(l.SectionsList,null,e.controls.map((e,o)=>{if(isControl(e))return r.createElement(c.SettingsControl,{key:getKey(e,t),control:e});const{type:s,value:a}=e;return"section"===s?r.createElement(i.Section,{title:a.label,key:s+"."+o,defaultExpanded:(l=a.label,n.defaultSectionsExpanded.settings?.includes(l))},a.items?.map(e=>isControl(e)?r.createElement(c.SettingsControl,{key:getKey(e,t),control:e}):null)):null;var l})))};function getKey(e,t){return"control"===e.type?e.value.bind+"."+t.id:e.value.type+"."+t.id}function isControl(e){return"control"===e.type||"element-control"===e.type}},"./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx":function(e,t,n){n.r(t),n.d(t,{StyleIndicator:function(){return o}});var r=n("@elementor/ui");const o=(0,r.styled)("div",{shouldForwardProp:e=>!["isOverridden","getColor"].includes(e)})` | |
| 548 | 11 | width: 5px; |
| 549 | 12 | height: 5px; |
| 550 | 13 | border-radius: 50%; |
| 551 | - background-color: ${({ theme, isOverridden, getColor }) => { | |
| 552 | - if (isOverridden) return theme.palette.warning.light; | |
| 553 | - return getColor?.(theme) ?? theme.palette.text.disabled; | |
| 554 | - }}; | |
| 555 | -`; | |
| 556 | - | |
| 557 | -//#endregion | |
| 558 | -//#region packages/packages/core/editor-editing-panel/src/components/style-states/pseudo-states.ts | |
| 559 | - var DEFAULT_PSEUDO_STATES = [ | |
| 560 | - { | |
| 561 | - key: "normal", | |
| 562 | - value: null, | |
| 563 | - label: (0, _wordpress_i18n.__)("normal", "elementor") | |
| 564 | - }, | |
| 565 | - { | |
| 566 | - key: "hover", | |
| 567 | - value: "hover", | |
| 568 | - label: (0, _wordpress_i18n.__)("hover", "elementor") | |
| 569 | - }, | |
| 570 | - { | |
| 571 | - key: "focus", | |
| 572 | - value: "focus", | |
| 573 | - label: (0, _wordpress_i18n.__)("focus", "elementor") | |
| 574 | - }, | |
| 575 | - { | |
| 576 | - key: "active", | |
| 577 | - value: "active", | |
| 578 | - label: (0, _wordpress_i18n.__)("active", "elementor") | |
| 579 | - } | |
| 580 | - ]; | |
| 581 | - | |
| 582 | -//#endregion | |
| 583 | -//#region packages/packages/core/editor-editing-panel/src/components/style-states/use-pseudo-states.ts | |
| 584 | - function usePseudoStates() { | |
| 585 | - const { elementType } = useElement(); | |
| 586 | - const { pseudoStates = [] } = elementType; | |
| 587 | - const additionalStates = pseudoStates.map(({ name, value }) => ({ | |
| 588 | - key: value, | |
| 589 | - value, | |
| 590 | - label: name | |
| 591 | - })); | |
| 592 | - return [...DEFAULT_PSEUDO_STATES, ...additionalStates]; | |
| 593 | - } | |
| 594 | - | |
| 595 | -//#endregion | |
| 596 | -//#region packages/packages/core/editor-editing-panel/src/apply-unapply-actions.ts | |
| 597 | - function doGetAppliedClasses(elementId, classesPropType = "classes") { | |
| 598 | - return (0, _elementor_editor_elements.getElementSetting)(elementId, classesPropType)?.value || []; | |
| 599 | - } | |
| 600 | - function doApplyClasses(elementId, classIds, classesPropType = "classes") { | |
| 601 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 602 | - id: elementId, | |
| 603 | - props: { [classesPropType]: _elementor_editor_props.classesPropTypeUtil.create(classIds) }, | |
| 604 | - withHistory: false | |
| 605 | - }); | |
| 606 | - (0, _elementor_editor_documents.setDocumentModifiedStatus)(true); | |
| 607 | - ensureClassesAreLoaded(classIds); | |
| 608 | - } | |
| 609 | - function ensureClassesAreLoaded(classIds) { | |
| 610 | - const providers = _elementor_editor_styles_repository.stylesRepository.getProviders(); | |
| 611 | - classIds.forEach((classId) => { | |
| 612 | - _elementor_editor_styles_repository.stylesRepository.getProviderByKey(classId)?.actions.get(classId); | |
| 613 | - const owningProvider = providers.find((provider) => provider.actions.all().some((style) => style.id === classId)); | |
| 614 | - try { | |
| 615 | - owningProvider?.actions.get(classId); | |
| 616 | - } catch {} | |
| 617 | - }); | |
| 618 | - } | |
| 619 | - function doUnapplyClass(elementId, classId, classesPropType = "classes") { | |
| 620 | - const appliedClasses = (0, _elementor_editor_elements.getElementSetting)(elementId, classesPropType)?.value || []; | |
| 621 | - if (!appliedClasses.includes(classId)) return false; | |
| 622 | - doApplyClasses(elementId, appliedClasses.filter((id) => id !== classId), classesPropType); | |
| 623 | - return true; | |
| 624 | - } | |
| 625 | - | |
| 626 | -//#endregion | |
| 627 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-apply-and-unapply-class.ts | |
| 628 | - function useUndoableApplyClass() { | |
| 629 | - const { id: activeId, setId: setActiveId } = useStyle(); | |
| 630 | - const { element } = useElement(); | |
| 631 | - const applyClass = useApplyClass(); | |
| 632 | - const unapplyClasses = useUnapplyClasses(); | |
| 633 | - return (0, react.useMemo)(() => { | |
| 634 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 635 | - do: ({ classId }) => { | |
| 636 | - const prevActiveId = activeId; | |
| 637 | - applyClass(classId); | |
| 638 | - return prevActiveId; | |
| 639 | - }, | |
| 640 | - undo: ({ classId }, prevActiveId) => { | |
| 641 | - unapplyClasses([classId]); | |
| 642 | - setActiveId(prevActiveId); | |
| 643 | - } | |
| 644 | - }, { | |
| 645 | - title: (0, _elementor_editor_elements.getElementLabel)(element.id), | |
| 646 | - subtitle: ({ classLabel }) => { | |
| 647 | - return (0, _wordpress_i18n.__)(`class %s applied`, "elementor").replace("%s", classLabel); | |
| 648 | - } | |
| 649 | - }); | |
| 650 | - }, [ | |
| 651 | - activeId, | |
| 652 | - applyClass, | |
| 653 | - element.id, | |
| 654 | - unapplyClasses, | |
| 655 | - setActiveId | |
| 656 | - ]); | |
| 657 | - } | |
| 658 | - function useUndoableUnapplyClass() { | |
| 659 | - const { id: activeId, setId: setActiveId } = useStyle(); | |
| 660 | - const { element } = useElement(); | |
| 661 | - const applyClass = useApplyClass(); | |
| 662 | - const unapplyClasses = useUnapplyClasses(); | |
| 663 | - return (0, react.useMemo)(() => { | |
| 664 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 665 | - do: ({ classId }) => { | |
| 666 | - const prevActiveId = activeId; | |
| 667 | - unapplyClasses([classId]); | |
| 668 | - return prevActiveId; | |
| 669 | - }, | |
| 670 | - undo: ({ classId }, prevActiveId) => { | |
| 671 | - applyClass(classId); | |
| 672 | - setActiveId(prevActiveId); | |
| 673 | - } | |
| 674 | - }, { | |
| 675 | - title: (0, _elementor_editor_elements.getElementLabel)(element.id), | |
| 676 | - subtitle: ({ classLabel }) => { | |
| 677 | - return (0, _wordpress_i18n.__)(`class %s removed`, "elementor").replace("%s", classLabel); | |
| 678 | - } | |
| 679 | - }); | |
| 680 | - }, [ | |
| 681 | - activeId, | |
| 682 | - applyClass, | |
| 683 | - element.id, | |
| 684 | - unapplyClasses, | |
| 685 | - setActiveId | |
| 686 | - ]); | |
| 687 | - } | |
| 688 | - function useCreateAndApplyClass() { | |
| 689 | - const { id: activeId, setId: setActiveId } = useStyle(); | |
| 690 | - const [provider, createAction] = (0, _elementor_editor_styles_repository.useGetStylesRepositoryCreateAction)() ?? [null, null]; | |
| 691 | - const deleteAction = provider?.actions.delete; | |
| 692 | - const applyClass = useApplyClass(); | |
| 693 | - const unapplyClasses = useUnapplyClasses(); | |
| 694 | - const undoableCreateAndApply = (0, react.useMemo)(() => { | |
| 695 | - if (!provider || !createAction) return; | |
| 696 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 697 | - do: ({ classLabel }) => { | |
| 698 | - const prevActiveId = activeId; | |
| 699 | - const createdId = createAction(classLabel); | |
| 700 | - applyClass(createdId); | |
| 701 | - return { | |
| 702 | - prevActiveId, | |
| 703 | - createdId | |
| 704 | - }; | |
| 705 | - }, | |
| 706 | - undo: (_, { prevActiveId, createdId }) => { | |
| 707 | - unapplyClasses([createdId]); | |
| 708 | - deleteAction?.(createdId); | |
| 709 | - setActiveId(prevActiveId); | |
| 710 | - }, | |
| 711 | - redo: ({ classLabel }, { createdId }) => { | |
| 712 | - const prevActiveId = activeId; | |
| 713 | - createAction(classLabel, [], createdId); | |
| 714 | - applyClass(createdId); | |
| 715 | - return { | |
| 716 | - prevActiveId, | |
| 717 | - createdId | |
| 718 | - }; | |
| 719 | - } | |
| 720 | - }, { | |
| 721 | - title: (0, _wordpress_i18n.__)("Class", "elementor"), | |
| 722 | - subtitle: ({ classLabel }) => { | |
| 723 | - return (0, _wordpress_i18n.__)(`%s created`, "elementor").replace("%s", classLabel); | |
| 724 | - } | |
| 725 | - }); | |
| 726 | - }, [ | |
| 727 | - activeId, | |
| 728 | - applyClass, | |
| 729 | - createAction, | |
| 730 | - deleteAction, | |
| 731 | - provider, | |
| 732 | - setActiveId, | |
| 733 | - unapplyClasses | |
| 734 | - ]); | |
| 735 | - if (!provider || !undoableCreateAndApply) return [null, null]; | |
| 736 | - return [provider, undoableCreateAndApply]; | |
| 737 | - } | |
| 738 | - function useApplyClass() { | |
| 739 | - const { element } = useElement(); | |
| 740 | - const { setId: setActiveId } = useStyle(); | |
| 741 | - const { setClasses, getAppliedClasses } = useClasses(); | |
| 742 | - return (0, react.useCallback)((classIDToApply) => { | |
| 743 | - const appliedClasses = getAppliedClasses(); | |
| 744 | - if (appliedClasses.includes(classIDToApply)) throw new Error(`Class ${classIDToApply} is already applied to element ${element.id}, cannot re-apply.`); | |
| 745 | - const updatedClassesIds = [...appliedClasses, classIDToApply]; | |
| 746 | - setClasses(updatedClassesIds); | |
| 747 | - setActiveId(classIDToApply); | |
| 748 | - }, [ | |
| 749 | - element.id, | |
| 750 | - getAppliedClasses, | |
| 751 | - setActiveId, | |
| 752 | - setClasses | |
| 753 | - ]); | |
| 754 | - } | |
| 755 | - function useUnapplyClasses() { | |
| 756 | - const { element } = useElement(); | |
| 757 | - const { id: activeId, setId: setActiveId } = useStyle(); | |
| 758 | - const { setClasses, getAppliedClasses } = useClasses(); | |
| 759 | - return (0, react.useCallback)((classIDsToUnapply) => { | |
| 760 | - const appliedClasses = getAppliedClasses(); | |
| 761 | - if (!classIDsToUnapply.every((classID) => appliedClasses.includes(classID))) { | |
| 762 | - const missingClasses = classIDsToUnapply.filter((classID) => !appliedClasses.includes(classID)); | |
| 763 | - throw new Error(`Classes ${missingClasses.join(", ")} are not applied to element ${element.id}, cannot unapply them.`); | |
| 764 | - } | |
| 765 | - const updatedClassesIds = appliedClasses.filter((id) => !classIDsToUnapply.includes(id)); | |
| 766 | - setClasses(updatedClassesIds); | |
| 767 | - if (activeId && classIDsToUnapply.includes(activeId)) setActiveId(updatedClassesIds[0] ?? null); | |
| 768 | - }, [ | |
| 769 | - activeId, | |
| 770 | - element.id, | |
| 771 | - getAppliedClasses, | |
| 772 | - setActiveId, | |
| 773 | - setClasses | |
| 774 | - ]); | |
| 775 | - } | |
| 776 | - function useClasses() { | |
| 777 | - const { element } = useElement(); | |
| 778 | - const currentClassesProp = useClassesProp(); | |
| 779 | - return (0, react.useMemo)(() => { | |
| 780 | - const setClasses = (ids) => { | |
| 781 | - doApplyClasses(element.id, ids, currentClassesProp); | |
| 782 | - }; | |
| 783 | - const getAppliedClasses = () => doGetAppliedClasses(element.id, currentClassesProp) || []; | |
| 784 | - return { | |
| 785 | - setClasses, | |
| 786 | - getAppliedClasses | |
| 787 | - }; | |
| 788 | - }, [currentClassesProp, element.id]); | |
| 789 | - } | |
| 790 | - | |
| 791 | -//#endregion | |
| 792 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/duplicate-class-menu-item.tsx | |
| 793 | - var DUPLICATE_LABEL_PREFIX = "copy-of"; | |
| 794 | - function getUniqueDuplicateLabel(originalLabel, existingLabels) { | |
| 795 | - let newLabel = `${DUPLICATE_LABEL_PREFIX}-${originalLabel}`; | |
| 796 | - let counter = 2; | |
| 797 | - while (existingLabels.includes(newLabel)) { | |
| 798 | - newLabel = `${DUPLICATE_LABEL_PREFIX}-${originalLabel}-${counter}`; | |
| 799 | - counter++; | |
| 800 | - } | |
| 801 | - return newLabel; | |
| 802 | - } | |
| 803 | - function DuplicateClassMenuItem({ closeMenu }) { | |
| 804 | - const { id: classId, provider } = useCssClass(); | |
| 805 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 806 | - const applyClass = useUndoableApplyClass(); | |
| 807 | - const [, setPendingEditId] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app"); | |
| 808 | - if (!provider || !classId) return null; | |
| 809 | - const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider); | |
| 810 | - const createAction = providerInstance?.actions.create; | |
| 811 | - const getAction = providerInstance?.actions.get; | |
| 812 | - if (!createAction || !getAction) return null; | |
| 813 | - if (!userCan(provider).create) return null; | |
| 814 | - const handleDuplicate = () => { | |
| 815 | - const styleDef = getAction(classId); | |
| 816 | - if (!styleDef) { | |
| 817 | - closeMenu(); | |
| 818 | - return; | |
| 819 | - } | |
| 820 | - const existingLabels = providerInstance.actions.all().map((style) => style.label); | |
| 821 | - const newLabel = getUniqueDuplicateLabel(styleDef.label, existingLabels); | |
| 822 | - const newId = createAction(newLabel, styleDef.variants); | |
| 823 | - if (newId) { | |
| 824 | - applyClass({ | |
| 825 | - classId: newId, | |
| 826 | - classLabel: newLabel | |
| 827 | - }); | |
| 828 | - setPendingEditId(newId); | |
| 829 | - trackStyles(provider, "classCreated", { | |
| 830 | - classId: newId, | |
| 831 | - source: "duplicated", | |
| 832 | - classTitle: newLabel | |
| 833 | - }); | |
| 834 | - } | |
| 835 | - closeMenu(); | |
| 836 | - }; | |
| 837 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { onClick: handleDuplicate }, (0, _wordpress_i18n.__)("Duplicate", "elementor")); | |
| 838 | - } | |
| 839 | - | |
| 840 | -//#endregion | |
| 841 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-can-convert-local-class-to-global.ts | |
| 842 | - var useCanConvertLocalClassToGlobal = () => { | |
| 843 | - const { element } = useElement(); | |
| 844 | - const { provider, id, meta } = useStyle(); | |
| 845 | - const styleDef = provider?.actions.get(id, { | |
| 846 | - elementId: element.id, | |
| 847 | - ...meta | |
| 848 | - }); | |
| 849 | - const isLocalStylesProvider = provider && (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider?.getKey()); | |
| 850 | - const variants = styleDef?.variants || []; | |
| 851 | - return { | |
| 852 | - canConvert: !!(isLocalStylesProvider && variants.length), | |
| 853 | - isLocalStylesProvider, | |
| 854 | - id, | |
| 855 | - styleDef: styleDef || null | |
| 856 | - }; | |
| 857 | - }; | |
| 858 | - | |
| 859 | -//#endregion | |
| 860 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/local-class-sub-menu.tsx | |
| 861 | - var LocalClassSubMenu = (props) => { | |
| 862 | - const { canConvert, styleDef } = useCanConvertLocalClassToGlobal(); | |
| 863 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: { | |
| 864 | - typography: "caption", | |
| 865 | - color: "text.secondary", | |
| 866 | - pb: .5, | |
| 867 | - pt: 1 | |
| 868 | - } }, (0, _wordpress_i18n.__)("Local Class", "elementor")), /* @__PURE__ */ react.createElement(CssClassConvert, { | |
| 869 | - canConvert, | |
| 870 | - styleDef, | |
| 871 | - closeMenu: props.popupState.close | |
| 872 | - })); | |
| 873 | - }; | |
| 874 | - | |
| 875 | -//#endregion | |
| 876 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-menu.tsx | |
| 877 | - function CssClassMenu({ popupState, anchorEl, fixed }) { | |
| 878 | - const { provider } = useCssClass(); | |
| 879 | - const isLocalStyle = provider ? (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider) : true; | |
| 880 | - const pseudoStates = usePseudoStates(); | |
| 881 | - const handleKeyDown = (e) => { | |
| 882 | - e.stopPropagation(); | |
| 883 | - }; | |
| 884 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Menu, { | |
| 885 | - MenuListProps: { | |
| 886 | - dense: true, | |
| 887 | - sx: { minWidth: "160px" } | |
| 888 | - }, | |
| 889 | - ...(0, _elementor_ui.bindMenu)(popupState), | |
| 890 | - anchorEl, | |
| 891 | - anchorOrigin: { | |
| 892 | - vertical: "bottom", | |
| 893 | - horizontal: "left" | |
| 894 | - }, | |
| 895 | - transformOrigin: { | |
| 896 | - horizontal: "left", | |
| 897 | - vertical: -4 | |
| 898 | - }, | |
| 899 | - onKeyDown: handleKeyDown, | |
| 900 | - disableAutoFocusItem: true | |
| 901 | - }, isLocalStyle && /* @__PURE__ */ react.createElement(LocalClassSubMenu, { popupState }), getMenuItemsByProvider({ | |
| 902 | - provider, | |
| 903 | - closeMenu: popupState.close, | |
| 904 | - fixed | |
| 905 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: { | |
| 906 | - typography: "caption", | |
| 907 | - color: "text.secondary", | |
| 908 | - pb: .5, | |
| 909 | - pt: 1 | |
| 910 | - } }, (0, _wordpress_i18n.__)("States", "elementor")), pseudoStates.map((state) => { | |
| 911 | - return /* @__PURE__ */ react.createElement(StateMenuItem, { | |
| 912 | - key: state.key, | |
| 913 | - state: state.value, | |
| 914 | - label: state.label, | |
| 915 | - closeMenu: popupState.close | |
| 916 | - }); | |
| 917 | - }), /* @__PURE__ */ react.createElement(ClassStatesMenu, { closeMenu: popupState.close })); | |
| 918 | - } | |
| 919 | - function ClassStatesMenu({ closeMenu }) { | |
| 920 | - const { elementStates, elementTitle } = useElementStates(); | |
| 921 | - if (!elementStates.length) return null; | |
| 922 | - const customTitle = (0, _wordpress_i18n.__)("%s States", "elementor").replace("%s", elementTitle); | |
| 923 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: { | |
| 924 | - typography: "caption", | |
| 925 | - color: "text.secondary", | |
| 926 | - pb: .5, | |
| 927 | - pt: 1 | |
| 928 | - } }, customTitle), elementStates.map((state) => { | |
| 929 | - return /* @__PURE__ */ react.createElement(StateMenuItem, { | |
| 930 | - key: state.key, | |
| 931 | - state: state.value, | |
| 932 | - label: state.label, | |
| 933 | - closeMenu | |
| 934 | - }); | |
| 935 | - })); | |
| 936 | - } | |
| 937 | - var CLASS_STATES_MAP = { | |
| 938 | - selected: { label: (0, _wordpress_i18n.__)("selected", "elementor") }, | |
| 939 | - disabled: { label: (0, _wordpress_i18n.__)("disabled", "elementor") } | |
| 940 | - }; | |
| 941 | - function useElementStates() { | |
| 942 | - const { elementType } = useElement(); | |
| 943 | - const { styleStates = [] } = elementType; | |
| 944 | - return { | |
| 945 | - elementStates: styleStates.map(({ value, name }) => ({ | |
| 946 | - key: value, | |
| 947 | - value, | |
| 948 | - label: CLASS_STATES_MAP[value]?.label ?? name | |
| 949 | - })), | |
| 950 | - elementTitle: elementType.title | |
| 951 | - }; | |
| 952 | - } | |
| 953 | - function useModifiedStates(styleId) { | |
| 954 | - const { meta } = useStyle(); | |
| 955 | - const styleDef = _elementor_editor_styles_repository.stylesRepository.all().find((style) => style.id === styleId); | |
| 956 | - return Object.fromEntries(styleDef?.variants.filter((variant) => meta.breakpoint === variant.meta.breakpoint && (!(0, _elementor_editor_props.isEmpty)(variant.props) || Boolean(variant.custom_css?.raw?.trim()))).map((variant) => [variant.meta.state ?? "normal", true]) ?? []); | |
| 957 | - } | |
| 958 | - function getMenuItemsByProvider({ provider, closeMenu, fixed }) { | |
| 959 | - if (!provider) return []; | |
| 960 | - const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider); | |
| 961 | - const providerActions = providerInstance?.actions; | |
| 962 | - const canUpdate = providerActions?.update; | |
| 963 | - const canDuplicate = providerActions?.create && providerActions?.get; | |
| 964 | - const canUnapply = !fixed; | |
| 965 | - const actions = [ | |
| 966 | - canUpdate && /* @__PURE__ */ react.createElement(RenameClassMenuItem, { | |
| 967 | - key: "rename-class", | |
| 968 | - closeMenu | |
| 969 | - }), | |
| 970 | - canDuplicate && /* @__PURE__ */ react.createElement(DuplicateClassMenuItem, { | |
| 971 | - key: "duplicate-class", | |
| 972 | - closeMenu | |
| 973 | - }), | |
| 974 | - canUnapply && /* @__PURE__ */ react.createElement(UnapplyClassMenuItem, { | |
| 975 | - key: "unapply-class", | |
| 976 | - closeMenu | |
| 977 | - }) | |
| 978 | - ].filter(Boolean); | |
| 979 | - if (actions.length) { | |
| 980 | - actions.unshift(/* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { | |
| 981 | - key: "provider-label", | |
| 982 | - sx: { | |
| 983 | - typography: "caption", | |
| 984 | - color: "text.secondary", | |
| 985 | - pb: .5, | |
| 986 | - pt: 1, | |
| 987 | - textTransform: "capitalize" | |
| 988 | - } | |
| 989 | - }, providerInstance?.labels?.singular)); | |
| 990 | - actions.push(/* @__PURE__ */ react.createElement(_elementor_ui.Divider, { key: "provider-actions-divider" })); | |
| 991 | - } | |
| 992 | - return actions; | |
| 993 | - } | |
| 994 | - function StateMenuItem({ state, label, closeMenu, ...props }) { | |
| 995 | - const { id: styleId, provider } = useCssClass(); | |
| 996 | - const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle(); | |
| 997 | - const { state: activeState } = meta; | |
| 998 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 999 | - const modifiedStates = useModifiedStates(styleId); | |
| 1000 | - const isUpdateAllowed = !state || userCan(provider ?? "").updateProps; | |
| 1001 | - const isStyled = modifiedStates[state ?? "normal"] ?? false; | |
| 1002 | - const disabled = !isUpdateAllowed && !isStyled; | |
| 1003 | - const isActive = styleId === activeId; | |
| 1004 | - const isSelected = state === activeState && isActive; | |
| 1005 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 1006 | - ...props, | |
| 1007 | - selected: isSelected, | |
| 1008 | - disabled, | |
| 1009 | - sx: { textTransform: "capitalize" }, | |
| 1010 | - onClick: () => { | |
| 1011 | - if (!isActive) setActiveId(styleId); | |
| 1012 | - trackStyles(provider ?? "", "classStateClicked", { | |
| 1013 | - classId: styleId, | |
| 1014 | - type: label, | |
| 1015 | - source: styleId ? "global" : "local" | |
| 1016 | - }); | |
| 1017 | - setActiveMetaState(state); | |
| 1018 | - closeMenu(); | |
| 1019 | - } | |
| 1020 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuItemInfotip, { | |
| 1021 | - showInfoTip: disabled, | |
| 1022 | - content: (0, _wordpress_i18n.__)("With your current role, you can only use existing states.", "elementor") | |
| 1023 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1024 | - gap: .75, | |
| 1025 | - direction: "row", | |
| 1026 | - alignItems: "center" | |
| 1027 | - }, isStyled && /* @__PURE__ */ react.createElement(StyleIndicator, { | |
| 1028 | - "aria-label": (0, _wordpress_i18n.__)("Has style", "elementor"), | |
| 1029 | - getColor: getTempStylesProviderThemeColor(provider ?? "") | |
| 1030 | - }), label))); | |
| 1031 | - } | |
| 1032 | - function UnapplyClassMenuItem({ closeMenu, ...props }) { | |
| 1033 | - const { id: classId, label: classLabel, provider } = useCssClass(); | |
| 1034 | - const unapplyClass = useUndoableUnapplyClass(); | |
| 1035 | - return classId ? /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 1036 | - ...props, | |
| 1037 | - onClick: () => { | |
| 1038 | - unapplyClass({ | |
| 1039 | - classId, | |
| 1040 | - classLabel | |
| 1041 | - }); | |
| 1042 | - trackStyles(provider ?? "", "classRemoved", { | |
| 1043 | - classId, | |
| 1044 | - classTitle: classLabel, | |
| 1045 | - source: "style-tab" | |
| 1046 | - }); | |
| 1047 | - closeMenu(); | |
| 1048 | - } | |
| 1049 | - }, (0, _wordpress_i18n.__)("Remove", "elementor")) : null; | |
| 1050 | - } | |
| 1051 | - function RenameClassMenuItem({ closeMenu }) { | |
| 1052 | - const { handleRename, provider } = useCssClass(); | |
| 1053 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 1054 | - if (!provider) return null; | |
| 1055 | - const isAllowed = userCan(provider).update; | |
| 1056 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 1057 | - disabled: !isAllowed, | |
| 1058 | - onClick: () => { | |
| 1059 | - closeMenu(); | |
| 1060 | - handleRename(); | |
| 1061 | - } | |
| 1062 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuItemInfotip, { | |
| 1063 | - showInfoTip: !isAllowed, | |
| 1064 | - content: (0, _wordpress_i18n.__)("With your current role, you can use existing classes but can't modify them.", "elementor") | |
| 1065 | - }, (0, _wordpress_i18n.__)("Rename", "elementor"))); | |
| 1066 | - } | |
| 1067 | - | |
| 1068 | -//#endregion | |
| 1069 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-item.tsx | |
| 1070 | - var CHIP_SIZE = "tiny"; | |
| 1071 | - function CssClassItem(props) { | |
| 1072 | - const { chipProps, icon, color: colorProp, fixed, ...classProps } = props; | |
| 1073 | - const { id, provider, label, isActive, onClickActive, renameLabel, setError } = classProps; | |
| 1074 | - const { elementStates } = useElementStates(); | |
| 1075 | - const { meta, setMetaState } = useStyle(); | |
| 1076 | - const popupState = (0, _elementor_ui.usePopupState)({ variant: "popover" }); | |
| 1077 | - const [chipRef, setChipRef] = (0, react.useState)(null); | |
| 1078 | - const { onDelete, ...chipGroupProps } = chipProps; | |
| 1079 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 1080 | - const [convertedFromLocalId, , clearConvertedFromLocalId] = (0, _elementor_session.useSessionStorage)(PENDING_CLASS_RENAME_SESSION_KEY, "app"); | |
| 1081 | - const { ref, isEditing, openEditMode, error, getProps: getEditableProps } = (0, _elementor_editor_ui.useEditable)({ | |
| 1082 | - value: label, | |
| 1083 | - onSubmit: renameLabel, | |
| 1084 | - validation: validateLabel, | |
| 1085 | - onError: setError | |
| 1086 | - }); | |
| 1087 | - const color = error ? "error" : colorProp; | |
| 1088 | - const providerActions = provider ? _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider)?.actions : null; | |
| 1089 | - const allowRename = Boolean(providerActions?.update) && userCan(provider ?? "")?.update; | |
| 1090 | - const isShowingState = isActive && meta.state; | |
| 1091 | - const stateLabel = (0, react.useMemo)(() => { | |
| 1092 | - if (meta.state && (0, _elementor_editor_styles.isClassState)(meta.state)) return elementStates.find((state) => state.value === meta.state)?.label; | |
| 1093 | - return meta.state; | |
| 1094 | - }, [meta.state, elementStates]); | |
| 1095 | - (0, react.useEffect)(() => { | |
| 1096 | - if (convertedFromLocalId && id === convertedFromLocalId) { | |
| 1097 | - clearConvertedFromLocalId(); | |
| 1098 | - openEditMode(); | |
| 1099 | - } | |
| 1100 | - }, [id, convertedFromLocalId]); | |
| 1101 | - return /* @__PURE__ */ react.createElement(_elementor_ui.ThemeProvider, { palette: "default" }, /* @__PURE__ */ react.createElement(_elementor_ui.UnstableChipGroup, { | |
| 1102 | - ref: setChipRef, | |
| 1103 | - ...chipGroupProps, | |
| 1104 | - "aria-label": `Edit ${label}`, | |
| 1105 | - role: "group", | |
| 1106 | - sx: (theme) => ({ "&.MuiChipGroup-root.MuiAutocomplete-tag": { margin: theme.spacing(.125) } }) | |
| 1107 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 1108 | - size: CHIP_SIZE, | |
| 1109 | - label: isEditing ? /* @__PURE__ */ react.createElement(_elementor_editor_ui.EditableField, { | |
| 1110 | - ref, | |
| 1111 | - ...getEditableProps() | |
| 1112 | - }) : /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, { | |
| 1113 | - maxWidth: "10ch", | |
| 1114 | - title: label, | |
| 1115 | - as: "div" | |
| 1116 | - }), | |
| 1117 | - variant: isActive && !meta.state && !isEditing ? "filled" : "standard", | |
| 1118 | - shape: "rounded", | |
| 1119 | - icon, | |
| 1120 | - color, | |
| 1121 | - onClick: () => { | |
| 1122 | - if (isShowingState) { | |
| 1123 | - setMetaState(null); | |
| 1124 | - return; | |
| 1125 | - } | |
| 1126 | - if (allowRename && isActive) { | |
| 1127 | - openEditMode(); | |
| 1128 | - return; | |
| 1129 | - } | |
| 1130 | - onClickActive(id); | |
| 1131 | - }, | |
| 1132 | - "aria-pressed": isActive, | |
| 1133 | - sx: (theme) => ({ | |
| 1134 | - lineHeight: 1, | |
| 1135 | - cursor: isActive && allowRename && !isShowingState ? "text" : "pointer", | |
| 1136 | - borderRadius: `${theme.shape.borderRadius * .75}px`, | |
| 1137 | - "&.Mui-focusVisible": { boxShadow: "none !important" } | |
| 1138 | - }) | |
| 1139 | - }), !isEditing && /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 1140 | - icon: isShowingState ? void 0 : /* @__PURE__ */ react.createElement(_elementor_icons.DotsVerticalIcon, { fontSize: "tiny" }), | |
| 1141 | - size: CHIP_SIZE, | |
| 1142 | - label: isShowingState ? /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1143 | - direction: "row", | |
| 1144 | - gap: .5, | |
| 1145 | - alignItems: "center" | |
| 1146 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "inherit" }, stateLabel), /* @__PURE__ */ react.createElement(_elementor_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0, | |
| 1147 | - variant: "filled", | |
| 1148 | - shape: "rounded", | |
| 1149 | - color, | |
| 1150 | - ...(0, _elementor_ui.bindTrigger)(popupState), | |
| 1151 | - "aria-label": (0, _wordpress_i18n.__)("Open CSS Class Menu", "elementor"), | |
| 1152 | - sx: (theme) => ({ | |
| 1153 | - borderRadius: `${theme.shape.borderRadius * .75}px`, | |
| 1154 | - paddingRight: 0, | |
| 1155 | - ...!isShowingState ? { paddingLeft: 0 } : {}, | |
| 1156 | - ".MuiChip-label": isShowingState ? { paddingRight: 0 } : { padding: 0 } | |
| 1157 | - }) | |
| 1158 | - })), /* @__PURE__ */ react.createElement(CssClassProvider, { | |
| 1159 | - ...classProps, | |
| 1160 | - handleRename: openEditMode | |
| 1161 | - }, /* @__PURE__ */ react.createElement(CssClassMenu, { | |
| 1162 | - popupState, | |
| 1163 | - anchorEl: chipRef, | |
| 1164 | - fixed | |
| 1165 | - }))); | |
| 1166 | - } | |
| 1167 | - var validateLabel = (newLabel) => { | |
| 1168 | - const result = (0, _elementor_editor_styles_repository.validateStyleLabel)(newLabel, "rename"); | |
| 1169 | - if (result.isValid) return null; | |
| 1170 | - return result.errorMessage; | |
| 1171 | - }; | |
| 1172 | - | |
| 1173 | -//#endregion | |
| 1174 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/missing-classes-alert.tsx | |
| 1175 | - function MissingClassesAlert({ onDismiss }) { | |
| 1176 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Alert, { | |
| 1177 | - severity: "warning", | |
| 1178 | - onClose: onDismiss, | |
| 1179 | - size: "small", | |
| 1180 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.AlertTriangleFilledIcon, { fontSize: "tiny" }), | |
| 1181 | - sx: { mt: 1 } | |
| 1182 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, (0, _wordpress_i18n.__)("Some classes are missing", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 1183 | - variant: "caption", | |
| 1184 | - color: "primary" | |
| 1185 | - }, (0, _wordpress_i18n.__)("A class was removed from your site and is no longer active on this element", "elementor"))); | |
| 1186 | - } | |
| 1187 | - | |
| 1188 | -//#endregion | |
| 1189 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/use-missing-classes.ts | |
| 1190 | - function useMissingClassesIds() { | |
| 1191 | - const providers = (0, _elementor_editor_styles_repository.useProviders)(); | |
| 1192 | - const appliedIds = usePanelElementSetting(useClassesProp())?.value ?? []; | |
| 1193 | - const allKnownIds = new Set(providers.flatMap((provider) => provider.actions.all().map((style) => style.id))); | |
| 1194 | - return appliedIds.filter((id) => !allKnownIds.has(id)); | |
| 1195 | - } | |
| 1196 | - | |
| 1197 | -//#endregion | |
| 1198 | -//#region packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-selector.tsx | |
| 1199 | - var ID = "elementor-css-class-selector"; | |
| 1200 | - var TAGS_LIMIT = 50; | |
| 1201 | - function openClassManagerPanel() { | |
| 1202 | - window.dispatchEvent(new CustomEvent("elementor/toggle-design-system", { detail: { tab: "classes" } })); | |
| 1203 | - } | |
| 1204 | - var EMPTY_OPTION = { | |
| 1205 | - label: (0, _wordpress_i18n.__)("local", "elementor"), | |
| 1206 | - value: null, | |
| 1207 | - fixed: true, | |
| 1208 | - color: getTempStylesProviderColorName("accent"), | |
| 1209 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.MapPinIcon, null), | |
| 1210 | - provider: null | |
| 1211 | - }; | |
| 1212 | - var { Slot: ClassSelectorActionsSlot, inject: injectIntoClassSelectorActions } = (0, _elementor_locations.createLocation)(); | |
| 1213 | - function CssClassSelector() { | |
| 1214 | - const options = useOptions(); | |
| 1215 | - const { id: activeId, setId: setActiveId } = useStyle(); | |
| 1216 | - const autocompleteRef = (0, react.useRef)(null); | |
| 1217 | - const [renameError, setRenameError] = (0, react.useState)(null); | |
| 1218 | - const handleSelect = useHandleSelect(); | |
| 1219 | - const { create, validate, entityName, isAtLimit, limitCount } = useCreateAction(); | |
| 1220 | - const appliedOptions = useAppliedOptions(options); | |
| 1221 | - const active = appliedOptions.find((option) => option.value === activeId) ?? EMPTY_OPTION; | |
| 1222 | - const showPlaceholder = appliedOptions.every(({ fixed }) => fixed); | |
| 1223 | - const { userCan } = (0, _elementor_editor_styles_repository.useUserStylesCapability)(); | |
| 1224 | - const canEdit = active.provider ? userCan(active.provider).updateProps : true; | |
| 1225 | - const missingClassesIds = useMissingClassesIds(); | |
| 1226 | - const hasMissingClasses = missingClassesIds.length > 0; | |
| 1227 | - const unapplyClasses = useUnapplyClasses(); | |
| 1228 | - const clearMissingClasses = (0, react.useCallback)(() => { | |
| 1229 | - unapplyClasses(missingClassesIds); | |
| 1230 | - }, [missingClassesIds, unapplyClasses]); | |
| 1231 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { p: 2 }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1232 | - direction: "row", | |
| 1233 | - gap: 1, | |
| 1234 | - alignItems: "center", | |
| 1235 | - justifyContent: "space-between" | |
| 1236 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.FormLabel, { | |
| 1237 | - htmlFor: ID, | |
| 1238 | - size: "small" | |
| 1239 | - }, (0, _wordpress_i18n.__)("Classes", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1240 | - direction: "row", | |
| 1241 | - gap: 1 | |
| 1242 | - }, /* @__PURE__ */ react.createElement(ClassSelectorActionsSlot, null))), /* @__PURE__ */ react.createElement(_elementor_editor_ui.WarningInfotip, { | |
| 1243 | - open: Boolean(renameError), | |
| 1244 | - text: renameError ?? "", | |
| 1245 | - placement: "bottom", | |
| 1246 | - width: autocompleteRef.current?.getBoundingClientRect().width, | |
| 1247 | - offset: [0, -15] | |
| 1248 | - }, /* @__PURE__ */ react.createElement(CreatableAutocomplete, { | |
| 1249 | - id: ID, | |
| 1250 | - ref: autocompleteRef, | |
| 1251 | - size: "tiny", | |
| 1252 | - placeholder: showPlaceholder ? (0, _wordpress_i18n.__)("Type class name", "elementor") : void 0, | |
| 1253 | - options, | |
| 1254 | - selected: appliedOptions, | |
| 1255 | - entityName, | |
| 1256 | - onSelect: handleSelect, | |
| 1257 | - onCreate: create ?? void 0, | |
| 1258 | - validate: validate ?? void 0, | |
| 1259 | - limitTags: TAGS_LIMIT, | |
| 1260 | - renderEmptyState: isAtLimit && typeof limitCount === "number" ? (props) => /* @__PURE__ */ react.createElement(LimitReachedEmptyState, { | |
| 1261 | - limitCount, | |
| 1262 | - onClear: props.onClear | |
| 1263 | - }) : EmptyState, | |
| 1264 | - getLimitTagsText: (more) => /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 1265 | - size: "tiny", | |
| 1266 | - variant: "standard", | |
| 1267 | - label: `+${more}`, | |
| 1268 | - clickable: true | |
| 1269 | - }), | |
| 1270 | - renderTags: (values, getTagProps) => values.map((value, index) => { | |
| 1271 | - const chipProps = getTagProps({ index }); | |
| 1272 | - const isActive = value.value === active?.value; | |
| 1273 | - const renameLabel = (newLabel) => { | |
| 1274 | - if (!value.value) throw new Error(`Cannot rename a class without style id`); | |
| 1275 | - trackStyles(value.provider ?? "", "classRenamed", { | |
| 1276 | - classId: value.value, | |
| 1277 | - newValue: newLabel, | |
| 1278 | - oldValue: value.label, | |
| 1279 | - source: "style-tab" | |
| 1280 | - }); | |
| 1281 | - return updateClassByProvider(value.provider, { | |
| 1282 | - label: newLabel, | |
| 1283 | - id: value.value | |
| 1284 | - }); | |
| 1285 | - }; | |
| 1286 | - return /* @__PURE__ */ react.createElement(CssClassItem, { | |
| 1287 | - key: chipProps.key, | |
| 1288 | - fixed: value.fixed, | |
| 1289 | - label: value.label, | |
| 1290 | - provider: value.provider, | |
| 1291 | - id: value.value, | |
| 1292 | - isActive, | |
| 1293 | - color: isActive && value.color ? value.color : "default", | |
| 1294 | - icon: value.icon, | |
| 1295 | - chipProps, | |
| 1296 | - onClickActive: () => setActiveId(value.value), | |
| 1297 | - renameLabel, | |
| 1298 | - setError: setRenameError | |
| 1299 | - }); | |
| 1300 | - }) | |
| 1301 | - })), hasMissingClasses && /* @__PURE__ */ react.createElement(MissingClassesAlert, { onDismiss: clearMissingClasses }), !canEdit && /* @__PURE__ */ react.createElement(_elementor_editor_ui.InfoAlert, { sx: { mt: 1 } }, (0, _wordpress_i18n.__)("With your current role, you can use existing classes but can’t modify them.", "elementor"))); | |
| 1302 | - } | |
| 1303 | - var EmptyStateLayout = ({ searchValue, onClear, children }) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { py: 4 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1304 | - gap: 1, | |
| 1305 | - alignItems: "center", | |
| 1306 | - color: "text.secondary", | |
| 1307 | - justifyContent: "center", | |
| 1308 | - sx: { | |
| 1309 | - px: 2, | |
| 1310 | - m: "auto", | |
| 1311 | - maxWidth: "236px" | |
| 1312 | - } | |
| 1313 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, { | |
| 1314 | - sx: { transform: "rotate(90deg)" }, | |
| 1315 | - fontSize: "large" | |
| 1316 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 1317 | - align: "center", | |
| 1318 | - variant: "subtitle2" | |
| 1319 | - }, (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ react.createElement("br", null), "“", searchValue, "”."), children, /* @__PURE__ */ react.createElement(_elementor_ui.Link, { | |
| 1320 | - color: "text.secondary", | |
| 1321 | - variant: "caption", | |
| 1322 | - component: "button", | |
| 1323 | - onClick: onClear | |
| 1324 | - }, (0, _wordpress_i18n.__)("Clear & try again", "elementor")))); | |
| 1325 | - var EmptyState = (props) => /* @__PURE__ */ react.createElement(EmptyStateLayout, { ...props }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 1326 | - align: "center", | |
| 1327 | - variant: "caption", | |
| 1328 | - sx: { mb: 2 } | |
| 1329 | - }, (0, _wordpress_i18n.__)("With your current role,", "elementor"), /* @__PURE__ */ react.createElement("br", null), (0, _wordpress_i18n.__)("you can only use existing classes.", "elementor"))); | |
| 1330 | - var LimitReachedEmptyState = ({ limitCount, onClear }) => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { py: 4 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 1331 | - gap: 1, | |
| 1332 | - alignItems: "center", | |
| 1333 | - color: "text.secondary", | |
| 1334 | - justifyContent: "center", | |
| 1335 | - sx: { | |
| 1336 | - px: 1, | |
| 1337 | - m: "auto", | |
| 1338 | - maxWidth: "260px" | |
| 1339 | - } | |
| 1340 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.ColorSwatchIcon, { | |
| 1341 | - sx: { transform: "rotate(90deg)" }, | |
| 1342 | - fontSize: "large" | |
| 1343 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 1344 | - align: "center", | |
| 1345 | - variant: "subtitle2" | |
| 1346 | - }, (0, _wordpress_i18n.__)("Limit of %s classes reached", "elementor").replace("%s", String(limitCount))), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 1347 | - align: "center", | |
| 1348 | - variant: "caption", | |
| 1349 | - component: "div" | |
| 1350 | - }, (0, _wordpress_i18n.__)("Remove a class to create a new one.", "elementor"), " ", /* @__PURE__ */ react.createElement(_elementor_ui.Link, { | |
| 1351 | - color: "inherit", | |
| 1352 | - variant: "caption", | |
| 1353 | - component: "button", | |
| 1354 | - onClick: onClear, | |
| 1355 | - sx: { verticalAlign: "baseline" } | |
| 1356 | - }, (0, _wordpress_i18n.__)("Clear", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Button, { | |
| 1357 | - variant: "outlined", | |
| 1358 | - color: "secondary", | |
| 1359 | - size: "small", | |
| 1360 | - onClick: () => { | |
| 1361 | - openClassManagerPanel(); | |
| 1362 | - onClear(); | |
| 1363 | - } | |
| 1364 | - }, (0, _wordpress_i18n.__)("Class Manager", "elementor")))); | |
| 1365 | - var updateClassByProvider = (provider, data) => { | |
| 1366 | - if (!provider) return; | |
| 1367 | - const providerInstance = _elementor_editor_styles_repository.stylesRepository.getProviderByKey(provider); | |
| 1368 | - if (!providerInstance) return; | |
| 1369 | - return providerInstance.actions.update?.(data); | |
| 1370 | - }; | |
| 1371 | - function useOptions() { | |
| 1372 | - const { element } = useElement(); | |
| 1373 | - const isProviderEditable = (provider) => !!provider.actions.updateProps; | |
| 1374 | - return (0, _elementor_editor_styles_repository.useProviders)().filter(isProviderEditable).filter((provider) => provider.getKey() !== "default-styles").flatMap((provider) => { | |
| 1375 | - const isElements = (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey()); | |
| 1376 | - const styleDefs = provider.actions.all({ elementId: element.id }); | |
| 1377 | - if (isElements && styleDefs.length === 0) return [EMPTY_OPTION]; | |
| 1378 | - return styleDefs.map((styleDef) => { | |
| 1379 | - return { | |
| 1380 | - label: styleDef.label, | |
| 1381 | - value: styleDef.id, | |
| 1382 | - fixed: isElements, | |
| 1383 | - color: getTempStylesProviderColorName(getStylesProviderColorName(provider.getKey())), | |
| 1384 | - icon: isElements ? /* @__PURE__ */ react.createElement(_elementor_icons.MapPinIcon, null) : null, | |
| 1385 | - provider: provider.getKey() | |
| 1386 | - }; | |
| 1387 | - }); | |
| 1388 | - }); | |
| 1389 | - } | |
| 1390 | - function getTempStylesProviderColorName(color) { | |
| 1391 | - if (color === "accent") return "primary"; | |
| 1392 | - return color; | |
| 1393 | - } | |
| 1394 | - function useCreateAction() { | |
| 1395 | - const [provider, createAction] = useCreateAndApplyClass(); | |
| 1396 | - if (!provider || !createAction) return {}; | |
| 1397 | - const entityName = provider.labels.singular && provider.labels.plural ? provider.labels : void 0; | |
| 1398 | - const validate = (newClassLabel, event) => (0, _elementor_editor_styles_repository.validateStyleLabel)(newClassLabel, event); | |
| 1399 | - if (hasReachedLimit(provider)) return { | |
| 1400 | - entityName, | |
| 1401 | - isAtLimit: true, | |
| 1402 | - limitCount: provider.limit, | |
| 1403 | - validate | |
| 1404 | - }; | |
| 1405 | - const create = (classLabel) => { | |
| 1406 | - const { createdId } = createAction({ classLabel }); | |
| 1407 | - trackStyles(provider.getKey() ?? "", "classCreated", { | |
| 1408 | - source: "created", | |
| 1409 | - classTitle: classLabel, | |
| 1410 | - classId: createdId | |
| 1411 | - }); | |
| 1412 | - }; | |
| 1413 | - return { | |
| 1414 | - create, | |
| 1415 | - validate, | |
| 1416 | - entityName, | |
| 1417 | - isAtLimit: false | |
| 1418 | - }; | |
| 1419 | - } | |
| 1420 | - function hasReachedLimit(provider) { | |
| 1421 | - return provider.actions.all().length >= provider.limit; | |
| 1422 | - } | |
| 1423 | - function useAppliedOptions(options) { | |
| 1424 | - const appliedIds = usePanelElementSetting(useClassesProp())?.value ?? []; | |
| 1425 | - const appliedOptions = options.filter((option) => option.value && appliedIds.includes(option.value)); | |
| 1426 | - if (!appliedOptions.some((option) => option.provider && (0, _elementor_editor_styles_repository.isElementsStylesProvider)(option.provider))) appliedOptions.unshift(EMPTY_OPTION); | |
| 1427 | - return appliedOptions; | |
| 1428 | - } | |
| 1429 | - function useHandleSelect() { | |
| 1430 | - const apply = useUndoableApplyClass(); | |
| 1431 | - const unapply = useUndoableUnapplyClass(); | |
| 1432 | - return (_selectedOptions, reason, option) => { | |
| 1433 | - if (!option.value) return; | |
| 1434 | - switch (reason) { | |
| 1435 | - case "selectOption": | |
| 1436 | - apply({ | |
| 1437 | - classId: option.value, | |
| 1438 | - classLabel: option.label | |
| 1439 | - }); | |
| 1440 | - trackStyles(option.provider ?? "", "classApplied", { | |
| 1441 | - classId: option.value, | |
| 1442 | - source: "style-tab" | |
| 1443 | - }); | |
| 1444 | - break; | |
| 1445 | - case "removeOption": | |
| 1446 | - unapply({ | |
| 1447 | - classId: option.value, | |
| 1448 | - classLabel: option.label | |
| 1449 | - }); | |
| 1450 | - trackStyles(option.provider ?? "", "classRemoved", { | |
| 1451 | - classId: option.value, | |
| 1452 | - source: "style-tab" | |
| 1453 | - }); | |
| 1454 | - break; | |
| 1455 | - } | |
| 1456 | - }; | |
| 1457 | - } | |
| 1458 | - | |
| 1459 | -//#endregion | |
| 1460 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts | |
| 1461 | - var useStylesRerender = () => { | |
| 1462 | - const { provider } = useStyle(); | |
| 1463 | - const [, reRender] = (0, react.useReducer)((p) => !p, false); | |
| 1464 | - (0, react.useEffect)(() => provider?.subscribe(reRender), [provider]); | |
| 1465 | - }; | |
| 1466 | - | |
| 1467 | -//#endregion | |
| 1468 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts | |
| 1469 | - var HISTORY_DEBOUNCE_WAIT$1 = 800; | |
| 1470 | - function useStylesFields(propNames) { | |
| 1471 | - const { element: { id: elementId } } = useElement(); | |
| 1472 | - const { id: styleId, meta, provider, canEdit } = useStyle(); | |
| 1473 | - const undoableUpdateStyle = useUndoableActions$1({ | |
| 1474 | - elementId, | |
| 1475 | - meta | |
| 1476 | - }); | |
| 1477 | - useStylesRerender(); | |
| 1478 | - const values = getProps({ | |
| 1479 | - elementId, | |
| 1480 | - styleId, | |
| 1481 | - provider, | |
| 1482 | - meta, | |
| 1483 | - propNames | |
| 1484 | - }); | |
| 1485 | - const setValues = (props, { history: { propDisplayName } }) => { | |
| 1486 | - if (!styleId) undoableUpdateStyle({ | |
| 1487 | - styleId: null, | |
| 1488 | - provider: null, | |
| 1489 | - props, | |
| 1490 | - propDisplayName | |
| 1491 | - }); | |
| 1492 | - else undoableUpdateStyle({ | |
| 1493 | - styleId, | |
| 1494 | - provider, | |
| 1495 | - props, | |
| 1496 | - propDisplayName | |
| 1497 | - }); | |
| 1498 | - }; | |
| 1499 | - return { | |
| 1500 | - values, | |
| 1501 | - setValues, | |
| 1502 | - canEdit | |
| 1503 | - }; | |
| 1504 | - } | |
| 1505 | - function getProps({ styleId, elementId, provider, meta, propNames }) { | |
| 1506 | - if (!provider || !styleId) return null; | |
| 1507 | - const style = provider.actions.get(styleId, { elementId }); | |
| 1508 | - if (!style) throw new StyleNotFoundUnderProviderError({ context: { | |
| 1509 | - styleId, | |
| 1510 | - providerKey: provider.getKey() | |
| 1511 | - } }); | |
| 1512 | - const variant = (0, _elementor_editor_styles.getVariantByMeta)(style, meta); | |
| 1513 | - return Object.fromEntries(propNames.map((key) => [key, variant?.props[key] ?? null])); | |
| 1514 | - } | |
| 1515 | - function useUndoableActions$1({ elementId, meta: { breakpoint, state } }) { | |
| 1516 | - const classesProp = useClassesProp(); | |
| 1517 | - return (0, react.useMemo)(() => { | |
| 1518 | - const meta = { | |
| 1519 | - breakpoint, | |
| 1520 | - state | |
| 1521 | - }; | |
| 1522 | - const createStyleArgs = { | |
| 1523 | - elementId, | |
| 1524 | - classesProp, | |
| 1525 | - meta, | |
| 1526 | - label: _elementor_editor_styles_repository.ELEMENTS_STYLES_RESERVED_LABEL | |
| 1527 | - }; | |
| 1528 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 1529 | - do: (payload) => { | |
| 1530 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload); | |
| 1531 | - return update(payload); | |
| 1532 | - }, | |
| 1533 | - undo: (payload, doReturn) => { | |
| 1534 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return undoCreate(payload, doReturn); | |
| 1535 | - return undo(payload, doReturn); | |
| 1536 | - }, | |
| 1537 | - redo: (payload, doReturn) => { | |
| 1538 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload, doReturn); | |
| 1539 | - return update(payload); | |
| 1540 | - } | |
| 1541 | - }, { | |
| 1542 | - title: ({ provider, styleId }) => getTitle({ | |
| 1543 | - provider, | |
| 1544 | - styleId, | |
| 1545 | - elementId | |
| 1546 | - }), | |
| 1547 | - subtitle: ({ provider, styleId, propDisplayName }) => getSubtitle({ | |
| 1548 | - provider, | |
| 1549 | - styleId, | |
| 1550 | - elementId, | |
| 1551 | - propDisplayName | |
| 1552 | - }), | |
| 1553 | - debounce: { wait: 800 } | |
| 1554 | - }); | |
| 1555 | - function create({ props }, redoArgs) { | |
| 1556 | - return { createdStyleId: (0, _elementor_editor_elements.createElementStyle)({ | |
| 1557 | - ...createStyleArgs, | |
| 1558 | - props, | |
| 1559 | - styleId: redoArgs?.createdStyleId | |
| 1560 | - }) }; | |
| 1561 | - } | |
| 1562 | - function undoCreate(_, { createdStyleId }) { | |
| 1563 | - (0, _elementor_editor_elements.deleteElementStyle)(elementId, createdStyleId); | |
| 1564 | - } | |
| 1565 | - function update({ provider, styleId, props }) { | |
| 1566 | - if (!provider.actions.updateProps) throw new StylesProviderCannotUpdatePropsError({ context: { providerKey: provider.getKey() } }); | |
| 1567 | - const prevProps = getCurrentProps(provider.actions.get(styleId, { elementId }), meta); | |
| 1568 | - provider.actions.updateProps({ | |
| 1569 | - id: styleId, | |
| 1570 | - meta, | |
| 1571 | - props | |
| 1572 | - }, { elementId }); | |
| 1573 | - return { | |
| 1574 | - styleId, | |
| 1575 | - provider, | |
| 1576 | - prevProps | |
| 1577 | - }; | |
| 1578 | - } | |
| 1579 | - function undo(_, { styleId, provider, prevProps }) { | |
| 1580 | - provider.actions.updateProps?.({ | |
| 1581 | - id: styleId, | |
| 1582 | - meta, | |
| 1583 | - props: prevProps, | |
| 1584 | - mode: "replace" | |
| 1585 | - }, { elementId }); | |
| 1586 | - } | |
| 1587 | - }, [ | |
| 1588 | - elementId, | |
| 1589 | - breakpoint, | |
| 1590 | - state, | |
| 1591 | - classesProp | |
| 1592 | - ]); | |
| 1593 | - } | |
| 1594 | - __name(useUndoableActions$1, "useUndoableActions"); | |
| 1595 | - function getCurrentProps(style, meta) { | |
| 1596 | - if (!style) return {}; | |
| 1597 | - const props = (0, _elementor_editor_styles.getVariantByMeta)(style, meta)?.props ?? {}; | |
| 1598 | - return structuredClone(props); | |
| 1599 | - } | |
| 1600 | - var defaultHistoryTitles = { | |
| 1601 | - title: ({ provider }) => { | |
| 1602 | - const providerLabel = provider.labels?.singular; | |
| 1603 | - return providerLabel ? capitalize(providerLabel) : (0, _wordpress_i18n.__)("Style", "elementor"); | |
| 1604 | - }, | |
| 1605 | - subtitle: ({ provider, styleId, elementId, propDisplayName }) => { | |
| 1606 | - const styleLabel = provider.actions.get(styleId, { elementId })?.label; | |
| 1607 | - if (!styleLabel) throw new Error(`Style ${styleId} not found`); | |
| 1608 | - return (0, _wordpress_i18n.__)(`%s$1 %s$2 edited`, "elementor").replace("%s$1", styleLabel).replace("%s$2", propDisplayName); | |
| 1609 | - } | |
| 1610 | - }; | |
| 1611 | - var localStyleHistoryTitles = { | |
| 1612 | - title: ({ elementId }) => (0, _elementor_editor_elements.getElementLabel)(elementId), | |
| 1613 | - subtitle: ({ propDisplayName }) => (0, _wordpress_i18n.__)(`%s edited`, "elementor").replace("%s", propDisplayName) | |
| 1614 | - }; | |
| 1615 | - function capitalize(str) { | |
| 1616 | - return str.charAt(0).toUpperCase() + str.slice(1); | |
| 1617 | - } | |
| 1618 | - var isLocalStyle = (provider, styleId) => !provider || !styleId || (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey()); | |
| 1619 | - var getTitle = ({ provider, styleId, elementId }) => { | |
| 1620 | - if (isLocalStyle(provider, styleId)) return localStyleHistoryTitles.title({ elementId }); | |
| 1621 | - return defaultHistoryTitles.title({ provider }); | |
| 1622 | - }; | |
| 1623 | - var getSubtitle = ({ provider, styleId, propDisplayName, elementId }) => { | |
| 1624 | - if (isLocalStyle(provider, styleId)) return localStyleHistoryTitles.subtitle({ propDisplayName }); | |
| 1625 | - return defaultHistoryTitles.subtitle({ | |
| 1626 | - provider, | |
| 1627 | - styleId, | |
| 1628 | - elementId, | |
| 1629 | - propDisplayName | |
| 1630 | - }); | |
| 1631 | - }; | |
| 1632 | - | |
| 1633 | -//#endregion | |
| 1634 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-custom-css.ts | |
| 1635 | - var useCustomCss = () => { | |
| 1636 | - const { element: { id: elementId } } = useElement(); | |
| 1637 | - const { id: styleId, meta, provider } = useStyle(); | |
| 1638 | - const style = provider?.actions.get(styleId, { elementId }); | |
| 1639 | - const undoableUpdateStyle = useUndoableActions({ | |
| 1640 | - elementId, | |
| 1641 | - meta | |
| 1642 | - }); | |
| 1643 | - const currentStyleId = styleId ? styleId : null; | |
| 1644 | - const currentProvider = styleId ? provider : null; | |
| 1645 | - useStylesRerender(); | |
| 1646 | - const variant = style ? (0, _elementor_editor_styles.getVariantByMeta)(style, meta) : null; | |
| 1647 | - const setCustomCss = (raw, { history: { propDisplayName } }) => { | |
| 1648 | - const newValue = { raw: (0, _elementor_utils.encodeString)(sanitize(raw)) }; | |
| 1649 | - undoableUpdateStyle({ | |
| 1650 | - styleId: currentStyleId, | |
| 1651 | - provider: currentProvider, | |
| 1652 | - customCss: newValue, | |
| 1653 | - propDisplayName | |
| 1654 | - }); | |
| 1655 | - }; | |
| 1656 | - return { | |
| 1657 | - customCss: variant?.custom_css?.raw ? { raw: (0, _elementor_utils.decodeString)(variant.custom_css.raw) } : null, | |
| 1658 | - setCustomCss | |
| 1659 | - }; | |
| 1660 | - }; | |
| 1661 | - function useUndoableActions({ elementId, meta: { breakpoint, state } }) { | |
| 1662 | - const classesProp = useClassesProp(); | |
| 1663 | - return (0, react.useMemo)(() => { | |
| 1664 | - const meta = { | |
| 1665 | - breakpoint, | |
| 1666 | - state | |
| 1667 | - }; | |
| 1668 | - const createStyleArgs = { | |
| 1669 | - elementId, | |
| 1670 | - classesProp, | |
| 1671 | - meta, | |
| 1672 | - label: _elementor_editor_styles_repository.ELEMENTS_STYLES_RESERVED_LABEL | |
| 1673 | - }; | |
| 1674 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 1675 | - do: (payload) => { | |
| 1676 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload); | |
| 1677 | - return update(payload); | |
| 1678 | - }, | |
| 1679 | - undo: (payload, doReturn) => { | |
| 1680 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return undoCreate(payload, doReturn); | |
| 1681 | - return undoUpdate(payload, doReturn); | |
| 1682 | - }, | |
| 1683 | - redo: (payload, doReturn) => { | |
| 1684 | - if ((0, _elementor_editor_elements.shouldCreateNewLocalStyle)(payload)) return create(payload, doReturn); | |
| 1685 | - return update(payload); | |
| 1686 | - } | |
| 1687 | - }, { | |
| 1688 | - title: ({ provider, styleId }) => getTitle({ | |
| 1689 | - provider, | |
| 1690 | - styleId, | |
| 1691 | - elementId | |
| 1692 | - }), | |
| 1693 | - subtitle: ({ provider, styleId, propDisplayName }) => getSubtitle({ | |
| 1694 | - provider, | |
| 1695 | - styleId, | |
| 1696 | - elementId, | |
| 1697 | - propDisplayName | |
| 1698 | - }), | |
| 1699 | - debounce: { wait: 800 } | |
| 1700 | - }); | |
| 1701 | - function create({ customCss }, redoArgs) { | |
| 1702 | - return { createdStyleId: (0, _elementor_editor_elements.createElementStyle)({ | |
| 1703 | - ...createStyleArgs, | |
| 1704 | - props: {}, | |
| 1705 | - custom_css: customCss ?? null, | |
| 1706 | - styleId: redoArgs?.createdStyleId | |
| 1707 | - }) }; | |
| 1708 | - } | |
| 1709 | - function undoCreate(_, { createdStyleId }) { | |
| 1710 | - (0, _elementor_editor_elements.deleteElementStyle)(elementId, createdStyleId); | |
| 1711 | - } | |
| 1712 | - function update({ provider, styleId, customCss }) { | |
| 1713 | - if (!provider.actions.updateCustomCss) throw new StylesProviderCannotUpdatePropsError({ context: { providerKey: provider.getKey() } }); | |
| 1714 | - const prevCustomCss = getCurrentCustomCss(provider.actions.get(styleId, { elementId }), meta); | |
| 1715 | - provider.actions.updateCustomCss({ | |
| 1716 | - id: styleId, | |
| 1717 | - meta, | |
| 1718 | - custom_css: customCss | |
| 1719 | - }, { elementId }); | |
| 1720 | - return { | |
| 1721 | - styleId, | |
| 1722 | - provider, | |
| 1723 | - prevCustomCss | |
| 1724 | - }; | |
| 1725 | - } | |
| 1726 | - function undoUpdate(_, { styleId, provider, prevCustomCss }) { | |
| 1727 | - provider.actions.updateCustomCss?.({ | |
| 1728 | - id: styleId, | |
| 1729 | - meta, | |
| 1730 | - custom_css: prevCustomCss ?? { raw: "" } | |
| 1731 | - }, { elementId }); | |
| 1732 | - } | |
| 1733 | - }, [ | |
| 1734 | - elementId, | |
| 1735 | - breakpoint, | |
| 1736 | - state, | |
| 1737 | - classesProp | |
| 1738 | - ]); | |
| 1739 | - } | |
| 1740 | - function getCurrentCustomCss(style, meta) { | |
| 1741 | - if (!style) return null; | |
| 1742 | - return (0, _elementor_editor_styles.getVariantByMeta)(style, meta)?.custom_css ?? null; | |
| 1743 | - } | |
| 1744 | - function sanitize(raw) { | |
| 1745 | - return _elementor_editor_props.stringPropTypeUtil.schema.safeParse(_elementor_editor_props.stringPropTypeUtil.create(raw)).data?.value?.trim() ?? ""; | |
| 1746 | - } | |
| 1747 | - | |
| 1748 | -//#endregion | |
| 1749 | -//#region packages/packages/core/editor-editing-panel/src/components/custom-css-indicator.tsx | |
| 1750 | - var CustomCssIndicator = () => { | |
| 1751 | - const { customCss } = useCustomCss(); | |
| 1752 | - const { id: styleId, provider, meta } = useStyle(); | |
| 1753 | - const { element: { id: elementId } } = useElement(); | |
| 1754 | - const style = (0, react.useMemo)(() => styleId && provider ? provider.actions.get(styleId, { elementId }) : null, [ | |
| 1755 | - styleId, | |
| 1756 | - provider, | |
| 1757 | - elementId | |
| 1758 | - ]); | |
| 1759 | - const hasContent = Boolean(customCss?.raw?.trim()); | |
| 1760 | - const hasInheritedContent = (0, react.useMemo)(() => { | |
| 1761 | - if (hasContent) return false; | |
| 1762 | - return hasInheritedCustomCss(style, meta); | |
| 1763 | - }, [ | |
| 1764 | - hasContent, | |
| 1765 | - style, | |
| 1766 | - meta | |
| 1767 | - ]); | |
| 1768 | - if (!hasContent) { | |
| 1769 | - if (hasInheritedContent) return /* @__PURE__ */ react.createElement(StyleIndicator, null); | |
| 1770 | - return null; | |
| 1771 | - } | |
| 1772 | - return /* @__PURE__ */ react.createElement(StyleIndicator, { getColor: provider ? getStylesProviderThemeColor(provider.getKey()) : void 0 }); | |
| 1773 | - }; | |
| 1774 | - var hasInheritedCustomCss = (style, meta) => { | |
| 1775 | - if (!style || !meta) return false; | |
| 1776 | - const target = meta.breakpoint ?? "desktop"; | |
| 1777 | - const root = (0, _elementor_editor_responsive.getBreakpointsTree)(); | |
| 1778 | - const state = meta.state; | |
| 1779 | - function search(node, ancestorHasCss) { | |
| 1780 | - if (!style) return; | |
| 1781 | - const hasHere = Boolean((0, _elementor_editor_styles.getVariantByMeta)(style, { | |
| 1782 | - breakpoint: node.id, | |
| 1783 | - state | |
| 1784 | - })?.custom_css?.raw?.trim()); | |
| 1785 | - if (node.id === target) return ancestorHasCss; | |
| 1786 | - for (const child of node.children ?? []) { | |
| 1787 | - const res = search(child, ancestorHasCss || hasHere); | |
| 1788 | - if (res !== void 0) return res; | |
| 1789 | - } | |
| 1790 | - } | |
| 1791 | - return Boolean(search(root, false)); | |
| 1792 | - }; | |
| 1793 | - | |
| 1794 | -//#endregion | |
| 1795 | -//#region packages/packages/core/editor-editing-panel/src/editing-panel-replacement-registry.tsx | |
| 1796 | - var registry = /* @__PURE__ */ new Map(); | |
| 1797 | - var DEFAULT_PRIORITY$1 = 10; | |
| 1798 | - var registerEditingPanelReplacement = ({ id, priority = DEFAULT_PRIORITY$1, ...props }) => { | |
| 1799 | - registry.set(id, { | |
| 1800 | - ...props, | |
| 1801 | - priority | |
| 1802 | - }); | |
| 1803 | - }; | |
| 1804 | - var getEditingPanelReplacement = (element, elementType) => Array.from(registry.values()).filter(({ condition }) => condition(element, elementType)).sort((a, b) => a.priority - b.priority)?.[0] ?? null; | |
| 1805 | - | |
| 1806 | -//#endregion | |
| 1807 | -//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-error-fallback.tsx | |
| 1808 | - function EditorPanelErrorFallback() { | |
| 1809 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 1810 | - role: "alert", | |
| 1811 | - sx: { | |
| 1812 | - minHeight: "100%", | |
| 1813 | - p: 2 | |
| 1814 | - } | |
| 1815 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, { | |
| 1816 | - severity: "error", | |
| 1817 | - sx: { | |
| 1818 | - mb: 2, | |
| 1819 | - maxWidth: 400, | |
| 1820 | - textAlign: "center" | |
| 1821 | - } | |
| 1822 | - }, /* @__PURE__ */ react.createElement("strong", null, "Something went wrong"))); | |
| 1823 | - } | |
| 1824 | - | |
| 1825 | -//#endregion | |
| 1826 | -//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-sticky-promotion.tsx | |
| 1827 | - function getStickyPromotion() { | |
| 1828 | - return window.elementor?.config?.editingPanelStickyPromotion; | |
| 1829 | - } | |
| 1830 | - var EditingPanelStickyPromotion = () => { | |
| 1831 | - const promotion = getStickyPromotion(); | |
| 1832 | - if (!promotion) return null; | |
| 1833 | - return /* @__PURE__ */ react.createElement("div", { className: "elementor-panel-editor-sticky-promotion" }, /* @__PURE__ */ react.createElement("div", { className: "elementor-get-pro-sticky-message" }, promotion.message, " ", /* @__PURE__ */ react.createElement("a", { | |
| 1834 | - target: "_blank", | |
| 1835 | - rel: "noreferrer", | |
| 1836 | - href: promotion.url | |
| 1837 | - }, promotion.button_text))); | |
| 1838 | - }; | |
| 1839 | - | |
| 1840 | -//#endregion | |
| 1841 | -//#region packages/packages/core/editor-editing-panel/src/contexts/scroll-context.tsx | |
| 1842 | - var ScrollContext = (0, react.createContext)(void 0); | |
| 1843 | - var ScrollPanel = (0, _elementor_ui.styled)("div")` | |
| 14 | + background-color: ${({theme:e,isOverridden:t,getColor:n})=>{if(t)return e.palette.warning.light;const r=n?.(e);return r??e.palette.text.disabled}}; | |
| 15 | +`},"./packages/packages/core/editor-editing-panel/src/components/style-sections/background-section/background-section.tsx":function(e,t,n){n.r(t),n.d(t,{BackgroundSection:function(){return BackgroundSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx");const l=(0,s.__)("Background","elementor"),BackgroundSection=()=>r.createElement(i.SectionContent,null,r.createElement(a.StylesField,{bind:"background",propDisplayName:l},r.createElement(o.BackgroundControl,null)))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-color-field.tsx":function(e,t,n){n.r(t),n.d(t,{BorderColorField:function(){return BorderColorField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Border color","elementor"),BorderColorField=()=>r.createElement(a.StylesField,{bind:"border-color",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.ColorControl,null)))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-radius-field.tsx":function(e,t,n){n.r(t),n.d(t,{BorderRadiusField:function(){return BorderRadiusField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-props"),a=n("@elementor/icons"),i=n("@elementor/ui"),l=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts"),d=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx");const u=(0,l.__)("Border radius","elementor"),m=(0,i.withDirection)(a.RadiusTopLeftIcon),g=(0,i.withDirection)(a.RadiusTopRightIcon),y=(0,i.withDirection)(a.RadiusBottomLeftIcon),f=(0,i.withDirection)(a.RadiusBottomRightIcon),getStartStartLabel=e=>e?(0,l.__)("Top right","elementor"):(0,l.__)("Top left","elementor"),getStartStartAriaLabel=e=>e?(0,l.__)("Border top right radius","elementor"):(0,l.__)("Border top left radius","elementor"),getStartEndLabel=e=>e?(0,l.__)("Top left","elementor"):(0,l.__)("Top right","elementor"),getStartEndAriaLabel=e=>e?(0,l.__)("Border top left radius","elementor"):(0,l.__)("Border top right radius","elementor"),getEndStartLabel=e=>e?(0,l.__)("Bottom right","elementor"):(0,l.__)("Bottom left","elementor"),getEndStartAriaLabel=e=>e?(0,l.__)("Border bottom right radius","elementor"):(0,l.__)("Border bottom left radius","elementor"),getEndEndLabel=e=>e?(0,l.__)("Bottom left","elementor"):(0,l.__)("Bottom right","elementor"),getEndEndAriaLabel=e=>e?(0,l.__)("Border bottom left radius","elementor"):(0,l.__)("Border bottom right radius","elementor"),getCorners=e=>[{label:getStartStartLabel(e),ariaLabel:getStartStartAriaLabel(e),icon:r.createElement(m,{fontSize:"tiny"}),bind:"start-start"},{label:getStartEndLabel(e),ariaLabel:getStartEndAriaLabel(e),icon:r.createElement(g,{fontSize:"tiny"}),bind:"start-end"},{label:getEndStartLabel(e),ariaLabel:getEndStartAriaLabel(e),icon:r.createElement(y,{fontSize:"tiny"}),bind:"end-start"},{label:getEndEndLabel(e),ariaLabel:getEndEndAriaLabel(e),icon:r.createElement(f,{fontSize:"tiny"}),bind:"end-end"}],BorderRadiusField=()=>{const{isSiteRtl:e}=(0,p.useDirection)();return r.createElement(d.UiProviders,null,r.createElement(c.StylesField,{bind:"border-radius",propDisplayName:u},r.createElement(o.EqualUnequalSizesControl,{items:getCorners(e),label:u,icon:r.createElement(a.BorderCornersIcon,{fontSize:"tiny"}),tooltipLabel:(0,l.__)("Adjust corners","elementor"),multiSizePropTypeUtil:s.borderRadiusPropTypeUtil})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-section.tsx":function(e,t,n){n.r(t),n.d(t,{BorderSection:function(){return BorderSection}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-color-field.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-radius-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-style-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-width-field.tsx");const BorderSection=()=>r.createElement(o.SectionContent,null,r.createElement(l.BorderWidthField,null),r.createElement(s.BorderColorField,null),r.createElement(i.BorderStyleField,null),r.createElement(a.BorderRadiusField,null))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-style-field.tsx":function(e,t,n){n.r(t),n.d(t,{BorderStyleField:function(){return BorderStyleField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Border type","elementor"),c=[{value:"none",label:(0,s.__)("None","elementor")},{value:"solid",label:(0,s.__)("Solid","elementor")},{value:"dashed",label:(0,s.__)("Dashed","elementor")},{value:"dotted",label:(0,s.__)("Dotted","elementor")},{value:"double",label:(0,s.__)("Double","elementor")},{value:"groove",label:(0,s.__)("Groove","elementor")},{value:"ridge",label:(0,s.__)("Ridge","elementor")},{value:"inset",label:(0,s.__)("Inset","elementor")},{value:"outset",label:(0,s.__)("Outset","elementor")}],BorderStyleField=()=>r.createElement(a.StylesField,{bind:"border-style",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.SelectControl,{options:c})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-width-field.tsx":function(e,t,n){n.r(t),n.d(t,{BorderWidthField:function(){return BorderWidthField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-props"),a=n("@elementor/icons"),i=n("@elementor/ui"),l=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts");const d=(0,l.__)("Border width","elementor"),u=(0,i.withDirection)(a.SideRightIcon),m=(0,i.withDirection)(a.SideLeftIcon),getEdges=e=>[{label:(0,l.__)("Top","elementor"),ariaLabel:(0,l.__)("Border top width","elementor"),icon:r.createElement(a.SideTopIcon,{fontSize:"tiny"}),bind:"block-start"},{label:e?(0,l.__)("Left","elementor"):(0,l.__)("Right","elementor"),ariaLabel:e?(0,l.__)("Border left width","elementor"):(0,l.__)("Border right width","elementor"),icon:r.createElement(u,{fontSize:"tiny"}),bind:"inline-end"},{label:(0,l.__)("Bottom","elementor"),ariaLabel:(0,l.__)("Border bottom width","elementor"),icon:r.createElement(a.SideBottomIcon,{fontSize:"tiny"}),bind:"block-end"},{label:e?(0,l.__)("Right","elementor"):(0,l.__)("Left","elementor"),ariaLabel:e?(0,l.__)("Border right width","elementor"):(0,l.__)("Border left width","elementor"),icon:r.createElement(m,{fontSize:"tiny"}),bind:"inline-start"}],BorderWidthField=()=>{const{isSiteRtl:e}=(0,p.useDirection)();return r.createElement(c.StylesField,{bind:"border-width",propDisplayName:d},r.createElement(o.EqualUnequalSizesControl,{items:getEdges(e),label:d,icon:r.createElement(a.SideAllIcon,{fontSize:"tiny"}),tooltipLabel:(0,l.__)("Adjust borders","elementor"),multiSizePropTypeUtil:s.borderWidthPropTypeUtil}))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/blend-mode-field.tsx":function(e,t,n){n.r(t),n.d(t,{BlendModeField:function(){return BlendModeField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Blend mode","elementor"),c=[{label:(0,s.__)("Normal","elementor"),value:"normal"},{label:(0,s.__)("Multiply","elementor"),value:"multiply"},{label:(0,s.__)("Screen","elementor"),value:"screen"},{label:(0,s.__)("Overlay","elementor"),value:"overlay"},{label:(0,s.__)("Darken","elementor"),value:"darken"},{label:(0,s.__)("Lighten","elementor"),value:"lighten"},{label:(0,s.__)("Color dodge","elementor"),value:"color-dodge"},{label:(0,s.__)("Color burn","elementor"),value:"color-burn"},{label:(0,s.__)("Saturation","elementor"),value:"saturation"},{label:(0,s.__)("Color","elementor"),value:"color"},{label:(0,s.__)("Difference","elementor"),value:"difference"},{label:(0,s.__)("Exclusion","elementor"),value:"exclusion"},{label:(0,s.__)("Hue","elementor"),value:"hue"},{label:(0,s.__)("Luminosity","elementor"),value:"luminosity"},{label:(0,s.__)("Soft light","elementor"),value:"soft-light"},{label:(0,s.__)("Hard light","elementor"),value:"hard-light"}],BlendModeField=()=>r.createElement(a.StylesField,{bind:"mix-blend-mode",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.SelectControl,{options:c})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/effects-section.tsx":function(e,t,n){n.r(t),n.d(t,{EffectsSection:function(){return EffectsSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/utils/can-element-have-children.ts"),p=n("./packages/packages/core/editor-editing-panel/src/utils/get-recently-used-styles.ts"),d=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/blend-mode-field.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/opacity-control-field.tsx");const y=(0,s.__)("Box shadow","elementor"),f=(0,s.__)("Filters","elementor"),k=(0,s.__)("Transform","elementor"),b=(0,s.__)("Backdrop filters","elementor"),v=(0,s.__)("Transitions","elementor"),EffectsSection=()=>{const{element:e}=(0,a.useElement)(),{meta:t}=(0,i.useStyle)(),n=(0,c.canElementHaveChildren)(e?.id??"");return r.createElement(u.SectionContent,{gap:1},r.createElement(m.BlendModeField,null),r.createElement(d.PanelDivider,null),r.createElement(g.OpacityControlField,null),r.createElement(d.PanelDivider,null),r.createElement(l.StylesField,{bind:"box-shadow",propDisplayName:y},r.createElement(o.BoxShadowRepeaterControl,null)),r.createElement(d.PanelDivider,null),r.createElement(l.StylesField,{bind:"transform",propDisplayName:k},r.createElement(o.TransformRepeaterControl,{showChildrenPerspective:n})),r.createElement(d.PanelDivider,null),r.createElement(l.StylesField,{bind:"transition",propDisplayName:v},r.createElement(o.TransitionRepeaterControl,{currentStyleState:t.state,recentlyUsedListGetter:()=>(0,p.getRecentlyUsedList)(e?.id??"")})),r.createElement(d.PanelDivider,null),r.createElement(l.StylesField,{bind:"filter",propDisplayName:f},r.createElement(o.FilterRepeaterControl,null)),r.createElement(d.PanelDivider,null),r.createElement(l.StylesField,{bind:"backdrop-filter",propDisplayName:b},r.createElement(o.FilterRepeaterControl,{filterPropName:"backdrop-filter"})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/opacity-control-field.tsx":function(e,t,n){n.r(t),n.d(t,{OpacityControlField:function(){return OpacityControlField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Opacity","elementor"),OpacityControlField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"opacity",propDisplayName:l},r.createElement(i.StylesFieldLayout,{ref:e,label:l},r.createElement(o.SizeControl,{units:["%"],anchorRef:e,defaultUnit:"%"})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-content-field.tsx":function(e,t,n){n.r(t),n.d(t,{AlignContentField:function(){return AlignContentField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const u=(0,i.__)("Align content","elementor"),m=(0,a.withDirection)(s.JustifyTopIcon),g=(0,a.withDirection)(s.JustifyBottomIcon),y={isClockwise:!1,offset:0,disableRotationForReversed:!0},f=[{value:"start",label:(0,i.__)("Start","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:m,size:e},y)),showTooltip:!0},{value:"center",label:(0,i.__)("Center","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifyCenterIcon,size:e},y)),showTooltip:!0},{value:"end",label:(0,i.__)("End","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:g,size:e},y)),showTooltip:!0},{value:"space-between",label:(0,i.__)("Space between","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifySpaceBetweenVerticalIcon,size:e},y)),showTooltip:!0},{value:"space-around",label:(0,i.__)("Space around","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifySpaceAroundVerticalIcon,size:e},y)),showTooltip:!0},{value:"space-evenly",label:(0,i.__)("Space evenly","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifyDistributeVerticalIcon,size:e},y)),showTooltip:!0}],AlignContentField=()=>r.createElement(l.StylesField,{bind:"align-content",propDisplayName:u},r.createElement(c.UiProviders,null,r.createElement(p.StylesFieldLayout,{label:u,direction:"column"},r.createElement(o.ToggleControl,{options:f,fullWidth:!0}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-items-field.tsx":function(e,t,n){n.r(t),n.d(t,{AlignItemsField:function(){return AlignItemsField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const u=(0,i.__)("Align items","elementor"),m=(0,a.withDirection)(s.LayoutAlignLeftIcon),g=(0,a.withDirection)(s.LayoutAlignRightIcon),y={isClockwise:!1,offset:90},f=[{value:"start",label:(0,i.__)("Start","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:m,size:e},y)),showTooltip:!0},{value:"center",label:(0,i.__)("Center","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.LayoutAlignCenterIcon,size:e},y)),showTooltip:!0},{value:"end",label:(0,i.__)("End","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:g,size:e},y)),showTooltip:!0},{value:"stretch",label:(0,i.__)("Stretch","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.LayoutDistributeVerticalIcon,size:e},y)),showTooltip:!0}],AlignItemsField=()=>r.createElement(c.UiProviders,null,r.createElement(l.StylesField,{bind:"align-items",propDisplayName:u},r.createElement(p.StylesFieldLayout,{label:u},r.createElement(o.ToggleControl,{options:f}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-child-field.tsx":function(e,t,n){n.r(t),n.d(t,{AlignSelfChild:function(){return AlignSelfChild}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const u=(0,i.__)("Align self","elementor"),m={row:90,"row-reverse":90,column:0,"column-reverse":0},g=(0,a.withDirection)(s.LayoutAlignLeftIcon),y=(0,a.withDirection)(s.LayoutAlignRightIcon),f={isClockwise:!1},getOptions=e=>[{value:"start",label:(0,i.__)("Start","elementor"),renderContent:({size:t})=>r.createElement(d.RotatedIcon,_extends({icon:g,size:t,offset:m[e]},f)),showTooltip:!0},{value:"center",label:(0,i.__)("Center","elementor"),renderContent:({size:t})=>r.createElement(d.RotatedIcon,_extends({icon:s.LayoutAlignCenterIcon,size:t,offset:m[e]},f)),showTooltip:!0},{value:"end",label:(0,i.__)("End","elementor"),renderContent:({size:t})=>r.createElement(d.RotatedIcon,_extends({icon:y,size:t,offset:m[e]},f)),showTooltip:!0},{value:"stretch",label:(0,i.__)("Stretch","elementor"),renderContent:({size:t})=>r.createElement(d.RotatedIcon,_extends({icon:s.LayoutDistributeVerticalIcon,size:t,offset:m[e]},f)),showTooltip:!0}],AlignSelfChild=({parentStyleDirection:e})=>r.createElement(l.StylesField,{bind:"align-self",propDisplayName:u},r.createElement(c.UiProviders,null,r.createElement(p.StylesFieldLayout,{label:u},r.createElement(o.ToggleControl,{options:getOptions(e)}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/display-field.tsx":function(e,t,n){n.r(t),n.d(t,{DisplayField:function(){return DisplayField},useDisplayPlaceholderValue:function(){return useDisplayPlaceholderValue}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,s.__)("Display","elementor"),p=[{value:"block",renderContent:()=>(0,s.__)("Block","elementor"),label:(0,s.__)("Block","elementor"),showTooltip:!0},{value:"flex",renderContent:()=>(0,s.__)("Flex","elementor"),label:(0,s.__)("Flex","elementor"),showTooltip:!0},{value:"inline-block",renderContent:()=>(0,s.__)("In-blk","elementor"),label:(0,s.__)("Inline-block","elementor"),showTooltip:!0},{value:"none",renderContent:()=>(0,s.__)("None","elementor"),label:(0,s.__)("None","elementor"),showTooltip:!0},{value:"inline-flex",renderContent:()=>(0,s.__)("In-flx","elementor"),label:(0,s.__)("Inline-flex","elementor"),showTooltip:!0}],DisplayField=()=>{const e=useDisplayPlaceholderValue();return r.createElement(i.StylesField,{bind:"display",propDisplayName:c,placeholder:e},r.createElement(l.StylesFieldLayout,{label:c,direction:"column"},r.createElement(o.ToggleControl,{options:p,maxItems:4,fullWidth:!0})))},useDisplayPlaceholderValue=()=>(0,a.useStylesInheritanceChain)(["display"])[0]?.value??void 0},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-direction-field.tsx":function(e,t,n){n.r(t),n.d(t,{FlexDirectionField:function(){return FlexDirectionField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const d=(0,i.__)("Direction","elementor"),u=[{value:"row",label:(0,i.__)("Row","elementor"),renderContent:({size:e})=>{const t=(0,a.withDirection)(s.ArrowRightIcon);return r.createElement(t,{fontSize:e})},showTooltip:!0},{value:"column",label:(0,i.__)("Column","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowDownSmallIcon,{fontSize:e}),showTooltip:!0},{value:"row-reverse",label:(0,i.__)("Reversed row","elementor"),renderContent:({size:e})=>{const t=(0,a.withDirection)(s.ArrowLeftIcon);return r.createElement(t,{fontSize:e})},showTooltip:!0},{value:"column-reverse",label:(0,i.__)("Reversed column","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowUpSmallIcon,{fontSize:e}),showTooltip:!0}],FlexDirectionField=()=>r.createElement(l.StylesField,{bind:"flex-direction",propDisplayName:d},r.createElement(c.UiProviders,null,r.createElement(p.StylesFieldLayout,{label:d},r.createElement(o.ToggleControl,{options:u}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-order-field.tsx":function(e,t,n){n.r(t),n.d(t,{FIRST_DEFAULT_VALUE:function(){return y},FlexOrderField:function(){return FlexOrderField},LAST_DEFAULT_VALUE:function(){return f}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const g=(0,i.__)("Order","elementor"),y=-99999,f=99999,k="first",b="last",v="custom",x={[k]:y,[b]:f},E=[{value:k,label:(0,i.__)("First","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowUpSmallIcon,{fontSize:e}),showTooltip:!0},{value:b,label:(0,i.__)("Last","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowDownSmallIcon,{fontSize:e}),showTooltip:!0},{value:v,label:(0,i.__)("Custom","elementor"),renderContent:({size:e})=>r.createElement(s.PencilIcon,{fontSize:e}),showTooltip:!0}],FlexOrderField=()=>r.createElement(l.StylesField,{bind:"order",propDisplayName:g},r.createElement(p.UiProviders,null,r.createElement(u.SectionContent,null,r.createElement(FlexOrderFieldContent,null))));function FlexOrderFieldContent(){const{value:e,setValue:t,canEdit:n}=(0,c.useStylesField)("order",{history:{propDisplayName:g}}),{placeholder:s}=(0,o.useBoundProp)(),l=s,p=(0,r.useMemo)(()=>getGroupControlValue(e?.value??null),[e]),[u,h]=(0,r.useState)(p),[_,S]=(0,r.useState)(!1);(0,r.useEffect)(()=>{_||h(p)},[p,_]),(0,r.useEffect)(()=>{null===e&&S(!1)},[e]);const C=getGroupControlValue(l?.value??null),w=v===u||v===C,T=v===C?String(l?.value??null):"";return r.createElement(r.Fragment,null,r.createElement(m.StylesFieldLayout,{label:g},r.createElement(o.ControlToggleButtonGroup,{items:E,value:u,onChange:e=>{h(e),S(e===v),t(v!==e?k!==e&&b!==e?null:{$$type:"number",value:x[e]}:{$$type:"number",value:null})},exclusive:!0,placeholder:C,disabled:!n})),w&&r.createElement(a.Grid,{container:!0,gap:2,alignItems:"center",flexWrap:"nowrap"},r.createElement(a.Grid,{item:!0,xs:6},r.createElement(d.ControlLabel,null,(0,i.__)("Custom order","elementor"))),r.createElement(a.Grid,{item:!0,xs:6,sx:{display:"flex",justifyContent:"end"}},r.createElement(o.NumberControl,{min:y+1,max:f-1,shouldForceInt:!0,placeholder:T}))))}const getGroupControlValue=e=>f===e?b:y===e?k:null!==e?v:null},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-size-field.tsx":function(e,t,n){n.r(t),n.d(t,{FlexSizeField:function(){return FlexSizeField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-props"),a=n("@elementor/icons"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const m=(0,i.__)("Flex Size","elementor"),g=[{value:"flex-grow",label:(0,i.__)("Grow","elementor"),renderContent:({size:e})=>r.createElement(a.ExpandIcon,{fontSize:e}),showTooltip:!0},{value:"flex-shrink",label:(0,i.__)("Shrink","elementor"),renderContent:({size:e})=>r.createElement(a.ShrinkIcon,{fontSize:e}),showTooltip:!0},{value:"custom",label:(0,i.__)("Custom","elementor"),renderContent:({size:e})=>r.createElement(a.PencilIcon,{fontSize:e}),showTooltip:!0}],FlexSizeField=()=>r.createElement(p.UiProviders,null,r.createElement(d.SectionContent,null,r.createElement(l.StylesField,{bind:"flex",propDisplayName:m},r.createElement(FlexSizeFieldContent,null)))),FlexSizeFieldContent=()=>{const{value:e,setValue:t,canEdit:n}=(0,c.useStylesField)("flex",{history:{propDisplayName:m}}),{placeholder:s}=(0,o.useBoundProp)(),a=extractFlexValues(e),i=(0,r.useMemo)(()=>getActiveGroup(a),[a]),[l,p]=(0,r.useState)(i),[d,y]=(0,r.useState)(!1);(0,r.useEffect)(()=>{d||p(i)},[i,d]),(0,r.useEffect)(()=>{null===e&&y(!1)},[e]);const f=getActiveGroup(extractFlexValues(s)),k="custom"===l||"custom"===f;return r.createElement(r.Fragment,null,r.createElement(u.StylesFieldLayout,{label:m},r.createElement(o.ControlToggleButtonGroup,{value:l??null,placeholder:f??null,onChange:(n=null)=>{p(n),y("custom"===n);const r=createFlexValueForGroup(n,e);t(r)},disabled:!n,items:g,exclusive:!0})),k&&r.createElement(FlexCustomField,null))};function extractFlexValues(e){return{grow:e?.value?.flexGrow?.value??null,shrink:e?.value?.flexShrink?.value??null,basis:e?.value?.flexBasis?.value??null}}const createFlexValueForGroup=(e,t)=>e?"flex-grow"===e?s.flexPropTypeUtil.create({flexGrow:s.numberPropTypeUtil.create(1),flexShrink:s.numberPropTypeUtil.create(0),flexBasis:s.sizePropTypeUtil.create({unit:"auto",size:""})}):"flex-shrink"===e?s.flexPropTypeUtil.create({flexGrow:s.numberPropTypeUtil.create(0),flexShrink:s.numberPropTypeUtil.create(1),flexBasis:s.sizePropTypeUtil.create({unit:"auto",size:""})}):"custom"===e?t||s.flexPropTypeUtil.create({flexGrow:null,flexShrink:null,flexBasis:null}):null:null,FlexCustomField=()=>{const e=(0,r.useRef)(null),t=(0,o.useBoundProp)(s.flexPropTypeUtil);return r.createElement(o.PropProvider,t,r.createElement(r.Fragment,null,r.createElement(u.StylesFieldLayout,{label:(0,i.__)("Grow","elementor")},r.createElement(o.PropKeyProvider,{bind:"flexGrow"},r.createElement(o.NumberControl,{min:0,shouldForceInt:!0}))),r.createElement(u.StylesFieldLayout,{label:(0,i.__)("Shrink","elementor")},r.createElement(o.PropKeyProvider,{bind:"flexShrink"},r.createElement(o.NumberControl,{min:0,shouldForceInt:!0}))),r.createElement(u.StylesFieldLayout,{label:(0,i.__)("Basis","elementor"),ref:e},r.createElement(o.PropKeyProvider,{bind:"flexBasis"},r.createElement(o.SizeControl,{extendedOptions:["auto"],anchorRef:e})))))},getActiveGroup=({grow:e,shrink:t,basis:n})=>{if(null===e&&null===t&&!n)return null;const r=null===n||"object"==typeof n&&"auto"===n.unit;return n&&!r?"custom":1!==e||null!==t&&0!==t||!r?1!==t||null!==e&&0!==e||!r?"custom":"flex-shrink":"flex-grow"}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/gap-control-field.tsx":function(e,t,n){n.r(t),n.d(t,{GapControlField:function(){return GapControlField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx");const i=(0,s.__)("Gaps","elementor"),GapControlField=()=>r.createElement(a.StylesField,{bind:"gap",propDisplayName:i},r.createElement(o.GapControl,{label:i}))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/justify-content-field.tsx":function(e,t,n){n.r(t),n.d(t,{JustifyContentField:function(){return JustifyContentField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const u=(0,i.__)("Justify content","elementor"),m=(0,a.withDirection)(s.JustifyTopIcon),g=(0,a.withDirection)(s.JustifyBottomIcon),y={isClockwise:!0,offset:-90},f=[{value:"flex-start",label:(0,i.__)("Start","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:m,size:e},y)),showTooltip:!0},{value:"center",label:(0,i.__)("Center","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifyCenterIcon,size:e},y)),showTooltip:!0},{value:"flex-end",label:(0,i.__)("End","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:g,size:e},y)),showTooltip:!0},{value:"space-between",label:(0,i.__)("Space between","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifySpaceBetweenVerticalIcon,size:e},y)),showTooltip:!0},{value:"space-around",label:(0,i.__)("Space around","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifySpaceAroundVerticalIcon,size:e},y)),showTooltip:!0},{value:"space-evenly",label:(0,i.__)("Space evenly","elementor"),renderContent:({size:e})=>r.createElement(d.RotatedIcon,_extends({icon:s.JustifyDistributeVerticalIcon,size:e},y)),showTooltip:!0}],JustifyContentField=()=>r.createElement(l.StylesField,{bind:"justify-content",propDisplayName:u},r.createElement(c.UiProviders,null,r.createElement(p.StylesFieldLayout,{label:u,direction:"column"},r.createElement(o.ToggleControl,{options:f,fullWidth:!0}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/layout-section.tsx":function(e,t,n){n.r(t),n.d(t,{LayoutSection:function(){return LayoutSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-elements"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/hooks/use-computed-style.ts"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),p=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-content-field.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-items-field.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-child-field.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/display-field.tsx"),f=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-direction-field.tsx"),k=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-order-field.tsx"),b=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-size-field.tsx"),v=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/gap-control-field.tsx"),x=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/justify-content-field.tsx"),E=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/wrap-field.tsx");const h=(0,a.__)("Display","elementor"),_=(0,a.__)("Flex wrap","elementor"),LayoutSection=()=>{const{value:e}=(0,c.useStylesField)("display",{history:{propDisplayName:h}}),t=(0,y.useDisplayPlaceholderValue)(),n=shouldDisplayFlexFields(e,t),{element:o}=(0,i.useElement)(),a=(0,s.useParentElement)(o.id),p=(0,l.useComputedStyle)(a?.id||null),u=p?.flexDirection??"row";return r.createElement(d.SectionContent,null,r.createElement(y.DisplayField,null),n&&r.createElement(FlexFields,null),"flex"===p?.display&&r.createElement(FlexChildFields,{parentStyleDirection:u}))},FlexFields=()=>{const{value:e}=(0,c.useStylesField)("flex-wrap",{history:{propDisplayName:_}});return r.createElement(r.Fragment,null,r.createElement(f.FlexDirectionField,null),r.createElement(x.JustifyContentField,null),r.createElement(m.AlignItemsField,null),r.createElement(p.PanelDivider,null),r.createElement(v.GapControlField,null),r.createElement(E.WrapField,null),["wrap","wrap-reverse"].includes(e?.value)&&r.createElement(u.AlignContentField,null))},FlexChildFields=({parentStyleDirection:e})=>r.createElement(r.Fragment,null,r.createElement(p.PanelDivider,null),r.createElement(o.ControlFormLabel,null,(0,a.__)("Flex child","elementor")),r.createElement(g.AlignSelfChild,{parentStyleDirection:e}),r.createElement(k.FlexOrderField,null),r.createElement(b.FlexSizeField,null)),shouldDisplayFlexFields=(e,t)=>{const n=e?.value??t?.value;return!!n&&("flex"===n||"inline-flex"===n)}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx":function(e,t,n){n.r(t),n.d(t,{RotatedIcon:function(){return RotatedIcon}});var r=n("react"),o=n("@elementor/ui"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts");const i=(0,s.__)("Flex direction","elementor"),l={row:0,column:90,"row-reverse":180,"column-reverse":270},c={row:0,column:-90,"row-reverse":-180,"column-reverse":-270},RotatedIcon=({icon:e,size:t,isClockwise:n=!0,offset:o=0,disableRotationForReversed:s=!1})=>{const a=(0,r.useRef)(useGetTargetAngle(n,o,s));return a.current=useGetTargetAngle(n,o,s,a),r.createElement(e,{fontSize:t,sx:{transition:".3s",rotate:`${a.current}deg`}})},useGetTargetAngle=(e,t,n,r)=>{const{value:s}=(0,a.useStylesField)("flex-direction",{history:{propDisplayName:i}}),p="rtl"===(0,o.useTheme)().direction?-1:1,d=e?l:c,u=s?.value||"row",m=r?r.current*p:d[u]+t,g=((d[u]+t-m+360)%360+180)%360-180;return n&&["row-reverse","column-reverse"].includes(u)?0:(m+g)*p}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/wrap-field.tsx":function(e,t,n){n.r(t),n.d(t,{WrapField:function(){return WrapField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const p=(0,a.__)("Wrap","elementor"),d=[{value:"nowrap",label:(0,a.__)("No wrap","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowRightIcon,{fontSize:e}),showTooltip:!0},{value:"wrap",label:(0,a.__)("Wrap","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowBackIcon,{fontSize:e}),showTooltip:!0},{value:"wrap-reverse",label:(0,a.__)("Reversed wrap","elementor"),renderContent:({size:e})=>r.createElement(s.ArrowForwardIcon,{fontSize:e}),showTooltip:!0}],WrapField=()=>r.createElement(i.StylesField,{bind:"flex-wrap",propDisplayName:p},r.createElement(l.UiProviders,null,r.createElement(c.StylesFieldLayout,{label:p},r.createElement(o.ToggleControl,{options:d}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/dimensions-field.tsx":function(e,t,n){n.r(t),n.d(t,{DimensionsField:function(){return DimensionsField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx");const m=(0,a.withDirection)(s.SideLeftIcon),g=(0,a.withDirection)(s.SideRightIcon),y={"inset-block-start":r.createElement(s.SideTopIcon,{fontSize:"tiny"}),"inset-block-end":r.createElement(s.SideBottomIcon,{fontSize:"tiny"}),"inset-inline-start":r.createElement(u.RotatedIcon,{icon:m,size:"tiny"}),"inset-inline-end":r.createElement(u.RotatedIcon,{icon:g,size:"tiny"})},getInlineStartLabel=e=>e?(0,i.__)("Right","elementor"):(0,i.__)("Left","elementor"),getInlineEndLabel=e=>e?(0,i.__)("Left","elementor"):(0,i.__)("Right","elementor"),DimensionsField=()=>{const{isSiteRtl:e}=(0,c.useDirection)(),t=[(0,r.useRef)(null),(0,r.useRef)(null)];return r.createElement(p.UiProviders,null,r.createElement(a.Stack,{direction:"row",gap:2,flexWrap:"nowrap",ref:t[0]},r.createElement(DimensionField,{side:"inset-block-start",label:(0,i.__)("Top","elementor"),rowRef:t[0]}),r.createElement(DimensionField,{side:"inset-inline-end",label:getInlineEndLabel(e),rowRef:t[0]})),r.createElement(a.Stack,{direction:"row",gap:2,flexWrap:"nowrap",ref:t[1]},r.createElement(DimensionField,{side:"inset-block-end",label:(0,i.__)("Bottom","elementor"),rowRef:t[1]}),r.createElement(DimensionField,{side:"inset-inline-start",label:getInlineStartLabel(e),rowRef:t[1]})))},DimensionField=({side:e,label:t,rowRef:n})=>r.createElement(l.StylesField,{bind:e,propDisplayName:t},r.createElement(a.Grid,{container:!0,gap:.75,alignItems:"center"},r.createElement(a.Grid,{item:!0,xs:12},r.createElement(d.ControlLabel,null,t)),r.createElement(a.Grid,{item:!0,xs:12},r.createElement(o.SizeControl,{startIcon:y[e],extendedOptions:["auto"],anchorRef:n,min:-Number.MAX_SAFE_INTEGER}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/offset-field.tsx":function(e,t,n){n.r(t),n.d(t,{OffsetField:function(){return OffsetField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Anchor offset","elementor"),c=["px","em","rem","vw","vh"],OffsetField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"scroll-margin-top",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{units:c,anchorRef:e})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-field.tsx":function(e,t,n){n.r(t),n.d(t,{PositionField:function(){return PositionField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Position","elementor"),c=[{label:(0,s.__)("Static","elementor"),value:"static"},{label:(0,s.__)("Relative","elementor"),value:"relative"},{label:(0,s.__)("Absolute","elementor"),value:"absolute"},{label:(0,s.__)("Fixed","elementor"),value:"fixed"},{label:(0,s.__)("Sticky","elementor"),value:"sticky"}],PositionField=({onChange:e})=>r.createElement(a.StylesField,{bind:"position",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.SelectControl,{options:c,onChange:e})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-section.tsx":function(e,t,n){n.r(t),n.d(t,{PositionSection:function(){return PositionSection}});var r=n("react"),o=n("@elementor/session"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),l=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts"),c=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/dimensions-field.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/offset-field.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-field.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/z-index-field.tsx");const y="static",f=(0,s.__)("Position","elementor"),k=(0,s.__)("Dimensions","elementor"),b=["inset-block-start","inset-block-end","inset-inline-start","inset-inline-end","z-index"],v={"inset-block-start":void 0,"inset-block-end":void 0,"inset-inline-start":void 0,"inset-inline-end":void 0,"z-index":void 0},PositionSection=()=>{const{value:e}=(0,i.useStylesField)("position",{history:{propDisplayName:f}}),{values:t,setValues:n}=(0,l.useStylesFields)([...b]),[o,s,a]=usePersistDimensions(),x=(0,r.useCallback)(()=>{const e={"inset-block-start":t?.["inset-block-start"],"inset-block-end":t?.["inset-block-end"],"inset-inline-start":t?.["inset-inline-start"],"inset-inline-end":t?.["inset-inline-end"]},r={history:{propDisplayName:k}};(Object.values(e).some(e=>null!==e)||null!==t?.["z-index"])&&(s(e),n(v,r))},[t,s,n]),E=(0,r.useRef)(x);E.current=x,(0,r.useEffect)(()=>{e?.value!==y&&null!==e||E.current()},[e]);const h=e&&e?.value!==y;return r.createElement(p.SectionContent,null,r.createElement(m.PositionField,{onChange:(e,t)=>{const r={history:{propDisplayName:k}};e===y?x():t===y&&o&&(n({...o,"z-index":void 0},r),a())}}),h?r.createElement(r.Fragment,null,r.createElement(d.DimensionsField,null),r.createElement(g.ZIndexField,null)):null,r.createElement(c.PanelDivider,null),r.createElement(u.OffsetField,null))},usePersistDimensions=()=>{const{id:e,meta:t}=(0,a.useStyle)(),n=`${`styles/${e}/${t.breakpoint||"desktop"}/${t.state||"null"}`}/dimensions`;return(0,o.useSessionStorage)(n)}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/z-index-field.tsx":function(e,t,n){n.r(t),n.d(t,{ZIndexField:function(){return ZIndexField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Z-index","elementor"),ZIndexField=()=>r.createElement(a.StylesField,{bind:"z-index",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.NumberControl,null)))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/object-fit-field.tsx":function(e,t,n){n.r(t),n.d(t,{ObjectFitField:function(){return ObjectFitField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Object fit","elementor"),c=[{label:(0,s.__)("Fill","elementor"),value:"fill"},{label:(0,s.__)("Cover","elementor"),value:"cover"},{label:(0,s.__)("Contain","elementor"),value:"contain"},{label:(0,s.__)("None","elementor"),value:"none"},{label:(0,s.__)("Scale down","elementor"),value:"scale-down"}],ObjectFitField=()=>r.createElement(a.StylesField,{bind:"object-fit",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.SelectControl,{options:c})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/overflow-field.tsx":function(e,t,n){n.r(t),n.d(t,{OverflowField:function(){return OverflowField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Overflow","elementor"),p=[{value:"visible",label:(0,a.__)("Visible","elementor"),renderContent:({size:e})=>r.createElement(s.EyeIcon,{fontSize:e}),showTooltip:!0},{value:"hidden",label:(0,a.__)("Hidden","elementor"),renderContent:({size:e})=>r.createElement(s.EyeOffIcon,{fontSize:e}),showTooltip:!0},{value:"auto",label:(0,a.__)("Auto","elementor"),renderContent:({size:e})=>r.createElement(s.LetterAIcon,{fontSize:e}),showTooltip:!0}],OverflowField=()=>r.createElement(i.StylesField,{bind:"overflow",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.ToggleControl,{options:p})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/size-section.tsx":function(e,t,n){n.r(t),n.d(t,{SizeSection:function(){return SizeSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/ui"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/object-fit-field.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/overflow-field.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const g=[[{bind:"width",label:(0,a.__)("Width","elementor")},{bind:"height",label:(0,a.__)("Height","elementor")}],[{bind:"min-width",label:(0,a.__)("Min width","elementor")},{bind:"min-height",label:(0,a.__)("Min height","elementor")}],[{bind:"max-width",label:(0,a.__)("Max width","elementor")},{bind:"max-height",label:(0,a.__)("Max height","elementor")}]],y=(0,a.__)("Aspect Ratio","elementor"),SizeSection=()=>{const e=[(0,r.useRef)(null),(0,r.useRef)(null),(0,r.useRef)(null)];return r.createElement(p.SectionContent,null,g.map((t,n)=>r.createElement(s.Grid,{key:n,container:!0,gap:2,flexWrap:"nowrap",ref:e[n]},t.map(t=>r.createElement(s.Grid,{item:!0,xs:6,key:t.bind},r.createElement(SizeField,_extends({},t,{rowRef:e[n],extendedOptions:["auto"]})))))),r.createElement(c.PanelDivider,null),r.createElement(s.Stack,null,r.createElement(m.OverflowField,null)),r.createElement(d.StyleTabCollapsibleContent,{fields:["aspect-ratio","object-fit"]},r.createElement(s.Stack,{gap:2,pt:2},r.createElement(i.StylesField,{bind:"aspect-ratio",propDisplayName:y},r.createElement(o.AspectRatioControl,{label:y})),r.createElement(c.PanelDivider,null),r.createElement(u.ObjectFitField,null),r.createElement(i.StylesField,{bind:"object-position",propDisplayName:(0,a.__)("Object position","elementor")},r.createElement(s.Grid,{item:!0,xs:6},r.createElement(o.PositionControl,null))))))},SizeField=({label:e,bind:t,rowRef:n,extendedOptions:a})=>r.createElement(i.StylesField,{bind:t,propDisplayName:e},r.createElement(s.Grid,{container:!0,gap:.75,alignItems:"center"},r.createElement(s.Grid,{item:!0,xs:12},r.createElement(l.ControlLabel,null,e)),r.createElement(s.Grid,{item:!0,xs:12},r.createElement(o.SizeControl,{extendedOptions:a,anchorRef:n}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/spacing-section/spacing-section.tsx":function(e,t,n){n.r(t),n.d(t,{SpacingSection:function(){return SpacingSection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts"),l=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx");const p=(0,s.__)("Margin","elementor"),d=(0,s.__)("Padding","elementor"),SpacingSection=()=>{const{isSiteRtl:e}=(0,i.useDirection)();return r.createElement(c.SectionContent,null,r.createElement(a.StylesField,{bind:"margin",propDisplayName:p},r.createElement(o.LinkedDimensionsControl,{label:p,isSiteRtl:e,extendedOptions:["auto"],min:-Number.MAX_SAFE_INTEGER})),r.createElement(l.PanelDivider,null),r.createElement(a.StylesField,{bind:"padding",propDisplayName:d},r.createElement(o.LinkedDimensionsControl,{label:d,isSiteRtl:e})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-count-field.tsx":function(e,t,n){n.r(t),n.d(t,{ColumnCountField:function(){return ColumnCountField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Columns","elementor"),ColumnCountField=()=>r.createElement(a.StylesField,{bind:"column-count",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.NumberControl,{shouldForceInt:!0,min:0,step:1})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-gap-field.tsx":function(e,t,n){n.r(t),n.d(t,{ColumnGapField:function(){return ColumnGapField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Column gap","elementor"),ColumnGapField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"column-gap",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{anchorRef:e})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-family-field.tsx":function(e,t,n){n.r(t),n.d(t,{FontFamilyField:function(){return FontFamilyField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-ui"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Font family","elementor"),FontFamilyField=()=>{const e=(0,o.useFontFamilies)(),t=(0,s.useSectionWidth)();return 0===e.length?null:r.createElement(i.StylesField,{bind:"font-family",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.FontFamilyControl,{fontFamilies:e,sectionWidth:t,ariaLabel:c})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-size-field.tsx":function(e,t,n){n.r(t),n.d(t,{FontSizeField:function(){return FontSizeField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Font size","elementor"),FontSizeField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"font-size",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{anchorRef:e,ariaLabel:l})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-style-field.tsx":function(e,t,n){n.r(t),n.d(t,{FontStyleField:function(){return FontStyleField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Font style","elementor"),p=[{value:"normal",label:(0,a.__)("Normal","elementor"),renderContent:({size:e})=>r.createElement(s.MinusIcon,{fontSize:e}),showTooltip:!0},{value:"italic",label:(0,a.__)("Italic","elementor"),renderContent:({size:e})=>r.createElement(s.ItalicIcon,{fontSize:e}),showTooltip:!0}],FontStyleField=()=>r.createElement(i.StylesField,{bind:"font-style",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.ToggleControl,{options:p})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-weight-field.tsx":function(e,t,n){n.r(t),n.d(t,{FontWeightField:function(){return FontWeightField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Font weight","elementor"),c=[{value:"100",label:(0,s.__)("100 - Thin","elementor")},{value:"200",label:(0,s.__)("200 - Extra light","elementor")},{value:"300",label:(0,s.__)("300 - Light","elementor")},{value:"400",label:(0,s.__)("400 - Normal","elementor")},{value:"500",label:(0,s.__)("500 - Medium","elementor")},{value:"600",label:(0,s.__)("600 - Semi bold","elementor")},{value:"700",label:(0,s.__)("700 - Bold","elementor")},{value:"800",label:(0,s.__)("800 - Extra bold","elementor")},{value:"900",label:(0,s.__)("900 - Black","elementor")}],FontWeightField=()=>r.createElement(a.StylesField,{bind:"font-weight",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.SelectControl,{options:c})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/letter-spacing-field.tsx":function(e,t,n){n.r(t),n.d(t,{LetterSpacingField:function(){return LetterSpacingField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Letter spacing","elementor"),LetterSpacingField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"letter-spacing",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{anchorRef:e,min:-Number.MAX_SAFE_INTEGER})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/line-height-field.tsx":function(e,t,n){n.r(t),n.d(t,{LineHeightField:function(){return LineHeightField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Line height","elementor"),LineHeightField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"line-height",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{anchorRef:e})))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-alignment-field.tsx":function(e,t,n){n.r(t),n.d(t,{TextAlignmentField:function(){return TextAlignmentField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const d=(0,i.__)("Text align","elementor"),u=(0,a.withDirection)(s.AlignLeftIcon),m=(0,a.withDirection)(s.AlignRightIcon),g=[{value:"start",label:(0,i.__)("Start","elementor"),renderContent:({size:e})=>r.createElement(u,{fontSize:e}),showTooltip:!0},{value:"center",label:(0,i.__)("Center","elementor"),renderContent:({size:e})=>r.createElement(s.AlignCenterIcon,{fontSize:e}),showTooltip:!0},{value:"end",label:(0,i.__)("End","elementor"),renderContent:({size:e})=>r.createElement(m,{fontSize:e}),showTooltip:!0},{value:"justify",label:(0,i.__)("Justify","elementor"),renderContent:({size:e})=>r.createElement(s.AlignJustifiedIcon,{fontSize:e}),showTooltip:!0}],TextAlignmentField=()=>r.createElement(l.StylesField,{bind:"text-align",propDisplayName:d},r.createElement(c.UiProviders,null,r.createElement(p.StylesFieldLayout,{label:d},r.createElement(o.ToggleControl,{options:g}))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-color-field.tsx":function(e,t,n){n.r(t),n.d(t,{TextColorField:function(){return TextColorField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Text color","elementor"),TextColorField=()=>r.createElement(a.StylesField,{bind:"color",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l},r.createElement(o.ColorControl,{id:"text-color-control"})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-decoration-field.tsx":function(e,t,n){n.r(t),n.d(t,{TextDecorationField:function(){return TextDecorationField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Line decoration","elementor"),p=[{value:"none",label:(0,a.__)("None","elementor"),renderContent:({size:e})=>r.createElement(s.MinusIcon,{fontSize:e}),showTooltip:!0,exclusive:!0},{value:"underline",label:(0,a.__)("Underline","elementor"),renderContent:({size:e})=>r.createElement(s.UnderlineIcon,{fontSize:e}),showTooltip:!0},{value:"line-through",label:(0,a.__)("Line-through","elementor"),renderContent:({size:e})=>r.createElement(s.StrikethroughIcon,{fontSize:e}),showTooltip:!0},{value:"overline",label:(0,a.__)("Overline","elementor"),renderContent:({size:e})=>r.createElement(s.OverlineIcon,{fontSize:e}),showTooltip:!0}],TextDecorationField=()=>r.createElement(i.StylesField,{bind:"text-decoration",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.ToggleControl,{options:p,exclusive:!1})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-direction-field.tsx":function(e,t,n){n.r(t),n.d(t,{TextDirectionField:function(){return TextDirectionField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Direction","elementor"),p=[{value:"ltr",label:(0,a.__)("Left to right","elementor"),renderContent:({size:e})=>r.createElement(s.TextDirectionLtrIcon,{fontSize:e}),showTooltip:!0},{value:"rtl",label:(0,a.__)("Right to left","elementor"),renderContent:({size:e})=>r.createElement(s.TextDirectionRtlIcon,{fontSize:e}),showTooltip:!0}],TextDirectionField=()=>r.createElement(i.StylesField,{bind:"direction",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.ToggleControl,{options:p})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-stroke-field.tsx":function(e,t,n){n.r(t),n.d(t,{TextStrokeField:function(){return TextStrokeField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),l=n("./packages/packages/core/editor-editing-panel/src/components/add-or-remove-content.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx");const p={$$type:"stroke",value:{color:{$$type:"color",value:"#000000"},width:{$$type:"size",value:{unit:"px",size:1}}}},d=(0,s.__)("Text stroke","elementor"),TextStrokeField=()=>{const{value:e,setValue:t,canEdit:n}=(0,i.useStylesField)("stroke",{history:{propDisplayName:d}}),s=Boolean(e);return r.createElement(a.StylesField,{bind:"stroke",propDisplayName:d},r.createElement(l.AddOrRemoveContent,{isAdded:s,onAdd:()=>{t(p)},onRemove:()=>{t(null)},disabled:!n,renderLabel:()=>r.createElement(c.ControlLabel,null,d)},r.createElement(o.StrokeControl,null)))}},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/transform-field.tsx":function(e,t,n){n.r(t),n.d(t,{TransformField:function(){return TransformField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const c=(0,a.__)("Text transform","elementor"),p=[{value:"none",label:(0,a.__)("None","elementor"),renderContent:({size:e})=>r.createElement(s.MinusIcon,{fontSize:e}),showTooltip:!0},{value:"capitalize",label:(0,a.__)("Capitalize","elementor"),renderContent:({size:e})=>r.createElement(s.LetterCaseIcon,{fontSize:e}),showTooltip:!0},{value:"uppercase",label:(0,a.__)("Uppercase","elementor"),renderContent:({size:e})=>r.createElement(s.LetterCaseUpperIcon,{fontSize:e}),showTooltip:!0},{value:"lowercase",label:(0,a.__)("Lowercase","elementor"),renderContent:({size:e})=>r.createElement(s.LetterCaseLowerIcon,{fontSize:e}),showTooltip:!0}],TransformField=()=>r.createElement(i.StylesField,{bind:"text-transform",propDisplayName:c},r.createElement(l.StylesFieldLayout,{label:c},r.createElement(o.ToggleControl,{options:p})))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/typography-section.tsx":function(e,t,n){n.r(t),n.d(t,{TypographySection:function(){return TypographySection}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-count-field.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-gap-field.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-family-field.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-size-field.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-style-field.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-weight-field.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/letter-spacing-field.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/line-height-field.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-alignment-field.tsx"),f=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-color-field.tsx"),k=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-decoration-field.tsx"),b=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-direction-field.tsx"),v=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-stroke-field.tsx"),x=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/transform-field.tsx"),E=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/word-spacing-field.tsx");const TypographySection=()=>r.createElement(s.SectionContent,null,r.createElement(c.FontFamilyField,null),r.createElement(u.FontWeightField,null),r.createElement(p.FontSizeField,null),r.createElement(o.PanelDivider,null),r.createElement(y.TextAlignmentField,null),r.createElement(f.TextColorField,null),r.createElement(a.StyleTabCollapsibleContent,{fields:["line-height","letter-spacing","word-spacing","column-count","text-decoration","text-transform","direction","font-style","stroke"]},r.createElement(s.SectionContent,{sx:{pt:2}},r.createElement(g.LineHeightField,null),r.createElement(m.LetterSpacingField,null),r.createElement(E.WordSpacingField,null),r.createElement(i.ColumnCountField,null),r.createElement(l.ColumnGapField,null),r.createElement(o.PanelDivider,null),r.createElement(k.TextDecorationField,null),r.createElement(x.TransformField,null),r.createElement(b.TextDirectionField,null),r.createElement(d.FontStyleField,null),r.createElement(v.TextStrokeField,null))))},"./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/word-spacing-field.tsx":function(e,t,n){n.r(t),n.d(t,{WordSpacingField:function(){return WordSpacingField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@wordpress/i18n"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx");const l=(0,s.__)("Word spacing","elementor"),WordSpacingField=()=>{const e=(0,r.useRef)(null);return r.createElement(a.StylesField,{bind:"word-spacing",propDisplayName:l},r.createElement(i.StylesFieldLayout,{label:l,ref:e},r.createElement(o.SizeControl,{anchorRef:e,min:-Number.MAX_SAFE_INTEGER})))}},"./packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx":function(e,t,n){n.r(t),n.d(t,{StyleTabCollapsibleContent:function(){return StyleTabCollapsibleContent},getStylesInheritanceIndicators:function(){return getStylesInheritanceIndicators}});var r=n("react"),o=n("@elementor/editor-ui"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx");const StyleTabCollapsibleContent=({fields:e=[],children:t})=>r.createElement(o.CollapsibleContent,{titleEnd:getStylesInheritanceIndicators(e)},t);function getStylesInheritanceIndicators(e){return 0===e.length?null:t=>t?null:r.createElement(s.StylesInheritanceSectionIndicators,{fields:e})}},"./packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx":function(e,t,n){n.r(t),n.d(t,{StyleTabSection:function(){return StyleTabSection}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts"),s=n("./packages/packages/core/editor-editing-panel/src/components/section.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx");const StyleTabSection=({section:e,fields:t=[],unmountOnExit:n=!0})=>{const{component:i,name:l,title:c,action:p}=e,d=(0,o.useDefaultPanelSettings)(),u=i||(()=>r.createElement(r.Fragment,null)),m=d.defaultSectionsExpanded.style?.includes(l);return r.createElement(s.Section,{title:c,defaultExpanded:m,titleEnd:(0,a.getStylesInheritanceIndicators)(t),unmountOnExit:n,action:p},r.createElement(u,null))}},"./packages/packages/core/editor-editing-panel/src/components/style-tab.tsx":function(e,t,n){n.r(t),n.d(t,{StyleTab:function(){return StyleTab},StyleTabSlot:function(){return T},injectIntoStyleTab:function(){return I},stickyHeaderStyles:function(){return P}});var r=n("react"),o=n("@elementor/editor-props"),s=n("@elementor/editor-responsive"),a=n("@elementor/locations"),i=n("@elementor/session"),l=n("@elementor/ui"),c=n("@wordpress/i18n"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/contexts/scroll-context.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),g=n("./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/hooks/use-active-style-def-id.ts"),f=n("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-selector.tsx"),k=n("./packages/packages/core/editor-editing-panel/src/components/sections-list.tsx"),b=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/background-section/background-section.tsx"),v=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-section.tsx"),x=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/effects-section.tsx"),E=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/layout-section.tsx"),h=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-section.tsx"),_=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/size-section.tsx"),S=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/spacing-section/spacing-section.tsx"),C=n("./packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/typography-section.tsx"),w=n("./packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx");const{Slot:T,inject:I}=(0,a.createLocation)(),P={position:"sticky",zIndex:1100,opacity:1,backgroundColor:"background.default",transition:"top 300ms ease"},StyleTab=()=>{const e=function useCurrentClassesProp(){const{elementType:e}=(0,d.useElement)(),t=Object.entries(e.propsSchema).find(([,e])=>"plain"===e.kind&&e.key===o.CLASSES_PROP_KEY);if(!t)return null;return t[0]}(),[t,n]=(0,y.useActiveStyleDefId)(e??""),[a,u]=(0,r.useState)(null),I=(0,s.useActiveBreakpoint)();return e?r.createElement(p.ClassesPropProvider,{prop:e},r.createElement(m.StyleProvider,{meta:{breakpoint:I,state:a},id:t,setId:e=>{n(e),u(null)},setMetaState:u},r.createElement(i.SessionStorageProvider,{prefix:t??""},r.createElement(g.StyleInheritanceProvider,null,r.createElement(ClassesHeader,null,r.createElement(f.CssClassSelector,null),r.createElement(l.Divider,null)),r.createElement(k.SectionsList,null,r.createElement(w.StyleTabSection,{section:{component:E.LayoutSection,name:"Layout",title:(0,c.__)("Layout","elementor")},fields:["display","flex-direction","flex-wrap","justify-content","align-items","align-content","align-self","gap"]}),r.createElement(w.StyleTabSection,{section:{component:S.SpacingSection,name:"Spacing",title:(0,c.__)("Spacing","elementor")},fields:["margin","padding"]}),r.createElement(w.StyleTabSection,{section:{component:_.SizeSection,name:"Size",title:(0,c.__)("Size","elementor")},fields:["width","min-width","max-width","height","min-height","max-height","overflow","aspect-ratio","object-fit"]}),r.createElement(w.StyleTabSection,{section:{component:h.PositionSection,name:"Position",title:(0,c.__)("Position","elementor")},fields:["position","z-index","scroll-margin-top"]}),r.createElement(w.StyleTabSection,{section:{component:C.TypographySection,name:"Typography",title:(0,c.__)("Typography","elementor")},fields:["font-family","font-weight","font-size","text-align","color","line-height","letter-spacing","word-spacing","column-count","text-decoration","text-transform","direction","font-style","stroke"]}),r.createElement(w.StyleTabSection,{section:{component:b.BackgroundSection,name:"Background",title:(0,c.__)("Background","elementor")},fields:["background"]}),r.createElement(w.StyleTabSection,{section:{component:v.BorderSection,name:"Border",title:(0,c.__)("Border","elementor")},fields:["border-radius","border-width","border-color","border-style"]}),r.createElement(w.StyleTabSection,{section:{component:x.EffectsSection,name:"Effects",title:(0,c.__)("Effects","elementor")},fields:["mix-blend-mode","box-shadow","opacity","transform","filter","backdrop-filter","transform-origin","transition"]}),r.createElement(T,null)),r.createElement(l.Box,{sx:{height:"150px"}}))))):null};function ClassesHeader({children:e}){const t=(0,u.useScrollDirection)();return r.createElement(l.Stack,{sx:{...P,top:"up"===t?"37px":0}},e)}},"./packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx":function(e,t,n){n.r(t),n.d(t,{StylesFieldLayout:function(){return a}});var r=n("react"),o=n("@elementor/ui"),s=n("./packages/packages/core/editor-editing-panel/src/components/control-label.tsx");const a=r.forwardRef((e,t)=>{const{direction:n="row",children:o,label:s}=e,a="row"===n?i:l;return r.createElement(a,{label:s,ref:t,children:o})}),i=r.forwardRef(({label:e,children:t},n)=>r.createElement(o.Grid,{container:!0,gap:2,alignItems:"center",flexWrap:"nowrap",ref:n,"aria-label":`${e} control`},r.createElement(o.Grid,{item:!0,xs:6},r.createElement(s.ControlLabel,null,e)),r.createElement(o.Grid,{item:!0,xs:6,sx:e=>({width:`calc(50% - ${e.spacing(2)})`})},t))),l=r.forwardRef(({label:e,children:t},n)=>r.createElement(o.Stack,{gap:.75,ref:n},r.createElement(s.ControlLabel,null,e),t))},"./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx":function(e,t,n){n.r(t),n.d(t,{ClassesPropProvider:function(){return ClassesPropProvider},useClassesProp:function(){return useClassesProp}});var r=n("react");const o=(0,r.createContext)(null);function ClassesPropProvider({children:e,prop:t}){return r.createElement(o.Provider,{value:{prop:t}},e)}function useClassesProp(){const e=(0,r.useContext)(o);if(!e)throw new Error("useClassesProp must be used within a ClassesPropProvider");return e.prop}},"./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx":function(e,t,n){n.r(t),n.d(t,{ElementProvider:function(){return ElementProvider},useElement:function(){return useElement},usePanelElementSetting:function(){return usePanelElementSetting}});var r=n("react");const o=(0,r.createContext)(null);function ElementProvider({children:e,element:t,elementType:n,settings:s}){return r.createElement(o.Provider,{value:{element:t,elementType:n,settings:s}},e)}function useElement(){const e=(0,r.useContext)(o);if(!e)throw new Error("useElement must be used within a ElementProvider");return e}function usePanelElementSetting(e){const t=(0,r.useContext)(o);if(!t)throw new Error("usePanelElementSetting must be used within a ElementProvider");return t.settings[e]??null}},"./packages/packages/core/editor-editing-panel/src/contexts/scroll-context.tsx":function(e,t,n){n.r(t),n.d(t,{ScrollProvider:function(){return ScrollProvider},useScrollDirection:function(){return useScrollDirection}});var r=n("react"),o=n("@elementor/ui");const s=(0,r.createContext)(void 0),a=(0,o.styled)("div")` | |
| 1844 | 16 | height: 100%; |
| 1845 | 17 | overflow-y: auto; |
| 1846 | -`; | |
| 1847 | - var DEFAULT_SCROLL_DIRECTION = "up"; | |
| 1848 | - function ScrollProvider({ children }) { | |
| 1849 | - const [direction, setDirection] = (0, react.useState)(DEFAULT_SCROLL_DIRECTION); | |
| 1850 | - const ref = (0, react.useRef)(null); | |
| 1851 | - const scrollPos = (0, react.useRef)(0); | |
| 1852 | - (0, react.useEffect)(() => { | |
| 1853 | - const scrollElement = ref.current; | |
| 1854 | - if (!scrollElement) return; | |
| 1855 | - const handleScroll = () => { | |
| 1856 | - const { scrollTop } = scrollElement; | |
| 1857 | - if (scrollTop > scrollPos.current) setDirection("down"); | |
| 1858 | - else if (scrollTop < scrollPos.current) setDirection("up"); | |
| 1859 | - scrollPos.current = scrollTop; | |
| 1860 | - }; | |
| 1861 | - scrollElement.addEventListener("scroll", handleScroll); | |
| 1862 | - return () => { | |
| 1863 | - scrollElement.removeEventListener("scroll", handleScroll); | |
| 1864 | - }; | |
| 1865 | - }); | |
| 1866 | - return /* @__PURE__ */ react.createElement(ScrollContext.Provider, { value: { direction } }, /* @__PURE__ */ react.createElement(ScrollPanel, { ref }, children)); | |
| 1867 | - } | |
| 1868 | - function useScrollDirection() { | |
| 1869 | - return (0, react.useContext)(ScrollContext)?.direction ?? DEFAULT_SCROLL_DIRECTION; | |
| 1870 | - } | |
| 1871 | - | |
| 1872 | -//#endregion | |
| 1873 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts | |
| 1874 | - var fallbackEditorSettings = { | |
| 1875 | - defaultSectionsExpanded: { | |
| 1876 | - settings: ["content", "settings"], | |
| 1877 | - style: [] | |
| 1878 | - }, | |
| 1879 | - defaultTab: "settings" | |
| 1880 | - }; | |
| 1881 | - var elementPanelDefaults = { | |
| 1882 | - "e-div-block": { | |
| 1883 | - defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded, | |
| 1884 | - defaultTab: "style" | |
| 1885 | - }, | |
| 1886 | - "e-flexbox": { | |
| 1887 | - defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded, | |
| 1888 | - defaultTab: "style" | |
| 1889 | - }, | |
| 1890 | - "e-grid": { | |
| 1891 | - defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded, | |
| 1892 | - defaultTab: "style" | |
| 1893 | - }, | |
| 1894 | - "e-divider": { | |
| 1895 | - defaultSectionsExpanded: fallbackEditorSettings.defaultSectionsExpanded, | |
| 1896 | - defaultTab: "style" | |
| 1897 | - } | |
| 1898 | - }; | |
| 1899 | - function registerElementPanelDefaults(type, defaults) { | |
| 1900 | - elementPanelDefaults[type] = defaults; | |
| 1901 | - } | |
| 1902 | - var useDefaultPanelSettings = () => { | |
| 1903 | - const { element } = useElement(); | |
| 1904 | - return elementPanelDefaults[element.type] ?? fallbackEditorSettings; | |
| 1905 | - }; | |
| 1906 | - | |
| 1907 | -//#endregion | |
| 1908 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts | |
| 1909 | - var useStateByElement = (key, initialValue) => { | |
| 1910 | - const { element } = useElement(); | |
| 1911 | - const lookup = `elementor/editor-state/${element.id}/${key}`; | |
| 1912 | - const [value, setValue] = (0, react.useState)((0, _elementor_session.getSessionStorageItem)(lookup) ?? initialValue); | |
| 1913 | - const doUpdate = (newValue) => { | |
| 1914 | - (0, _elementor_session.setSessionStorageItem)(lookup, newValue); | |
| 1915 | - setValue(newValue); | |
| 1916 | - }; | |
| 1917 | - return [value, doUpdate]; | |
| 1918 | - }; | |
| 1919 | - | |
| 1920 | -//#endregion | |
| 1921 | -//#region packages/packages/core/editor-editing-panel/src/components/sections-list.tsx | |
| 1922 | - function SectionsList(props) { | |
| 1923 | - return /* @__PURE__ */ react.createElement(_elementor_ui.List, { | |
| 1924 | - disablePadding: true, | |
| 1925 | - component: "div", | |
| 1926 | - ...props | |
| 1927 | - }); | |
| 1928 | - } | |
| 1929 | - | |
| 1930 | -//#endregion | |
| 1931 | -//#region packages/packages/core/editor-editing-panel/src/components/interactions-tab.tsx | |
| 1932 | - var InteractionsTab = () => { | |
| 1933 | - const { element } = useElement(); | |
| 1934 | - return /* @__PURE__ */ react.createElement(SectionsList, null, /* @__PURE__ */ react.createElement(_elementor_editor_interactions.InteractionsTab, { elementId: element.id })); | |
| 1935 | - }; | |
| 1936 | - | |
| 1937 | -//#endregion | |
| 1938 | -//#region packages/packages/core/editor-editing-panel/src/utils/prop-dependency-utils.ts | |
| 1939 | - function getElementSettingsWithDefaults(propsSchema, elementSettings) { | |
| 1940 | - const elementSettingsWithDefaults = { ...elementSettings }; | |
| 1941 | - Object.keys(propsSchema).forEach((key) => { | |
| 1942 | - if (elementSettingsWithDefaults[key] === null && propsSchema[key].default !== null) elementSettingsWithDefaults[key] = propsSchema[key].default; | |
| 1943 | - }); | |
| 1944 | - return elementSettingsWithDefaults; | |
| 1945 | - } | |
| 1946 | - function extractDependencyEffect(bind, propsSchema, settings) { | |
| 1947 | - const settingsWithDefaults = getElementSettingsWithDefaults(propsSchema, settings); | |
| 1948 | - const propType = propsSchema[bind]; | |
| 1949 | - const depCheck = (0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, settingsWithDefaults); | |
| 1950 | - const failingTerm = !depCheck.isMet ? depCheck.failingDependencies[0] : void 0; | |
| 1951 | - return { | |
| 1952 | - isHidden: !!failingTerm && !(0, _elementor_editor_props.isDependency)(failingTerm) && failingTerm?.effect === "hide", | |
| 1953 | - isDisabled: (prop) => !(0, _elementor_editor_props.isDependencyMet)(prop?.dependencies, settingsWithDefaults).isMet | |
| 1954 | - }; | |
| 1955 | - } | |
| 1956 | - function extractOrderedDependencies(dependenciesPerTargetMapping) { | |
| 1957 | - return Object.values(dependenciesPerTargetMapping).flat().filter((dependent, index, self) => self.indexOf(dependent) === index); | |
| 1958 | - } | |
| 1959 | - function getUpdatedValues(values, dependencies, propsSchema, elementValues, elementId) { | |
| 1960 | - if (!dependencies.length) return values; | |
| 1961 | - return dependencies.reduce((newValues, dependency) => { | |
| 1962 | - const path = dependency.split("."); | |
| 1963 | - const combinedValues = { | |
| 1964 | - ...elementValues, | |
| 1965 | - ...newValues | |
| 1966 | - }; | |
| 1967 | - const propType = getPropType(propsSchema, combinedValues, path); | |
| 1968 | - if (!propType) return newValues; | |
| 1969 | - const testDependencies = { | |
| 1970 | - previousValues: (0, _elementor_editor_props.isDependencyMet)(propType.dependencies, elementValues), | |
| 1971 | - newValues: (0, _elementor_editor_props.isDependencyMet)(propType.dependencies, combinedValues) | |
| 1972 | - }; | |
| 1973 | - if (!testDependencies.newValues.isMet) { | |
| 1974 | - const newValue = handleUnmetCondition({ | |
| 1975 | - failingDependencies: testDependencies.newValues.failingDependencies, | |
| 1976 | - dependency, | |
| 1977 | - elementValues: combinedValues, | |
| 1978 | - defaultValue: propType.default, | |
| 1979 | - elementId | |
| 1980 | - }); | |
| 1981 | - return { | |
| 1982 | - ...newValues, | |
| 1983 | - ...updateValue(path, newValue, combinedValues) | |
| 1984 | - }; | |
| 1985 | - } | |
| 1986 | - if (!testDependencies.previousValues.isMet) { | |
| 1987 | - const savedValue = retrievePreviousValueFromStorage({ | |
| 1988 | - path: dependency, | |
| 1989 | - elementId | |
| 1990 | - }); | |
| 1991 | - const currentValue = (0, _elementor_editor_props.extractValue)(path, combinedValues, [], { unwrapOverridableLeaf: false }); | |
| 1992 | - removePreviousValueFromStorage({ | |
| 1993 | - path: dependency, | |
| 1994 | - elementId | |
| 1995 | - }); | |
| 1996 | - const restored = isCompatibleSavedValue(savedValue, currentValue) ? savedValue : propType.default; | |
| 1997 | - return { | |
| 1998 | - ...newValues, | |
| 1999 | - ...updateValue(path, restored, combinedValues) | |
| 2000 | - }; | |
| 2001 | - } | |
| 2002 | - return newValues; | |
| 2003 | - }, { ...values }); | |
| 2004 | - } | |
| 2005 | - function getPropType(schema, elementValues, path) { | |
| 2006 | - if (!path.length) return null; | |
| 2007 | - const [basePropKey, ...keys] = path; | |
| 2008 | - const baseProp = schema[basePropKey]; | |
| 2009 | - if (!baseProp) return null; | |
| 2010 | - return keys.reduce((prop, key, index) => evaluatePropType({ | |
| 2011 | - prop, | |
| 2012 | - key, | |
| 2013 | - index, | |
| 2014 | - path, | |
| 2015 | - elementValues, | |
| 2016 | - basePropKey | |
| 2017 | - }), baseProp); | |
| 2018 | - } | |
| 2019 | - function evaluatePropType(props) { | |
| 2020 | - const { prop } = props; | |
| 2021 | - if (!prop?.kind) return null; | |
| 2022 | - const { key, index, path, elementValues, basePropKey } = props; | |
| 2023 | - switch (prop.kind) { | |
| 2024 | - case "union": | |
| 2025 | - const type = (0, _elementor_editor_props.extractValue)(path.slice(0, index + 1), elementValues)?.$$type ?? null; | |
| 2026 | - return getPropType({ [basePropKey]: prop.prop_types?.[type] }, elementValues, path.slice(0, index + 2)); | |
| 2027 | - case "array": return prop.item_prop_type; | |
| 2028 | - case "object": return prop.shape[key]; | |
| 2029 | - } | |
| 2030 | - return prop[key]; | |
| 2031 | - } | |
| 2032 | - function updateValue(path, value, values) { | |
| 2033 | - const topPropKey = path[0]; | |
| 2034 | - const root = { ...values }; | |
| 2035 | - let carry = root; | |
| 2036 | - for (let index = 0; index < path.length; index++) { | |
| 2037 | - const key = path[index]; | |
| 2038 | - if (index === path.length - 1) { | |
| 2039 | - carry[key] = mergeLeafValue(carry[key], value); | |
| 2040 | - break; | |
| 2041 | - } | |
| 2042 | - const next = cloneDescent(carry[key]); | |
| 2043 | - if (!next) break; | |
| 2044 | - carry[key] = next.replacement; | |
| 2045 | - carry = next.descended; | |
| 2046 | - } | |
| 2047 | - return { [topPropKey]: root[topPropKey] ?? null }; | |
| 2048 | - } | |
| 2049 | - function cloneDescent(child) { | |
| 2050 | - if (!child) return null; | |
| 2051 | - if ((0, _elementor_editor_props.isOverridable)(child)) { | |
| 2052 | - const origin = child.value.origin_value; | |
| 2053 | - if (!origin || !(0, _elementor_editor_props.isTransformable)(origin)) return null; | |
| 2054 | - const descended = { ...origin.value }; | |
| 2055 | - return { | |
| 2056 | - replacement: { | |
| 2057 | - ...child, | |
| 2058 | - value: { | |
| 2059 | - ...child.value, | |
| 2060 | - origin_value: { | |
| 2061 | - ...origin, | |
| 2062 | - value: descended | |
| 2063 | - } | |
| 2064 | - } | |
| 2065 | - }, | |
| 2066 | - descended | |
| 2067 | - }; | |
| 2068 | - } | |
| 2069 | - if ((0, _elementor_editor_props.isTransformable)(child)) { | |
| 2070 | - const descended = { ...child.value }; | |
| 2071 | - return { | |
| 2072 | - replacement: { | |
| 2073 | - ...child, | |
| 2074 | - value: descended | |
| 2075 | - }, | |
| 2076 | - descended | |
| 2077 | - }; | |
| 2078 | - } | |
| 2079 | - return null; | |
| 2080 | - } | |
| 2081 | - function isCompatibleSavedValue(saved, current) { | |
| 2082 | - if (!saved) return false; | |
| 2083 | - return (0, _elementor_editor_props.isOverridable)(saved) === (0, _elementor_editor_props.isOverridable)(current); | |
| 2084 | - } | |
| 2085 | - function mergeLeafValue(existing, incoming) { | |
| 2086 | - if (incoming === null) return null; | |
| 2087 | - if (incoming && (0, _elementor_editor_props.isOverridable)(incoming)) return incoming; | |
| 2088 | - if (existing && (0, _elementor_editor_props.isOverridable)(existing) && incoming) return (0, _elementor_editor_props.rewrapOverridableValue)(existing, incoming); | |
| 2089 | - return incoming; | |
| 2090 | - } | |
| 2091 | - function handleUnmetCondition(props) { | |
| 2092 | - const { failingDependencies, dependency, elementValues, defaultValue, elementId } = props; | |
| 2093 | - const newValue = failingDependencies.find((term) => "newValue" in term && !!term.newValue)?.newValue ?? null; | |
| 2094 | - savePreviousValueToStorage({ | |
| 2095 | - path: dependency, | |
| 2096 | - elementId, | |
| 2097 | - value: (0, _elementor_editor_props.extractValue)(dependency.split("."), elementValues, [], { unwrapOverridableLeaf: false }) ?? defaultValue | |
| 2098 | - }); | |
| 2099 | - return newValue; | |
| 2100 | - } | |
| 2101 | - function savePreviousValueToStorage({ path, elementId, value }) { | |
| 2102 | - const prefix = `elementor/${elementId}`; | |
| 2103 | - if (retrievePreviousValueFromStorage({ | |
| 2104 | - path, | |
| 2105 | - elementId | |
| 2106 | - })) return; | |
| 2107 | - (0, _elementor_session.setSessionStorageItem)(`${prefix}:${path}`, value); | |
| 2108 | - } | |
| 2109 | - function retrievePreviousValueFromStorage({ path, elementId }) { | |
| 2110 | - return (0, _elementor_session.getSessionStorageItem)(`${`elementor/${elementId}`}:${path}`) ?? null; | |
| 2111 | - } | |
| 2112 | - function removePreviousValueFromStorage({ path, elementId }) { | |
| 2113 | - (0, _elementor_session.removeSessionStorageItem)(`${`elementor/${elementId}`}:${path}`); | |
| 2114 | - } | |
| 2115 | - | |
| 2116 | -//#endregion | |
| 2117 | -//#region packages/packages/core/editor-editing-panel/src/components/section.tsx | |
| 2118 | - function Section({ title, children, defaultExpanded = false, titleEnd, unmountOnExit = true, action }) { | |
| 2119 | - const [isOpen, setIsOpen] = useStateByElement(title, !!defaultExpanded); | |
| 2120 | - const ref = (0, react.useRef)(null); | |
| 2121 | - const isDisabled = !!action; | |
| 2122 | - const handleClick = () => { | |
| 2123 | - if (isDisabled) action?.onClick(); | |
| 2124 | - else setIsOpen(!isOpen); | |
| 2125 | - }; | |
| 2126 | - const id = (0, react.useId)(); | |
| 2127 | - const labelId = `label-${id}`; | |
| 2128 | - const contentId = `content-${id}`; | |
| 2129 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.ListItemButton, { | |
| 2130 | - id: labelId, | |
| 2131 | - "aria-controls": contentId, | |
| 2132 | - "aria-label": `${title} section`, | |
| 2133 | - onClick: handleClick, | |
| 2134 | - sx: { "&:hover": { backgroundColor: "transparent" } } | |
| 2135 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 2136 | - direction: "row", | |
| 2137 | - alignItems: "center", | |
| 2138 | - justifyItems: "start", | |
| 2139 | - flexGrow: 1, | |
| 2140 | - gap: .5 | |
| 2141 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.ListItemText, { | |
| 2142 | - secondary: title, | |
| 2143 | - secondaryTypographyProps: { | |
| 2144 | - color: "text.primary", | |
| 2145 | - variant: "caption", | |
| 2146 | - fontWeight: "bold" | |
| 2147 | - }, | |
| 2148 | - sx: { | |
| 2149 | - flexGrow: 0, | |
| 2150 | - flexShrink: 1, | |
| 2151 | - marginInlineEnd: 1 | |
| 2152 | - } | |
| 2153 | - }), (0, _elementor_editor_ui.getCollapsibleValue)(titleEnd, isOpen)), action?.component, /* @__PURE__ */ react.createElement(_elementor_editor_ui.CollapseIcon, { | |
| 2154 | - open: isOpen, | |
| 2155 | - color: "secondary", | |
| 2156 | - fontSize: "tiny", | |
| 2157 | - disabled: isDisabled, | |
| 2158 | - sx: { ml: 1 } | |
| 2159 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, { | |
| 2160 | - id: contentId, | |
| 2161 | - "aria-labelledby": labelId, | |
| 2162 | - in: isOpen, | |
| 2163 | - timeout: "auto", | |
| 2164 | - unmountOnExit | |
| 2165 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionRefContext.Provider, { value: ref }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 2166 | - ref, | |
| 2167 | - gap: 2.5, | |
| 2168 | - p: 2, | |
| 2169 | - "aria-label": `${title} section content` | |
| 2170 | - }, children))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)); | |
| 2171 | - } | |
| 2172 | - | |
| 2173 | -//#endregion | |
| 2174 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx | |
| 2175 | - var __defProp = Object.defineProperty; | |
| 2176 | - var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { | |
| 2177 | - enumerable: true, | |
| 2178 | - configurable: true, | |
| 2179 | - writable: true, | |
| 2180 | - value | |
| 2181 | - }) : obj[key] = value; | |
| 2182 | - var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); | |
| 2183 | - var queryArrayPropTypeUtil = (0, _elementor_editor_props.createArrayPropUtils)(_elementor_editor_props.queryPropTypeUtil.key, _elementor_editor_props.queryPropTypeUtil.schema); | |
| 2184 | - var controlTypes$1 = { | |
| 2185 | - image: { | |
| 2186 | - component: _elementor_editor_controls.ImageControl, | |
| 2187 | - layout: "custom", | |
| 2188 | - propTypeUtil: _elementor_editor_props.imagePropTypeUtil | |
| 2189 | - }, | |
| 2190 | - "svg-media": { | |
| 2191 | - component: _elementor_editor_controls.SvgMediaControl, | |
| 2192 | - layout: "full", | |
| 2193 | - propTypeUtil: _elementor_editor_props.svgSrcPropTypeUtil | |
| 2194 | - }, | |
| 2195 | - text: { | |
| 2196 | - component: _elementor_editor_controls.TextControl, | |
| 2197 | - layout: "full", | |
| 2198 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2199 | - }, | |
| 2200 | - textarea: { | |
| 2201 | - component: _elementor_editor_controls.TextAreaControl, | |
| 2202 | - layout: "full", | |
| 2203 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2204 | - }, | |
| 2205 | - size: { | |
| 2206 | - component: _elementor_editor_controls.SizeControl, | |
| 2207 | - layout: "two-columns", | |
| 2208 | - propTypeUtil: _elementor_editor_props.sizePropTypeUtil | |
| 2209 | - }, | |
| 2210 | - select: { | |
| 2211 | - component: _elementor_editor_controls.SelectControlWrapper, | |
| 2212 | - layout: "two-columns", | |
| 2213 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2214 | - }, | |
| 2215 | - chips: { | |
| 2216 | - component: _elementor_editor_controls.ChipsControl, | |
| 2217 | - layout: "full", | |
| 2218 | - propTypeUtil: _elementor_editor_props.stringArrayPropTypeUtil | |
| 2219 | - }, | |
| 2220 | - link: { | |
| 2221 | - component: _elementor_editor_controls.LinkControl, | |
| 2222 | - layout: "custom", | |
| 2223 | - propTypeUtil: _elementor_editor_props.linkPropTypeUtil | |
| 2224 | - }, | |
| 2225 | - query: { | |
| 2226 | - component: _elementor_editor_controls.QueryControl, | |
| 2227 | - layout: "full", | |
| 2228 | - propTypeUtil: _elementor_editor_props.queryPropTypeUtil | |
| 2229 | - }, | |
| 2230 | - "query-chips": { | |
| 2231 | - component: _elementor_editor_controls.QueryChipsControl, | |
| 2232 | - layout: "full", | |
| 2233 | - propTypeUtil: queryArrayPropTypeUtil | |
| 2234 | - }, | |
| 2235 | - "query-filter-repeater": { | |
| 2236 | - component: _elementor_editor_controls.QueryFilterRepeaterControl, | |
| 2237 | - layout: "full", | |
| 2238 | - propTypeUtil: _elementor_editor_props.queryFilterArrayPropTypeUtil | |
| 2239 | - }, | |
| 2240 | - url: { | |
| 2241 | - component: _elementor_editor_controls.UrlControl, | |
| 2242 | - layout: "full", | |
| 2243 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2244 | - }, | |
| 2245 | - switch: { | |
| 2246 | - component: _elementor_editor_controls.SwitchControl, | |
| 2247 | - layout: "two-columns", | |
| 2248 | - propTypeUtil: _elementor_editor_props.booleanPropTypeUtil | |
| 2249 | - }, | |
| 2250 | - number: { | |
| 2251 | - component: _elementor_editor_controls.NumberControl, | |
| 2252 | - layout: "two-columns", | |
| 2253 | - propTypeUtil: _elementor_editor_props.numberPropTypeUtil | |
| 2254 | - }, | |
| 2255 | - repeatable: { | |
| 2256 | - component: _elementor_editor_controls.RepeatableControl, | |
| 2257 | - layout: "full", | |
| 2258 | - propTypeUtil: void 0 | |
| 2259 | - }, | |
| 2260 | - "key-value": { | |
| 2261 | - component: _elementor_editor_controls.KeyValueControl, | |
| 2262 | - layout: "full", | |
| 2263 | - propTypeUtil: _elementor_editor_props.keyValuePropTypeUtil | |
| 2264 | - }, | |
| 2265 | - "html-tag": { | |
| 2266 | - component: _elementor_editor_controls.HtmlTagControl, | |
| 2267 | - layout: "two-columns", | |
| 2268 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2269 | - }, | |
| 2270 | - toggle: { | |
| 2271 | - component: _elementor_editor_controls.ToggleControl, | |
| 2272 | - layout: "full", | |
| 2273 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2274 | - }, | |
| 2275 | - "date-time": { | |
| 2276 | - component: _elementor_editor_controls.DateTimeControl, | |
| 2277 | - layout: "full", | |
| 2278 | - propTypeUtil: _elementor_editor_props.DateTimePropTypeUtil | |
| 2279 | - }, | |
| 2280 | - video: { | |
| 2281 | - component: _elementor_editor_controls.VideoMediaControl, | |
| 2282 | - layout: "full", | |
| 2283 | - propTypeUtil: _elementor_editor_props.videoSrcPropTypeUtil | |
| 2284 | - }, | |
| 2285 | - "inline-editing": { | |
| 2286 | - component: _elementor_editor_controls.InlineEditingControl, | |
| 2287 | - layout: "full", | |
| 2288 | - propTypeUtil: _elementor_editor_props.escapedHtmlPropTypeUtil | |
| 2289 | - }, | |
| 2290 | - email: { | |
| 2291 | - component: _elementor_editor_controls.EmailFormActionControl, | |
| 2292 | - layout: "custom", | |
| 2293 | - propTypeUtil: _elementor_editor_props.emailsPropTypeUtil | |
| 2294 | - }, | |
| 2295 | - "date-range": { | |
| 2296 | - component: _elementor_editor_controls.DateRangeControl, | |
| 2297 | - layout: "custom", | |
| 2298 | - propTypeUtil: _elementor_editor_props.dateRangePropTypeUtil | |
| 2299 | - }, | |
| 2300 | - "time-range": { | |
| 2301 | - component: _elementor_editor_controls.TimeRangeControl, | |
| 2302 | - layout: "custom", | |
| 2303 | - propTypeUtil: _elementor_editor_props.timeRangePropTypeUtil | |
| 2304 | - }, | |
| 2305 | - "attachment-type": { | |
| 2306 | - component: _elementor_editor_controls.AttachmentTypeControl, | |
| 2307 | - layout: "custom", | |
| 2308 | - propTypeUtil: _elementor_editor_props.stringPropTypeUtil | |
| 2309 | - } | |
| 2310 | - }; | |
| 2311 | - var ControlsRegistry = class { | |
| 2312 | - constructor(controlsRegistry2) { | |
| 2313 | - __publicField(this, "controlsRegistry", controlsRegistry2); | |
| 2314 | - this.controlsRegistry = controlsRegistry2; | |
| 2315 | - } | |
| 2316 | - get(type) { | |
| 2317 | - return this.controlsRegistry[type]?.component; | |
| 2318 | - } | |
| 2319 | - getLayout(type) { | |
| 2320 | - return this.controlsRegistry[type]?.layout; | |
| 2321 | - } | |
| 2322 | - getPropTypeUtil(type) { | |
| 2323 | - return this.controlsRegistry[type]?.propTypeUtil; | |
| 2324 | - } | |
| 2325 | - registry() { | |
| 2326 | - return this.controlsRegistry; | |
| 2327 | - } | |
| 2328 | - register(type, component, layout, propTypeUtil) { | |
| 2329 | - if (this.controlsRegistry[type]) throw new ControlTypeAlreadyRegisteredError({ context: { controlType: type } }); | |
| 2330 | - this.controlsRegistry[type] = { | |
| 2331 | - component, | |
| 2332 | - layout, | |
| 2333 | - propTypeUtil | |
| 2334 | - }; | |
| 2335 | - } | |
| 2336 | - unregister(type) { | |
| 2337 | - if (!this.controlsRegistry[type]) throw new ControlTypeNotRegisteredError({ context: { controlType: type } }); | |
| 2338 | - delete this.controlsRegistry[type]; | |
| 2339 | - } | |
| 2340 | - }; | |
| 2341 | - var controlsRegistry = new ControlsRegistry(controlTypes$1); | |
| 2342 | - | |
| 2343 | -//#endregion | |
| 2344 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx | |
| 2345 | - var Control$1 = /* @__PURE__ */ __name(({ props, type }) => { | |
| 2346 | - const ControlByType = controlsRegistry.get(type); | |
| 2347 | - const { element } = useElement(); | |
| 2348 | - if (!ControlByType) throw new ControlTypeNotFoundError({ context: { controlType: type } }); | |
| 2349 | - return /* @__PURE__ */ react.createElement(ControlByType, { | |
| 2350 | - ...props, | |
| 2351 | - context: { elementId: element.id } | |
| 2352 | - }); | |
| 2353 | - }, "Control"); | |
| 2354 | - | |
| 2355 | -//#endregion | |
| 2356 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/control-type-container.tsx | |
| 2357 | - var ControlTypeContainer = ({ children, layout }) => { | |
| 2358 | - if (layout === "custom") return children; | |
| 2359 | - return /* @__PURE__ */ react.createElement(StyledContainer, { layout }, children); | |
| 2360 | - }; | |
| 2361 | - var StyledContainer = (0, _elementor_ui.styled)(_elementor_ui.Box, { shouldForwardProp: (prop) => !["layout"].includes(prop) })(({ layout, theme }) => ({ | |
| 2362 | - display: "grid", | |
| 2363 | - gridGap: theme.spacing(1), | |
| 2364 | - ...getGridLayout(layout) | |
| 2365 | - })); | |
| 2366 | - var getGridLayout = (layout) => ({ | |
| 2367 | - justifyContent: "space-between", | |
| 2368 | - ...getStyleByLayout(layout) | |
| 2369 | - }); | |
| 2370 | - var getStyleByLayout = (layout) => { | |
| 2371 | - if (layout === "full") return { gridTemplateColumns: "minmax(0, 1fr)" }; | |
| 2372 | - if (layout === "two-columns") return { | |
| 2373 | - alignItems: "center", | |
| 2374 | - gridTemplateColumns: "repeat(2, minmax(0, 1fr))" | |
| 2375 | - }; | |
| 2376 | - }; | |
| 2377 | - | |
| 2378 | -//#endregion | |
| 2379 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts | |
| 2380 | - var createTopLevelObjectType = ({ schema }) => { | |
| 2381 | - return { | |
| 2382 | - key: "", | |
| 2383 | - kind: "object", | |
| 2384 | - meta: {}, | |
| 2385 | - settings: {}, | |
| 2386 | - default: null, | |
| 2387 | - shape: schema | |
| 2388 | - }; | |
| 2389 | - }; | |
| 2390 | - | |
| 2391 | -//#endregion | |
| 2392 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx | |
| 2393 | - var HISTORY_DEBOUNCE_WAIT = 800; | |
| 2394 | - var SettingsField = ({ bind, children, propDisplayName }) => { | |
| 2395 | - const { element: { id: elementId }, elementType: { propsSchema, dependenciesPerTargetMapping = {} }, settings: currentElementSettings } = useElement(); | |
| 2396 | - const value = { [bind]: currentElementSettings?.[bind] ?? null }; | |
| 2397 | - const propType = createTopLevelObjectType({ schema: propsSchema }); | |
| 2398 | - const undoableUpdateElementProp = useUndoableUpdateElementProp({ | |
| 2399 | - elementId, | |
| 2400 | - propDisplayName | |
| 2401 | - }); | |
| 2402 | - const { isDisabled, isHidden } = extractDependencyEffect(bind, propsSchema, currentElementSettings); | |
| 2403 | - if (isHidden) return null; | |
| 2404 | - const setValue = (newValue, _ = {}, meta) => { | |
| 2405 | - const { withHistory = true } = meta ?? {}; | |
| 2406 | - const dependents = extractOrderedDependencies(dependenciesPerTargetMapping); | |
| 2407 | - const settingsWithDefaults = getElementSettingsWithDefaults(propsSchema, currentElementSettings); | |
| 2408 | - const settings = getUpdatedValues(newValue, dependents, propsSchema, settingsWithDefaults, elementId); | |
| 2409 | - if (withHistory) undoableUpdateElementProp(settings); | |
| 2410 | - else (0, _elementor_editor_elements.updateElementSettings)({ | |
| 2411 | - id: elementId, | |
| 2412 | - props: settings, | |
| 2413 | - withHistory: false | |
| 2414 | - }); | |
| 2415 | - }; | |
| 2416 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 2417 | - propType, | |
| 2418 | - value, | |
| 2419 | - setValue, | |
| 2420 | - isDisabled | |
| 2421 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, children)); | |
| 2422 | - }; | |
| 2423 | - function useUndoableUpdateElementProp({ elementId, propDisplayName }) { | |
| 2424 | - return (0, react.useMemo)(() => { | |
| 2425 | - return (0, _elementor_editor_v1_adapters.undoable)({ | |
| 2426 | - do: (newSettings) => { | |
| 2427 | - const prevPropValue = (0, _elementor_editor_elements.getElementSettings)(elementId, Object.keys(newSettings)); | |
| 2428 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 2429 | - id: elementId, | |
| 2430 | - props: newSettings, | |
| 2431 | - withHistory: false | |
| 2432 | - }); | |
| 2433 | - (0, _elementor_editor_documents.setDocumentModifiedStatus)(true); | |
| 2434 | - return prevPropValue; | |
| 2435 | - }, | |
| 2436 | - undo: ({}, prevProps) => { | |
| 2437 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 2438 | - id: elementId, | |
| 2439 | - props: prevProps, | |
| 2440 | - withHistory: false | |
| 2441 | - }); | |
| 2442 | - } | |
| 2443 | - }, { | |
| 2444 | - title: (0, _elementor_editor_elements.getElementLabel)(elementId), | |
| 2445 | - subtitle: (0, _wordpress_i18n.__)("%s edited", "elementor").replace("%s", propDisplayName), | |
| 2446 | - debounce: { wait: HISTORY_DEBOUNCE_WAIT } | |
| 2447 | - }); | |
| 2448 | - }, [elementId, propDisplayName]); | |
| 2449 | - } | |
| 2450 | - | |
| 2451 | -//#endregion | |
| 2452 | -//#region packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts | |
| 2453 | - var indicatorsRegistry = { | |
| 2454 | - settings: /* @__PURE__ */ new Map(), | |
| 2455 | - styles: /* @__PURE__ */ new Map() | |
| 2456 | - }; | |
| 2457 | - var DEFAULT_PRIORITY = 10; | |
| 2458 | - var FIELD_TYPE = { | |
| 2459 | - SETTINGS: "settings", | |
| 2460 | - STYLES: "styles" | |
| 2461 | - }; | |
| 2462 | - var registerFieldIndicator = ({ fieldType, id, indicator, priority = DEFAULT_PRIORITY }) => { | |
| 2463 | - indicatorsRegistry[fieldType].set(id, { | |
| 2464 | - id, | |
| 2465 | - indicator, | |
| 2466 | - priority | |
| 2467 | - }); | |
| 2468 | - }; | |
| 2469 | - var getFieldIndicators = (fieldType) => Array.from(indicatorsRegistry[fieldType].values()).sort((a, b) => a.priority - b.priority).map(({ id, indicator: Adornment }) => ({ | |
| 2470 | - id, | |
| 2471 | - Adornment | |
| 2472 | - })); | |
| 2473 | - | |
| 2474 | -//#endregion | |
| 2475 | -//#region packages/packages/core/editor-editing-panel/src/components/settings-control.tsx | |
| 2476 | - var Wrapper$1 = (0, _elementor_ui.styled)("span")` | |
| 2477 | - display: contents; | |
| 2478 | -`; | |
| 2479 | - var SettingsControl = ({ control: { value, type } }) => { | |
| 2480 | - if (!controlsRegistry.get(value.type)) return null; | |
| 2481 | - const layout = value.meta?.layout || controlsRegistry.getLayout(value.type); | |
| 2482 | - const controlProps = populateChildControlProps(value.props); | |
| 2483 | - if (layout === "custom") controlProps.label = value.label; | |
| 2484 | - if (type === "element-control") return /* @__PURE__ */ react.createElement(ControlLayout, { | |
| 2485 | - control: value, | |
| 2486 | - layout, | |
| 2487 | - controlProps | |
| 2488 | - }); | |
| 2489 | - return /* @__PURE__ */ react.createElement(SettingsField, { | |
| 2490 | - bind: value.bind, | |
| 2491 | - propDisplayName: value.label || value.bind | |
| 2492 | - }, /* @__PURE__ */ react.createElement(ControlLayout, { | |
| 2493 | - control: value, | |
| 2494 | - layout, | |
| 2495 | - controlProps | |
| 2496 | - })); | |
| 2497 | - }; | |
| 2498 | - var ControlLayout = ({ control, layout, controlProps }) => { | |
| 2499 | - const controlType = control.type; | |
| 2500 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornmentsProvider, { items: getFieldIndicators("settings") }, control.meta?.topDivider && /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(Wrapper$1, { "data-type": "settings-field" }, /* @__PURE__ */ react.createElement(ControlTypeContainer, { layout }, control.label && layout !== "custom" ? /* @__PURE__ */ react.createElement(ControlLabel, null, control.label) : null, /* @__PURE__ */ react.createElement(Control$1, { | |
| 2501 | - type: controlType, | |
| 2502 | - props: controlProps | |
| 2503 | - })))); | |
| 2504 | - }; | |
| 2505 | - function populateChildControlProps(props) { | |
| 2506 | - if (props.childControlType) { | |
| 2507 | - const childComponent = controlsRegistry.get(props.childControlType); | |
| 2508 | - const childPropType = controlsRegistry.getPropTypeUtil(props.childControlType); | |
| 2509 | - props = { | |
| 2510 | - ...props, | |
| 2511 | - childControlConfig: { | |
| 2512 | - component: childComponent, | |
| 2513 | - props: props.childControlProps || {}, | |
| 2514 | - propTypeUtil: childPropType | |
| 2515 | - } | |
| 2516 | - }; | |
| 2517 | - } | |
| 2518 | - return props; | |
| 2519 | - } | |
| 2520 | - | |
| 2521 | -//#endregion | |
| 2522 | -//#region packages/packages/core/editor-editing-panel/src/components/settings-tab.tsx | |
| 2523 | - var SettingsTab = () => { | |
| 2524 | - const { elementType, element, settings } = useElement(); | |
| 2525 | - const settingsDefault = useDefaultPanelSettings(); | |
| 2526 | - const currentSettings = settings; | |
| 2527 | - const isDefaultExpanded = (sectionId) => !!sectionId && settingsDefault.defaultSectionsExpanded.settings?.includes(sectionId); | |
| 2528 | - return /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: element.id }, /* @__PURE__ */ react.createElement(SectionsList, null, elementType.controls.map((control, index) => { | |
| 2529 | - if (isControl(control)) return /* @__PURE__ */ react.createElement(SettingsControl, { | |
| 2530 | - key: getKey(control, element), | |
| 2531 | - control | |
| 2532 | - }); | |
| 2533 | - const { type, value } = control; | |
| 2534 | - if (type === "section") { | |
| 2535 | - const sectionItems = renderSectionItems({ | |
| 2536 | - items: value.items, | |
| 2537 | - element, | |
| 2538 | - propsSchema: elementType.propsSchema, | |
| 2539 | - settings: currentSettings | |
| 2540 | - }); | |
| 2541 | - if (!sectionItems.length) return null; | |
| 2542 | - return /* @__PURE__ */ react.createElement(Section, { | |
| 2543 | - title: value.label, | |
| 2544 | - key: type + "." + index, | |
| 2545 | - defaultExpanded: isDefaultExpanded(value.id) | |
| 2546 | - }, sectionItems); | |
| 2547 | - } | |
| 2548 | - return null; | |
| 2549 | - }))); | |
| 2550 | - }; | |
| 2551 | - function getKey(control, element) { | |
| 2552 | - if (control.type === "control") return control.value.bind + "." + element.id; | |
| 2553 | - return control.value.type + "." + element.id; | |
| 2554 | - } | |
| 2555 | - function isControl(control) { | |
| 2556 | - return control.type === "control" || control.type === "element-control"; | |
| 2557 | - } | |
| 2558 | - function renderSectionItems({ items, element, propsSchema, settings }) { | |
| 2559 | - return items?.flatMap((item) => { | |
| 2560 | - if (!isControl(item)) return []; | |
| 2561 | - if (item.type === "control" && isControlHiddenByDependencies(item, propsSchema, settings)) return []; | |
| 2562 | - return [/* @__PURE__ */ react.createElement(SettingsControl, { | |
| 2563 | - key: getKey(item, element), | |
| 2564 | - control: item | |
| 2565 | - })]; | |
| 2566 | - }) ?? []; | |
| 2567 | - } | |
| 2568 | - function isControlHiddenByDependencies(control, propsSchema, settings) { | |
| 2569 | - const { isHidden } = extractDependencyEffect(control.value.bind, propsSchema, settings); | |
| 2570 | - return isHidden; | |
| 2571 | - } | |
| 2572 | - | |
| 2573 | -//#endregion | |
| 2574 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-default-style-tag-from-preview.ts | |
| 2575 | - function useDefaultStyleTagFromPreview(elementId) { | |
| 2576 | - return (0, _elementor_editor_v1_adapters.__privateUseListenTo)([ | |
| 2577 | - (0, _elementor_editor_v1_adapters.windowEvent)("elementor/preview/atomic-widget/render"), | |
| 2578 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/settings"), | |
| 2579 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/set-settings"), | |
| 2580 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/select") | |
| 2581 | - ], () => (0, _elementor_editor_elements.getDefaultStyleTagFromPreviewElement)(elementId)); | |
| 2582 | - } | |
| 2583 | - | |
| 2584 | -//#endregion | |
| 2585 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts | |
| 2586 | - var DEFAULT_STATE = "normal"; | |
| 2587 | - var DEFAULT_BREAKPOINT$2 = "desktop"; | |
| 2588 | - var getStateKey = (state) => state ?? "normal"; | |
| 2589 | - var getBreakpointKey = (breakpoint) => breakpoint ?? DEFAULT_BREAKPOINT$2; | |
| 2590 | - var getValueFromInheritanceChain = (inheritanceChain, styleId, meta) => inheritanceChain.find(({ style, variant: { meta: { breakpoint, state } } }) => style.id === styleId && breakpoint === meta.breakpoint && state === meta.state); | |
| 2591 | - | |
| 2592 | -//#endregion | |
| 2593 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/create-snapshots-manager.ts | |
| 2594 | - function createSnapshotsManager(getStylesByMeta, breakpointsRoot) { | |
| 2595 | - const breakpointsInheritancePaths = makeBreakpointsInheritancePaths(breakpointsRoot); | |
| 2596 | - const allBreakpointStatesSnapshots = {}; | |
| 2597 | - const buildMissingSnapshotsForBreakpoint = (currentBreakpointId, parentBreakpoint, state) => { | |
| 2598 | - const currentBreakpointKey = getBreakpointKey(currentBreakpointId); | |
| 2599 | - const stateKey = getStateKey(state); | |
| 2600 | - if (!allBreakpointStatesSnapshots[currentBreakpointKey]) allBreakpointStatesSnapshots[currentBreakpointKey] = { [DEFAULT_STATE]: buildStateSnapshotSlot(getStylesByMeta({ | |
| 2601 | - breakpoint: currentBreakpointId, | |
| 2602 | - state: null | |
| 2603 | - }), parentBreakpoint, {}, null) }; | |
| 2604 | - if (state && !allBreakpointStatesSnapshots[currentBreakpointKey]?.[stateKey]) allBreakpointStatesSnapshots[currentBreakpointKey][stateKey] = buildStateSnapshotSlot(getStylesByMeta({ | |
| 2605 | - breakpoint: currentBreakpointId, | |
| 2606 | - state | |
| 2607 | - }), parentBreakpoint, allBreakpointStatesSnapshots[currentBreakpointKey] ?? {}, state); | |
| 2608 | - }; | |
| 2609 | - return (meta) => { | |
| 2610 | - const { breakpoint, state } = meta; | |
| 2611 | - const stateKey = getStateKey(state); | |
| 2612 | - const breakpointKey = getBreakpointKey(breakpoint); | |
| 2613 | - if (allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]) return allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]?.snapshot; | |
| 2614 | - const breakpointsChain = [...breakpointsInheritancePaths[breakpointKey], breakpoint]; | |
| 2615 | - breakpointsChain.forEach((breakpointId, index) => { | |
| 2616 | - const parentBreakpointId = index > 0 ? breakpointsChain[index - 1] : null; | |
| 2617 | - buildMissingSnapshotsForBreakpoint(breakpointId, parentBreakpointId ? allBreakpointStatesSnapshots[parentBreakpointId] : void 0, state); | |
| 2618 | - }); | |
| 2619 | - return allBreakpointStatesSnapshots[breakpointKey]?.[stateKey]?.snapshot; | |
| 2620 | - }; | |
| 2621 | - } | |
| 2622 | - function makeBreakpointsInheritancePaths(root) { | |
| 2623 | - const breakpoints = {}; | |
| 2624 | - const traverse = (node, parent) => { | |
| 2625 | - const { id, children } = node; | |
| 2626 | - breakpoints[id] = parent ? [...parent] : []; | |
| 2627 | - children?.forEach((child) => { | |
| 2628 | - traverse(child, [...breakpoints[id] ?? [], id]); | |
| 2629 | - }); | |
| 2630 | - }; | |
| 2631 | - traverse(root); | |
| 2632 | - return breakpoints; | |
| 2633 | - } | |
| 2634 | - function buildStateSnapshotSlot(styles, parentBreakpoint, currentBreakpoint, state) { | |
| 2635 | - const initialSlot = buildInitialSnapshotFromStyles(styles); | |
| 2636 | - if (!state) return { | |
| 2637 | - snapshot: mergeSnapshots([initialSlot.snapshot, parentBreakpoint?.[DEFAULT_STATE]?.snapshot]), | |
| 2638 | - stateSpecificSnapshot: void 0 | |
| 2639 | - }; | |
| 2640 | - return { | |
| 2641 | - snapshot: mergeSnapshots([ | |
| 2642 | - initialSlot.snapshot, | |
| 2643 | - parentBreakpoint?.[state]?.stateSpecificSnapshot, | |
| 2644 | - currentBreakpoint[DEFAULT_STATE]?.snapshot | |
| 2645 | - ]), | |
| 2646 | - stateSpecificSnapshot: mergeSnapshots([initialSlot.stateSpecificSnapshot, parentBreakpoint?.[state]?.stateSpecificSnapshot]) | |
| 2647 | - }; | |
| 2648 | - } | |
| 2649 | - function buildInitialSnapshotFromStyles(styles) { | |
| 2650 | - const snapshot = {}; | |
| 2651 | - styles.forEach((styleData) => { | |
| 2652 | - const { variant: { props } } = styleData; | |
| 2653 | - Object.entries(props).forEach(([key, value]) => { | |
| 2654 | - const filteredValue = (0, _elementor_editor_props.filterEmptyValues)(value); | |
| 2655 | - const filteredVariableValue = filteredValue?.$$type?.includes("variable") && !(0, _elementor_editor_variables.hasVariable)(filteredValue?.value) ? null : filteredValue; | |
| 2656 | - if (filteredVariableValue === null) return; | |
| 2657 | - if (!snapshot[key]) snapshot[key] = []; | |
| 2658 | - const snapshotPropValue = { | |
| 2659 | - ...styleData, | |
| 2660 | - value: filteredVariableValue | |
| 2661 | - }; | |
| 2662 | - snapshot[key].push(snapshotPropValue); | |
| 2663 | - }); | |
| 2664 | - }); | |
| 2665 | - return { | |
| 2666 | - snapshot, | |
| 2667 | - stateSpecificSnapshot: snapshot | |
| 2668 | - }; | |
| 2669 | - } | |
| 2670 | - function mergeSnapshots(snapshots) { | |
| 2671 | - const snapshot = {}; | |
| 2672 | - snapshots.filter(Boolean).forEach((currentSnapshot) => Object.entries(currentSnapshot).forEach(([key, values]) => { | |
| 2673 | - if (!snapshot[key]) snapshot[key] = []; | |
| 2674 | - snapshot[key] = snapshot[key].concat(values); | |
| 2675 | - })); | |
| 2676 | - return snapshot; | |
| 2677 | - } | |
| 2678 | - | |
| 2679 | -//#endregion | |
| 2680 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/create-styles-inheritance.ts | |
| 2681 | - function createStylesInheritance(styleDefs, breakpointsRoot) { | |
| 2682 | - const styleVariantsByMeta = buildStyleVariantsByMetaMapping(styleDefs); | |
| 2683 | - const getStyles = ({ breakpoint, state }) => styleVariantsByMeta?.[getBreakpointKey(breakpoint)]?.[getStateKey(state)] ?? []; | |
| 2684 | - return { | |
| 2685 | - getSnapshot: createSnapshotsManager(getStyles, breakpointsRoot), | |
| 2686 | - getInheritanceChain: (snapshot, path, topLevelPropType) => { | |
| 2687 | - const [field, ...nextFields] = path; | |
| 2688 | - let inheritanceChain = snapshot[field] ?? []; | |
| 2689 | - if (nextFields.length > 0) { | |
| 2690 | - const filterPropType = getFilterPropType(topLevelPropType, nextFields); | |
| 2691 | - inheritanceChain = inheritanceChain.map(({ value: styleValue, ...rest }) => ({ | |
| 2692 | - ...rest, | |
| 2693 | - value: getValueByPath(styleValue, nextFields, filterPropType) | |
| 2694 | - })).filter(({ value: styleValue }) => !(0, _elementor_editor_props.isEmpty)(styleValue)); | |
| 2695 | - } | |
| 2696 | - return inheritanceChain; | |
| 2697 | - } | |
| 2698 | - }; | |
| 2699 | - } | |
| 2700 | - function buildStyleVariantsByMetaMapping(styleDefs) { | |
| 2701 | - const breakpointStateSlots = {}; | |
| 2702 | - styleDefs.forEach((styleDef) => { | |
| 2703 | - const provider = getProviderByStyleId(styleDef.id)?.getKey() ?? null; | |
| 2704 | - styleDef.variants.forEach((variant) => { | |
| 2705 | - const { meta } = variant; | |
| 2706 | - const { state, breakpoint } = meta; | |
| 2707 | - const breakpointKey = getBreakpointKey(breakpoint); | |
| 2708 | - const stateKey = getStateKey(state); | |
| 2709 | - if (!breakpointStateSlots[breakpointKey]) breakpointStateSlots[breakpointKey] = {}; | |
| 2710 | - const breakpointNode = breakpointStateSlots[breakpointKey]; | |
| 2711 | - if (!breakpointNode[stateKey]) breakpointNode[stateKey] = []; | |
| 2712 | - breakpointNode[stateKey].push({ | |
| 2713 | - style: styleDef, | |
| 2714 | - variant, | |
| 2715 | - provider | |
| 2716 | - }); | |
| 2717 | - }); | |
| 2718 | - }); | |
| 2719 | - return breakpointStateSlots; | |
| 2720 | - } | |
| 2721 | - function getValueByPath(value, path, filterPropType) { | |
| 2722 | - if (!value || typeof value !== "object") return null; | |
| 2723 | - if (shouldUseOriginalValue(filterPropType, value)) return value; | |
| 2724 | - return path.reduce((currentScope, key) => { | |
| 2725 | - if (!currentScope) return null; | |
| 2726 | - if ((0, _elementor_editor_props.isTransformable)(currentScope)) return currentScope.value?.[key] ?? null; | |
| 2727 | - if (typeof currentScope === "object") return currentScope[key] ?? null; | |
| 2728 | - return null; | |
| 2729 | - }, value); | |
| 2730 | - } | |
| 2731 | - function shouldUseOriginalValue(filterPropType, value) { | |
| 2732 | - return !!filterPropType && (0, _elementor_editor_props.isTransformable)(value) && filterPropType.key !== value.$$type; | |
| 2733 | - } | |
| 2734 | - var getFilterPropType = (propType, path) => { | |
| 2735 | - if (!propType || propType.kind !== "union") return null; | |
| 2736 | - return Object.values(propType.prop_types).find((type) => { | |
| 2737 | - return !!path.reduce((currentScope, key) => { | |
| 2738 | - if (currentScope?.kind !== "object") return null; | |
| 2739 | - const { shape } = currentScope; | |
| 2740 | - if (shape[key]) return shape[key]; | |
| 2741 | - return null; | |
| 2742 | - }, type); | |
| 2743 | - }) ?? null; | |
| 2744 | - }; | |
| 2745 | - | |
| 2746 | -//#endregion | |
| 2747 | -//#region packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx | |
| 2748 | - var Context = (0, react.createContext)(null); | |
| 2749 | - function StyleInheritanceProvider({ children }) { | |
| 2750 | - const { getSnapshot, getInheritanceChain } = createStylesInheritance(useAppliedStyles(), (0, _elementor_editor_responsive.getBreakpointsTree)()); | |
| 2751 | - return /* @__PURE__ */ react.createElement(Context.Provider, { value: { | |
| 2752 | - getSnapshot, | |
| 2753 | - getInheritanceChain | |
| 2754 | - } }, children); | |
| 2755 | - } | |
| 2756 | - function useStylesInheritanceSnapshot() { | |
| 2757 | - const context = (0, react.useContext)(Context); | |
| 2758 | - const { meta } = useStyle(); | |
| 2759 | - if (!context) throw new Error("useStylesInheritanceSnapshot must be used within a StyleInheritanceProvider"); | |
| 2760 | - if (!meta) return null; | |
| 2761 | - return context.getSnapshot(meta) ?? null; | |
| 2762 | - } | |
| 2763 | - function useStylesInheritanceChain(path) { | |
| 2764 | - const context = (0, react.useContext)(Context); | |
| 2765 | - if (!context) throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider"); | |
| 2766 | - const topLevelPropType = (0, _elementor_editor_styles.getStylesSchema)()?.[path[0]]; | |
| 2767 | - const snapshot = useStylesInheritanceSnapshot(); | |
| 2768 | - if (!snapshot) return []; | |
| 2769 | - return context.getInheritanceChain(snapshot, path, topLevelPropType); | |
| 2770 | - } | |
| 2771 | - var EMPTY_INHERITED_VALUES = {}; | |
| 2772 | - function useInheritedValues(propKeys) { | |
| 2773 | - const snapshot = useStylesInheritanceSnapshot(); | |
| 2774 | - return (0, react.useMemo)(() => { | |
| 2775 | - if (!snapshot || propKeys.length === 0) return EMPTY_INHERITED_VALUES; | |
| 2776 | - return Object.fromEntries(propKeys.map((key) => [key, snapshot[key]?.[0]?.value ?? null])); | |
| 2777 | - }, [snapshot, propKeys]); | |
| 2778 | - } | |
| 2779 | - var useAppliedStyles = () => { | |
| 2780 | - const currentClassesProp = useClassesProp(); | |
| 2781 | - const baseStyles = useBaseStyles(); | |
| 2782 | - const defaultTagStyleId = useDefaultTagStyleId(); | |
| 2783 | - const { id: activeStyleId } = useStyle(); | |
| 2784 | - useStylesRerender(); | |
| 2785 | - const classesProp = usePanelElementSetting(currentClassesProp); | |
| 2786 | - const appliedStyles = _elementor_editor_props.classesPropTypeUtil.extract(classesProp) ?? []; | |
| 2787 | - const applicableIds = [ | |
| 2788 | - ...baseStyles, | |
| 2789 | - ...appliedStyles, | |
| 2790 | - ...defaultTagStyleId ? [defaultTagStyleId] : [], | |
| 2791 | - ...activeStyleId ? [activeStyleId] : [] | |
| 2792 | - ]; | |
| 2793 | - return _elementor_editor_styles_repository.stylesRepository.all().filter((style) => applicableIds.includes(style.id)); | |
| 2794 | - }; | |
| 2795 | - var useBaseStyles = () => { | |
| 2796 | - const { elementType } = useElement(); | |
| 2797 | - const widgetCache = (0, _elementor_editor_elements.getWidgetsCache)()?.[elementType.key]; | |
| 2798 | - return Object.keys(widgetCache?.base_styles ?? {}); | |
| 2799 | - }; | |
| 2800 | - var useDefaultTagStyleId = () => { | |
| 2801 | - const { element } = useElement(); | |
| 2802 | - return useDefaultStyleTagFromPreview(element.id); | |
| 2803 | - }; | |
| 2804 | - | |
| 2805 | -//#endregion | |
| 2806 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-active-style-def-id.ts | |
| 2807 | - function useActiveStyleDefId(classProp) { | |
| 2808 | - const [activeStyledDefId, setActiveStyledDefId] = useStateByElement("active-style-id", null); | |
| 2809 | - const appliedClassesIds = usePanelElementSetting(classProp)?.value || []; | |
| 2810 | - const validAppliedClassesIds = useValidClassIds(appliedClassesIds); | |
| 2811 | - const fallback = useFirstAppliedClass(appliedClassesIds); | |
| 2812 | - return [useActiveAndAppliedClassId(activeStyledDefId, validAppliedClassesIds) || fallback?.id || null, setActiveStyledDefId]; | |
| 2813 | - } | |
| 2814 | - function useValidClassIds(appliedClassesIds) { | |
| 2815 | - const providers = (0, _elementor_editor_styles_repository.useProviders)(); | |
| 2816 | - const allKnownIds = new Set(providers.flatMap((provider) => provider.actions.all().map((style) => style.id))); | |
| 2817 | - return appliedClassesIds.filter((id) => allKnownIds.has(id)); | |
| 2818 | - } | |
| 2819 | - function useFirstAppliedClass(appliedClassesIds) { | |
| 2820 | - const { element } = useElement(); | |
| 2821 | - const stylesDefs = (0, _elementor_editor_elements.getElementStyles)(element.id) ?? {}; | |
| 2822 | - return Object.values(stylesDefs).find((styleDef) => appliedClassesIds.includes(styleDef.id)); | |
| 2823 | - } | |
| 2824 | - function useActiveAndAppliedClassId(id, appliedClassesIds) { | |
| 2825 | - return !!id && appliedClassesIds.includes(id) ? id : null; | |
| 2826 | - } | |
| 2827 | - | |
| 2828 | -//#endregion | |
| 2829 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts | |
| 2830 | - function useStylesField(propName, meta) { | |
| 2831 | - const { values, setValues, canEdit } = useStylesFields([propName]); | |
| 2832 | - const value = values?.[propName] ?? null; | |
| 2833 | - const setValue = (newValue) => { | |
| 2834 | - setValues({ [propName]: newValue }, meta); | |
| 2835 | - }; | |
| 2836 | - return { | |
| 2837 | - value, | |
| 2838 | - setValue, | |
| 2839 | - canEdit | |
| 2840 | - }; | |
| 2841 | - } | |
| 2842 | - | |
| 2843 | -//#endregion | |
| 2844 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/conditional-field.tsx | |
| 2845 | - var ConditionalField = ({ children }) => { | |
| 2846 | - const { propType, value, resetValue } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 2847 | - const depList = getDependencies(propType); | |
| 2848 | - const { values: depValues, setValues: setDepValues } = useStylesFields(depList); | |
| 2849 | - const inheritedValues = useInheritedValues(depList); | |
| 2850 | - const resolvedValues = resolveWithInherited(depValues, inheritedValues); | |
| 2851 | - const isHidden = !(0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, resolvedValues).isMet; | |
| 2852 | - useSyncDepsWithInherited({ | |
| 2853 | - isHidden, | |
| 2854 | - depValues, | |
| 2855 | - value, | |
| 2856 | - inheritedValues, | |
| 2857 | - setDepValues, | |
| 2858 | - resetValue | |
| 2859 | - }); | |
| 2860 | - return isHidden ? null : children; | |
| 2861 | - }; | |
| 2862 | - function wasDepsCleared(prevDepValues, depValues) { | |
| 2863 | - if (!prevDepValues) return false; | |
| 2864 | - return Object.keys(prevDepValues).some((key) => prevDepValues[key] && (!depValues || !depValues[key])); | |
| 2865 | - } | |
| 2866 | - function useSyncDepsWithInherited({ isHidden, depValues, value, inheritedValues, setDepValues, resetValue }) { | |
| 2867 | - const syncRef = (0, react.useRef)({ | |
| 2868 | - hasSynced: false, | |
| 2869 | - prevDepValues: depValues | |
| 2870 | - }); | |
| 2871 | - (0, react.useEffect)(() => { | |
| 2872 | - const { hasSynced, prevDepValues } = syncRef.current; | |
| 2873 | - if (hasSynced && value && wasDepsCleared(prevDepValues, depValues) || isHidden && depValues && value) resetValue(); | |
| 2874 | - if (isHidden || !value || !depValues) { | |
| 2875 | - syncRef.current = { | |
| 2876 | - hasSynced: false, | |
| 2877 | - prevDepValues: depValues | |
| 2878 | - }; | |
| 2879 | - return; | |
| 2880 | - } | |
| 2881 | - if (hasSynced) { | |
| 2882 | - syncRef.current.prevDepValues = depValues; | |
| 2883 | - return; | |
| 2884 | - } | |
| 2885 | - syncRef.current = { | |
| 2886 | - hasSynced: true, | |
| 2887 | - prevDepValues: depValues | |
| 2888 | - }; | |
| 2889 | - Object.entries(depValues).forEach(([key, depValue]) => { | |
| 2890 | - const inherited = inheritedValues[key]; | |
| 2891 | - if (!depValue && inherited) setDepValues({ [key]: inherited }, { history: { propDisplayName: key } }); | |
| 2892 | - }); | |
| 2893 | - }, [ | |
| 2894 | - isHidden, | |
| 2895 | - depValues, | |
| 2896 | - value, | |
| 2897 | - inheritedValues, | |
| 2898 | - setDepValues, | |
| 2899 | - resetValue | |
| 2900 | - ]); | |
| 2901 | - } | |
| 2902 | - function resolveWithInherited(localValues, inheritedValues) { | |
| 2903 | - if (!localValues) return Object.keys(inheritedValues).length > 0 ? { ...inheritedValues } : null; | |
| 2904 | - return Object.fromEntries(Object.entries(localValues).map(([key, val]) => [key, val ?? inheritedValues[key] ?? null])); | |
| 2905 | - } | |
| 2906 | - function getDependencies(propType) { | |
| 2907 | - if (!propType?.dependencies?.terms.length) return []; | |
| 2908 | - return propType.dependencies.terms.flatMap((term) => !(0, _elementor_editor_props.isDependency)(term) ? term.path : []); | |
| 2909 | - } | |
| 2910 | - | |
| 2911 | -//#endregion | |
| 2912 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx | |
| 2913 | - var DIMENSION_SIDES = [ | |
| 2914 | - "block-start", | |
| 2915 | - "block-end", | |
| 2916 | - "inline-start", | |
| 2917 | - "inline-end" | |
| 2918 | - ]; | |
| 2919 | - function buildResolvedPlaceholder(chain, startIndex) { | |
| 2920 | - const firstEntry = chain[startIndex]; | |
| 2921 | - if (!firstEntry) return; | |
| 2922 | - const firstValue = firstEntry.value; | |
| 2923 | - if (!_elementor_editor_props.dimensionsPropTypeUtil.isValid(firstValue)) return firstValue; | |
| 2924 | - const firstDims = _elementor_editor_props.dimensionsPropTypeUtil.extract(firstValue); | |
| 2925 | - if (DIMENSION_SIDES.every((side) => firstDims?.[side] !== null && firstDims?.[side] !== void 0)) return firstValue; | |
| 2926 | - const merged = {}; | |
| 2927 | - DIMENSION_SIDES.forEach((side) => { | |
| 2928 | - if (firstDims?.[side] !== null && firstDims?.[side] !== void 0) merged[side] = firstDims[side]; | |
| 2929 | - }); | |
| 2930 | - for (let i = startIndex + 1; i < chain.length; i++) { | |
| 2931 | - const val = chain[i].value; | |
| 2932 | - if (_elementor_editor_props.sizePropTypeUtil.isValid(val)) { | |
| 2933 | - DIMENSION_SIDES.forEach((side) => { | |
| 2934 | - if (merged[side] === null || merged[side] === void 0) merged[side] = val; | |
| 2935 | - }); | |
| 2936 | - break; | |
| 2937 | - } else if (_elementor_editor_props.dimensionsPropTypeUtil.isValid(val)) { | |
| 2938 | - const dims = _elementor_editor_props.dimensionsPropTypeUtil.extract(val); | |
| 2939 | - DIMENSION_SIDES.forEach((side) => { | |
| 2940 | - if ((merged[side] === null || merged[side] === void 0) && dims?.[side] !== null && dims?.[side] !== void 0) merged[side] = dims[side]; | |
| 2941 | - }); | |
| 2942 | - } | |
| 2943 | - if (DIMENSION_SIDES.every((side) => merged[side] !== null && merged[side] !== void 0)) break; | |
| 2944 | - } | |
| 2945 | - return _elementor_editor_props.dimensionsPropTypeUtil.create({ | |
| 2946 | - "block-start": merged["block-start"] ?? null, | |
| 2947 | - "block-end": merged["block-end"] ?? null, | |
| 2948 | - "inline-start": merged["inline-start"] ?? null, | |
| 2949 | - "inline-end": merged["inline-end"] ?? null | |
| 2950 | - }); | |
| 2951 | - } | |
| 2952 | - var StylesField = ({ bind, propDisplayName, children }) => { | |
| 2953 | - const stylesSchema = (0, _elementor_editor_styles.getStylesSchema)(); | |
| 2954 | - const stylesInheritanceChain = useStylesInheritanceChain([bind]); | |
| 2955 | - const { value, canEdit, ...fields } = useStylesField(bind, { history: { propDisplayName } }); | |
| 2956 | - const propType = createTopLevelObjectType({ schema: stylesSchema }); | |
| 2957 | - const placeholderStartIndex = value ? 1 : 0; | |
| 2958 | - const placeholderValues = { [bind]: buildResolvedPlaceholder(stylesInheritanceChain, placeholderStartIndex) }; | |
| 2959 | - const setValue = (newValue) => { | |
| 2960 | - fields.setValue(newValue[bind]); | |
| 2961 | - }; | |
| 2962 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlAdornmentsProvider, { items: getFieldIndicators("styles") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 2963 | - propType, | |
| 2964 | - value: { [bind]: value }, | |
| 2965 | - setValue, | |
| 2966 | - placeholder: placeholderValues, | |
| 2967 | - isDisabled: () => !canEdit | |
| 2968 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(ConditionalField, null, children)))); | |
| 2969 | - }; | |
| 2970 | - | |
| 2971 | -//#endregion | |
| 2972 | -//#region packages/packages/core/editor-editing-panel/src/components/section-content.tsx | |
| 2973 | - var SectionContent = ({ gap = 2, sx, children, "aria-label": ariaLabel, className }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 2974 | - gap, | |
| 2975 | - sx: { ...sx }, | |
| 2976 | - "aria-label": ariaLabel, | |
| 2977 | - className | |
| 2978 | - }, children); | |
| 2979 | - | |
| 2980 | -//#endregion | |
| 2981 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/background-section/background-section.tsx | |
| 2982 | - var BACKGROUND_LABEL = (0, _wordpress_i18n.__)("Background", "elementor"); | |
| 2983 | - var BackgroundSection = () => { | |
| 2984 | - return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 2985 | - bind: "background", | |
| 2986 | - propDisplayName: BACKGROUND_LABEL | |
| 2987 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.BackgroundControl, null))); | |
| 2988 | - }; | |
| 2989 | - | |
| 2990 | -//#endregion | |
| 2991 | -//#region packages/packages/core/editor-editing-panel/src/components/styles-field-layout.tsx | |
| 2992 | - var StylesFieldLayout = react.forwardRef((props, ref) => { | |
| 2993 | - const { direction = "row", children, label, infoTooltip } = props; | |
| 2994 | - const LayoutComponent = direction === "row" ? Row : Column; | |
| 2995 | - return /* @__PURE__ */ react.createElement(LayoutComponent, { | |
| 2996 | - label, | |
| 2997 | - infoTooltip, | |
| 2998 | - ref, | |
| 2999 | - children | |
| 3000 | - }); | |
| 3001 | - }); | |
| 3002 | - var Row = react.forwardRef(({ label, children, infoTooltip }, ref) => { | |
| 3003 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3004 | - container: true, | |
| 3005 | - gap: 2, | |
| 3006 | - alignItems: "center", | |
| 3007 | - flexWrap: "nowrap", | |
| 3008 | - ref, | |
| 3009 | - "aria-label": `${label} control` | |
| 3010 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3011 | - item: true, | |
| 3012 | - xs: 6 | |
| 3013 | - }, /* @__PURE__ */ react.createElement(ControlLabel, { infoTooltip }, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3014 | - item: true, | |
| 3015 | - xs: 6, | |
| 3016 | - sx: (theme) => ({ width: `calc(50% - ${theme.spacing(2)})` }) | |
| 3017 | - }, children)); | |
| 3018 | - }); | |
| 3019 | - var Column = react.forwardRef(({ label, children, infoTooltip }, ref) => { | |
| 3020 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 3021 | - gap: .75, | |
| 3022 | - ref | |
| 3023 | - }, /* @__PURE__ */ react.createElement(ControlLabel, { infoTooltip }, label), children); | |
| 3024 | - }); | |
| 3025 | - | |
| 3026 | -//#endregion | |
| 3027 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-color-field.tsx | |
| 3028 | - var BORDER_COLOR_LABEL = (0, _wordpress_i18n.__)("Border color", "elementor"); | |
| 3029 | - var BorderColorField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 3030 | - bind: "border-color", | |
| 3031 | - propDisplayName: BORDER_COLOR_LABEL | |
| 3032 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BORDER_COLOR_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ColorControl, null))); | |
| 3033 | - | |
| 3034 | -//#endregion | |
| 3035 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts | |
| 3036 | - function useDirection() { | |
| 3037 | - const isUiRtl = "rtl" === (0, _elementor_ui.useTheme)().direction; | |
| 3038 | - return { | |
| 3039 | - isSiteRtl: !!(0, _elementor_editor_v1_adapters.getElementorFrontendConfig)()?.is_rtl, | |
| 3040 | - isUiRtl | |
| 3041 | - }; | |
| 3042 | - } | |
| 3043 | - | |
| 3044 | -//#endregion | |
| 3045 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx | |
| 3046 | - var UiProviders = ({ children }) => { | |
| 3047 | - const { isSiteRtl } = useDirection(); | |
| 3048 | - return /* @__PURE__ */ react.createElement(_elementor_ui.DirectionProvider, { rtl: isSiteRtl }, /* @__PURE__ */ react.createElement(_elementor_ui.ThemeProvider, null, children)); | |
| 3049 | - }; | |
| 3050 | - | |
| 3051 | -//#endregion | |
| 3052 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-radius-field.tsx | |
| 3053 | - var BORDER_RADIUS_LABEL = (0, _wordpress_i18n.__)("Border radius", "elementor"); | |
| 3054 | - var StartStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusTopLeftIcon); | |
| 3055 | - var StartEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusTopRightIcon); | |
| 3056 | - var EndStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusBottomLeftIcon); | |
| 3057 | - var EndEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.RadiusBottomRightIcon); | |
| 3058 | - var getStartStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Top right", "elementor") : (0, _wordpress_i18n.__)("Top left", "elementor"); | |
| 3059 | - var getStartStartAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border top right radius", "elementor") : (0, _wordpress_i18n.__)("Border top left radius", "elementor"); | |
| 3060 | - var getStartEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Top left", "elementor") : (0, _wordpress_i18n.__)("Top right", "elementor"); | |
| 3061 | - var getStartEndAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border top left radius", "elementor") : (0, _wordpress_i18n.__)("Border top right radius", "elementor"); | |
| 3062 | - var getEndStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Bottom right", "elementor") : (0, _wordpress_i18n.__)("Bottom left", "elementor"); | |
| 3063 | - var getEndStartAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border bottom right radius", "elementor") : (0, _wordpress_i18n.__)("Border bottom left radius", "elementor"); | |
| 3064 | - var getEndEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Bottom left", "elementor") : (0, _wordpress_i18n.__)("Bottom right", "elementor"); | |
| 3065 | - var getEndEndAriaLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Border bottom left radius", "elementor") : (0, _wordpress_i18n.__)("Border bottom right radius", "elementor"); | |
| 3066 | - var getCorners = (isSiteRtl) => [ | |
| 3067 | - { | |
| 3068 | - label: getStartStartLabel(isSiteRtl), | |
| 3069 | - ariaLabel: getStartStartAriaLabel(isSiteRtl), | |
| 3070 | - icon: /* @__PURE__ */ react.createElement(StartStartIcon, { fontSize: "tiny" }), | |
| 3071 | - bind: "start-start" | |
| 3072 | - }, | |
| 3073 | - { | |
| 3074 | - label: getStartEndLabel(isSiteRtl), | |
| 3075 | - ariaLabel: getStartEndAriaLabel(isSiteRtl), | |
| 3076 | - icon: /* @__PURE__ */ react.createElement(StartEndIcon, { fontSize: "tiny" }), | |
| 3077 | - bind: "start-end" | |
| 3078 | - }, | |
| 3079 | - { | |
| 3080 | - label: getEndStartLabel(isSiteRtl), | |
| 3081 | - ariaLabel: getEndStartAriaLabel(isSiteRtl), | |
| 3082 | - icon: /* @__PURE__ */ react.createElement(EndStartIcon, { fontSize: "tiny" }), | |
| 3083 | - bind: "end-start" | |
| 3084 | - }, | |
| 3085 | - { | |
| 3086 | - label: getEndEndLabel(isSiteRtl), | |
| 3087 | - ariaLabel: getEndEndAriaLabel(isSiteRtl), | |
| 3088 | - icon: /* @__PURE__ */ react.createElement(EndEndIcon, { fontSize: "tiny" }), | |
| 3089 | - bind: "end-end" | |
| 3090 | - } | |
| 3091 | - ]; | |
| 3092 | - var BorderRadiusField = () => { | |
| 3093 | - const { isSiteRtl } = useDirection(); | |
| 3094 | - return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 3095 | - bind: "border-radius", | |
| 3096 | - propDisplayName: BORDER_RADIUS_LABEL | |
| 3097 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.EqualUnequalSizesControl, { | |
| 3098 | - items: getCorners(isSiteRtl), | |
| 3099 | - label: BORDER_RADIUS_LABEL, | |
| 3100 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.BorderCornersIcon, { fontSize: "tiny" }), | |
| 3101 | - tooltipLabel: (0, _wordpress_i18n.__)("Adjust corners", "elementor"), | |
| 3102 | - multiSizePropTypeUtil: _elementor_editor_props.borderRadiusPropTypeUtil | |
| 3103 | - }))); | |
| 3104 | - }; | |
| 3105 | - | |
| 3106 | -//#endregion | |
| 3107 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-style-field.tsx | |
| 3108 | - var BORDER_TYPE_LABEL = (0, _wordpress_i18n.__)("Border type", "elementor"); | |
| 3109 | - var borderStyles = [ | |
| 3110 | - { | |
| 3111 | - value: "none", | |
| 3112 | - label: (0, _wordpress_i18n.__)("None", "elementor") | |
| 3113 | - }, | |
| 3114 | - { | |
| 3115 | - value: "solid", | |
| 3116 | - label: (0, _wordpress_i18n.__)("Solid", "elementor") | |
| 3117 | - }, | |
| 3118 | - { | |
| 3119 | - value: "dashed", | |
| 3120 | - label: (0, _wordpress_i18n.__)("Dashed", "elementor") | |
| 3121 | - }, | |
| 3122 | - { | |
| 3123 | - value: "dotted", | |
| 3124 | - label: (0, _wordpress_i18n.__)("Dotted", "elementor") | |
| 3125 | - }, | |
| 3126 | - { | |
| 3127 | - value: "double", | |
| 3128 | - label: (0, _wordpress_i18n.__)("Double", "elementor") | |
| 3129 | - }, | |
| 3130 | - { | |
| 3131 | - value: "groove", | |
| 3132 | - label: (0, _wordpress_i18n.__)("Groove", "elementor") | |
| 3133 | - }, | |
| 3134 | - { | |
| 3135 | - value: "ridge", | |
| 3136 | - label: (0, _wordpress_i18n.__)("Ridge", "elementor") | |
| 3137 | - }, | |
| 3138 | - { | |
| 3139 | - value: "inset", | |
| 3140 | - label: (0, _wordpress_i18n.__)("Inset", "elementor") | |
| 3141 | - }, | |
| 3142 | - { | |
| 3143 | - value: "outset", | |
| 3144 | - label: (0, _wordpress_i18n.__)("Outset", "elementor") | |
| 3145 | - } | |
| 3146 | - ]; | |
| 3147 | - var BorderStyleField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 3148 | - bind: "border-style", | |
| 3149 | - propDisplayName: BORDER_TYPE_LABEL | |
| 3150 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BORDER_TYPE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: borderStyles }))); | |
| 3151 | - | |
| 3152 | -//#endregion | |
| 3153 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-width-field.tsx | |
| 3154 | - var BORDER_WIDTH_LABEL = (0, _wordpress_i18n.__)("Border width", "elementor"); | |
| 3155 | - var InlineStartIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.SideRightIcon); | |
| 3156 | - var InlineEndIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.SideLeftIcon); | |
| 3157 | - var getEdges = (isSiteRtl) => [ | |
| 3158 | - { | |
| 3159 | - label: (0, _wordpress_i18n.__)("Top", "elementor"), | |
| 3160 | - ariaLabel: (0, _wordpress_i18n.__)("Border top width", "elementor"), | |
| 3161 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideTopIcon, { fontSize: "tiny" }), | |
| 3162 | - bind: "block-start" | |
| 3163 | - }, | |
| 3164 | - { | |
| 3165 | - label: isSiteRtl ? (0, _wordpress_i18n.__)("Left", "elementor") : (0, _wordpress_i18n.__)("Right", "elementor"), | |
| 3166 | - ariaLabel: isSiteRtl ? (0, _wordpress_i18n.__)("Border left width", "elementor") : (0, _wordpress_i18n.__)("Border right width", "elementor"), | |
| 3167 | - icon: /* @__PURE__ */ react.createElement(InlineStartIcon$1, { fontSize: "tiny" }), | |
| 3168 | - bind: "inline-end" | |
| 3169 | - }, | |
| 3170 | - { | |
| 3171 | - label: (0, _wordpress_i18n.__)("Bottom", "elementor"), | |
| 3172 | - ariaLabel: (0, _wordpress_i18n.__)("Border bottom width", "elementor"), | |
| 3173 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideBottomIcon, { fontSize: "tiny" }), | |
| 3174 | - bind: "block-end" | |
| 3175 | - }, | |
| 3176 | - { | |
| 3177 | - label: isSiteRtl ? (0, _wordpress_i18n.__)("Right", "elementor") : (0, _wordpress_i18n.__)("Left", "elementor"), | |
| 3178 | - ariaLabel: isSiteRtl ? (0, _wordpress_i18n.__)("Border right width", "elementor") : (0, _wordpress_i18n.__)("Border left width", "elementor"), | |
| 3179 | - icon: /* @__PURE__ */ react.createElement(InlineEndIcon$1, { fontSize: "tiny" }), | |
| 3180 | - bind: "inline-start" | |
| 3181 | - } | |
| 3182 | - ]; | |
| 3183 | - var BorderWidthField = () => { | |
| 3184 | - const { isSiteRtl } = useDirection(); | |
| 3185 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3186 | - bind: "border-width", | |
| 3187 | - propDisplayName: BORDER_WIDTH_LABEL | |
| 3188 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.EqualUnequalSizesControl, { | |
| 3189 | - items: getEdges(isSiteRtl), | |
| 3190 | - label: BORDER_WIDTH_LABEL, | |
| 3191 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.SideAllIcon, { fontSize: "tiny" }), | |
| 3192 | - tooltipLabel: (0, _wordpress_i18n.__)("Adjust borders", "elementor"), | |
| 3193 | - multiSizePropTypeUtil: _elementor_editor_props.borderWidthPropTypeUtil | |
| 3194 | - })); | |
| 3195 | - }; | |
| 3196 | - | |
| 3197 | -//#endregion | |
| 3198 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/border-section/border-section.tsx | |
| 3199 | - var BorderSection = () => /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(BorderWidthField, null), /* @__PURE__ */ react.createElement(BorderColorField, null), /* @__PURE__ */ react.createElement(BorderStyleField, null), /* @__PURE__ */ react.createElement(BorderRadiusField, null)); | |
| 3200 | - | |
| 3201 | -//#endregion | |
| 3202 | -//#region packages/packages/core/editor-editing-panel/src/utils/can-element-have-children.ts | |
| 3203 | - var canElementHaveChildren = (elementId) => { | |
| 3204 | - const container = (0, _elementor_editor_elements.getContainer)(elementId); | |
| 3205 | - if (!container) return false; | |
| 3206 | - return container.model.get("elType") !== "widget"; | |
| 3207 | - }; | |
| 3208 | - | |
| 3209 | -//#endregion | |
| 3210 | -//#region packages/packages/core/editor-editing-panel/src/utils/get-recently-used-styles.ts | |
| 3211 | - var getRecentlyUsedList = async (elementId) => { | |
| 3212 | - if (!elementId) return []; | |
| 3213 | - const resolver = (0, _elementor_editor_canvas.createPropsResolver)({ | |
| 3214 | - transformers: _elementor_editor_canvas.styleTransformersRegistry, | |
| 3215 | - schema: (0, _elementor_editor_styles.getStylesSchema)() | |
| 3216 | - }); | |
| 3217 | - const styles = (0, _elementor_editor_elements.getElementStyles)(elementId) ?? {}; | |
| 3218 | - const variants = Object.keys(styles ?? {}).map((key) => styles?.[key]?.variants ?? []); | |
| 3219 | - const resolved = await Promise.all(variants.flat().map(async (variant) => { | |
| 3220 | - const result = await resolver({ | |
| 3221 | - props: variant.props ?? {}, | |
| 3222 | - schema: (0, _elementor_editor_styles.getStylesSchema)() | |
| 3223 | - }); | |
| 3224 | - return Object.entries(result).filter(([, value]) => value !== null).map(([key]) => key); | |
| 3225 | - })); | |
| 3226 | - const propSet = new Set(resolved.flat()); | |
| 3227 | - return Array.from(propSet); | |
| 3228 | - }; | |
| 3229 | - | |
| 3230 | -//#endregion | |
| 3231 | -//#region packages/packages/core/editor-editing-panel/src/components/panel-divider.tsx | |
| 3232 | - var PanelDivider = () => /* @__PURE__ */ react.createElement(_elementor_ui.Divider, { sx: { my: .5 } }); | |
| 3233 | - | |
| 3234 | -//#endregion | |
| 3235 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/blend-mode-field.tsx | |
| 3236 | - var BLEND_MODE_LABEL = (0, _wordpress_i18n.__)("Blend mode", "elementor"); | |
| 3237 | - var blendModeOptions = [ | |
| 3238 | - { | |
| 3239 | - label: (0, _wordpress_i18n.__)("Normal", "elementor"), | |
| 3240 | - value: "normal" | |
| 3241 | - }, | |
| 3242 | - { | |
| 3243 | - label: (0, _wordpress_i18n.__)("Multiply", "elementor"), | |
| 3244 | - value: "multiply" | |
| 3245 | - }, | |
| 3246 | - { | |
| 3247 | - label: (0, _wordpress_i18n.__)("Screen", "elementor"), | |
| 3248 | - value: "screen" | |
| 3249 | - }, | |
| 3250 | - { | |
| 3251 | - label: (0, _wordpress_i18n.__)("Overlay", "elementor"), | |
| 3252 | - value: "overlay" | |
| 3253 | - }, | |
| 3254 | - { | |
| 3255 | - label: (0, _wordpress_i18n.__)("Darken", "elementor"), | |
| 3256 | - value: "darken" | |
| 3257 | - }, | |
| 3258 | - { | |
| 3259 | - label: (0, _wordpress_i18n.__)("Lighten", "elementor"), | |
| 3260 | - value: "lighten" | |
| 3261 | - }, | |
| 3262 | - { | |
| 3263 | - label: (0, _wordpress_i18n.__)("Color dodge", "elementor"), | |
| 3264 | - value: "color-dodge" | |
| 3265 | - }, | |
| 3266 | - { | |
| 3267 | - label: (0, _wordpress_i18n.__)("Color burn", "elementor"), | |
| 3268 | - value: "color-burn" | |
| 3269 | - }, | |
| 3270 | - { | |
| 3271 | - label: (0, _wordpress_i18n.__)("Saturation", "elementor"), | |
| 3272 | - value: "saturation" | |
| 3273 | - }, | |
| 3274 | - { | |
| 3275 | - label: (0, _wordpress_i18n.__)("Color", "elementor"), | |
| 3276 | - value: "color" | |
| 3277 | - }, | |
| 3278 | - { | |
| 3279 | - label: (0, _wordpress_i18n.__)("Difference", "elementor"), | |
| 3280 | - value: "difference" | |
| 3281 | - }, | |
| 3282 | - { | |
| 3283 | - label: (0, _wordpress_i18n.__)("Exclusion", "elementor"), | |
| 3284 | - value: "exclusion" | |
| 3285 | - }, | |
| 3286 | - { | |
| 3287 | - label: (0, _wordpress_i18n.__)("Hue", "elementor"), | |
| 3288 | - value: "hue" | |
| 3289 | - }, | |
| 3290 | - { | |
| 3291 | - label: (0, _wordpress_i18n.__)("Luminosity", "elementor"), | |
| 3292 | - value: "luminosity" | |
| 3293 | - }, | |
| 3294 | - { | |
| 3295 | - label: (0, _wordpress_i18n.__)("Soft light", "elementor"), | |
| 3296 | - value: "soft-light" | |
| 3297 | - }, | |
| 3298 | - { | |
| 3299 | - label: (0, _wordpress_i18n.__)("Hard light", "elementor"), | |
| 3300 | - value: "hard-light" | |
| 3301 | - } | |
| 3302 | - ]; | |
| 3303 | - var BlendModeField = () => { | |
| 3304 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3305 | - bind: "mix-blend-mode", | |
| 3306 | - propDisplayName: BLEND_MODE_LABEL | |
| 3307 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: BLEND_MODE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: blendModeOptions }))); | |
| 3308 | - }; | |
| 3309 | - | |
| 3310 | -//#endregion | |
| 3311 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/opacity-control-field.tsx | |
| 3312 | - var OPACITY_LABEL = (0, _wordpress_i18n.__)("Opacity", "elementor"); | |
| 3313 | - var OpacityControlField = () => { | |
| 3314 | - const rowRef = (0, react.useRef)(null); | |
| 3315 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3316 | - bind: "opacity", | |
| 3317 | - propDisplayName: OPACITY_LABEL | |
| 3318 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 3319 | - ref: rowRef, | |
| 3320 | - label: OPACITY_LABEL | |
| 3321 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 3322 | - units: ["%"], | |
| 3323 | - anchorRef: rowRef, | |
| 3324 | - defaultUnit: "%" | |
| 3325 | - }))); | |
| 3326 | - }; | |
| 3327 | - | |
| 3328 | -//#endregion | |
| 3329 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/effects-section/effects-section.tsx | |
| 3330 | - var BOX_SHADOW_LABEL = (0, _wordpress_i18n.__)("Box shadow", "elementor"); | |
| 3331 | - var FILTER_LABEL = (0, _wordpress_i18n.__)("Filters", "elementor"); | |
| 3332 | - var TRANSFORM_LABEL = (0, _wordpress_i18n.__)("Transform", "elementor"); | |
| 3333 | - var BACKDROP_FILTER_LABEL = (0, _wordpress_i18n.__)("Backdrop filters", "elementor"); | |
| 3334 | - var TRANSITIONS_LABEL = (0, _wordpress_i18n.__)("Transitions", "elementor"); | |
| 3335 | - var EffectsSection = () => { | |
| 3336 | - const { element } = useElement(); | |
| 3337 | - const { meta } = useStyle(); | |
| 3338 | - const canHaveChildren = canElementHaveChildren(element?.id ?? ""); | |
| 3339 | - return /* @__PURE__ */ react.createElement(SectionContent, { gap: 1 }, /* @__PURE__ */ react.createElement(BlendModeField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(OpacityControlField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 3340 | - bind: "box-shadow", | |
| 3341 | - propDisplayName: BOX_SHADOW_LABEL | |
| 3342 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.BoxShadowRepeaterControl, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 3343 | - bind: "transform", | |
| 3344 | - propDisplayName: TRANSFORM_LABEL | |
| 3345 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.TransformRepeaterControl, { showChildrenPerspective: canHaveChildren })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 3346 | - bind: "transition", | |
| 3347 | - propDisplayName: TRANSITIONS_LABEL | |
| 3348 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.TransitionRepeaterControl, { | |
| 3349 | - currentStyleState: meta.state, | |
| 3350 | - recentlyUsedListGetter: () => getRecentlyUsedList(element?.id ?? "") | |
| 3351 | - })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 3352 | - bind: "filter", | |
| 3353 | - propDisplayName: FILTER_LABEL | |
| 3354 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FilterRepeaterControl, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 3355 | - bind: "backdrop-filter", | |
| 3356 | - propDisplayName: BACKDROP_FILTER_LABEL | |
| 3357 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FilterRepeaterControl, { filterPropName: "backdrop-filter" }))); | |
| 3358 | - }; | |
| 3359 | - | |
| 3360 | -//#endregion | |
| 3361 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-computed-style.ts | |
| 3362 | - function useComputedStyle(elementId) { | |
| 3363 | - return (0, _elementor_editor_v1_adapters.__privateUseListenTo)([ | |
| 3364 | - (0, _elementor_editor_v1_adapters.windowEvent)("elementor/device-mode/change"), | |
| 3365 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/reset-style"), | |
| 3366 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/settings"), | |
| 3367 | - (0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/paste-style") | |
| 3368 | - ], () => { | |
| 3369 | - if (!elementId) return null; | |
| 3370 | - const element = window.elementor?.getContainer?.(elementId); | |
| 3371 | - if (!element?.view?.el) return null; | |
| 3372 | - return window.getComputedStyle(element.view.el); | |
| 3373 | - }); | |
| 3374 | - } | |
| 3375 | - | |
| 3376 | -//#endregion | |
| 3377 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx | |
| 3378 | - var StylesInheritanceSectionIndicators = ({ fields }) => { | |
| 3379 | - const { id, meta, provider } = useStyle(); | |
| 3380 | - const snapshot = useStylesInheritanceSnapshot(); | |
| 3381 | - if (fields.includes("custom_css")) return /* @__PURE__ */ react.createElement(CustomCssIndicator, null); | |
| 3382 | - const { hasValues, hasOverrides } = getIndicators(Object.fromEntries(Object.entries(snapshot ?? {}).filter(([key]) => fields.includes(key))), id ?? "", meta); | |
| 3383 | - if (!hasValues && !hasOverrides) return null; | |
| 3384 | - const hasValueLabel = (0, _wordpress_i18n.__)("Has effective styles", "elementor"); | |
| 3385 | - const hasOverridesLabel = (0, _wordpress_i18n.__)("Has overridden styles", "elementor"); | |
| 3386 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 3387 | - title: (0, _wordpress_i18n.__)("Has styles", "elementor"), | |
| 3388 | - placement: "top" | |
| 3389 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 3390 | - direction: "row", | |
| 3391 | - sx: { "& > *": { marginInlineStart: -.25 } }, | |
| 3392 | - role: "list" | |
| 3393 | - }, hasValues && provider && /* @__PURE__ */ react.createElement(StyleIndicator, { | |
| 3394 | - getColor: getStylesProviderThemeColor(provider.getKey()), | |
| 3395 | - "data-variant": (0, _elementor_editor_styles_repository.isElementsStylesProvider)(provider.getKey()) ? "local" : "global", | |
| 3396 | - role: "listitem", | |
| 3397 | - "aria-label": hasValueLabel | |
| 3398 | - }), hasOverrides && /* @__PURE__ */ react.createElement(StyleIndicator, { | |
| 3399 | - isOverridden: true, | |
| 3400 | - "data-variant": "overridden", | |
| 3401 | - role: "listitem", | |
| 3402 | - "aria-label": hasOverridesLabel | |
| 3403 | - }))); | |
| 3404 | - }; | |
| 3405 | - function getIndicators(snapshotFields, styleId, meta) { | |
| 3406 | - let hasValues = false; | |
| 3407 | - let hasOverrides = false; | |
| 3408 | - Object.values(snapshotFields).forEach((inheritanceChain) => { | |
| 3409 | - const currentStyle = getCurrentStyleFromChain(inheritanceChain, styleId, meta); | |
| 3410 | - if (!currentStyle) return; | |
| 3411 | - const [actualStyle] = inheritanceChain; | |
| 3412 | - if (currentStyle === actualStyle) hasValues = true; | |
| 3413 | - else hasOverrides = true; | |
| 3414 | - }); | |
| 3415 | - return { | |
| 3416 | - hasValues, | |
| 3417 | - hasOverrides | |
| 3418 | - }; | |
| 3419 | - } | |
| 3420 | - function getCurrentStyleFromChain(chain, styleId, meta) { | |
| 3421 | - return chain.find(({ style: { id }, variant: { meta: { breakpoint, state } } }) => id === styleId && breakpoint === meta.breakpoint && state === meta.state); | |
| 3422 | - } | |
| 3423 | - | |
| 3424 | -//#endregion | |
| 3425 | -//#region packages/packages/core/editor-editing-panel/src/components/style-tab-collapsible-content.tsx | |
| 3426 | - var StyleTabCollapsibleContent = ({ fields = [], children }) => { | |
| 3427 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.CollapsibleContent, { titleEnd: getStylesInheritanceIndicators(fields) }, children); | |
| 3428 | - }; | |
| 3429 | - function getStylesInheritanceIndicators(fields) { | |
| 3430 | - if (fields.length === 0) return null; | |
| 3431 | - return (isOpen) => !isOpen ? /* @__PURE__ */ react.createElement(StylesInheritanceSectionIndicators, { fields }) : null; | |
| 3432 | - } | |
| 3433 | - | |
| 3434 | -//#endregion | |
| 3435 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/rotated-icon.tsx | |
| 3436 | - var FLEX_DIRECTION_LABEL$1 = (0, _wordpress_i18n.__)("Flex direction", "elementor"); | |
| 3437 | - var CLOCKWISE_ANGLES = { | |
| 3438 | - row: 0, | |
| 3439 | - column: 90, | |
| 3440 | - "row-reverse": 180, | |
| 3441 | - "column-reverse": 270 | |
| 3442 | - }; | |
| 3443 | - var COUNTER_CLOCKWISE_ANGLES = { | |
| 3444 | - row: 0, | |
| 3445 | - column: -90, | |
| 3446 | - "row-reverse": -180, | |
| 3447 | - "column-reverse": -270 | |
| 3448 | - }; | |
| 3449 | - var RotatedIcon$1 = /* @__PURE__ */ __name(({ icon: Icon, size, isClockwise = true, offset = 0, disableRotationForReversed = false }) => { | |
| 3450 | - const rotate = (0, react.useRef)(useGetTargetAngle(isClockwise, offset, disableRotationForReversed)); | |
| 3451 | - rotate.current = useGetTargetAngle(isClockwise, offset, disableRotationForReversed, rotate); | |
| 3452 | - return /* @__PURE__ */ react.createElement(Icon, { | |
| 3453 | - fontSize: size, | |
| 3454 | - sx: { | |
| 3455 | - transition: ".3s", | |
| 3456 | - rotate: `${rotate.current}deg` | |
| 3457 | - } | |
| 3458 | - }); | |
| 3459 | - }, "RotatedIcon"); | |
| 3460 | - var useGetTargetAngle = (isClockwise, offset, disableRotationForReversed, existingRef) => { | |
| 3461 | - const { value: direction } = useStylesField("flex-direction", { history: { propDisplayName: FLEX_DIRECTION_LABEL$1 } }); | |
| 3462 | - const rotationMultiplier = "rtl" === (0, _elementor_ui.useTheme)().direction ? -1 : 1; | |
| 3463 | - const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES; | |
| 3464 | - const currentDirection = direction?.value || "row"; | |
| 3465 | - const currentAngle = existingRef ? existingRef.current * rotationMultiplier : angleMap[currentDirection] + offset; | |
| 3466 | - const formattedDiff = ((angleMap[currentDirection] + offset - currentAngle + 360) % 360 + 180) % 360 - 180; | |
| 3467 | - if (disableRotationForReversed && ["row-reverse", "column-reverse"].includes(currentDirection)) return 0; | |
| 3468 | - return (currentAngle + formattedDiff) * rotationMultiplier; | |
| 3469 | - }; | |
| 3470 | - | |
| 3471 | -//#endregion | |
| 3472 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-content-field.tsx | |
| 3473 | - var ALIGN_CONTENT_LABEL = (0, _wordpress_i18n.__)("Align content", "elementor"); | |
| 3474 | - var StartIcon$5 = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyTopIcon); | |
| 3475 | - var EndIcon$4 = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyBottomIcon); | |
| 3476 | - var iconProps$3 = { | |
| 3477 | - isClockwise: false, | |
| 3478 | - offset: 0, | |
| 3479 | - disableRotationForReversed: true | |
| 3480 | - }; | |
| 3481 | - var options$11 = [ | |
| 3482 | - { | |
| 3483 | - value: "start", | |
| 3484 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 3485 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3486 | - icon: StartIcon$5, | |
| 3487 | - size, | |
| 3488 | - ...iconProps$3 | |
| 3489 | - }), | |
| 3490 | - showTooltip: true | |
| 3491 | - }, | |
| 3492 | - { | |
| 3493 | - value: "center", | |
| 3494 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 3495 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3496 | - icon: _elementor_icons.JustifyCenterIcon, | |
| 3497 | - size, | |
| 3498 | - ...iconProps$3 | |
| 3499 | - }), | |
| 3500 | - showTooltip: true | |
| 3501 | - }, | |
| 3502 | - { | |
| 3503 | - value: "end", | |
| 3504 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 3505 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3506 | - icon: EndIcon$4, | |
| 3507 | - size, | |
| 3508 | - ...iconProps$3 | |
| 3509 | - }), | |
| 3510 | - showTooltip: true | |
| 3511 | - }, | |
| 3512 | - { | |
| 3513 | - value: "space-between", | |
| 3514 | - label: (0, _wordpress_i18n.__)("Space between", "elementor"), | |
| 3515 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3516 | - icon: _elementor_icons.JustifySpaceBetweenVerticalIcon, | |
| 3517 | - size, | |
| 3518 | - ...iconProps$3 | |
| 3519 | - }), | |
| 3520 | - showTooltip: true | |
| 3521 | - }, | |
| 3522 | - { | |
| 3523 | - value: "space-around", | |
| 3524 | - label: (0, _wordpress_i18n.__)("Space around", "elementor"), | |
| 3525 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3526 | - icon: _elementor_icons.JustifySpaceAroundVerticalIcon, | |
| 3527 | - size, | |
| 3528 | - ...iconProps$3 | |
| 3529 | - }), | |
| 3530 | - showTooltip: true | |
| 3531 | - }, | |
| 3532 | - { | |
| 3533 | - value: "space-evenly", | |
| 3534 | - label: (0, _wordpress_i18n.__)("Space evenly", "elementor"), | |
| 3535 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3536 | - icon: _elementor_icons.JustifyDistributeVerticalIcon, | |
| 3537 | - size, | |
| 3538 | - ...iconProps$3 | |
| 3539 | - }), | |
| 3540 | - showTooltip: true | |
| 3541 | - } | |
| 3542 | - ]; | |
| 3543 | - var AlignContentField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 3544 | - bind: "align-content", | |
| 3545 | - propDisplayName: ALIGN_CONTENT_LABEL | |
| 3546 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 3547 | - label: ALIGN_CONTENT_LABEL, | |
| 3548 | - direction: "column" | |
| 3549 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { | |
| 3550 | - options: options$11, | |
| 3551 | - fullWidth: true | |
| 3552 | - })))); | |
| 3553 | - | |
| 3554 | -//#endregion | |
| 3555 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-items-field.tsx | |
| 3556 | - var ALIGN_ITEMS_LABEL = (0, _wordpress_i18n.__)("Align items", "elementor"); | |
| 3557 | - var StartIcon$4 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon); | |
| 3558 | - var EndIcon$3 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon); | |
| 3559 | - var iconProps$2 = { | |
| 3560 | - isClockwise: false, | |
| 3561 | - offset: 90 | |
| 3562 | - }; | |
| 3563 | - var options$10 = [ | |
| 3564 | - { | |
| 3565 | - value: "start", | |
| 3566 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 3567 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3568 | - icon: StartIcon$4, | |
| 3569 | - size, | |
| 3570 | - ...iconProps$2 | |
| 3571 | - }), | |
| 3572 | - showTooltip: true | |
| 3573 | - }, | |
| 3574 | - { | |
| 3575 | - value: "center", | |
| 3576 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 3577 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3578 | - icon: _elementor_icons.LayoutAlignCenterIcon, | |
| 3579 | - size, | |
| 3580 | - ...iconProps$2 | |
| 3581 | - }), | |
| 3582 | - showTooltip: true | |
| 3583 | - }, | |
| 3584 | - { | |
| 3585 | - value: "end", | |
| 3586 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 3587 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3588 | - icon: EndIcon$3, | |
| 3589 | - size, | |
| 3590 | - ...iconProps$2 | |
| 3591 | - }), | |
| 3592 | - showTooltip: true | |
| 3593 | - }, | |
| 3594 | - { | |
| 3595 | - value: "stretch", | |
| 3596 | - label: (0, _wordpress_i18n.__)("Stretch", "elementor"), | |
| 3597 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3598 | - icon: _elementor_icons.LayoutDistributeVerticalIcon, | |
| 3599 | - size, | |
| 3600 | - ...iconProps$2 | |
| 3601 | - }), | |
| 3602 | - showTooltip: true | |
| 3603 | - } | |
| 3604 | - ]; | |
| 3605 | - var AlignItemsField = () => { | |
| 3606 | - return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 3607 | - bind: "align-items", | |
| 3608 | - propDisplayName: ALIGN_ITEMS_LABEL | |
| 3609 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_ITEMS_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$10 })))); | |
| 3610 | - }; | |
| 3611 | - | |
| 3612 | -//#endregion | |
| 3613 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-child-field.tsx | |
| 3614 | - var ALIGN_SELF_LABEL$1 = (0, _wordpress_i18n.__)("Align self", "elementor"); | |
| 3615 | - var ALIGN_SELF_CHILD_OFFSET_MAP$1 = { | |
| 3616 | - row: 90, | |
| 3617 | - "row-reverse": 90, | |
| 3618 | - column: 0, | |
| 3619 | - "column-reverse": 0 | |
| 3620 | - }; | |
| 3621 | - var StartIcon$3 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon); | |
| 3622 | - var EndIcon$2 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon); | |
| 3623 | - var iconProps$1 = { isClockwise: false }; | |
| 3624 | - var getOptions$1 = /* @__PURE__ */ __name((parentStyleDirection) => [ | |
| 3625 | - { | |
| 3626 | - value: "start", | |
| 3627 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 3628 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3629 | - icon: StartIcon$3, | |
| 3630 | - size, | |
| 3631 | - offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection], | |
| 3632 | - ...iconProps$1 | |
| 3633 | - }), | |
| 3634 | - showTooltip: true | |
| 3635 | - }, | |
| 3636 | - { | |
| 3637 | - value: "center", | |
| 3638 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 3639 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3640 | - icon: _elementor_icons.LayoutAlignCenterIcon, | |
| 3641 | - size, | |
| 3642 | - offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection], | |
| 3643 | - ...iconProps$1 | |
| 3644 | - }), | |
| 3645 | - showTooltip: true | |
| 3646 | - }, | |
| 3647 | - { | |
| 3648 | - value: "end", | |
| 3649 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 3650 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3651 | - icon: EndIcon$2, | |
| 3652 | - size, | |
| 3653 | - offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection], | |
| 3654 | - ...iconProps$1 | |
| 3655 | - }), | |
| 3656 | - showTooltip: true | |
| 3657 | - }, | |
| 3658 | - { | |
| 3659 | - value: "stretch", | |
| 3660 | - label: (0, _wordpress_i18n.__)("Stretch", "elementor"), | |
| 3661 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 3662 | - icon: _elementor_icons.LayoutDistributeVerticalIcon, | |
| 3663 | - size, | |
| 3664 | - offset: ALIGN_SELF_CHILD_OFFSET_MAP$1[parentStyleDirection], | |
| 3665 | - ...iconProps$1 | |
| 3666 | - }), | |
| 3667 | - showTooltip: true | |
| 3668 | - } | |
| 3669 | - ], "getOptions"); | |
| 3670 | - var AlignSelfChild = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(StylesField, { | |
| 3671 | - bind: "align-self", | |
| 3672 | - propDisplayName: ALIGN_SELF_LABEL$1 | |
| 3673 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: getOptions$1(parentStyleDirection) })))); | |
| 3674 | - | |
| 3675 | -//#endregion | |
| 3676 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/align-self-grid-child-field.tsx | |
| 3677 | - var ALIGN_SELF_LABEL = (0, _wordpress_i18n.__)("Align self", "elementor"); | |
| 3678 | - var ALIGN_SELF_CHILD_OFFSET_MAP = { | |
| 3679 | - row: 0, | |
| 3680 | - column: -90 | |
| 3681 | - }; | |
| 3682 | - var AlignSelfGridChild = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(StylesField, { | |
| 3683 | - bind: "align-self", | |
| 3684 | - propDisplayName: ALIGN_SELF_LABEL | |
| 3685 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ALIGN_SELF_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: getOptions(parentStyleDirection ?? "row") })))); | |
| 3686 | - var RotatedIcon = ({ icon: Icon, size, offset }) => /* @__PURE__ */ react.createElement(Icon, { | |
| 3687 | - fontSize: size, | |
| 3688 | - sx: { rotate: `${offset}deg` } | |
| 3689 | - }); | |
| 3690 | - var getOptions = (parentStyleDirection) => { | |
| 3691 | - const offset = ALIGN_SELF_CHILD_OFFSET_MAP[parentStyleDirection.replace("dense", "").trim()]; | |
| 3692 | - return [ | |
| 3693 | - { | |
| 3694 | - value: "start", | |
| 3695 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 3696 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, { | |
| 3697 | - icon: _elementor_icons.JustifyTopIcon, | |
| 3698 | - size, | |
| 3699 | - offset | |
| 3700 | - }), | |
| 3701 | - showTooltip: true | |
| 3702 | - }, | |
| 3703 | - { | |
| 3704 | - value: "center", | |
| 3705 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 3706 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, { | |
| 3707 | - icon: _elementor_icons.JustifyCenterIcon, | |
| 3708 | - size, | |
| 3709 | - offset | |
| 3710 | - }), | |
| 3711 | - showTooltip: true | |
| 3712 | - }, | |
| 3713 | - { | |
| 3714 | - value: "end", | |
| 3715 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 3716 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, { | |
| 3717 | - icon: _elementor_icons.JustifyBottomIcon, | |
| 3718 | - size, | |
| 3719 | - offset | |
| 3720 | - }), | |
| 3721 | - showTooltip: true | |
| 3722 | - }, | |
| 3723 | - { | |
| 3724 | - value: "stretch", | |
| 3725 | - label: (0, _wordpress_i18n.__)("Stretch", "elementor"), | |
| 3726 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon, { | |
| 3727 | - icon: _elementor_icons.LayoutDistributeVerticalIcon, | |
| 3728 | - size, | |
| 3729 | - offset | |
| 3730 | - }), | |
| 3731 | - showTooltip: true | |
| 3732 | - } | |
| 3733 | - ]; | |
| 3734 | - }; | |
| 3735 | - | |
| 3736 | -//#endregion | |
| 3737 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/display-field.tsx | |
| 3738 | - var DISPLAY_LABEL$1 = (0, _wordpress_i18n.__)("Display", "elementor"); | |
| 3739 | - var displayFieldItems = [ | |
| 3740 | - { | |
| 3741 | - value: "block", | |
| 3742 | - renderContent: () => (0, _wordpress_i18n.__)("Block", "elementor"), | |
| 3743 | - label: (0, _wordpress_i18n.__)("Block", "elementor"), | |
| 3744 | - showTooltip: true | |
| 3745 | - }, | |
| 3746 | - { | |
| 3747 | - value: "flex", | |
| 3748 | - renderContent: () => (0, _wordpress_i18n.__)("Flex", "elementor"), | |
| 3749 | - label: (0, _wordpress_i18n.__)("Flex", "elementor"), | |
| 3750 | - showTooltip: true | |
| 3751 | - }, | |
| 3752 | - { | |
| 3753 | - value: "grid", | |
| 3754 | - renderContent: () => (0, _wordpress_i18n.__)("Grid", "elementor"), | |
| 3755 | - label: (0, _wordpress_i18n.__)("Grid", "elementor"), | |
| 3756 | - showTooltip: true | |
| 3757 | - }, | |
| 3758 | - { | |
| 3759 | - value: "none", | |
| 3760 | - renderContent: () => (0, _wordpress_i18n.__)("None", "elementor"), | |
| 3761 | - label: (0, _wordpress_i18n.__)("None", "elementor"), | |
| 3762 | - showTooltip: true | |
| 3763 | - }, | |
| 3764 | - { | |
| 3765 | - value: "inline-block", | |
| 3766 | - renderContent: () => (0, _wordpress_i18n.__)("In-blk", "elementor"), | |
| 3767 | - label: (0, _wordpress_i18n.__)("Inline-block", "elementor"), | |
| 3768 | - showTooltip: true | |
| 3769 | - }, | |
| 3770 | - { | |
| 3771 | - value: "inline-flex", | |
| 3772 | - renderContent: () => (0, _wordpress_i18n.__)("In-flx", "elementor"), | |
| 3773 | - label: (0, _wordpress_i18n.__)("Inline-flex", "elementor"), | |
| 3774 | - showTooltip: true | |
| 3775 | - } | |
| 3776 | - ]; | |
| 3777 | - var DisplayField = () => { | |
| 3778 | - const placeholder = useDisplayPlaceholderValue(); | |
| 3779 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3780 | - bind: "display", | |
| 3781 | - propDisplayName: DISPLAY_LABEL$1, | |
| 3782 | - placeholder | |
| 3783 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 3784 | - label: DISPLAY_LABEL$1, | |
| 3785 | - direction: "column" | |
| 3786 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { | |
| 3787 | - options: displayFieldItems, | |
| 3788 | - maxItems: 4, | |
| 3789 | - fullWidth: true | |
| 3790 | - }))); | |
| 3791 | - }; | |
| 3792 | - var useDisplayPlaceholderValue = () => useStylesInheritanceChain(["display"])[0]?.value ?? void 0; | |
| 3793 | - | |
| 3794 | -//#endregion | |
| 3795 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-direction-field.tsx | |
| 3796 | - var FLEX_DIRECTION_LABEL = (0, _wordpress_i18n.__)("Direction", "elementor"); | |
| 3797 | - var options$9 = [ | |
| 3798 | - { | |
| 3799 | - value: "row", | |
| 3800 | - label: (0, _wordpress_i18n.__)("Row", "elementor"), | |
| 3801 | - renderContent: ({ size }) => { | |
| 3802 | - const StartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowRightIcon); | |
| 3803 | - return /* @__PURE__ */ react.createElement(StartIcon, { fontSize: size }); | |
| 3804 | - }, | |
| 3805 | - showTooltip: true | |
| 3806 | - }, | |
| 3807 | - { | |
| 3808 | - value: "column", | |
| 3809 | - label: (0, _wordpress_i18n.__)("Column", "elementor"), | |
| 3810 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }), | |
| 3811 | - showTooltip: true | |
| 3812 | - }, | |
| 3813 | - { | |
| 3814 | - value: "row-reverse", | |
| 3815 | - label: (0, _wordpress_i18n.__)("Reversed row", "elementor"), | |
| 3816 | - renderContent: ({ size }) => { | |
| 3817 | - const EndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowLeftIcon); | |
| 3818 | - return /* @__PURE__ */ react.createElement(EndIcon, { fontSize: size }); | |
| 3819 | - }, | |
| 3820 | - showTooltip: true | |
| 3821 | - }, | |
| 3822 | - { | |
| 3823 | - value: "column-reverse", | |
| 3824 | - label: (0, _wordpress_i18n.__)("Reversed column", "elementor"), | |
| 3825 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowUpSmallIcon, { fontSize: size }), | |
| 3826 | - showTooltip: true | |
| 3827 | - } | |
| 3828 | - ]; | |
| 3829 | - var FlexDirectionField = () => { | |
| 3830 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3831 | - bind: "flex-direction", | |
| 3832 | - propDisplayName: FLEX_DIRECTION_LABEL | |
| 3833 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_DIRECTION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$9 })))); | |
| 3834 | - }; | |
| 3835 | - | |
| 3836 | -//#endregion | |
| 3837 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-order-field.tsx | |
| 3838 | - var ORDER_LABEL = (0, _wordpress_i18n.__)("Order", "elementor"); | |
| 3839 | - var FIRST_DEFAULT_VALUE = -99999; | |
| 3840 | - var LAST_DEFAULT_VALUE = 99999; | |
| 3841 | - var FIRST = "first"; | |
| 3842 | - var LAST = "last"; | |
| 3843 | - var CUSTOM$1 = "custom"; | |
| 3844 | - var orderValueMap = { | |
| 3845 | - [FIRST]: FIRST_DEFAULT_VALUE, | |
| 3846 | - [LAST]: LAST_DEFAULT_VALUE | |
| 3847 | - }; | |
| 3848 | - var items$1 = [ | |
| 3849 | - { | |
| 3850 | - value: FIRST, | |
| 3851 | - label: (0, _wordpress_i18n.__)("First", "elementor"), | |
| 3852 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowUpSmallIcon, { fontSize: size }), | |
| 3853 | - showTooltip: true | |
| 3854 | - }, | |
| 3855 | - { | |
| 3856 | - value: LAST, | |
| 3857 | - label: (0, _wordpress_i18n.__)("Last", "elementor"), | |
| 3858 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }), | |
| 3859 | - showTooltip: true | |
| 3860 | - }, | |
| 3861 | - { | |
| 3862 | - value: CUSTOM$1, | |
| 3863 | - label: (0, _wordpress_i18n.__)("Custom", "elementor"), | |
| 3864 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.PencilIcon, { fontSize: size }), | |
| 3865 | - showTooltip: true | |
| 3866 | - } | |
| 3867 | - ]; | |
| 3868 | - var FlexOrderField = () => { | |
| 3869 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 3870 | - bind: "order", | |
| 3871 | - propDisplayName: ORDER_LABEL | |
| 3872 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(FlexOrderFieldContent, null)))); | |
| 3873 | - }; | |
| 3874 | - function FlexOrderFieldContent() { | |
| 3875 | - const { value: order, setValue: setOrder, canEdit } = useStylesField("order", { history: { propDisplayName: ORDER_LABEL } }); | |
| 3876 | - const { placeholder } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 3877 | - const placeholderValue = placeholder; | |
| 3878 | - const currentGroup = (0, react.useMemo)(() => getGroupControlValue(order?.value ?? null), [order]); | |
| 3879 | - const [activeGroup, setActiveGroup] = (0, react.useState)(currentGroup); | |
| 3880 | - const [customLocked, setCustomLocked] = (0, react.useState)(false); | |
| 3881 | - (0, react.useEffect)(() => { | |
| 3882 | - if (!customLocked) setActiveGroup(currentGroup); | |
| 3883 | - }, [currentGroup, customLocked]); | |
| 3884 | - (0, react.useEffect)(() => { | |
| 3885 | - if (order === null) setCustomLocked(false); | |
| 3886 | - }, [order]); | |
| 3887 | - const groupPlaceholder = getGroupControlValue(placeholderValue?.value ?? null); | |
| 3888 | - const handleToggleButtonChange = (group) => { | |
| 3889 | - setActiveGroup(group); | |
| 3890 | - setCustomLocked(group === CUSTOM$1); | |
| 3891 | - if (CUSTOM$1 === group) { | |
| 3892 | - setOrder({ | |
| 3893 | - $$type: "number", | |
| 3894 | - value: null | |
| 3895 | - }); | |
| 3896 | - return; | |
| 3897 | - } | |
| 3898 | - if (FIRST === group) { | |
| 3899 | - setOrder({ | |
| 3900 | - $$type: "number", | |
| 3901 | - value: orderValueMap[group] | |
| 3902 | - }); | |
| 3903 | - return; | |
| 3904 | - } | |
| 3905 | - if (LAST === group) { | |
| 3906 | - setOrder({ | |
| 3907 | - $$type: "number", | |
| 3908 | - value: orderValueMap[group] | |
| 3909 | - }); | |
| 3910 | - return; | |
| 3911 | - } | |
| 3912 | - setOrder(null); | |
| 3913 | - }; | |
| 3914 | - const isCustomVisible = CUSTOM$1 === activeGroup || CUSTOM$1 === groupPlaceholder; | |
| 3915 | - const orderPlaceholder = CUSTOM$1 === groupPlaceholder ? String(placeholderValue?.value ?? null) : ""; | |
| 3916 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: ORDER_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, { | |
| 3917 | - items: items$1, | |
| 3918 | - value: activeGroup, | |
| 3919 | - onChange: handleToggleButtonChange, | |
| 3920 | - exclusive: true, | |
| 3921 | - placeholder: groupPlaceholder, | |
| 3922 | - disabled: !canEdit | |
| 3923 | - })), isCustomVisible && /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3924 | - container: true, | |
| 3925 | - gap: 2, | |
| 3926 | - alignItems: "center", | |
| 3927 | - flexWrap: "nowrap" | |
| 3928 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3929 | - item: true, | |
| 3930 | - xs: 6 | |
| 3931 | - }, /* @__PURE__ */ react.createElement(ControlLabel, null, (0, _wordpress_i18n.__)("Custom order", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 3932 | - item: true, | |
| 3933 | - xs: 6, | |
| 3934 | - sx: { | |
| 3935 | - display: "flex", | |
| 3936 | - justifyContent: "end" | |
| 3937 | - } | |
| 3938 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { | |
| 3939 | - min: -99998, | |
| 3940 | - max: 99999 - 1, | |
| 3941 | - shouldForceInt: true, | |
| 3942 | - placeholder: orderPlaceholder | |
| 3943 | - })))); | |
| 3944 | - } | |
| 3945 | - var getGroupControlValue = (order) => { | |
| 3946 | - if (99999 === order) return LAST; | |
| 3947 | - if (-99999 === order) return FIRST; | |
| 3948 | - if (null !== order) return CUSTOM$1; | |
| 3949 | - return null; | |
| 3950 | - }; | |
| 3951 | - | |
| 3952 | -//#endregion | |
| 3953 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/flex-size-field.tsx | |
| 3954 | - var FLEX_SIZE_LABEL = (0, _wordpress_i18n.__)("Flex Size", "elementor"); | |
| 3955 | - var DEFAULT = 1; | |
| 3956 | - var items = [ | |
| 3957 | - { | |
| 3958 | - value: "flex-grow", | |
| 3959 | - label: (0, _wordpress_i18n.__)("Grow", "elementor"), | |
| 3960 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ExpandIcon, { fontSize: size }), | |
| 3961 | - showTooltip: true | |
| 3962 | - }, | |
| 3963 | - { | |
| 3964 | - value: "flex-shrink", | |
| 3965 | - label: (0, _wordpress_i18n.__)("Shrink", "elementor"), | |
| 3966 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ShrinkIcon, { fontSize: size }), | |
| 3967 | - showTooltip: true | |
| 3968 | - }, | |
| 3969 | - { | |
| 3970 | - value: "custom", | |
| 3971 | - label: (0, _wordpress_i18n.__)("Custom", "elementor"), | |
| 3972 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.PencilIcon, { fontSize: size }), | |
| 3973 | - showTooltip: true | |
| 3974 | - } | |
| 3975 | - ]; | |
| 3976 | - var FlexSizeField = () => { | |
| 3977 | - return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 3978 | - bind: "flex", | |
| 3979 | - propDisplayName: FLEX_SIZE_LABEL | |
| 3980 | - }, /* @__PURE__ */ react.createElement(FlexSizeFieldContent, null)))); | |
| 3981 | - }; | |
| 3982 | - var FlexSizeFieldContent = () => { | |
| 3983 | - const { value, setValue, canEdit } = useStylesField("flex", { history: { propDisplayName: FLEX_SIZE_LABEL } }); | |
| 3984 | - const { placeholder } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 3985 | - const flexValues = extractFlexValues(value); | |
| 3986 | - const currentGroup = (0, react.useMemo)(() => getActiveGroup(flexValues), [flexValues]); | |
| 3987 | - const [activeGroup, setActiveGroup] = (0, react.useState)(currentGroup); | |
| 3988 | - const [customLocked, setCustomLocked] = (0, react.useState)(false); | |
| 3989 | - (0, react.useEffect)(() => { | |
| 3990 | - if (!customLocked) setActiveGroup(currentGroup); | |
| 3991 | - }, [currentGroup, customLocked]); | |
| 3992 | - (0, react.useEffect)(() => { | |
| 3993 | - if (value === null) setCustomLocked(false); | |
| 3994 | - }, [value]); | |
| 3995 | - const onChangeGroup = (group = null) => { | |
| 3996 | - setActiveGroup(group); | |
| 3997 | - setCustomLocked(group === "custom"); | |
| 3998 | - const newFlexValue = createFlexValueForGroup(group, value); | |
| 3999 | - setValue(newFlexValue); | |
| 4000 | - }; | |
| 4001 | - const groupPlaceholder = getActiveGroup(extractFlexValues(placeholder)); | |
| 4002 | - const isCustomVisible = "custom" === activeGroup || "custom" === groupPlaceholder; | |
| 4003 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_SIZE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, { | |
| 4004 | - value: activeGroup ?? null, | |
| 4005 | - placeholder: groupPlaceholder ?? null, | |
| 4006 | - onChange: onChangeGroup, | |
| 4007 | - disabled: !canEdit, | |
| 4008 | - items, | |
| 4009 | - exclusive: true | |
| 4010 | - })), isCustomVisible && /* @__PURE__ */ react.createElement(FlexCustomField, null)); | |
| 4011 | - }; | |
| 4012 | - function extractFlexValues(source) { | |
| 4013 | - return { | |
| 4014 | - grow: source?.value?.flexGrow?.value ?? null, | |
| 4015 | - shrink: source?.value?.flexShrink?.value ?? null, | |
| 4016 | - basis: source?.value?.flexBasis?.value ?? null | |
| 4017 | - }; | |
| 4018 | - } | |
| 4019 | - var createFlexValueForGroup = (group, flexValue) => { | |
| 4020 | - if (!group) return null; | |
| 4021 | - if (group === "flex-grow") return _elementor_editor_props.flexPropTypeUtil.create({ | |
| 4022 | - flexGrow: _elementor_editor_props.numberPropTypeUtil.create(DEFAULT), | |
| 4023 | - flexShrink: _elementor_editor_props.numberPropTypeUtil.create(0), | |
| 4024 | - flexBasis: _elementor_editor_props.sizePropTypeUtil.create({ | |
| 4025 | - unit: "auto", | |
| 4026 | - size: "" | |
| 4027 | - }) | |
| 4028 | - }); | |
| 4029 | - if (group === "flex-shrink") return _elementor_editor_props.flexPropTypeUtil.create({ | |
| 4030 | - flexGrow: _elementor_editor_props.numberPropTypeUtil.create(0), | |
| 4031 | - flexShrink: _elementor_editor_props.numberPropTypeUtil.create(DEFAULT), | |
| 4032 | - flexBasis: _elementor_editor_props.sizePropTypeUtil.create({ | |
| 4033 | - unit: "auto", | |
| 4034 | - size: "" | |
| 4035 | - }) | |
| 4036 | - }); | |
| 4037 | - if (group === "custom") { | |
| 4038 | - if (flexValue) return flexValue; | |
| 4039 | - return _elementor_editor_props.flexPropTypeUtil.create({ | |
| 4040 | - flexGrow: null, | |
| 4041 | - flexShrink: null, | |
| 4042 | - flexBasis: null | |
| 4043 | - }); | |
| 4044 | - } | |
| 4045 | - return null; | |
| 4046 | - }; | |
| 4047 | - var FlexCustomField = () => { | |
| 4048 | - const flexBasisRowRef = (0, react.useRef)(null); | |
| 4049 | - const context = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.flexPropTypeUtil); | |
| 4050 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { ...context }, /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: (0, _wordpress_i18n.__)("Grow", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexGrow" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { | |
| 4051 | - min: 0, | |
| 4052 | - shouldForceInt: true | |
| 4053 | - }))), /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: (0, _wordpress_i18n.__)("Shrink", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexShrink" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { | |
| 4054 | - min: 0, | |
| 4055 | - shouldForceInt: true | |
| 4056 | - }))), /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4057 | - label: (0, _wordpress_i18n.__)("Basis", "elementor"), | |
| 4058 | - ref: flexBasisRowRef | |
| 4059 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "flexBasis" }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 4060 | - extendedOptions: ["auto"], | |
| 4061 | - anchorRef: flexBasisRowRef | |
| 4062 | - }))))); | |
| 4063 | - }; | |
| 4064 | - var getActiveGroup = ({ grow, shrink, basis }) => { | |
| 4065 | - if (null === grow && null === shrink && !basis) return null; | |
| 4066 | - const isAutoBasis = basis === null || typeof basis === "object" && basis.unit === "auto"; | |
| 4067 | - if (basis && !isAutoBasis) return "custom"; | |
| 4068 | - if (grow === DEFAULT && (shrink === null || shrink === 0) && isAutoBasis) return "flex-grow"; | |
| 4069 | - if (shrink === DEFAULT && (grow === null || grow === 0) && isAutoBasis) return "flex-shrink"; | |
| 4070 | - return "custom"; | |
| 4071 | - }; | |
| 4072 | - | |
| 4073 | -//#endregion | |
| 4074 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/gap-control-field.tsx | |
| 4075 | - var GAPS_LABEL = (0, _wordpress_i18n.__)("Gaps", "elementor"); | |
| 4076 | - var GapControlField = () => { | |
| 4077 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4078 | - bind: "gap", | |
| 4079 | - propDisplayName: GAPS_LABEL | |
| 4080 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.GapControl, { label: GAPS_LABEL })); | |
| 4081 | - }; | |
| 4082 | - | |
| 4083 | -//#endregion | |
| 4084 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-auto-flow-field.tsx | |
| 4085 | - var AUTO_FLOW_LABEL = (0, _wordpress_i18n.__)("Auto flow", "elementor"); | |
| 4086 | - var DENSE_LABEL = (0, _wordpress_i18n.__)("Dense", "elementor"); | |
| 4087 | - var StartIcon$2 = (0, _elementor_ui.withDirection)(_elementor_icons.ArrowRightIcon); | |
| 4088 | - var directionOptions = [{ | |
| 4089 | - value: "row", | |
| 4090 | - label: (0, _wordpress_i18n.__)("Row", "elementor"), | |
| 4091 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(StartIcon$2, { fontSize: size }), | |
| 4092 | - showTooltip: true | |
| 4093 | - }, { | |
| 4094 | - value: "column", | |
| 4095 | - label: (0, _wordpress_i18n.__)("Column", "elementor"), | |
| 4096 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowDownSmallIcon, { fontSize: size }), | |
| 4097 | - showTooltip: true | |
| 4098 | - }]; | |
| 4099 | - var parseAutoFlow = (value) => { | |
| 4100 | - if (!value) return { | |
| 4101 | - direction: null, | |
| 4102 | - dense: false | |
| 4103 | - }; | |
| 4104 | - const dense = value.includes("dense"); | |
| 4105 | - return { | |
| 4106 | - direction: value.replace(/\s*dense\s*/, "").trim() || "row", | |
| 4107 | - dense | |
| 4108 | - }; | |
| 4109 | - }; | |
| 4110 | - var composeAutoFlow = (direction, dense) => { | |
| 4111 | - return dense ? `${direction} dense` : direction; | |
| 4112 | - }; | |
| 4113 | - var GridAutoFlowFieldContent = () => { | |
| 4114 | - const { value, setValue, canEdit } = useStylesField("grid-auto-flow", { history: { propDisplayName: AUTO_FLOW_LABEL } }); | |
| 4115 | - const { placeholder } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 4116 | - const { direction, dense } = parseAutoFlow(value?.value ?? null); | |
| 4117 | - const directionPlaceholder = parseAutoFlow(placeholder?.value ?? null).direction; | |
| 4118 | - const handleDirectionChange = (newDirection) => { | |
| 4119 | - if (!newDirection) { | |
| 4120 | - setValue(null); | |
| 4121 | - return; | |
| 4122 | - } | |
| 4123 | - setValue({ | |
| 4124 | - $$type: "string", | |
| 4125 | - value: composeAutoFlow(newDirection, dense) | |
| 4126 | - }); | |
| 4127 | - }; | |
| 4128 | - const handleDenseToggle = () => { | |
| 4129 | - setValue({ | |
| 4130 | - $$type: "string", | |
| 4131 | - value: composeAutoFlow(direction ?? "row", !dense) | |
| 4132 | - }); | |
| 4133 | - }; | |
| 4134 | - return /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: AUTO_FLOW_LABEL }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4135 | - container: true, | |
| 4136 | - gap: 1, | |
| 4137 | - flexWrap: "nowrap", | |
| 4138 | - alignItems: "center", | |
| 4139 | - justifyContent: "flex-end" | |
| 4140 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4141 | - item: true, | |
| 4142 | - sx: { | |
| 4143 | - width: 64, | |
| 4144 | - maxWidth: "100%" | |
| 4145 | - } | |
| 4146 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlToggleButtonGroup, { | |
| 4147 | - items: directionOptions, | |
| 4148 | - value: direction, | |
| 4149 | - placeholder: directionPlaceholder, | |
| 4150 | - onChange: handleDirectionChange, | |
| 4151 | - exclusive: true, | |
| 4152 | - fullWidth: true, | |
| 4153 | - disabled: !canEdit | |
| 4154 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { item: true }, /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 4155 | - title: DENSE_LABEL, | |
| 4156 | - placement: "top" | |
| 4157 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.ToggleButton, { | |
| 4158 | - value: "dense", | |
| 4159 | - selected: dense, | |
| 4160 | - onChange: handleDenseToggle, | |
| 4161 | - size: "tiny", | |
| 4162 | - "aria-label": DENSE_LABEL, | |
| 4163 | - disabled: !canEdit | |
| 4164 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.LayoutDashboardIcon, { fontSize: "tiny" })))))); | |
| 4165 | - }; | |
| 4166 | - var GridAutoFlowField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4167 | - bind: "grid-auto-flow", | |
| 4168 | - propDisplayName: AUTO_FLOW_LABEL | |
| 4169 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(GridAutoFlowFieldContent, null))); | |
| 4170 | - | |
| 4171 | -//#endregion | |
| 4172 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-auto-track-fields.tsx | |
| 4173 | - var DEFAULT_UNIT = "fr"; | |
| 4174 | - var AUTO_ROWS_LABEL = (0, _wordpress_i18n.__)("Auto rows", "elementor"); | |
| 4175 | - var AUTO_COLUMNS_LABEL = (0, _wordpress_i18n.__)("Auto columns", "elementor"); | |
| 4176 | - var AUTO_ROWS_TOOLTIP = (0, _wordpress_i18n.__)("Set the size for new rows created automatically when content exceeds the defined grid.", "elementor"); | |
| 4177 | - var AUTO_COLUMNS_TOOLTIP = (0, _wordpress_i18n.__)("Set the size for new columns created automatically when content exceeds the defined grid.", "elementor"); | |
| 4178 | - var GridAutoTrackField = ({ bind, infoTooltip, label, rowRef }) => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4179 | - bind, | |
| 4180 | - propDisplayName: label | |
| 4181 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4182 | - infoTooltip, | |
| 4183 | - label, | |
| 4184 | - ref: rowRef | |
| 4185 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 4186 | - enablePropTypeUnits: true, | |
| 4187 | - defaultUnit: DEFAULT_UNIT, | |
| 4188 | - anchorRef: rowRef | |
| 4189 | - }))); | |
| 4190 | - var GridAutoTrackFields = () => { | |
| 4191 | - const rowRef = (0, react.useRef)(null); | |
| 4192 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 4193 | - gap: 2, | |
| 4194 | - pt: 2, | |
| 4195 | - ref: rowRef | |
| 4196 | - }, /* @__PURE__ */ react.createElement(GridAutoTrackField, { | |
| 4197 | - bind: "grid-auto-rows", | |
| 4198 | - infoTooltip: AUTO_ROWS_TOOLTIP, | |
| 4199 | - label: AUTO_ROWS_LABEL, | |
| 4200 | - rowRef | |
| 4201 | - }), /* @__PURE__ */ react.createElement(GridAutoTrackField, { | |
| 4202 | - bind: "grid-auto-columns", | |
| 4203 | - infoTooltip: AUTO_COLUMNS_TOOLTIP, | |
| 4204 | - label: AUTO_COLUMNS_LABEL, | |
| 4205 | - rowRef | |
| 4206 | - })); | |
| 4207 | - }; | |
| 4208 | - | |
| 4209 | -//#endregion | |
| 4210 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-justify-items-field.tsx | |
| 4211 | - var JUSTIFY_ITEMS_LABEL = (0, _wordpress_i18n.__)("Justify items", "elementor"); | |
| 4212 | - var StartIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignLeftIcon); | |
| 4213 | - var EndIcon$1 = (0, _elementor_ui.withDirection)(_elementor_icons.LayoutAlignRightIcon); | |
| 4214 | - var options$8 = [ | |
| 4215 | - { | |
| 4216 | - value: "start", | |
| 4217 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 4218 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(StartIcon$1, { fontSize: size }), | |
| 4219 | - showTooltip: true | |
| 4220 | - }, | |
| 4221 | - { | |
| 4222 | - value: "center", | |
| 4223 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 4224 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LayoutAlignCenterIcon, { fontSize: size }), | |
| 4225 | - showTooltip: true | |
| 4226 | - }, | |
| 4227 | - { | |
| 4228 | - value: "end", | |
| 4229 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 4230 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(EndIcon$1, { fontSize: size }), | |
| 4231 | - showTooltip: true | |
| 4232 | - }, | |
| 4233 | - { | |
| 4234 | - value: "stretch", | |
| 4235 | - label: (0, _wordpress_i18n.__)("Stretch", "elementor"), | |
| 4236 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LayoutDistributeVerticalIcon, { fontSize: size }), | |
| 4237 | - showTooltip: true | |
| 4238 | - } | |
| 4239 | - ]; | |
| 4240 | - var GridJustifyItemsField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4241 | - bind: "justify-items", | |
| 4242 | - propDisplayName: JUSTIFY_ITEMS_LABEL | |
| 4243 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: JUSTIFY_ITEMS_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$8 })))); | |
| 4244 | - | |
| 4245 | -//#endregion | |
| 4246 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-outline-field.tsx | |
| 4247 | - var GRID_OUTLINE_LABEL = (0, _wordpress_i18n.__)("Show Grid Outline", "elementor"); | |
| 4248 | - var GridOutlineField = () => { | |
| 4249 | - const { element } = useElement(); | |
| 4250 | - const value = (0, _elementor_editor_elements.useElementEditorSettings)(element.id)?.grid_outline ?? true; | |
| 4251 | - return /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: GRID_OUTLINE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { | |
| 4252 | - display: "flex", | |
| 4253 | - justifyContent: "flex-end" | |
| 4254 | - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Switch, { | |
| 4255 | - "aria-label": GRID_OUTLINE_LABEL, | |
| 4256 | - checked: value, | |
| 4257 | - onChange: (event) => { | |
| 4258 | - (0, _elementor_editor_elements.updateElementEditorSettings)({ | |
| 4259 | - elementId: element.id, | |
| 4260 | - settings: { grid_outline: event.target.checked } | |
| 4261 | - }); | |
| 4262 | - }, | |
| 4263 | - size: "small" | |
| 4264 | - }))); | |
| 4265 | - }; | |
| 4266 | - | |
| 4267 | -//#endregion | |
| 4268 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/utils/grid-track-value.ts | |
| 4269 | - var FR = "fr"; | |
| 4270 | - var CUSTOM = "custom"; | |
| 4271 | - var UNITS$1 = ["fr", CUSTOM]; | |
| 4272 | - var EMPTY = { kind: "empty" }; | |
| 4273 | - var REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/; | |
| 4274 | - var parseString = (css) => { | |
| 4275 | - if (!css) return EMPTY; | |
| 4276 | - const match = css.match(REPEAT_FR_PATTERN); | |
| 4277 | - if (match) { | |
| 4278 | - const count = parseInt(match[1], 10); | |
| 4279 | - return count >= 1 ? { | |
| 4280 | - kind: "fr", | |
| 4281 | - count | |
| 4282 | - } : EMPTY; | |
| 4283 | - } | |
| 4284 | - return { | |
| 4285 | - kind: "custom", | |
| 4286 | - raw: css | |
| 4287 | - }; | |
| 4288 | - }; | |
| 4289 | - var parseGridTrackSize = (size) => { | |
| 4290 | - if (!size) return EMPTY; | |
| 4291 | - if (size.unit === "fr") { | |
| 4292 | - const n = Number(size.size); | |
| 4293 | - return Number.isFinite(n) && n >= 1 ? { | |
| 4294 | - kind: "fr", | |
| 4295 | - count: Math.trunc(n) | |
| 4296 | - } : EMPTY; | |
| 4297 | - } | |
| 4298 | - const raw = String(size.size ?? ""); | |
| 4299 | - return raw === "" ? EMPTY : { | |
| 4300 | - kind: "custom", | |
| 4301 | - raw | |
| 4302 | - }; | |
| 4303 | - }; | |
| 4304 | - var parseValue = (value) => { | |
| 4305 | - if (!value) return EMPTY; | |
| 4306 | - if (_elementor_editor_props.gridTrackSizePropTypeUtil.isValid(value)) return parseGridTrackSize(_elementor_editor_props.gridTrackSizePropTypeUtil.extract(value)); | |
| 4307 | - if (_elementor_editor_props.stringPropTypeUtil.isValid(value)) return parseString(_elementor_editor_props.stringPropTypeUtil.extract(value)); | |
| 4308 | - return EMPTY; | |
| 4309 | - }; | |
| 4310 | - var fromSizeInput = (v) => { | |
| 4311 | - if (v.size === "" || Number.isNaN(v.size)) return EMPTY; | |
| 4312 | - if (v.unit === "fr") { | |
| 4313 | - const n = Number(v.size); | |
| 4314 | - return Number.isFinite(n) && n >= 1 ? { | |
| 4315 | - kind: "fr", | |
| 4316 | - count: Math.trunc(n) | |
| 4317 | - } : EMPTY; | |
| 4318 | - } | |
| 4319 | - return { | |
| 4320 | - kind: "custom", | |
| 4321 | - raw: String(v.size) | |
| 4322 | - }; | |
| 4323 | - }; | |
| 4324 | - var toPropValue = (v) => { | |
| 4325 | - switch (v.kind) { | |
| 4326 | - case "empty": return null; | |
| 4327 | - case "fr": return _elementor_editor_props.gridTrackSizePropTypeUtil.create({ | |
| 4328 | - size: v.count, | |
| 4329 | - unit: "fr" | |
| 4330 | - }); | |
| 4331 | - case "custom": return _elementor_editor_props.gridTrackSizePropTypeUtil.create({ | |
| 4332 | - size: v.raw, | |
| 4333 | - unit: CUSTOM | |
| 4334 | - }); | |
| 4335 | - } | |
| 4336 | - }; | |
| 4337 | - var toSizeInput = (v, fallbackUnit = "fr") => { | |
| 4338 | - switch (v.kind) { | |
| 4339 | - case "empty": return { | |
| 4340 | - size: "", | |
| 4341 | - unit: fallbackUnit | |
| 4342 | - }; | |
| 4343 | - case "fr": return { | |
| 4344 | - size: v.count, | |
| 4345 | - unit: "fr" | |
| 4346 | - }; | |
| 4347 | - case "custom": return { | |
| 4348 | - size: v.raw, | |
| 4349 | - unit: CUSTOM | |
| 4350 | - }; | |
| 4351 | - } | |
| 4352 | - }; | |
| 4353 | - var toPlaceholder = (v) => { | |
| 4354 | - switch (v.kind) { | |
| 4355 | - case "empty": return; | |
| 4356 | - case "fr": return String(v.count); | |
| 4357 | - case "custom": return v.raw; | |
| 4358 | - } | |
| 4359 | - }; | |
| 4360 | - var unitOf = (v, fallback = "fr") => { | |
| 4361 | - if (v.kind === "fr") return "fr"; | |
| 4362 | - if (v.kind === "custom") return CUSTOM; | |
| 4363 | - return fallback; | |
| 4364 | - }; | |
| 4365 | - | |
| 4366 | -//#endregion | |
| 4367 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-size-field.tsx | |
| 4368 | - var SizeFieldWrapper = ({ children }) => /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlActions, null, children); | |
| 4369 | - var GridTrackSizeInput = (0, _elementor_editor_controls.createControl)((props) => /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeComponent, { | |
| 4370 | - units: UNITS$1, | |
| 4371 | - value: props.value, | |
| 4372 | - placeholder: props.placeholder, | |
| 4373 | - defaultUnit: "fr", | |
| 4374 | - setValue: props.setValue, | |
| 4375 | - onBlur: () => {}, | |
| 4376 | - min: 1, | |
| 4377 | - anchorRef: props.anchorRef, | |
| 4378 | - SizeFieldWrapper | |
| 4379 | - })); | |
| 4380 | - var GridTrackFieldContent = ({ cssProp, label }) => { | |
| 4381 | - const { value, setValue } = useStylesField(cssProp, { history: { propDisplayName: label } }); | |
| 4382 | - const { placeholder: inheritedPlaceholder } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 4383 | - const anchorRef = (0, react.useRef)(null); | |
| 4384 | - const local = parseValue(value); | |
| 4385 | - const inherited = parseValue(inheritedPlaceholder); | |
| 4386 | - const displayValue = local.kind !== "empty" ? toSizeInput(local) : toSizeInput(EMPTY, unitOf(inherited)); | |
| 4387 | - const placeholder = toPlaceholder(inherited); | |
| 4388 | - const handleChange = (raw) => { | |
| 4389 | - const next = fromSizeInput(raw); | |
| 4390 | - if (next.kind === "empty" && local.kind !== "empty" && raw.unit !== unitOf(local)) return; | |
| 4391 | - setValue(toPropValue(next)); | |
| 4392 | - }; | |
| 4393 | - return /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4394 | - label, | |
| 4395 | - direction: "column" | |
| 4396 | - }, /* @__PURE__ */ react.createElement("div", { ref: anchorRef }, /* @__PURE__ */ react.createElement(GridTrackSizeInput, { | |
| 4397 | - value: displayValue, | |
| 4398 | - placeholder, | |
| 4399 | - setValue: handleChange, | |
| 4400 | - anchorRef | |
| 4401 | - }))); | |
| 4402 | - }; | |
| 4403 | - var GridTrackField = ({ cssProp, label }) => /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 4404 | - bind: cssProp, | |
| 4405 | - propDisplayName: label | |
| 4406 | - }, /* @__PURE__ */ react.createElement(GridTrackFieldContent, { | |
| 4407 | - cssProp, | |
| 4408 | - label | |
| 4409 | - }))); | |
| 4410 | - var GridSizeFields = () => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4411 | - container: true, | |
| 4412 | - gap: 2, | |
| 4413 | - flexWrap: "nowrap" | |
| 4414 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4415 | - item: true, | |
| 4416 | - xs: 6 | |
| 4417 | - }, /* @__PURE__ */ react.createElement(GridTrackField, { | |
| 4418 | - cssProp: "grid-template-columns", | |
| 4419 | - label: (0, _wordpress_i18n.__)("Columns", "elementor") | |
| 4420 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4421 | - item: true, | |
| 4422 | - xs: 6 | |
| 4423 | - }, /* @__PURE__ */ react.createElement(GridTrackField, { | |
| 4424 | - cssProp: "grid-template-rows", | |
| 4425 | - label: (0, _wordpress_i18n.__)("Rows", "elementor") | |
| 4426 | - }))); | |
| 4427 | - | |
| 4428 | -//#endregion | |
| 4429 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/grid-span-field.tsx | |
| 4430 | - var GridSpanFieldContent = ({ label }) => { | |
| 4431 | - return /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4432 | - label, | |
| 4433 | - direction: "column" | |
| 4434 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.GridSpanControl, null)); | |
| 4435 | - }; | |
| 4436 | - var GridSpanField = ({ cssProp, label }) => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4437 | - bind: cssProp, | |
| 4438 | - propDisplayName: label | |
| 4439 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(GridSpanFieldContent, { | |
| 4440 | - cssProp, | |
| 4441 | - label | |
| 4442 | - }))); | |
| 4443 | - var GridSpanFields = () => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4444 | - container: true, | |
| 4445 | - gap: 2, | |
| 4446 | - flexWrap: "nowrap" | |
| 4447 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4448 | - item: true, | |
| 4449 | - xs: 6 | |
| 4450 | - }, /* @__PURE__ */ react.createElement(GridSpanField, { | |
| 4451 | - cssProp: "grid-column", | |
| 4452 | - label: (0, _wordpress_i18n.__)("Grid column", "elementor") | |
| 4453 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4454 | - item: true, | |
| 4455 | - xs: 6 | |
| 4456 | - }, /* @__PURE__ */ react.createElement(GridSpanField, { | |
| 4457 | - cssProp: "grid-row", | |
| 4458 | - label: (0, _wordpress_i18n.__)("Grid row", "elementor") | |
| 4459 | - }))); | |
| 4460 | - | |
| 4461 | -//#endregion | |
| 4462 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/justify-content-field.tsx | |
| 4463 | - var JUSTIFY_CONTENT_LABEL = (0, _wordpress_i18n.__)("Justify content", "elementor"); | |
| 4464 | - var StartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyTopIcon); | |
| 4465 | - var EndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.JustifyBottomIcon); | |
| 4466 | - var iconProps = { | |
| 4467 | - isClockwise: true, | |
| 4468 | - offset: -90 | |
| 4469 | - }; | |
| 4470 | - var options$7 = [ | |
| 4471 | - { | |
| 4472 | - value: "flex-start", | |
| 4473 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 4474 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4475 | - icon: StartIcon, | |
| 4476 | - size, | |
| 4477 | - ...iconProps | |
| 4478 | - }), | |
| 4479 | - showTooltip: true | |
| 4480 | - }, | |
| 4481 | - { | |
| 4482 | - value: "center", | |
| 4483 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 4484 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4485 | - icon: _elementor_icons.JustifyCenterIcon, | |
| 4486 | - size, | |
| 4487 | - ...iconProps | |
| 4488 | - }), | |
| 4489 | - showTooltip: true | |
| 4490 | - }, | |
| 4491 | - { | |
| 4492 | - value: "flex-end", | |
| 4493 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 4494 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4495 | - icon: EndIcon, | |
| 4496 | - size, | |
| 4497 | - ...iconProps | |
| 4498 | - }), | |
| 4499 | - showTooltip: true | |
| 4500 | - }, | |
| 4501 | - { | |
| 4502 | - value: "space-between", | |
| 4503 | - label: (0, _wordpress_i18n.__)("Space between", "elementor"), | |
| 4504 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4505 | - icon: _elementor_icons.JustifySpaceBetweenVerticalIcon, | |
| 4506 | - size, | |
| 4507 | - ...iconProps | |
| 4508 | - }), | |
| 4509 | - showTooltip: true | |
| 4510 | - }, | |
| 4511 | - { | |
| 4512 | - value: "space-around", | |
| 4513 | - label: (0, _wordpress_i18n.__)("Space around", "elementor"), | |
| 4514 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4515 | - icon: _elementor_icons.JustifySpaceAroundVerticalIcon, | |
| 4516 | - size, | |
| 4517 | - ...iconProps | |
| 4518 | - }), | |
| 4519 | - showTooltip: true | |
| 4520 | - }, | |
| 4521 | - { | |
| 4522 | - value: "space-evenly", | |
| 4523 | - label: (0, _wordpress_i18n.__)("Space evenly", "elementor"), | |
| 4524 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4525 | - icon: _elementor_icons.JustifyDistributeVerticalIcon, | |
| 4526 | - size, | |
| 4527 | - ...iconProps | |
| 4528 | - }), | |
| 4529 | - showTooltip: true | |
| 4530 | - } | |
| 4531 | - ]; | |
| 4532 | - var JustifyContentField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4533 | - bind: "justify-content", | |
| 4534 | - propDisplayName: JUSTIFY_CONTENT_LABEL | |
| 4535 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4536 | - label: JUSTIFY_CONTENT_LABEL, | |
| 4537 | - direction: "column" | |
| 4538 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { | |
| 4539 | - options: options$7, | |
| 4540 | - fullWidth: true | |
| 4541 | - })))); | |
| 4542 | - | |
| 4543 | -//#endregion | |
| 4544 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/wrap-field.tsx | |
| 4545 | - var FLEX_WRAP_LABEL$1 = (0, _wordpress_i18n.__)("Wrap", "elementor"); | |
| 4546 | - var options$6 = [ | |
| 4547 | - { | |
| 4548 | - value: "nowrap", | |
| 4549 | - label: (0, _wordpress_i18n.__)("No wrap", "elementor"), | |
| 4550 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowRightIcon, { fontSize: size }), | |
| 4551 | - showTooltip: true | |
| 4552 | - }, | |
| 4553 | - { | |
| 4554 | - value: "wrap", | |
| 4555 | - label: (0, _wordpress_i18n.__)("Wrap", "elementor"), | |
| 4556 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowBackIcon, { fontSize: size }), | |
| 4557 | - showTooltip: true | |
| 4558 | - }, | |
| 4559 | - { | |
| 4560 | - value: "wrap-reverse", | |
| 4561 | - label: (0, _wordpress_i18n.__)("Reversed wrap", "elementor"), | |
| 4562 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ArrowForwardIcon, { fontSize: size }), | |
| 4563 | - showTooltip: true | |
| 4564 | - } | |
| 4565 | - ]; | |
| 4566 | - var WrapField = () => { | |
| 4567 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4568 | - bind: "flex-wrap", | |
| 4569 | - propDisplayName: FLEX_WRAP_LABEL$1 | |
| 4570 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FLEX_WRAP_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$6 })))); | |
| 4571 | - }; | |
| 4572 | - | |
| 4573 | -//#endregion | |
| 4574 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/layout-section/layout-section.tsx | |
| 4575 | - var DISPLAY_LABEL = (0, _wordpress_i18n.__)("Display", "elementor"); | |
| 4576 | - var FLEX_WRAP_LABEL = (0, _wordpress_i18n.__)("Flex wrap", "elementor"); | |
| 4577 | - var DEFAULT_PARENT_FLOW_DIRECTION = "row"; | |
| 4578 | - var { Slot: GridFieldsSlot, inject: injectIntoGridFields } = (0, _elementor_locations.createLocation)(); | |
| 4579 | - var LayoutSection = () => { | |
| 4580 | - const { value: display } = useStylesField("display", { history: { propDisplayName: DISPLAY_LABEL } }); | |
| 4581 | - const displayPlaceholder = useDisplayPlaceholderValue(); | |
| 4582 | - const isDisplayFlex = shouldDisplayFlexFields(display, displayPlaceholder); | |
| 4583 | - const isDisplayGrid = "grid" === (display?.value ?? displayPlaceholder?.value); | |
| 4584 | - const { element } = useElement(); | |
| 4585 | - const parentStyle = useComputedStyle((0, _elementor_editor_elements.useParentElement)(element.id)?.id || null); | |
| 4586 | - const getParentStyleDirection = () => { | |
| 4587 | - if ("flex" === parentStyle?.display) return parentStyle?.flexDirection ?? DEFAULT_PARENT_FLOW_DIRECTION; | |
| 4588 | - if ("grid" === parentStyle?.display) return parentStyle?.gridAutoFlow ?? DEFAULT_PARENT_FLOW_DIRECTION; | |
| 4589 | - return DEFAULT_PARENT_FLOW_DIRECTION; | |
| 4590 | - }; | |
| 4591 | - return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(DisplayField, null), isDisplayFlex && /* @__PURE__ */ react.createElement(FlexFields, null), "flex" === parentStyle?.display && /* @__PURE__ */ react.createElement(FlexChildFields, { parentStyleDirection: getParentStyleDirection() }), isDisplayGrid && /* @__PURE__ */ react.createElement(GridFields, null), "grid" === parentStyle?.display && /* @__PURE__ */ react.createElement(GridChildFields, { parentStyleDirection: getParentStyleDirection() })); | |
| 4592 | - }; | |
| 4593 | - var FlexFields = () => { | |
| 4594 | - const { value: flexWrap } = useStylesField("flex-wrap", { history: { propDisplayName: FLEX_WRAP_LABEL } }); | |
| 4595 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(FlexDirectionField, null), /* @__PURE__ */ react.createElement(JustifyContentField, null), /* @__PURE__ */ react.createElement(AlignItemsField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GapControlField, null), /* @__PURE__ */ react.createElement(WrapField, null), ["wrap", "wrap-reverse"].includes(flexWrap?.value) && /* @__PURE__ */ react.createElement(AlignContentField, null)); | |
| 4596 | - }; | |
| 4597 | - var GridFields = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(GridOutlineField, null), /* @__PURE__ */ react.createElement(GridSizeFields, null), /* @__PURE__ */ react.createElement(GridAutoFlowField, null), /* @__PURE__ */ react.createElement(GridFieldsSlot, null), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: ["grid-auto-rows", "grid-auto-columns"] }, /* @__PURE__ */ react.createElement(GridAutoTrackFields, null)), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GapControlField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(GridJustifyItemsField, null), /* @__PURE__ */ react.createElement(AlignItemsField, null)); | |
| 4598 | - var FlexChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Flex child", "elementor")), /* @__PURE__ */ react.createElement(AlignSelfChild, { parentStyleDirection }), /* @__PURE__ */ react.createElement(FlexOrderField, null), /* @__PURE__ */ react.createElement(FlexSizeField, null)); | |
| 4599 | - var GridChildFields = ({ parentStyleDirection }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Grid child", "elementor")), /* @__PURE__ */ react.createElement(GridSpanFields, null), /* @__PURE__ */ react.createElement(AlignSelfGridChild, { parentStyleDirection }), /* @__PURE__ */ react.createElement(FlexOrderField, null)); | |
| 4600 | - var shouldDisplayFlexFields = (display, local) => { | |
| 4601 | - const value = display?.value ?? local?.value; | |
| 4602 | - if (!value) return false; | |
| 4603 | - return "flex" === value || "inline-flex" === value; | |
| 4604 | - }; | |
| 4605 | - | |
| 4606 | -//#endregion | |
| 4607 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/dimensions-field.tsx | |
| 4608 | - var InlineStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.SideLeftIcon); | |
| 4609 | - var InlineEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.SideRightIcon); | |
| 4610 | - var sideIcons = { | |
| 4611 | - "inset-block-start": /* @__PURE__ */ react.createElement(_elementor_icons.SideTopIcon, { fontSize: "tiny" }), | |
| 4612 | - "inset-block-end": /* @__PURE__ */ react.createElement(_elementor_icons.SideBottomIcon, { fontSize: "tiny" }), | |
| 4613 | - "inset-inline-start": /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4614 | - icon: InlineStartIcon, | |
| 4615 | - size: "tiny" | |
| 4616 | - }), | |
| 4617 | - "inset-inline-end": /* @__PURE__ */ react.createElement(RotatedIcon$1, { | |
| 4618 | - icon: InlineEndIcon, | |
| 4619 | - size: "tiny" | |
| 4620 | - }) | |
| 4621 | - }; | |
| 4622 | - var getInlineStartLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Right", "elementor") : (0, _wordpress_i18n.__)("Left", "elementor"); | |
| 4623 | - var getInlineEndLabel = (isSiteRtl) => isSiteRtl ? (0, _wordpress_i18n.__)("Left", "elementor") : (0, _wordpress_i18n.__)("Right", "elementor"); | |
| 4624 | - var DimensionsField = () => { | |
| 4625 | - const { isSiteRtl } = useDirection(); | |
| 4626 | - const rowRefs = [(0, react.useRef)(null), (0, react.useRef)(null)]; | |
| 4627 | - return /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 4628 | - direction: "row", | |
| 4629 | - gap: 2, | |
| 4630 | - flexWrap: "nowrap", | |
| 4631 | - ref: rowRefs[0] | |
| 4632 | - }, /* @__PURE__ */ react.createElement(DimensionField, { | |
| 4633 | - side: "inset-block-start", | |
| 4634 | - label: (0, _wordpress_i18n.__)("Top", "elementor"), | |
| 4635 | - rowRef: rowRefs[0] | |
| 4636 | - }), /* @__PURE__ */ react.createElement(DimensionField, { | |
| 4637 | - side: "inset-inline-end", | |
| 4638 | - label: getInlineEndLabel(isSiteRtl), | |
| 4639 | - rowRef: rowRefs[0] | |
| 4640 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 4641 | - direction: "row", | |
| 4642 | - gap: 2, | |
| 4643 | - flexWrap: "nowrap", | |
| 4644 | - ref: rowRefs[1] | |
| 4645 | - }, /* @__PURE__ */ react.createElement(DimensionField, { | |
| 4646 | - side: "inset-block-end", | |
| 4647 | - label: (0, _wordpress_i18n.__)("Bottom", "elementor"), | |
| 4648 | - rowRef: rowRefs[1] | |
| 4649 | - }), /* @__PURE__ */ react.createElement(DimensionField, { | |
| 4650 | - side: "inset-inline-start", | |
| 4651 | - label: getInlineStartLabel(isSiteRtl), | |
| 4652 | - rowRef: rowRefs[1] | |
| 4653 | - }))); | |
| 4654 | - }; | |
| 4655 | - var DimensionField = ({ side, label, rowRef }) => /* @__PURE__ */ react.createElement(StylesField, { | |
| 4656 | - bind: side, | |
| 4657 | - propDisplayName: label | |
| 4658 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4659 | - container: true, | |
| 4660 | - gap: .75, | |
| 4661 | - alignItems: "center" | |
| 4662 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4663 | - item: true, | |
| 4664 | - xs: 12 | |
| 4665 | - }, /* @__PURE__ */ react.createElement(ControlLabel, null, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4666 | - item: true, | |
| 4667 | - xs: 12 | |
| 4668 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 4669 | - startIcon: sideIcons[side], | |
| 4670 | - extendedOptions: ["auto"], | |
| 4671 | - anchorRef: rowRef, | |
| 4672 | - min: -Number.MAX_SAFE_INTEGER | |
| 4673 | - })))); | |
| 4674 | - | |
| 4675 | -//#endregion | |
| 4676 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/offset-field.tsx | |
| 4677 | - var OFFSET_LABEL = (0, _wordpress_i18n.__)("Anchor offset", "elementor"); | |
| 4678 | - var UNITS = [ | |
| 4679 | - "px", | |
| 4680 | - "em", | |
| 4681 | - "rem", | |
| 4682 | - "vw", | |
| 4683 | - "vh" | |
| 4684 | - ]; | |
| 4685 | - var OffsetField = () => { | |
| 4686 | - const rowRef = (0, react.useRef)(null); | |
| 4687 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4688 | - bind: "scroll-margin-top", | |
| 4689 | - propDisplayName: OFFSET_LABEL | |
| 4690 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4691 | - label: OFFSET_LABEL, | |
| 4692 | - ref: rowRef | |
| 4693 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 4694 | - units: UNITS, | |
| 4695 | - anchorRef: rowRef | |
| 4696 | - }))); | |
| 4697 | - }; | |
| 4698 | - | |
| 4699 | -//#endregion | |
| 4700 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-field.tsx | |
| 4701 | - var POSITION_LABEL$1 = (0, _wordpress_i18n.__)("Position", "elementor"); | |
| 4702 | - var positionOptions$1 = [ | |
| 4703 | - { | |
| 4704 | - label: (0, _wordpress_i18n.__)("Static", "elementor"), | |
| 4705 | - value: "static" | |
| 4706 | - }, | |
| 4707 | - { | |
| 4708 | - label: (0, _wordpress_i18n.__)("Relative", "elementor"), | |
| 4709 | - value: "relative" | |
| 4710 | - }, | |
| 4711 | - { | |
| 4712 | - label: (0, _wordpress_i18n.__)("Absolute", "elementor"), | |
| 4713 | - value: "absolute" | |
| 4714 | - }, | |
| 4715 | - { | |
| 4716 | - label: (0, _wordpress_i18n.__)("Fixed", "elementor"), | |
| 4717 | - value: "fixed" | |
| 4718 | - }, | |
| 4719 | - { | |
| 4720 | - label: (0, _wordpress_i18n.__)("Sticky", "elementor"), | |
| 4721 | - value: "sticky" | |
| 4722 | - } | |
| 4723 | - ]; | |
| 4724 | - var PositionField = () => { | |
| 4725 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4726 | - bind: "position", | |
| 4727 | - propDisplayName: POSITION_LABEL$1 | |
| 4728 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: POSITION_LABEL$1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: positionOptions$1 }))); | |
| 4729 | - }; | |
| 4730 | - | |
| 4731 | -//#endregion | |
| 4732 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/z-index-field.tsx | |
| 4733 | - var Z_INDEX_LABEL = (0, _wordpress_i18n.__)("Z-index", "elementor"); | |
| 4734 | - var ZIndexField = ({ disabled }) => { | |
| 4735 | - const StyleField = /* @__PURE__ */ react.createElement(StylesField, { | |
| 4736 | - bind: "z-index", | |
| 4737 | - propDisplayName: Z_INDEX_LABEL | |
| 4738 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: Z_INDEX_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { disabled }))); | |
| 4739 | - const content = /* @__PURE__ */ react.createElement(_elementor_ui.Alert, { | |
| 4740 | - color: "secondary", | |
| 4741 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, null), | |
| 4742 | - size: "small" | |
| 4743 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, (0, _wordpress_i18n.__)("Z-index", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { component: "span" }, (0, _wordpress_i18n.__)("z-index only works on positioned elements. Change position to relative, absolute, or fixed to enable layering.", "elementor"))); | |
| 4744 | - return disabled ? /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, { | |
| 4745 | - placement: "right", | |
| 4746 | - content, | |
| 4747 | - color: "secondary", | |
| 4748 | - slotProps: { popper: { sx: { width: 300 } } } | |
| 4749 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, StyleField)) : /* @__PURE__ */ react.createElement(react.Fragment, null, StyleField); | |
| 4750 | - }; | |
| 4751 | - | |
| 4752 | -//#endregion | |
| 4753 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/position-section/position-section.tsx | |
| 4754 | - var POSITION_STATIC = "static"; | |
| 4755 | - var POSITION_LABEL = (0, _wordpress_i18n.__)("Position", "elementor"); | |
| 4756 | - var DIMENSIONS_LABEL = (0, _wordpress_i18n.__)("Dimensions", "elementor"); | |
| 4757 | - var DEPENDENT_PROP_NAMES = [ | |
| 4758 | - "inset-block-start", | |
| 4759 | - "inset-block-end", | |
| 4760 | - "inset-inline-start", | |
| 4761 | - "inset-inline-end", | |
| 4762 | - "z-index" | |
| 4763 | - ]; | |
| 4764 | - var PositionSection = () => { | |
| 4765 | - const { value: position } = useStylesField("position", withHistoryLabel(POSITION_LABEL)); | |
| 4766 | - const inheritedPosition = useInheritedValues(["position"]).position; | |
| 4767 | - const resolvedPosition = position ?? inheritedPosition ?? null; | |
| 4768 | - const isPositionUnsetOrStatic = !resolvedPosition || resolvedPosition.value === POSITION_STATIC; | |
| 4769 | - const positionPrevRef = (0, react.useRef)(position); | |
| 4770 | - const { values: dependentValues, setValues: setDependentValues } = useStylesFields(DEPENDENT_PROP_NAMES); | |
| 4771 | - const [savedDependentValues, saveToHistory, clearHistory] = usePersistDimensions(); | |
| 4772 | - (0, react.useEffect)(() => { | |
| 4773 | - if (position && position?.value === POSITION_STATIC && hasDependentValues(dependentValues)) saveToHistory(extractDimensions(dependentValues)); | |
| 4774 | - if (positionPrevRef.current?.value === POSITION_STATIC) { | |
| 4775 | - setDependentValues({ ...savedDependentValues }, withHistoryLabel(DIMENSIONS_LABEL)); | |
| 4776 | - clearHistory(); | |
| 4777 | - } | |
| 4778 | - if (isPositionUnsetOrStatic && dependentValues?.["z-index"]) setDependentValues({ "z-index": null }, withHistoryLabel(DIMENSIONS_LABEL)); | |
| 4779 | - positionPrevRef.current = position; | |
| 4780 | - }, [position?.value, isPositionUnsetOrStatic]); | |
| 4781 | - return /* @__PURE__ */ react.createElement(StyledSectionContent, null, /* @__PURE__ */ react.createElement(PositionField, null), /* @__PURE__ */ react.createElement(DimensionsField, null), /* @__PURE__ */ react.createElement(ZIndexField, { disabled: isPositionUnsetOrStatic }), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(OffsetField, null)); | |
| 4782 | - }; | |
| 4783 | - var usePersistDimensions = () => { | |
| 4784 | - const { id: styleDefID, meta } = useStyle(); | |
| 4785 | - return (0, _elementor_session.useSessionStorage)(`${`styles/${styleDefID}/${meta.breakpoint || "desktop"}/${meta.state || "null"}`}/dimensions`); | |
| 4786 | - }; | |
| 4787 | - var withHistoryLabel = (name) => { | |
| 4788 | - return { history: { propDisplayName: name } }; | |
| 4789 | - }; | |
| 4790 | - var hasDependentValues = (values) => { | |
| 4791 | - if (!values) return false; | |
| 4792 | - const dimensions = extractDimensions(values); | |
| 4793 | - return Object.values(dimensions).some((v) => v !== null); | |
| 4794 | - }; | |
| 4795 | - var extractDimensions = (values) => { | |
| 4796 | - return DEPENDENT_PROP_NAMES.reduce((acc, key) => { | |
| 4797 | - return { | |
| 4798 | - ...acc, | |
| 4799 | - [key]: values?.[key] ?? null | |
| 4800 | - }; | |
| 4801 | - }, {}); | |
| 4802 | - }; | |
| 4803 | - var StyledSectionContent = (0, _elementor_ui.styled)(SectionContent, { shouldForwardProp: (prop) => prop !== "gap" })(({ gap = 2, theme }) => ({ | |
| 4804 | - gap: 0, | |
| 4805 | - "& > *": { marginBottom: theme.spacing(gap) }, | |
| 4806 | - "& > *:last-child": { marginBottom: 0 }, | |
| 4807 | - "& > .MuiStack-root": { marginBottom: 0 }, | |
| 4808 | - "& > .MuiStack-root:has(> *)": { marginBottom: theme.spacing(gap) }, | |
| 4809 | - "& > .MuiDivider-root": { marginBottom: theme.spacing(gap) } | |
| 4810 | - })); | |
| 4811 | - | |
| 4812 | -//#endregion | |
| 4813 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/object-fit-field.tsx | |
| 4814 | - var OBJECT_FIT_LABEL = (0, _wordpress_i18n.__)("Object fit", "elementor"); | |
| 4815 | - var positionOptions = [ | |
| 4816 | - { | |
| 4817 | - label: (0, _wordpress_i18n.__)("Fill", "elementor"), | |
| 4818 | - value: "fill" | |
| 4819 | - }, | |
| 4820 | - { | |
| 4821 | - label: (0, _wordpress_i18n.__)("Cover", "elementor"), | |
| 4822 | - value: "cover" | |
| 4823 | - }, | |
| 4824 | - { | |
| 4825 | - label: (0, _wordpress_i18n.__)("Contain", "elementor"), | |
| 4826 | - value: "contain" | |
| 4827 | - }, | |
| 4828 | - { | |
| 4829 | - label: (0, _wordpress_i18n.__)("None", "elementor"), | |
| 4830 | - value: "none" | |
| 4831 | - }, | |
| 4832 | - { | |
| 4833 | - label: (0, _wordpress_i18n.__)("Scale down", "elementor"), | |
| 4834 | - value: "scale-down" | |
| 4835 | - } | |
| 4836 | - ]; | |
| 4837 | - var ObjectFitField = () => { | |
| 4838 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4839 | - bind: "object-fit", | |
| 4840 | - propDisplayName: OBJECT_FIT_LABEL | |
| 4841 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: OBJECT_FIT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: positionOptions }))); | |
| 4842 | - }; | |
| 4843 | - | |
| 4844 | -//#endregion | |
| 4845 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/overflow-field.tsx | |
| 4846 | - var OVERFLOW_LABEL = (0, _wordpress_i18n.__)("Overflow", "elementor"); | |
| 4847 | - var options$5 = [ | |
| 4848 | - { | |
| 4849 | - value: "visible", | |
| 4850 | - label: (0, _wordpress_i18n.__)("Visible", "elementor"), | |
| 4851 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.EyeIcon, { fontSize: size }), | |
| 4852 | - showTooltip: true | |
| 4853 | - }, | |
| 4854 | - { | |
| 4855 | - value: "hidden", | |
| 4856 | - label: (0, _wordpress_i18n.__)("Hidden", "elementor"), | |
| 4857 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.EyeOffIcon, { fontSize: size }), | |
| 4858 | - showTooltip: true | |
| 4859 | - }, | |
| 4860 | - { | |
| 4861 | - value: "auto", | |
| 4862 | - label: (0, _wordpress_i18n.__)("Auto", "elementor"), | |
| 4863 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterAIcon, { fontSize: size }), | |
| 4864 | - showTooltip: true | |
| 4865 | - } | |
| 4866 | - ]; | |
| 4867 | - var OverflowField = () => { | |
| 4868 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4869 | - bind: "overflow", | |
| 4870 | - propDisplayName: OVERFLOW_LABEL | |
| 4871 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: OVERFLOW_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$5 }))); | |
| 4872 | - }; | |
| 4873 | - | |
| 4874 | -//#endregion | |
| 4875 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/size-section/size-section.tsx | |
| 4876 | - var CssSizeProps = [ | |
| 4877 | - [{ | |
| 4878 | - bind: "width", | |
| 4879 | - label: (0, _wordpress_i18n.__)("Width", "elementor") | |
| 4880 | - }, { | |
| 4881 | - bind: "height", | |
| 4882 | - label: (0, _wordpress_i18n.__)("Height", "elementor") | |
| 4883 | - }], | |
| 4884 | - [{ | |
| 4885 | - bind: "min-width", | |
| 4886 | - label: (0, _wordpress_i18n.__)("Min width", "elementor") | |
| 4887 | - }, { | |
| 4888 | - bind: "min-height", | |
| 4889 | - label: (0, _wordpress_i18n.__)("Min height", "elementor") | |
| 4890 | - }], | |
| 4891 | - [{ | |
| 4892 | - bind: "max-width", | |
| 4893 | - label: (0, _wordpress_i18n.__)("Max width", "elementor") | |
| 4894 | - }, { | |
| 4895 | - bind: "max-height", | |
| 4896 | - label: (0, _wordpress_i18n.__)("Max height", "elementor") | |
| 4897 | - }] | |
| 4898 | - ]; | |
| 4899 | - var ASPECT_RATIO_LABEL = (0, _wordpress_i18n.__)("Aspect Ratio", "elementor"); | |
| 4900 | - var SizeSection = () => { | |
| 4901 | - const gridRowRefs = [ | |
| 4902 | - (0, react.useRef)(null), | |
| 4903 | - (0, react.useRef)(null), | |
| 4904 | - (0, react.useRef)(null) | |
| 4905 | - ]; | |
| 4906 | - return /* @__PURE__ */ react.createElement(SectionContent, null, CssSizeProps.map((row, rowIndex) => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4907 | - key: rowIndex, | |
| 4908 | - container: true, | |
| 4909 | - gap: 2, | |
| 4910 | - flexWrap: "nowrap", | |
| 4911 | - ref: gridRowRefs[rowIndex] | |
| 4912 | - }, row.map((props) => /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4913 | - item: true, | |
| 4914 | - xs: 6, | |
| 4915 | - key: props.bind | |
| 4916 | - }, /* @__PURE__ */ react.createElement(SizeField, { | |
| 4917 | - ...props, | |
| 4918 | - rowRef: gridRowRefs[rowIndex], | |
| 4919 | - extendedOptions: ["auto"] | |
| 4920 | - }))))), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, null, /* @__PURE__ */ react.createElement(OverflowField, null)), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: ["aspect-ratio", "object-fit"] }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 4921 | - gap: 2, | |
| 4922 | - pt: 2 | |
| 4923 | - }, /* @__PURE__ */ react.createElement(StylesField, { | |
| 4924 | - bind: "aspect-ratio", | |
| 4925 | - propDisplayName: ASPECT_RATIO_LABEL | |
| 4926 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.AspectRatioControl, { label: ASPECT_RATIO_LABEL })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(ObjectFitField, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 4927 | - bind: "object-position", | |
| 4928 | - propDisplayName: (0, _wordpress_i18n.__)("Object position", "elementor") | |
| 4929 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4930 | - item: true, | |
| 4931 | - xs: 6 | |
| 4932 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PositionControl, null)))))); | |
| 4933 | - }; | |
| 4934 | - var SizeField = ({ label, bind, rowRef, extendedOptions }) => { | |
| 4935 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4936 | - bind, | |
| 4937 | - propDisplayName: label | |
| 4938 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4939 | - container: true, | |
| 4940 | - gap: .75, | |
| 4941 | - alignItems: "center" | |
| 4942 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4943 | - item: true, | |
| 4944 | - xs: 12 | |
| 4945 | - }, /* @__PURE__ */ react.createElement(ControlLabel, null, label)), /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 4946 | - item: true, | |
| 4947 | - xs: 12 | |
| 4948 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 4949 | - extendedOptions, | |
| 4950 | - anchorRef: rowRef | |
| 4951 | - })))); | |
| 4952 | - }; | |
| 4953 | - | |
| 4954 | -//#endregion | |
| 4955 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/spacing-section/spacing-section.tsx | |
| 4956 | - var MARGIN_LABEL = (0, _wordpress_i18n.__)("Margin", "elementor"); | |
| 4957 | - var PADDING_LABEL = (0, _wordpress_i18n.__)("Padding", "elementor"); | |
| 4958 | - var SpacingSection = () => { | |
| 4959 | - const { isSiteRtl } = useDirection(); | |
| 4960 | - return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(StylesField, { | |
| 4961 | - bind: "margin", | |
| 4962 | - propDisplayName: MARGIN_LABEL | |
| 4963 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.LinkedDimensionsControl, { | |
| 4964 | - label: MARGIN_LABEL, | |
| 4965 | - isSiteRtl, | |
| 4966 | - min: -Number.MAX_SAFE_INTEGER | |
| 4967 | - })), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(StylesField, { | |
| 4968 | - bind: "padding", | |
| 4969 | - propDisplayName: PADDING_LABEL | |
| 4970 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.LinkedDimensionsControl, { | |
| 4971 | - label: PADDING_LABEL, | |
| 4972 | - isSiteRtl | |
| 4973 | - }))); | |
| 4974 | - }; | |
| 4975 | - | |
| 4976 | -//#endregion | |
| 4977 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-count-field.tsx | |
| 4978 | - var COLUMN_COUNT_LABEL = (0, _wordpress_i18n.__)("Columns", "elementor"); | |
| 4979 | - var ColumnCountField = () => { | |
| 4980 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4981 | - bind: "column-count", | |
| 4982 | - propDisplayName: COLUMN_COUNT_LABEL | |
| 4983 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: COLUMN_COUNT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.NumberControl, { | |
| 4984 | - shouldForceInt: true, | |
| 4985 | - min: 0, | |
| 4986 | - step: 1 | |
| 4987 | - }))); | |
| 4988 | - }; | |
| 4989 | - | |
| 4990 | -//#endregion | |
| 4991 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/column-gap-field.tsx | |
| 4992 | - var COLUMN_GAP_LABEL = (0, _wordpress_i18n.__)("Column gap", "elementor"); | |
| 4993 | - var ColumnGapField = () => { | |
| 4994 | - const rowRef = (0, react.useRef)(null); | |
| 4995 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 4996 | - bind: "column-gap", | |
| 4997 | - propDisplayName: COLUMN_GAP_LABEL | |
| 4998 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 4999 | - label: COLUMN_GAP_LABEL, | |
| 5000 | - ref: rowRef | |
| 5001 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { anchorRef: rowRef }))); | |
| 5002 | - }; | |
| 5003 | - | |
| 5004 | -//#endregion | |
| 5005 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-family-field.tsx | |
| 5006 | - var FONT_FAMILY_LABEL = (0, _wordpress_i18n.__)("Font family", "elementor"); | |
| 5007 | - var FontFamilyField = () => { | |
| 5008 | - const fontFamilies = (0, _elementor_editor_controls.useFontFamilies)(); | |
| 5009 | - const sectionWidth = (0, _elementor_editor_ui.useSectionWidth)(); | |
| 5010 | - if (fontFamilies.length === 0) return null; | |
| 5011 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5012 | - bind: "font-family", | |
| 5013 | - propDisplayName: FONT_FAMILY_LABEL | |
| 5014 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_FAMILY_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.FontFamilyControl, { | |
| 5015 | - fontFamilies, | |
| 5016 | - sectionWidth, | |
| 5017 | - ariaLabel: FONT_FAMILY_LABEL | |
| 5018 | - }))); | |
| 5019 | - }; | |
| 5020 | - | |
| 5021 | -//#endregion | |
| 5022 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-size-field.tsx | |
| 5023 | - var FONT_SIZE_LABEL = (0, _wordpress_i18n.__)("Font size", "elementor"); | |
| 5024 | - var FontSizeField = () => { | |
| 5025 | - const rowRef = (0, react.useRef)(null); | |
| 5026 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5027 | - bind: "font-size", | |
| 5028 | - propDisplayName: FONT_SIZE_LABEL | |
| 5029 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 5030 | - label: FONT_SIZE_LABEL, | |
| 5031 | - ref: rowRef | |
| 5032 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 5033 | - anchorRef: rowRef, | |
| 5034 | - ariaLabel: FONT_SIZE_LABEL | |
| 5035 | - }))); | |
| 5036 | - }; | |
| 5037 | - | |
| 5038 | -//#endregion | |
| 5039 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-style-field.tsx | |
| 5040 | - var FONT_STYLE_LABEL = (0, _wordpress_i18n.__)("Font style", "elementor"); | |
| 5041 | - var options$4 = [{ | |
| 5042 | - value: "normal", | |
| 5043 | - label: (0, _wordpress_i18n.__)("Normal", "elementor"), | |
| 5044 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }), | |
| 5045 | - showTooltip: true | |
| 5046 | - }, { | |
| 5047 | - value: "italic", | |
| 5048 | - label: (0, _wordpress_i18n.__)("Italic", "elementor"), | |
| 5049 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.ItalicIcon, { fontSize: size }), | |
| 5050 | - showTooltip: true | |
| 5051 | - }]; | |
| 5052 | - var FontStyleField = () => { | |
| 5053 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5054 | - bind: "font-style", | |
| 5055 | - propDisplayName: FONT_STYLE_LABEL | |
| 5056 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_STYLE_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$4 }))); | |
| 5057 | - }; | |
| 5058 | - | |
| 5059 | -//#endregion | |
| 5060 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/font-weight-field.tsx | |
| 5061 | - var FONT_WEIGHT_LABEL = (0, _wordpress_i18n.__)("Font weight", "elementor"); | |
| 5062 | - var fontWeightOptions = [ | |
| 5063 | - { | |
| 5064 | - value: "100", | |
| 5065 | - label: (0, _wordpress_i18n.__)("100 - Thin", "elementor") | |
| 5066 | - }, | |
| 5067 | - { | |
| 5068 | - value: "200", | |
| 5069 | - label: (0, _wordpress_i18n.__)("200 - Extra light", "elementor") | |
| 5070 | - }, | |
| 5071 | - { | |
| 5072 | - value: "300", | |
| 5073 | - label: (0, _wordpress_i18n.__)("300 - Light", "elementor") | |
| 5074 | - }, | |
| 5075 | - { | |
| 5076 | - value: "400", | |
| 5077 | - label: (0, _wordpress_i18n.__)("400 - Normal", "elementor") | |
| 5078 | - }, | |
| 5079 | - { | |
| 5080 | - value: "500", | |
| 5081 | - label: (0, _wordpress_i18n.__)("500 - Medium", "elementor") | |
| 5082 | - }, | |
| 5083 | - { | |
| 5084 | - value: "600", | |
| 5085 | - label: (0, _wordpress_i18n.__)("600 - Semi bold", "elementor") | |
| 5086 | - }, | |
| 5087 | - { | |
| 5088 | - value: "700", | |
| 5089 | - label: (0, _wordpress_i18n.__)("700 - Bold", "elementor") | |
| 5090 | - }, | |
| 5091 | - { | |
| 5092 | - value: "800", | |
| 5093 | - label: (0, _wordpress_i18n.__)("800 - Extra bold", "elementor") | |
| 5094 | - }, | |
| 5095 | - { | |
| 5096 | - value: "900", | |
| 5097 | - label: (0, _wordpress_i18n.__)("900 - Black", "elementor") | |
| 5098 | - } | |
| 5099 | - ]; | |
| 5100 | - var FontWeightField = () => { | |
| 5101 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5102 | - bind: "font-weight", | |
| 5103 | - propDisplayName: FONT_WEIGHT_LABEL | |
| 5104 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: FONT_WEIGHT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SelectControl, { options: fontWeightOptions }))); | |
| 5105 | - }; | |
| 5106 | - | |
| 5107 | -//#endregion | |
| 5108 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/letter-spacing-field.tsx | |
| 5109 | - var LETTER_SPACING_LABEL = (0, _wordpress_i18n.__)("Letter spacing", "elementor"); | |
| 5110 | - var LetterSpacingField = () => { | |
| 5111 | - const rowRef = (0, react.useRef)(null); | |
| 5112 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5113 | - bind: "letter-spacing", | |
| 5114 | - propDisplayName: LETTER_SPACING_LABEL | |
| 5115 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 5116 | - label: LETTER_SPACING_LABEL, | |
| 5117 | - ref: rowRef | |
| 5118 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 5119 | - anchorRef: rowRef, | |
| 5120 | - min: -Number.MAX_SAFE_INTEGER | |
| 5121 | - }))); | |
| 5122 | - }; | |
| 5123 | - | |
| 5124 | -//#endregion | |
| 5125 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/line-height-field.tsx | |
| 5126 | - var LINE_HEIGHT_LABEL = (0, _wordpress_i18n.__)("Line height", "elementor"); | |
| 5127 | - var LineHeightField = () => { | |
| 5128 | - const rowRef = (0, react.useRef)(null); | |
| 5129 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5130 | - bind: "line-height", | |
| 5131 | - propDisplayName: LINE_HEIGHT_LABEL | |
| 5132 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 5133 | - label: LINE_HEIGHT_LABEL, | |
| 5134 | - ref: rowRef | |
| 5135 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { anchorRef: rowRef }))); | |
| 5136 | - }; | |
| 5137 | - | |
| 5138 | -//#endregion | |
| 5139 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-alignment-field.tsx | |
| 5140 | - var TEXT_ALIGNMENT_LABEL = (0, _wordpress_i18n.__)("Text align", "elementor"); | |
| 5141 | - var AlignStartIcon = (0, _elementor_ui.withDirection)(_elementor_icons.AlignLeftIcon); | |
| 5142 | - var AlignEndIcon = (0, _elementor_ui.withDirection)(_elementor_icons.AlignRightIcon); | |
| 5143 | - var options$3 = [ | |
| 5144 | - { | |
| 5145 | - value: "start", | |
| 5146 | - label: (0, _wordpress_i18n.__)("Start", "elementor"), | |
| 5147 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(AlignStartIcon, { fontSize: size }), | |
| 5148 | - showTooltip: true | |
| 5149 | - }, | |
| 5150 | - { | |
| 5151 | - value: "center", | |
| 5152 | - label: (0, _wordpress_i18n.__)("Center", "elementor"), | |
| 5153 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.AlignCenterIcon, { fontSize: size }), | |
| 5154 | - showTooltip: true | |
| 5155 | - }, | |
| 5156 | - { | |
| 5157 | - value: "end", | |
| 5158 | - label: (0, _wordpress_i18n.__)("End", "elementor"), | |
| 5159 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(AlignEndIcon, { fontSize: size }), | |
| 5160 | - showTooltip: true | |
| 5161 | - }, | |
| 5162 | - { | |
| 5163 | - value: "justify", | |
| 5164 | - label: (0, _wordpress_i18n.__)("Justify", "elementor"), | |
| 5165 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.AlignJustifiedIcon, { fontSize: size }), | |
| 5166 | - showTooltip: true | |
| 5167 | - } | |
| 5168 | - ]; | |
| 5169 | - var TextAlignmentField = () => { | |
| 5170 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5171 | - bind: "text-align", | |
| 5172 | - propDisplayName: TEXT_ALIGNMENT_LABEL | |
| 5173 | - }, /* @__PURE__ */ react.createElement(UiProviders, null, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_ALIGNMENT_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$3 })))); | |
| 5174 | - }; | |
| 5175 | - | |
| 5176 | -//#endregion | |
| 5177 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-color-field.tsx | |
| 5178 | - var TEXT_COLOR_LABEL = (0, _wordpress_i18n.__)("Text color", "elementor"); | |
| 5179 | - var TextColorField = () => { | |
| 5180 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5181 | - bind: "color", | |
| 5182 | - propDisplayName: TEXT_COLOR_LABEL | |
| 5183 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_COLOR_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ColorControl, { id: "text-color-control" }))); | |
| 5184 | - }; | |
| 5185 | - | |
| 5186 | -//#endregion | |
| 5187 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-decoration-field.tsx | |
| 5188 | - var TEXT_DECORATION_LABEL = (0, _wordpress_i18n.__)("Line decoration", "elementor"); | |
| 5189 | - var options$2 = [ | |
| 5190 | - { | |
| 5191 | - value: "none", | |
| 5192 | - label: (0, _wordpress_i18n.__)("None", "elementor"), | |
| 5193 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }), | |
| 5194 | - showTooltip: true, | |
| 5195 | - exclusive: true | |
| 5196 | - }, | |
| 5197 | - { | |
| 5198 | - value: "underline", | |
| 5199 | - label: (0, _wordpress_i18n.__)("Underline", "elementor"), | |
| 5200 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.UnderlineIcon, { fontSize: size }), | |
| 5201 | - showTooltip: true | |
| 5202 | - }, | |
| 5203 | - { | |
| 5204 | - value: "line-through", | |
| 5205 | - label: (0, _wordpress_i18n.__)("Line-through", "elementor"), | |
| 5206 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.StrikethroughIcon, { fontSize: size }), | |
| 5207 | - showTooltip: true | |
| 5208 | - }, | |
| 5209 | - { | |
| 5210 | - value: "overline", | |
| 5211 | - label: (0, _wordpress_i18n.__)("Overline", "elementor"), | |
| 5212 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.OverlineIcon, { fontSize: size }), | |
| 5213 | - showTooltip: true | |
| 5214 | - } | |
| 5215 | - ]; | |
| 5216 | - var TextDecorationField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 5217 | - bind: "text-decoration", | |
| 5218 | - propDisplayName: TEXT_DECORATION_LABEL | |
| 5219 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_DECORATION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { | |
| 5220 | - options: options$2, | |
| 5221 | - exclusive: false | |
| 5222 | - }))); | |
| 5223 | - | |
| 5224 | -//#endregion | |
| 5225 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-direction-field.tsx | |
| 5226 | - var TEXT_DIRECTION_LABEL = (0, _wordpress_i18n.__)("Direction", "elementor"); | |
| 5227 | - var options$1 = [{ | |
| 5228 | - value: "ltr", | |
| 5229 | - label: (0, _wordpress_i18n.__)("Left to right", "elementor"), | |
| 5230 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.TextDirectionLtrIcon, { fontSize: size }), | |
| 5231 | - showTooltip: true | |
| 5232 | - }, { | |
| 5233 | - value: "rtl", | |
| 5234 | - label: (0, _wordpress_i18n.__)("Right to left", "elementor"), | |
| 5235 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.TextDirectionRtlIcon, { fontSize: size }), | |
| 5236 | - showTooltip: true | |
| 5237 | - }]; | |
| 5238 | - var TextDirectionField = () => { | |
| 5239 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5240 | - bind: "direction", | |
| 5241 | - propDisplayName: TEXT_DIRECTION_LABEL | |
| 5242 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_DIRECTION_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options: options$1 }))); | |
| 5243 | - }; | |
| 5244 | - | |
| 5245 | -//#endregion | |
| 5246 | -//#region packages/packages/core/editor-editing-panel/src/components/add-or-remove-content.tsx | |
| 5247 | - var SIZE$4 = "tiny"; | |
| 5248 | - var AddOrRemoveContent = ({ isAdded, onAdd, onRemove, children, disabled, renderLabel }) => { | |
| 5249 | - return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 5250 | - direction: "row", | |
| 5251 | - sx: { | |
| 5252 | - justifyContent: "space-between", | |
| 5253 | - alignItems: "center", | |
| 5254 | - marginInlineEnd: -.75 | |
| 5255 | - } | |
| 5256 | - }, renderLabel(), isAdded ? /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 5257 | - size: SIZE$4, | |
| 5258 | - onClick: onRemove, | |
| 5259 | - "aria-label": "Remove", | |
| 5260 | - disabled | |
| 5261 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: SIZE$4 })) : /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 5262 | - size: SIZE$4, | |
| 5263 | - onClick: onAdd, | |
| 5264 | - "aria-label": "Add", | |
| 5265 | - disabled | |
| 5266 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.PlusIcon, { fontSize: SIZE$4 }))), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, { | |
| 5267 | - in: isAdded, | |
| 5268 | - unmountOnExit: true | |
| 5269 | - }, /* @__PURE__ */ react.createElement(SectionContent, null, children))); | |
| 5270 | - }; | |
| 5271 | - | |
| 5272 | -//#endregion | |
| 5273 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/text-stroke-field.tsx | |
| 5274 | - var initTextStroke = { | |
| 5275 | - $$type: "stroke", | |
| 5276 | - value: { | |
| 5277 | - color: { | |
| 5278 | - $$type: "color", | |
| 5279 | - value: "#000000" | |
| 5280 | - }, | |
| 5281 | - width: { | |
| 5282 | - $$type: "size", | |
| 5283 | - value: { | |
| 5284 | - unit: "px", | |
| 5285 | - size: 1 | |
| 5286 | - } | |
| 5287 | - } | |
| 5288 | - } | |
| 5289 | - }; | |
| 5290 | - var TEXT_STROKE_LABEL = (0, _wordpress_i18n.__)("Text stroke", "elementor"); | |
| 5291 | - var TextStrokeField = () => { | |
| 5292 | - const { value, setValue, canEdit } = useStylesField("stroke", { history: { propDisplayName: TEXT_STROKE_LABEL } }); | |
| 5293 | - const addTextStroke = () => { | |
| 5294 | - setValue(initTextStroke); | |
| 5295 | - }; | |
| 5296 | - const removeTextStroke = () => { | |
| 5297 | - setValue(null); | |
| 5298 | - }; | |
| 5299 | - const hasTextStroke = Boolean(value); | |
| 5300 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5301 | - bind: "stroke", | |
| 5302 | - propDisplayName: TEXT_STROKE_LABEL | |
| 5303 | - }, /* @__PURE__ */ react.createElement(AddOrRemoveContent, { | |
| 5304 | - isAdded: hasTextStroke, | |
| 5305 | - onAdd: addTextStroke, | |
| 5306 | - onRemove: removeTextStroke, | |
| 5307 | - disabled: !canEdit, | |
| 5308 | - renderLabel: () => /* @__PURE__ */ react.createElement(ControlLabel, null, TEXT_STROKE_LABEL) | |
| 5309 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.StrokeControl, null))); | |
| 5310 | - }; | |
| 5311 | - | |
| 5312 | -//#endregion | |
| 5313 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/transform-field.tsx | |
| 5314 | - var TEXT_TRANSFORM_LABEL = (0, _wordpress_i18n.__)("Text transform", "elementor"); | |
| 5315 | - var options = [ | |
| 5316 | - { | |
| 5317 | - value: "none", | |
| 5318 | - label: (0, _wordpress_i18n.__)("None", "elementor"), | |
| 5319 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.MinusIcon, { fontSize: size }), | |
| 5320 | - showTooltip: true | |
| 5321 | - }, | |
| 5322 | - { | |
| 5323 | - value: "capitalize", | |
| 5324 | - label: (0, _wordpress_i18n.__)("Capitalize", "elementor"), | |
| 5325 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseIcon, { fontSize: size }), | |
| 5326 | - showTooltip: true | |
| 5327 | - }, | |
| 5328 | - { | |
| 5329 | - value: "uppercase", | |
| 5330 | - label: (0, _wordpress_i18n.__)("Uppercase", "elementor"), | |
| 5331 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseUpperIcon, { fontSize: size }), | |
| 5332 | - showTooltip: true | |
| 5333 | - }, | |
| 5334 | - { | |
| 5335 | - value: "lowercase", | |
| 5336 | - label: (0, _wordpress_i18n.__)("Lowercase", "elementor"), | |
| 5337 | - renderContent: ({ size }) => /* @__PURE__ */ react.createElement(_elementor_icons.LetterCaseLowerIcon, { fontSize: size }), | |
| 5338 | - showTooltip: true | |
| 5339 | - } | |
| 5340 | - ]; | |
| 5341 | - var TransformField = () => /* @__PURE__ */ react.createElement(StylesField, { | |
| 5342 | - bind: "text-transform", | |
| 5343 | - propDisplayName: TEXT_TRANSFORM_LABEL | |
| 5344 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { label: TEXT_TRANSFORM_LABEL }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ToggleControl, { options }))); | |
| 5345 | - | |
| 5346 | -//#endregion | |
| 5347 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/word-spacing-field.tsx | |
| 5348 | - var WORD_SPACING_LABEL = (0, _wordpress_i18n.__)("Word spacing", "elementor"); | |
| 5349 | - var WordSpacingField = () => { | |
| 5350 | - const rowRef = (0, react.useRef)(null); | |
| 5351 | - return /* @__PURE__ */ react.createElement(StylesField, { | |
| 5352 | - bind: "word-spacing", | |
| 5353 | - propDisplayName: WORD_SPACING_LABEL | |
| 5354 | - }, /* @__PURE__ */ react.createElement(StylesFieldLayout, { | |
| 5355 | - label: WORD_SPACING_LABEL, | |
| 5356 | - ref: rowRef | |
| 5357 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.SizeControl, { | |
| 5358 | - anchorRef: rowRef, | |
| 5359 | - min: -Number.MAX_SAFE_INTEGER | |
| 5360 | - }))); | |
| 5361 | - }; | |
| 5362 | - | |
| 5363 | -//#endregion | |
| 5364 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections/typography-section/typography-section.tsx | |
| 5365 | - var TypographySection = () => { | |
| 5366 | - return /* @__PURE__ */ react.createElement(SectionContent, null, /* @__PURE__ */ react.createElement(FontFamilyField, null), /* @__PURE__ */ react.createElement(FontWeightField, null), /* @__PURE__ */ react.createElement(FontSizeField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(TextAlignmentField, null), /* @__PURE__ */ react.createElement(TextColorField, null), /* @__PURE__ */ react.createElement(StyleTabCollapsibleContent, { fields: [ | |
| 5367 | - "line-height", | |
| 5368 | - "letter-spacing", | |
| 5369 | - "word-spacing", | |
| 5370 | - "column-count", | |
| 5371 | - "text-decoration", | |
| 5372 | - "text-transform", | |
| 5373 | - "direction", | |
| 5374 | - "font-style", | |
| 5375 | - "stroke" | |
| 5376 | - ] }, /* @__PURE__ */ react.createElement(SectionContent, { sx: { pt: 2 } }, /* @__PURE__ */ react.createElement(LineHeightField, null), /* @__PURE__ */ react.createElement(LetterSpacingField, null), /* @__PURE__ */ react.createElement(WordSpacingField, null), /* @__PURE__ */ react.createElement(ColumnCountField, null), /* @__PURE__ */ react.createElement(ColumnGapField, null), /* @__PURE__ */ react.createElement(PanelDivider, null), /* @__PURE__ */ react.createElement(TextDecorationField, null), /* @__PURE__ */ react.createElement(TransformField, null), /* @__PURE__ */ react.createElement(TextDirectionField, null), /* @__PURE__ */ react.createElement(FontStyleField, null), /* @__PURE__ */ react.createElement(TextStrokeField, null)))); | |
| 5377 | - }; | |
| 5378 | - | |
| 5379 | -//#endregion | |
| 5380 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections-definition.ts | |
| 5381 | - var STYLE_SECTIONS = [ | |
| 5382 | - { | |
| 5383 | - name: "Layout", | |
| 5384 | - title: (0, _wordpress_i18n.__)("Layout", "elementor"), | |
| 5385 | - component: LayoutSection, | |
| 5386 | - fields: [ | |
| 5387 | - "display", | |
| 5388 | - "flex-direction", | |
| 5389 | - "flex-wrap", | |
| 5390 | - "justify-content", | |
| 5391 | - "align-items", | |
| 5392 | - "align-content", | |
| 5393 | - "align-self", | |
| 5394 | - "gap", | |
| 5395 | - "order", | |
| 5396 | - "grid-column", | |
| 5397 | - "grid-row", | |
| 5398 | - "grid-auto-rows", | |
| 5399 | - "grid-auto-columns" | |
| 5400 | - ] | |
| 5401 | - }, | |
| 5402 | - { | |
| 5403 | - name: "Spacing", | |
| 5404 | - title: (0, _wordpress_i18n.__)("Spacing", "elementor"), | |
| 5405 | - component: SpacingSection, | |
| 5406 | - fields: ["margin", "padding"] | |
| 5407 | - }, | |
| 5408 | - { | |
| 5409 | - name: "Size", | |
| 5410 | - title: (0, _wordpress_i18n.__)("Size", "elementor"), | |
| 5411 | - component: SizeSection, | |
| 5412 | - fields: [ | |
| 5413 | - "width", | |
| 5414 | - "min-width", | |
| 5415 | - "max-width", | |
| 5416 | - "height", | |
| 5417 | - "min-height", | |
| 5418 | - "max-height", | |
| 5419 | - "overflow", | |
| 5420 | - "aspect-ratio", | |
| 5421 | - "object-fit" | |
| 5422 | - ] | |
| 5423 | - }, | |
| 5424 | - { | |
| 5425 | - name: "Position", | |
| 5426 | - title: (0, _wordpress_i18n.__)("Position", "elementor"), | |
| 5427 | - component: PositionSection, | |
| 5428 | - fields: [ | |
| 5429 | - "position", | |
| 5430 | - "z-index", | |
| 5431 | - "scroll-margin-top" | |
| 5432 | - ] | |
| 5433 | - }, | |
| 5434 | - { | |
| 5435 | - name: "Typography", | |
| 5436 | - title: (0, _wordpress_i18n.__)("Typography", "elementor"), | |
| 5437 | - component: TypographySection, | |
| 5438 | - fields: [ | |
| 5439 | - "font-family", | |
| 5440 | - "font-weight", | |
| 5441 | - "font-size", | |
| 5442 | - "text-align", | |
| 5443 | - "color", | |
| 5444 | - "line-height", | |
| 5445 | - "letter-spacing", | |
| 5446 | - "word-spacing", | |
| 5447 | - "column-count", | |
| 5448 | - "text-decoration", | |
| 5449 | - "text-transform", | |
| 5450 | - "direction", | |
| 5451 | - "font-style", | |
| 5452 | - "stroke" | |
| 5453 | - ] | |
| 5454 | - }, | |
| 5455 | - { | |
| 5456 | - name: "Background", | |
| 5457 | - title: (0, _wordpress_i18n.__)("Background", "elementor"), | |
| 5458 | - component: BackgroundSection, | |
| 5459 | - fields: ["background"] | |
| 5460 | - }, | |
| 5461 | - { | |
| 5462 | - name: "Border", | |
| 5463 | - title: (0, _wordpress_i18n.__)("Border", "elementor"), | |
| 5464 | - component: BorderSection, | |
| 5465 | - fields: [ | |
| 5466 | - "border-radius", | |
| 5467 | - "border-width", | |
| 5468 | - "border-color", | |
| 5469 | - "border-style" | |
| 5470 | - ] | |
| 5471 | - }, | |
| 5472 | - { | |
| 5473 | - name: "Effects", | |
| 5474 | - title: (0, _wordpress_i18n.__)("Effects", "elementor"), | |
| 5475 | - component: EffectsSection, | |
| 5476 | - fields: [ | |
| 5477 | - "mix-blend-mode", | |
| 5478 | - "box-shadow", | |
| 5479 | - "opacity", | |
| 5480 | - "transform", | |
| 5481 | - "filter", | |
| 5482 | - "backdrop-filter", | |
| 5483 | - "transform-origin", | |
| 5484 | - "transition" | |
| 5485 | - ] | |
| 5486 | - } | |
| 5487 | - ]; | |
| 5488 | - var STYLE_SECTION_NAMES = STYLE_SECTIONS.map((section) => section.name); | |
| 5489 | - | |
| 5490 | -//#endregion | |
| 5491 | -//#region packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx | |
| 5492 | - var StyleTabSection = ({ section, fields = [], unmountOnExit = true }) => { | |
| 5493 | - const { component, name, title, action } = section; | |
| 5494 | - const tabDefaults = useDefaultPanelSettings(); | |
| 5495 | - const SectionComponent = component || (() => /* @__PURE__ */ react.createElement(react.Fragment, null)); | |
| 5496 | - const isExpanded = tabDefaults.defaultSectionsExpanded.style?.includes(name); | |
| 5497 | - return /* @__PURE__ */ react.createElement(Section, { | |
| 5498 | - title, | |
| 5499 | - defaultExpanded: isExpanded, | |
| 5500 | - titleEnd: getStylesInheritanceIndicators(fields), | |
| 5501 | - unmountOnExit, | |
| 5502 | - action | |
| 5503 | - }, /* @__PURE__ */ react.createElement(SectionComponent, null)); | |
| 5504 | - }; | |
| 5505 | - | |
| 5506 | -//#endregion | |
| 5507 | -//#region packages/packages/core/editor-editing-panel/src/components/style-sections.tsx | |
| 5508 | - var StyleSections = () => { | |
| 5509 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, STYLE_SECTIONS.map((section) => /* @__PURE__ */ react.createElement(StyleTabSection, { | |
| 5510 | - key: section.name, | |
| 5511 | - section: { | |
| 5512 | - component: section.component, | |
| 5513 | - name: section.name, | |
| 5514 | - title: section.title | |
| 5515 | - }, | |
| 5516 | - fields: section.fields | |
| 5517 | - }))); | |
| 5518 | - }; | |
| 5519 | - | |
| 5520 | -//#endregion | |
| 5521 | -//#region packages/packages/core/editor-editing-panel/src/components/style-tab.tsx | |
| 5522 | - var TABS_HEADER_HEIGHT = "37px"; | |
| 5523 | - var { Slot: StyleTabSlot, inject: injectIntoStyleTab } = (0, _elementor_locations.createLocation)(); | |
| 5524 | - var stickyHeaderStyles = { | |
| 5525 | - position: "sticky", | |
| 5526 | - zIndex: 1100, | |
| 5527 | - opacity: 1, | |
| 5528 | - backgroundColor: "background.default", | |
| 5529 | - transition: "top 300ms ease" | |
| 5530 | - }; | |
| 5531 | - var StyleTab = () => { | |
| 5532 | - const currentClassesProp = useCurrentClassesProp(); | |
| 5533 | - const [activeStyleDefId, setActiveStyleDefId] = useActiveStyleDefId(currentClassesProp ?? ""); | |
| 5534 | - const [activeStyleState, setActiveStyleState] = (0, react.useState)(null); | |
| 5535 | - const breakpoint = (0, _elementor_editor_responsive.useActiveBreakpoint)(); | |
| 5536 | - if (!currentClassesProp) return null; | |
| 5537 | - return /* @__PURE__ */ react.createElement(ClassesPropProvider, { prop: currentClassesProp }, /* @__PURE__ */ react.createElement(StyleProvider, { | |
| 5538 | - meta: { | |
| 5539 | - breakpoint, | |
| 5540 | - state: activeStyleState | |
| 5541 | - }, | |
| 5542 | - id: activeStyleDefId, | |
| 5543 | - setId: (id) => { | |
| 5544 | - setActiveStyleDefId(id); | |
| 5545 | - setActiveStyleState(null); | |
| 5546 | - }, | |
| 5547 | - setMetaState: setActiveStyleState | |
| 5548 | - }, /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: activeStyleDefId ?? "" }, /* @__PURE__ */ react.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ react.createElement(ClassesHeader, null, /* @__PURE__ */ react.createElement(CssClassSelector, null), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)), /* @__PURE__ */ react.createElement(SectionsList, null, /* @__PURE__ */ react.createElement(StyleSections, null), /* @__PURE__ */ react.createElement(StyleTabSlot, null)), /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { height: "150px" } }))))); | |
| 5549 | - }; | |
| 5550 | - function ClassesHeader({ children }) { | |
| 5551 | - const scrollDirection = useScrollDirection(); | |
| 5552 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { sx: { | |
| 5553 | - ...stickyHeaderStyles, | |
| 5554 | - top: scrollDirection === "up" ? TABS_HEADER_HEIGHT : 0 | |
| 5555 | - } }, children); | |
| 5556 | - } | |
| 5557 | - function useCurrentClassesProp() { | |
| 5558 | - const { elementType } = useElement(); | |
| 5559 | - const prop = Object.entries(elementType.propsSchema).find(([, propType]) => propType.kind === "plain" && propType.key === _elementor_editor_props.CLASSES_PROP_KEY); | |
| 5560 | - if (!prop) return null; | |
| 5561 | - return prop[0]; | |
| 5562 | - } | |
| 5563 | - | |
| 5564 | -//#endregion | |
| 5565 | -//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-tabs.tsx | |
| 5566 | - var EditingPanelTabs = () => { | |
| 5567 | - const { element } = useElement(); | |
| 5568 | - return /* @__PURE__ */ react.createElement(react.Fragment, { key: element.id }, /* @__PURE__ */ react.createElement(PanelTabContent, null)); | |
| 5569 | - }; | |
| 5570 | - var PanelTabContent = () => { | |
| 5571 | - const { element } = useElement(); | |
| 5572 | - const defaultComponentTab = useDefaultPanelSettings().defaultTab; | |
| 5573 | - const isPromotedElement = !!(0, _elementor_editor_elements.getWidgetsCache)()?.[element.type]?.meta?.is_pro_promotion; | |
| 5574 | - const [storedTab, setCurrentTab] = useStateByElement("tab", defaultComponentTab); | |
| 5575 | - const { getTabProps, getTabPanelProps, getTabsProps } = (0, _elementor_ui.useTabs)(isPromotedElement && storedTab === "settings" ? "style" : storedTab); | |
| 5576 | - return /* @__PURE__ */ react.createElement(ScrollProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 5577 | - direction: "column", | |
| 5578 | - sx: { width: "100%" } | |
| 5579 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { sx: { | |
| 5580 | - ...stickyHeaderStyles, | |
| 5581 | - top: 0 | |
| 5582 | - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Tabs, { | |
| 5583 | - variant: "fullWidth", | |
| 5584 | - size: "small", | |
| 5585 | - sx: { mt: .5 }, | |
| 5586 | - ...getTabsProps(), | |
| 5587 | - onChange: (_, newValue) => { | |
| 5588 | - getTabsProps().onChange(_, newValue); | |
| 5589 | - setCurrentTab(newValue); | |
| 5590 | - } | |
| 5591 | - }, !isPromotedElement && /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 5592 | - label: (0, _wordpress_i18n.__)("General", "elementor"), | |
| 5593 | - ...getTabProps("settings") | |
| 5594 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 5595 | - label: (0, _wordpress_i18n.__)("Style", "elementor"), | |
| 5596 | - ...getTabProps("style") | |
| 5597 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 5598 | - label: (0, _wordpress_i18n.__)("Interactions", "elementor"), | |
| 5599 | - ...getTabProps("interactions") | |
| 5600 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null)), !isPromotedElement && /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 5601 | - ...getTabPanelProps("settings"), | |
| 5602 | - disablePadding: true | |
| 5603 | - }, /* @__PURE__ */ react.createElement(SettingsTab, null)), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 5604 | - ...getTabPanelProps("style"), | |
| 5605 | - disablePadding: true | |
| 5606 | - }, /* @__PURE__ */ react.createElement(StyleTab, null)), /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 5607 | - ...getTabPanelProps("interactions"), | |
| 5608 | - disablePadding: true | |
| 5609 | - }, /* @__PURE__ */ react.createElement(InteractionsTab, null)))); | |
| 5610 | - }; | |
| 5611 | - | |
| 5612 | -//#endregion | |
| 5613 | -//#region packages/packages/core/editor-editing-panel/src/components/editing-panel.tsx | |
| 5614 | - var { Slot: PanelHeaderTopSlot, inject: injectIntoPanelHeaderTop } = (0, _elementor_locations.createLocation)(); | |
| 5615 | - var { useMenuItems } = _elementor_menus.controlActionsMenu; | |
| 5616 | - var EditingPanel = () => { | |
| 5617 | - const { element, elementType, settings } = (0, _elementor_editor_elements.useSelectedElementSettings)(); | |
| 5618 | - const controlReplacements = (0, _elementor_editor_controls.getControlReplacements)(); | |
| 5619 | - const menuItems = useMenuItems().default; | |
| 5620 | - if (!element || !elementType) return null; | |
| 5621 | - const panelTitle = (0, _wordpress_i18n.__)("Edit %s", "elementor").replace("%s", elementType.title); | |
| 5622 | - const { component: ReplacementComponent } = getEditingPanelReplacement(element, elementType) ?? {}; | |
| 5623 | - let panelContent = /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelHeader, null, /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelHeaderTitle, null, panelTitle), /* @__PURE__ */ react.createElement(_elementor_icons.AtomIcon, { | |
| 5624 | - fontSize: "small", | |
| 5625 | - sx: { color: "text.tertiary" } | |
| 5626 | - })), /* @__PURE__ */ react.createElement(_elementor_editor_panels.PanelBody, { sx: { | |
| 5627 | - height: "auto", | |
| 5628 | - flex: 1, | |
| 5629 | - minHeight: 0 | |
| 5630 | - } }, /* @__PURE__ */ react.createElement(EditingPanelTabs, null)), /* @__PURE__ */ react.createElement(EditingPanelStickyPromotion, null)); | |
| 5631 | - if (ReplacementComponent) panelContent = /* @__PURE__ */ react.createElement(ReplacementComponent, null); | |
| 5632 | - return /* @__PURE__ */ react.createElement(_elementor_ui.ErrorBoundary, { fallback: /* @__PURE__ */ react.createElement(EditorPanelErrorFallback, null) }, /* @__PURE__ */ react.createElement(_elementor_session.SessionStorageProvider, { prefix: "elementor" }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.ThemeProvider, null, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ react.createElement(ElementProvider, { | |
| 5633 | - element, | |
| 5634 | - elementType, | |
| 5635 | - settings | |
| 5636 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_panels.Panel, null, /* @__PURE__ */ react.createElement(PanelHeaderTopSlot, null), panelContent))))))); | |
| 5637 | - }; | |
| 5638 | - | |
| 5639 | -//#endregion | |
| 5640 | -//#region packages/packages/core/editor-editing-panel/src/components/style-states/pseudo-state-menu-items.tsx | |
| 5641 | - function PseudoStateMenuItems({ states, activeState, onSelectState, onClose }) { | |
| 5642 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, { sx: { | |
| 5643 | - typography: "caption", | |
| 5644 | - color: "text.secondary", | |
| 5645 | - pb: .5, | |
| 5646 | - pt: 1 | |
| 5647 | - } }, (0, _wordpress_i18n.__)("States", "elementor")), states.map((state) => /* @__PURE__ */ react.createElement(_elementor_editor_ui.MenuListItem, { | |
| 5648 | - key: state.key, | |
| 5649 | - selected: state.value === activeState, | |
| 5650 | - sx: { textTransform: "capitalize" }, | |
| 5651 | - onClick: () => { | |
| 5652 | - onSelectState(state.value); | |
| 5653 | - onClose?.(); | |
| 5654 | - } | |
| 5655 | - }, state.label))); | |
| 5656 | - } | |
| 5657 | - | |
| 5658 | -//#endregion | |
| 5659 | -//#region packages/packages/core/editor-editing-panel/src/panel.ts | |
| 5660 | - var { panel, usePanelActions, usePanelStatus } = (0, _elementor_editor_panels.createPanel)({ | |
| 5661 | - id: "editing-panel", | |
| 5662 | - component: EditingPanel | |
| 5663 | - }); | |
| 5664 | - | |
| 5665 | -//#endregion | |
| 5666 | -//#region packages/packages/core/editor-editing-panel/src/sync/is-atomic-widget-selected.ts | |
| 5667 | - var isAtomicWidgetSelected = () => { | |
| 5668 | - const selectedElements = (0, _elementor_editor_elements.getSelectedElements)(); | |
| 5669 | - const widgetCache = (0, _elementor_editor_elements.getWidgetsCache)(); | |
| 5670 | - if (selectedElements.length !== 1) return false; | |
| 5671 | - return !!widgetCache?.[selectedElements[0].type]?.atomic_controls; | |
| 5672 | - }; | |
| 5673 | - | |
| 5674 | -//#endregion | |
| 5675 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-open-editor-panel.ts | |
| 5676 | - var useOpenEditorPanel = () => { | |
| 5677 | - const { open } = usePanelActions(); | |
| 5678 | - (0, react.useEffect)(() => { | |
| 5679 | - return (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.commandStartEvent)("panel/editor/open"), () => { | |
| 5680 | - if (isAtomicWidgetSelected()) open(); | |
| 5681 | - }); | |
| 5682 | - }, []); | |
| 5683 | - }; | |
| 5684 | - | |
| 5685 | -//#endregion | |
| 5686 | -//#region packages/packages/core/editor-editing-panel/src/components/editing-panel-hooks.tsx | |
| 5687 | - var EditingPanelHooks = () => { | |
| 5688 | - useOpenEditorPanel(); | |
| 5689 | - return null; | |
| 5690 | - }; | |
| 5691 | - | |
| 5692 | -//#endregion | |
| 5693 | -//#region packages/packages/core/editor-editing-panel/src/components/promotions/custom-css.tsx | |
| 5694 | - var TRACKING_DATA = { | |
| 5695 | - target_name: "custom_css", | |
| 5696 | - location_l2: "style" | |
| 5697 | - }; | |
| 5698 | - var CustomCssSection = () => { | |
| 5699 | - const triggerRef = (0, react.useRef)(null); | |
| 5700 | - return /* @__PURE__ */ react.createElement(StyleTabSection, { section: { | |
| 5701 | - name: "Custom CSS", | |
| 5702 | - title: (0, _wordpress_i18n.__)("Custom CSS", "elementor"), | |
| 5703 | - action: { | |
| 5704 | - component: /* @__PURE__ */ react.createElement(_elementor_editor_controls.PromotionTrigger, { | |
| 5705 | - ref: triggerRef, | |
| 5706 | - promotionKey: "customCss", | |
| 5707 | - trackingData: TRACKING_DATA | |
| 5708 | - }), | |
| 5709 | - onClick: () => triggerRef.current?.toggle() | |
| 5710 | - } | |
| 5711 | - } }); | |
| 5712 | - }; | |
| 5713 | - | |
| 5714 | -//#endregion | |
| 5715 | -//#region packages/packages/core/editor-editing-panel/src/components/promotions/init.tsx | |
| 5716 | - var init$3 = /* @__PURE__ */ __name(() => { | |
| 5717 | - injectIntoStyleTab({ | |
| 5718 | - id: "custom-css", | |
| 5719 | - component: CustomCssSection, | |
| 5720 | - options: { overwrite: true } | |
| 5721 | - }); | |
| 5722 | - if (!window.elementorPro) { | |
| 5723 | - controlsRegistry.register("attributes", _elementor_editor_controls.AttributesControl, "two-columns"); | |
| 5724 | - controlsRegistry.register("display-conditions", _elementor_editor_controls.DisplayConditionsControl, "two-columns"); | |
| 5725 | - } | |
| 5726 | - }, "init"); | |
| 5727 | - | |
| 5728 | -//#endregion | |
| 5729 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/use-actions.ts | |
| 5730 | - var ACCORDION_ELEMENT_TYPE = "e-accordion"; | |
| 5731 | - var ACCORDION_ITEM_ELEMENT_TYPE = "e-accordion-item"; | |
| 5732 | - var ACCORDION_ITEM_HEADER_ELEMENT_TYPE$1 = "e-accordion-item-header"; | |
| 5733 | - var ACCORDION_ITEM_TITLE_ELEMENT_TYPE = "e-accordion-item-title"; | |
| 5734 | - var ACCORDION_ITEM_ICON_ELEMENT_TYPE = "e-accordion-item-icon"; | |
| 5735 | - var ACCORDION_ITEM_CONTENT_ELEMENT_TYPE = "e-accordion-item-content"; | |
| 5736 | - var PARAGRAPH_WIDGET_TYPE = "e-paragraph"; | |
| 5737 | - var getItemTitle$1 = /* @__PURE__ */ __name((position) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("Accordion Item %d", "elementor"), position), "getItemTitle"); | |
| 5738 | - var TRAILING_NUMBER$1 = /(\d+)\s*$/; | |
| 5739 | - var getNextItemNumber$1 = /* @__PURE__ */ __name((existingTitles) => { | |
| 5740 | - const taken = new Set(existingTitles.filter((title) => Boolean(title))); | |
| 5741 | - let next = existingTitles.reduce((max, title) => { | |
| 5742 | - const [, trailingNumber] = title?.match(TRAILING_NUMBER$1) ?? []; | |
| 5743 | - const parsed = trailingNumber ? Number(trailingNumber) : 0; | |
| 5744 | - return Number.isFinite(parsed) && parsed > max ? parsed : max; | |
| 5745 | - }, 0) + 1; | |
| 5746 | - while (taken.has(getItemTitle$1(next))) next += 1; | |
| 5747 | - return next; | |
| 5748 | - }, "getNextItemNumber"); | |
| 5749 | - var buildItemModel = (position, showIcon) => { | |
| 5750 | - const numberedTitle = getItemTitle$1(position); | |
| 5751 | - return { | |
| 5752 | - elType: ACCORDION_ITEM_ELEMENT_TYPE, | |
| 5753 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5754 | - editor_settings: { | |
| 5755 | - title: numberedTitle, | |
| 5756 | - initial_position: position | |
| 5757 | - }, | |
| 5758 | - elements: [{ | |
| 5759 | - elType: ACCORDION_ITEM_HEADER_ELEMENT_TYPE$1, | |
| 5760 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5761 | - editor_settings: { title: (0, _wordpress_i18n.__)("Header", "elementor") }, | |
| 5762 | - settings: { show_icon: _elementor_editor_props.booleanPropTypeUtil.create(showIcon) }, | |
| 5763 | - elements: [{ | |
| 5764 | - elType: ACCORDION_ITEM_TITLE_ELEMENT_TYPE, | |
| 5765 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5766 | - editor_settings: { title: (0, _wordpress_i18n.__)("Title", "elementor") }, | |
| 5767 | - elements: [{ | |
| 5768 | - elType: "widget", | |
| 5769 | - widgetType: PARAGRAPH_WIDGET_TYPE, | |
| 5770 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5771 | - elements: [], | |
| 5772 | - settings: { | |
| 5773 | - paragraph: _elementor_editor_props.escapedHtmlPropTypeUtil.create(numberedTitle), | |
| 5774 | - tag: { | |
| 5775 | - $$type: "string", | |
| 5776 | - value: "span" | |
| 5777 | - } | |
| 5778 | - } | |
| 5779 | - }] | |
| 5780 | - }, { | |
| 5781 | - elType: ACCORDION_ITEM_ICON_ELEMENT_TYPE, | |
| 5782 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5783 | - editor_settings: { title: (0, _wordpress_i18n.__)("Icon", "elementor") }, | |
| 5784 | - elements: [], | |
| 5785 | - hydrateDefaultChildren: true | |
| 5786 | - }] | |
| 5787 | - }, { | |
| 5788 | - elType: ACCORDION_ITEM_CONTENT_ELEMENT_TYPE, | |
| 5789 | - id: (0, _elementor_editor_elements.generateElementId)(), | |
| 5790 | - editor_settings: { title: (0, _wordpress_i18n.__)("Content", "elementor") }, | |
| 5791 | - elements: [], | |
| 5792 | - hydrateDefaultChildren: true | |
| 5793 | - }] | |
| 5794 | - }; | |
| 5795 | - }; | |
| 5796 | - var useActions$1 = /* @__PURE__ */ __name(() => { | |
| 5797 | - const addItem = ({ accordionId, existingTitles, items, showIcon }) => { | |
| 5798 | - const accordion = (0, _elementor_editor_elements.getContainer)(accordionId); | |
| 5799 | - if (!accordion) throw new Error("Accordion container not found"); | |
| 5800 | - const titles = [...existingTitles]; | |
| 5801 | - items.forEach(() => { | |
| 5802 | - const position = getNextItemNumber$1(titles); | |
| 5803 | - (0, _elementor_editor_elements.createElements)({ | |
| 5804 | - title: (0, _wordpress_i18n.__)("Accordion", "elementor"), | |
| 5805 | - elements: [{ | |
| 5806 | - container: accordion, | |
| 5807 | - model: buildItemModel(position, showIcon) | |
| 5808 | - }] | |
| 5809 | - }); | |
| 5810 | - titles.push(getItemTitle$1(position)); | |
| 5811 | - }); | |
| 5812 | - }; | |
| 5813 | - const removeItem = ({ items }) => { | |
| 5814 | - (0, _elementor_editor_elements.removeElements)({ | |
| 5815 | - title: (0, _wordpress_i18n.__)("Accordion", "elementor"), | |
| 5816 | - elementIds: items.map(({ item }) => item.id) | |
| 5817 | - }); | |
| 5818 | - }; | |
| 5819 | - const duplicateItem = ({ items }) => { | |
| 5820 | - (0, _elementor_editor_elements.duplicateElements)({ | |
| 5821 | - title: (0, _wordpress_i18n.__)("Duplicate Accordion Item", "elementor"), | |
| 5822 | - elementIds: items.map(({ item }) => item.id) | |
| 5823 | - }); | |
| 5824 | - }; | |
| 5825 | - const moveItem = ({ accordionId, movedElementId, toIndex }) => { | |
| 5826 | - const accordion = (0, _elementor_editor_elements.getContainer)(accordionId); | |
| 5827 | - const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId); | |
| 5828 | - if (!accordion || !movedElement) throw new Error("Accordion item or container not found"); | |
| 5829 | - (0, _elementor_editor_elements.moveElements)({ | |
| 5830 | - title: (0, _wordpress_i18n.__)("Reorder Accordion Items", "elementor"), | |
| 5831 | - moves: [{ | |
| 5832 | - element: movedElement, | |
| 5833 | - targetContainer: accordion, | |
| 5834 | - options: { at: toIndex } | |
| 5835 | - }] | |
| 5836 | - }); | |
| 5837 | - }; | |
| 5838 | - return { | |
| 5839 | - addItem, | |
| 5840 | - removeItem, | |
| 5841 | - duplicateItem, | |
| 5842 | - moveItem | |
| 5843 | - }; | |
| 5844 | - }, "useActions"); | |
| 5845 | - | |
| 5846 | -//#endregion | |
| 5847 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/use-show-icon-write-through.ts | |
| 5848 | - var ACCORDION_ITEM_HEADER_ELEMENT_TYPE = "e-accordion-item-header"; | |
| 5849 | - var cascadeShowIconToHeaders = (0, _elementor_editor_v1_adapters.undoable)({ | |
| 5850 | - do: ({ accordionId, showIcon }) => { | |
| 5851 | - const headerIds = getAccordionHeaderIds(accordionId); | |
| 5852 | - const previous = Object.fromEntries(headerIds.map((headerId) => [headerId, (0, _elementor_editor_elements.getElementSettings)(headerId, ["show_icon"]).show_icon])); | |
| 5853 | - headerIds.forEach((headerId) => { | |
| 5854 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 5855 | - id: headerId, | |
| 5856 | - props: { show_icon: _elementor_editor_props.booleanPropTypeUtil.create(showIcon) }, | |
| 5857 | - withHistory: false | |
| 5858 | - }); | |
| 5859 | - }); | |
| 5860 | - return { previous }; | |
| 5861 | - }, | |
| 5862 | - undo: (_payload, { previous }) => { | |
| 5863 | - Object.entries(previous).forEach(([headerId, previousValue]) => { | |
| 5864 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 5865 | - id: headerId, | |
| 5866 | - props: { show_icon: previousValue ?? null }, | |
| 5867 | - withHistory: false | |
| 5868 | - }); | |
| 5869 | - }); | |
| 5870 | - } | |
| 5871 | - }, { | |
| 5872 | - title: (0, _wordpress_i18n.__)("Accordion", "elementor"), | |
| 5873 | - subtitle: (0, _wordpress_i18n.__)("Show Icon", "elementor"), | |
| 5874 | - debounce: { wait: 800 } | |
| 5875 | - }); | |
| 5876 | - function getAccordionHeaderIds(accordionId) { | |
| 5877 | - return ((0, _elementor_editor_elements.getContainer)(accordionId)?.children ?? []).filter((child) => child.model.get("elType") === ACCORDION_ITEM_ELEMENT_TYPE).map((item) => item.children?.find((child) => child.model.get("elType") === ACCORDION_ITEM_HEADER_ELEMENT_TYPE)).filter((header) => Boolean(header)).map((header) => header.id); | |
| 5878 | - } | |
| 5879 | - function useShowIconWriteThrough(accordionId, showIcon) { | |
| 5880 | - const previousRef = (0, react.useRef)(null); | |
| 5881 | - (0, react.useEffect)(() => { | |
| 5882 | - const previous = previousRef.current; | |
| 5883 | - previousRef.current = { | |
| 5884 | - accordionId, | |
| 5885 | - showIcon | |
| 5886 | - }; | |
| 5887 | - if (!previous || previous.accordionId !== accordionId || previous.showIcon === showIcon) return; | |
| 5888 | - cascadeShowIconToHeaders({ | |
| 5889 | - accordionId, | |
| 5890 | - showIcon | |
| 5891 | - }); | |
| 5892 | - }, [accordionId, showIcon]); | |
| 5893 | - } | |
| 5894 | - | |
| 5895 | -//#endregion | |
| 5896 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/accordion-items-control/accordion-items-control.tsx | |
| 5897 | - var AccordionItemsControl = ({ label }) => { | |
| 5898 | - const { element, settings } = useElement(); | |
| 5899 | - const { addItem, duplicateItem, moveItem, removeItem } = useActions$1(); | |
| 5900 | - const { [ACCORDION_ITEM_ELEMENT_TYPE]: items } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [ACCORDION_ELEMENT_TYPE]: ACCORDION_ITEM_ELEMENT_TYPE }, { includeSelfAsParent: true }); | |
| 5901 | - const showIcon = _elementor_editor_props.booleanPropTypeUtil.extract(settings.show_icon) ?? true; | |
| 5902 | - useShowIconWriteThrough(element.id, showIcon); | |
| 5903 | - const repeaterValues = items.map((item, index) => { | |
| 5904 | - return { | |
| 5905 | - id: item.id, | |
| 5906 | - title: item.editorSettings?.title, | |
| 5907 | - index | |
| 5908 | - }; | |
| 5909 | - }); | |
| 5910 | - const setValue = (_newValues, _options, meta) => { | |
| 5911 | - if (meta?.action?.type === "add") return addItem({ | |
| 5912 | - accordionId: element.id, | |
| 5913 | - existingTitles: repeaterValues.map(({ title }) => title), | |
| 5914 | - items: meta.action.payload, | |
| 5915 | - showIcon | |
| 5916 | - }); | |
| 5917 | - if (meta?.action?.type === "remove") return removeItem({ items: meta.action.payload }); | |
| 5918 | - if (meta?.action?.type === "duplicate") return duplicateItem({ items: meta.action.payload }); | |
| 5919 | - if (meta?.action?.type === "reorder") { | |
| 5920 | - const { from, to } = meta.action.payload; | |
| 5921 | - return moveItem({ | |
| 5922 | - accordionId: element.id, | |
| 5923 | - movedElementId: items[from].id, | |
| 5924 | - toIndex: to | |
| 5925 | - }); | |
| 5926 | - } | |
| 5927 | - }; | |
| 5928 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, { | |
| 5929 | - showToggle: false, | |
| 5930 | - values: repeaterValues, | |
| 5931 | - setValues: setValue, | |
| 5932 | - showRemove: repeaterValues.length > 1, | |
| 5933 | - label, | |
| 5934 | - adornment: () => null, | |
| 5935 | - itemSettings: { | |
| 5936 | - getId: ({ item }) => item.id, | |
| 5937 | - initialValues: { | |
| 5938 | - id: "", | |
| 5939 | - title: (0, _wordpress_i18n.__)("Accordion Item", "elementor") | |
| 5940 | - }, | |
| 5941 | - Label: ItemLabel$2, | |
| 5942 | - Content: ItemContent$2, | |
| 5943 | - Icon: () => null | |
| 5944 | - } | |
| 5945 | - }); | |
| 5946 | - }; | |
| 5947 | - var ItemLabel$2 = /* @__PURE__ */ __name(({ value }) => { | |
| 5948 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 5949 | - sx: { minHeight: 20 }, | |
| 5950 | - direction: "row", | |
| 5951 | - alignItems: "center", | |
| 5952 | - gap: 1.5 | |
| 5953 | - }, value.id ? /* @__PURE__ */ react.createElement(AccordionItemRepeaterLabel, { | |
| 5954 | - elementId: value.id, | |
| 5955 | - fallbackTitle: value.title | |
| 5956 | - }) : /* @__PURE__ */ react.createElement("span", null, value?.title)); | |
| 5957 | - }, "ItemLabel"); | |
| 5958 | - var AccordionItemRepeaterLabel = ({ elementId, fallbackTitle }) => { | |
| 5959 | - const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? fallbackTitle ?? ""; | |
| 5960 | - return /* @__PURE__ */ react.createElement("span", null, label); | |
| 5961 | - }; | |
| 5962 | - var ItemContent$2 = /* @__PURE__ */ __name(({ value }) => { | |
| 5963 | - if (!value.id) return null; | |
| 5964 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 5965 | - p: 2, | |
| 5966 | - gap: 1.5 | |
| 5967 | - }, /* @__PURE__ */ react.createElement(ItemNameControl, { elementId: value.id })); | |
| 5968 | - }, "ItemContent"); | |
| 5969 | - var ItemNameControl = ({ elementId }) => { | |
| 5970 | - const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? ""; | |
| 5971 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, { | |
| 5972 | - size: "tiny", | |
| 5973 | - value: label, | |
| 5974 | - onChange: ({ target }) => { | |
| 5975 | - (0, _elementor_editor_elements.updateElementEditorSettings)({ | |
| 5976 | - elementId, | |
| 5977 | - settings: { title: target.value } | |
| 5978 | - }); | |
| 5979 | - } | |
| 5980 | - })); | |
| 5981 | - }; | |
| 5982 | - | |
| 5983 | -//#endregion | |
| 5984 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/list-actions.ts | |
| 5985 | - var LIST_ITEM_ELEMENT_TYPE = "e-list-item"; | |
| 5986 | - var TRAILING_NUMBER = /(\d+)\s*$/; | |
| 5987 | - var getItemTitle = (position) => `Item ${position}`; | |
| 5988 | - var getNextItemNumber = (existingTitles) => { | |
| 5989 | - const taken = new Set(existingTitles.filter((title) => Boolean(title))); | |
| 5990 | - let next = existingTitles.reduce((max, title) => { | |
| 5991 | - const [, trailingNumber] = title?.match(TRAILING_NUMBER) ?? []; | |
| 5992 | - const parsed = trailingNumber ? Number(trailingNumber) : 0; | |
| 5993 | - return Number.isFinite(parsed) && parsed > max ? parsed : max; | |
| 5994 | - }, 0) + 1; | |
| 5995 | - while (taken.has(getItemTitle(next))) next += 1; | |
| 5996 | - return next; | |
| 5997 | - }; | |
| 5998 | - var duplicateItem = ({ items }) => { | |
| 5999 | - (0, _elementor_editor_elements.duplicateElements)({ | |
| 6000 | - elementIds: items.map(({ item }) => item.id), | |
| 6001 | - title: (0, _wordpress_i18n.__)("Duplicate List Item", "elementor") | |
| 6002 | - }); | |
| 6003 | - }; | |
| 6004 | - var moveItem = ({ toIndex, listContainerId, movedElementId }) => { | |
| 6005 | - const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId); | |
| 6006 | - const listContainer = (0, _elementor_editor_elements.getContainer)(listContainerId); | |
| 6007 | - if (!movedElement || !listContainer) throw new Error("List item or list container not found"); | |
| 6008 | - (0, _elementor_editor_elements.moveElements)({ | |
| 6009 | - title: (0, _wordpress_i18n.__)("Reorder List Items", "elementor"), | |
| 6010 | - moves: [{ | |
| 6011 | - element: movedElement, | |
| 6012 | - targetContainer: listContainer, | |
| 6013 | - options: { at: toIndex } | |
| 6014 | - }] | |
| 6015 | - }); | |
| 6016 | - }; | |
| 6017 | - var removeItem = ({ items }) => { | |
| 6018 | - (0, _elementor_editor_elements.removeElements)({ | |
| 6019 | - title: (0, _wordpress_i18n.__)("List Items", "elementor"), | |
| 6020 | - elementIds: items.map(({ item }) => item.id) | |
| 6021 | - }); | |
| 6022 | - }; | |
| 6023 | - var addItem = ({ existingTitles, listContainerId, items, showMarkers }) => { | |
| 6024 | - const listContainer = (0, _elementor_editor_elements.getContainer)(listContainerId); | |
| 6025 | - if (!listContainer) throw new Error("List container not found"); | |
| 6026 | - const titles = [...existingTitles]; | |
| 6027 | - items.forEach(({ index }) => { | |
| 6028 | - const position = getNextItemNumber(titles); | |
| 6029 | - (0, _elementor_editor_elements.createElements)({ | |
| 6030 | - title: (0, _wordpress_i18n.__)("List Items", "elementor"), | |
| 6031 | - elements: [{ | |
| 6032 | - container: listContainer, | |
| 6033 | - model: { | |
| 6034 | - elType: LIST_ITEM_ELEMENT_TYPE, | |
| 6035 | - settings: { show_markers: _elementor_editor_props.booleanPropTypeUtil.create(showMarkers) }, | |
| 6036 | - hydrateDefaultChildren: true, | |
| 6037 | - editor_settings: { | |
| 6038 | - title: getItemTitle(position), | |
| 6039 | - initial_position: position | |
| 6040 | - } | |
| 6041 | - }, | |
| 6042 | - options: { at: index } | |
| 6043 | - }] | |
| 6044 | - }); | |
| 6045 | - titles.push(getItemTitle(position)); | |
| 6046 | - }); | |
| 6047 | - }; | |
| 6048 | - | |
| 6049 | -//#endregion | |
| 6050 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/use-show-markers-write-through.ts | |
| 6051 | - var cascadeShowMarkersToItems = (0, _elementor_editor_v1_adapters.undoable)({ | |
| 6052 | - do: ({ listId, showMarkers }) => { | |
| 6053 | - const itemIds = getListItemIds(listId); | |
| 6054 | - const previous = Object.fromEntries(itemIds.map((itemId) => [itemId, (0, _elementor_editor_elements.getElementSettings)(itemId, ["show_markers"]).show_markers])); | |
| 6055 | - itemIds.forEach((itemId) => { | |
| 6056 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 6057 | - id: itemId, | |
| 6058 | - props: { show_markers: _elementor_editor_props.booleanPropTypeUtil.create(showMarkers) }, | |
| 6059 | - withHistory: false | |
| 6060 | - }); | |
| 6061 | - }); | |
| 6062 | - return { previous }; | |
| 6063 | - }, | |
| 6064 | - undo: (_payload, { previous }) => { | |
| 6065 | - Object.entries(previous).forEach(([itemId, previousValue]) => { | |
| 6066 | - (0, _elementor_editor_elements.updateElementSettings)({ | |
| 6067 | - id: itemId, | |
| 6068 | - props: { show_markers: previousValue ?? null }, | |
| 6069 | - withHistory: false | |
| 6070 | - }); | |
| 6071 | - }); | |
| 6072 | - } | |
| 6073 | - }, { | |
| 6074 | - title: (0, _wordpress_i18n.__)("List", "elementor"), | |
| 6075 | - subtitle: (0, _wordpress_i18n.__)("Show Markers", "elementor"), | |
| 6076 | - debounce: { wait: 800 } | |
| 6077 | - }); | |
| 6078 | - function getListItemIds(listId) { | |
| 6079 | - return ((0, _elementor_editor_elements.getContainer)(listId)?.children ?? []).filter((child) => child.model.get("elType") === LIST_ITEM_ELEMENT_TYPE).map((item) => item.id); | |
| 6080 | - } | |
| 6081 | - function useShowMarkersWriteThrough(listId, showMarkers) { | |
| 6082 | - const previousRef = (0, react.useRef)(null); | |
| 6083 | - (0, react.useEffect)(() => { | |
| 6084 | - const previous = previousRef.current; | |
| 6085 | - previousRef.current = { | |
| 6086 | - listId, | |
| 6087 | - showMarkers | |
| 6088 | - }; | |
| 6089 | - if (!previous || previous.listId !== listId || previous.showMarkers === showMarkers) return; | |
| 6090 | - cascadeShowMarkersToItems({ | |
| 6091 | - listId, | |
| 6092 | - showMarkers | |
| 6093 | - }); | |
| 6094 | - }, [listId, showMarkers]); | |
| 6095 | - } | |
| 6096 | - | |
| 6097 | -//#endregion | |
| 6098 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/list-items-control/list-items-control.tsx | |
| 6099 | - var LIST_ELEMENT_TYPE = "e-list"; | |
| 6100 | - var getEffectiveListItemLabel = (label, fallbackLabel) => { | |
| 6101 | - return label?.trim() ? label : fallbackLabel; | |
| 6102 | - }; | |
| 6103 | - var getDefaultListItemLabel = (index) => { | |
| 6104 | - return `Item ${index + 1}`; | |
| 6105 | - }; | |
| 6106 | - var ListItemsControl = ({ label }) => { | |
| 6107 | - return /* @__PURE__ */ react.createElement(ListItemsControlContent, { label }); | |
| 6108 | - }; | |
| 6109 | - var ListItemsControlContent = ({ label }) => { | |
| 6110 | - const { element, settings } = useElement(); | |
| 6111 | - const { [LIST_ITEM_ELEMENT_TYPE]: listItems } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [LIST_ELEMENT_TYPE]: LIST_ITEM_ELEMENT_TYPE }, { includeSelfAsParent: true }); | |
| 6112 | - const showMarkers = _elementor_editor_props.booleanPropTypeUtil.extract(settings.show_markers) ?? true; | |
| 6113 | - useShowMarkersWriteThrough(element.id, showMarkers); | |
| 6114 | - const repeaterValues = listItems.map((item, index) => ({ | |
| 6115 | - id: item.id, | |
| 6116 | - title: item.editorSettings?.title ?? getDefaultListItemLabel(index), | |
| 6117 | - index | |
| 6118 | - })); | |
| 6119 | - const setValue = (_newValues, _options, meta) => { | |
| 6120 | - if (meta?.action?.type === "add") return addItem({ | |
| 6121 | - existingTitles: repeaterValues.map(({ title }) => title), | |
| 6122 | - listContainerId: element.id, | |
| 6123 | - items: meta.action.payload, | |
| 6124 | - showMarkers | |
| 6125 | - }); | |
| 6126 | - if (meta?.action?.type === "remove") return removeItem({ items: meta.action.payload }); | |
| 6127 | - if (meta?.action?.type === "duplicate") return duplicateItem({ items: meta.action.payload }); | |
| 6128 | - if (meta?.action?.type === "reorder") { | |
| 6129 | - const { from, to } = meta.action.payload; | |
| 6130 | - return moveItem({ | |
| 6131 | - toIndex: to, | |
| 6132 | - listContainerId: element.id, | |
| 6133 | - movedElementId: listItems[from].id | |
| 6134 | - }); | |
| 6135 | - } | |
| 6136 | - }; | |
| 6137 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, { | |
| 6138 | - showToggle: false, | |
| 6139 | - values: repeaterValues, | |
| 6140 | - setValues: setValue, | |
| 6141 | - showRemove: repeaterValues.length > 1, | |
| 6142 | - label, | |
| 6143 | - adornment: () => null, | |
| 6144 | - itemSettings: { | |
| 6145 | - getId: ({ item }) => item.id, | |
| 6146 | - initialValues: { | |
| 6147 | - id: "", | |
| 6148 | - title: "Item" | |
| 6149 | - }, | |
| 6150 | - Label: ItemLabel$1, | |
| 6151 | - Content: ItemContent$1, | |
| 6152 | - Icon: () => null | |
| 6153 | - } | |
| 6154 | - }); | |
| 6155 | - }; | |
| 6156 | - var ItemLabel$1 = /* @__PURE__ */ __name(({ value, index }) => { | |
| 6157 | - const fallbackLabel = value.title ?? getDefaultListItemLabel(index); | |
| 6158 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6159 | - sx: { minHeight: 20 }, | |
| 6160 | - direction: "row", | |
| 6161 | - alignItems: "center", | |
| 6162 | - gap: 1.5 | |
| 6163 | - }, value.id ? /* @__PURE__ */ react.createElement(ListItemRepeaterLabel, { | |
| 6164 | - elementId: value.id, | |
| 6165 | - fallbackLabel | |
| 6166 | - }) : /* @__PURE__ */ react.createElement("span", null, fallbackLabel)); | |
| 6167 | - }, "ItemLabel"); | |
| 6168 | - var ItemContent$1 = /* @__PURE__ */ __name(({ value }) => { | |
| 6169 | - if (!value.id) return null; | |
| 6170 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6171 | - p: 2, | |
| 6172 | - gap: 1.5 | |
| 6173 | - }, /* @__PURE__ */ react.createElement(ListItemLabelControl, { | |
| 6174 | - elementId: value.id, | |
| 6175 | - fallbackLabel: value.title ?? "" | |
| 6176 | - })); | |
| 6177 | - }, "ItemContent"); | |
| 6178 | - var ListItemRepeaterLabel = ({ elementId, fallbackLabel }) => { | |
| 6179 | - const editorSettings = (0, _elementor_editor_elements.useElementEditorSettings)(elementId); | |
| 6180 | - const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel); | |
| 6181 | - return /* @__PURE__ */ react.createElement("span", null, label); | |
| 6182 | - }; | |
| 6183 | - var ListItemLabelControl = ({ elementId, fallbackLabel }) => { | |
| 6184 | - const editorSettings = (0, _elementor_editor_elements.useElementEditorSettings)(elementId); | |
| 6185 | - const label = getEffectiveListItemLabel(editorSettings?.title, fallbackLabel); | |
| 6186 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Item name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, { | |
| 6187 | - size: "tiny", | |
| 6188 | - value: label, | |
| 6189 | - onChange: ({ target }) => { | |
| 6190 | - (0, _elementor_editor_elements.updateElementEditorSettings)({ | |
| 6191 | - elementId, | |
| 6192 | - settings: { title: target.value } | |
| 6193 | - }); | |
| 6194 | - } | |
| 6195 | - })); | |
| 6196 | - }; | |
| 6197 | - | |
| 6198 | -//#endregion | |
| 6199 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/get-element-by-type.ts | |
| 6200 | - var getElementByType = (elementId, type) => { | |
| 6201 | - const currentElement = (0, _elementor_editor_elements.getContainer)(elementId); | |
| 6202 | - if (!currentElement) return null; | |
| 6203 | - if (currentElement.model.get("elType") === type) return currentElement; | |
| 6204 | - return currentElement.children?.findRecursive?.((child) => child.model.get("elType") === type) ?? null; | |
| 6205 | - }; | |
| 6206 | - | |
| 6207 | -//#endregion | |
| 6208 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/use-actions.ts | |
| 6209 | - var TAB_ELEMENT_TYPE = "e-tab"; | |
| 6210 | - var TAB_CONTENT_ELEMENT_TYPE = "e-tab-content"; | |
| 6211 | - var useActions = () => { | |
| 6212 | - const { value, setValue: setDefaultActiveTab } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil); | |
| 6213 | - const defaultActiveTab = value ?? 0; | |
| 6214 | - const duplicateItem = ({ items, tabContentAreaId }) => { | |
| 6215 | - const newDefault = calculateDefaultOnDuplicate({ | |
| 6216 | - items, | |
| 6217 | - defaultActiveTab | |
| 6218 | - }); | |
| 6219 | - items.forEach(({ item, index }) => { | |
| 6220 | - const tabId = item.id; | |
| 6221 | - const tabContentId = (0, _elementor_editor_elements.getContainer)(tabContentAreaId)?.children?.[index]?.id; | |
| 6222 | - if (!tabContentId) throw new Error("Original content ID is required for duplication"); | |
| 6223 | - (0, _elementor_editor_elements.duplicateElements)({ | |
| 6224 | - elementIds: [tabId, tabContentId], | |
| 6225 | - title: (0, _wordpress_i18n.__)("Duplicate Tab", "elementor"), | |
| 6226 | - onDuplicateElements: () => { | |
| 6227 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false }); | |
| 6228 | - }, | |
| 6229 | - onRestoreElements: () => { | |
| 6230 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false }); | |
| 6231 | - } | |
| 6232 | - }); | |
| 6233 | - }); | |
| 6234 | - }; | |
| 6235 | - const moveItem = ({ toIndex, tabsMenuId, tabContentAreaId, movedElementId, movedElementIndex }) => { | |
| 6236 | - const tabContentContainer = (0, _elementor_editor_elements.getContainer)(tabContentAreaId); | |
| 6237 | - const tabContent = tabContentContainer?.children?.[movedElementIndex]; | |
| 6238 | - const movedElement = (0, _elementor_editor_elements.getContainer)(movedElementId); | |
| 6239 | - const tabsMenu = (0, _elementor_editor_elements.getContainer)(tabsMenuId); | |
| 6240 | - if (!tabContent) throw new Error("Content element is required"); | |
| 6241 | - if (!movedElement || !tabsMenu) throw new Error("Tab element or menu not found"); | |
| 6242 | - const newDefault = calculateDefaultOnMove({ | |
| 6243 | - from: movedElementIndex, | |
| 6244 | - to: toIndex, | |
| 6245 | - defaultActiveTab | |
| 6246 | - }); | |
| 6247 | - (0, _elementor_editor_elements.moveElements)({ | |
| 6248 | - title: (0, _wordpress_i18n.__)("Reorder Tabs", "elementor"), | |
| 6249 | - moves: [{ | |
| 6250 | - element: movedElement, | |
| 6251 | - targetContainer: tabsMenu, | |
| 6252 | - options: { at: toIndex } | |
| 6253 | - }, { | |
| 6254 | - element: tabContent, | |
| 6255 | - targetContainer: tabContentContainer, | |
| 6256 | - options: { at: toIndex } | |
| 6257 | - }], | |
| 6258 | - onMoveElements: () => { | |
| 6259 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false }); | |
| 6260 | - }, | |
| 6261 | - onRestoreElements: () => { | |
| 6262 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false }); | |
| 6263 | - } | |
| 6264 | - }); | |
| 6265 | - }; | |
| 6266 | - const removeItem = ({ items, tabContentAreaId }) => { | |
| 6267 | - const newDefault = calculateDefaultOnRemove({ | |
| 6268 | - items, | |
| 6269 | - defaultActiveTab | |
| 6270 | - }); | |
| 6271 | - (0, _elementor_editor_elements.removeElements)({ | |
| 6272 | - title: (0, _wordpress_i18n.__)("Tabs", "elementor"), | |
| 6273 | - elementIds: items.flatMap(({ item, index }) => { | |
| 6274 | - const tabId = item.id; | |
| 6275 | - const tabContentId = (0, _elementor_editor_elements.getContainer)(tabContentAreaId)?.children?.[index]?.id; | |
| 6276 | - if (!tabContentId) throw new Error("Content ID is required"); | |
| 6277 | - return [tabId, tabContentId]; | |
| 6278 | - }), | |
| 6279 | - onRemoveElements: () => { | |
| 6280 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(newDefault, {}, { withHistory: false }); | |
| 6281 | - }, | |
| 6282 | - onRestoreElements: () => { | |
| 6283 | - if (newDefault !== defaultActiveTab) setDefaultActiveTab(defaultActiveTab, {}, { withHistory: false }); | |
| 6284 | - } | |
| 6285 | - }); | |
| 6286 | - }; | |
| 6287 | - const addItem = ({ tabContentAreaId, tabsMenuId, items }) => { | |
| 6288 | - const tabContentArea = (0, _elementor_editor_elements.getContainer)(tabContentAreaId); | |
| 6289 | - const tabsMenu = (0, _elementor_editor_elements.getContainer)(tabsMenuId); | |
| 6290 | - if (!tabContentArea || !tabsMenu) throw new Error("Tab containers not found"); | |
| 6291 | - items.forEach(({ index }) => { | |
| 6292 | - const position = index + 1; | |
| 6293 | - (0, _elementor_editor_elements.createElements)({ | |
| 6294 | - title: (0, _wordpress_i18n.__)("Tabs", "elementor"), | |
| 6295 | - elements: [{ | |
| 6296 | - container: tabContentArea, | |
| 6297 | - model: { | |
| 6298 | - elType: TAB_CONTENT_ELEMENT_TYPE, | |
| 6299 | - editor_settings: { | |
| 6300 | - title: `Tab ${position} content`, | |
| 6301 | - initial_position: position | |
| 6302 | - } | |
| 6303 | - } | |
| 6304 | - }, { | |
| 6305 | - container: tabsMenu, | |
| 6306 | - model: { | |
| 6307 | - elType: TAB_ELEMENT_TYPE, | |
| 6308 | - editor_settings: { | |
| 6309 | - title: `Tab ${position} trigger`, | |
| 6310 | - initial_position: position | |
| 6311 | - } | |
| 6312 | - } | |
| 6313 | - }] | |
| 6314 | - }); | |
| 6315 | - }); | |
| 6316 | - }; | |
| 6317 | - return { | |
| 6318 | - duplicateItem, | |
| 6319 | - moveItem, | |
| 6320 | - removeItem, | |
| 6321 | - addItem | |
| 6322 | - }; | |
| 6323 | - }; | |
| 6324 | - var calculateDefaultOnMove = ({ from, to, defaultActiveTab }) => { | |
| 6325 | - if (from === defaultActiveTab) return to; | |
| 6326 | - if (from < defaultActiveTab && to >= defaultActiveTab) return defaultActiveTab - 1; | |
| 6327 | - if (from > defaultActiveTab && to <= defaultActiveTab) return defaultActiveTab + 1; | |
| 6328 | - return defaultActiveTab; | |
| 6329 | - }; | |
| 6330 | - var calculateDefaultOnRemove = ({ items, defaultActiveTab }) => { | |
| 6331 | - if (items.some(({ index }) => index === defaultActiveTab)) return 0; | |
| 6332 | - return defaultActiveTab - items.reduce((acc, { index }) => index < defaultActiveTab ? acc + 1 : acc, 0); | |
| 6333 | - }; | |
| 6334 | - var calculateDefaultOnDuplicate = ({ items, defaultActiveTab }) => { | |
| 6335 | - return defaultActiveTab + items.reduce((acc, { index }) => { | |
| 6336 | - return index < defaultActiveTab ? acc + 1 : acc; | |
| 6337 | - }, 0); | |
| 6338 | - }; | |
| 6339 | - | |
| 6340 | -//#endregion | |
| 6341 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/tabs-control.tsx | |
| 6342 | - var TAB_MENU_ELEMENT_TYPE = "e-tabs-menu"; | |
| 6343 | - var TAB_CONTENT_AREA_ELEMENT_TYPE = "e-tabs-content-area"; | |
| 6344 | - var TabsControl = ({ label }) => { | |
| 6345 | - return /* @__PURE__ */ react.createElement(SettingsField, { | |
| 6346 | - bind: "default-active-tab", | |
| 6347 | - propDisplayName: (0, _wordpress_i18n.__)("Tabs", "elementor") | |
| 6348 | - }, /* @__PURE__ */ react.createElement(TabsControlContent, { label })); | |
| 6349 | - }; | |
| 6350 | - var TabsControlContent = ({ label }) => { | |
| 6351 | - const { element } = useElement(); | |
| 6352 | - const { addItem, duplicateItem, moveItem, removeItem } = useActions(); | |
| 6353 | - const { [TAB_ELEMENT_TYPE]: tabLinks } = (0, _elementor_editor_elements.useElementChildren)(element.id, { [TAB_MENU_ELEMENT_TYPE]: TAB_ELEMENT_TYPE }); | |
| 6354 | - const tabList = getElementByType(element.id, TAB_MENU_ELEMENT_TYPE); | |
| 6355 | - const tabContentArea = getElementByType(element.id, TAB_CONTENT_AREA_ELEMENT_TYPE); | |
| 6356 | - const repeaterValues = tabLinks.map((tabLink, index) => { | |
| 6357 | - return { | |
| 6358 | - id: tabLink.id, | |
| 6359 | - title: tabLink.editorSettings?.title, | |
| 6360 | - index | |
| 6361 | - }; | |
| 6362 | - }); | |
| 6363 | - const setValue = (_newValues, _options, meta) => { | |
| 6364 | - if (meta?.action?.type === "add") { | |
| 6365 | - const items = meta.action.payload; | |
| 6366 | - return addItem({ | |
| 6367 | - tabContentAreaId: tabContentArea.id, | |
| 6368 | - items, | |
| 6369 | - tabsMenuId: tabList.id | |
| 6370 | - }); | |
| 6371 | - } | |
| 6372 | - if (meta?.action?.type === "remove") { | |
| 6373 | - const items = meta.action.payload; | |
| 6374 | - return removeItem({ | |
| 6375 | - items, | |
| 6376 | - tabContentAreaId: tabContentArea.id | |
| 6377 | - }); | |
| 6378 | - } | |
| 6379 | - if (meta?.action?.type === "duplicate") { | |
| 6380 | - const items = meta.action.payload; | |
| 6381 | - return duplicateItem({ | |
| 6382 | - items, | |
| 6383 | - tabContentAreaId: tabContentArea.id | |
| 6384 | - }); | |
| 6385 | - } | |
| 6386 | - if (meta?.action?.type === "reorder") { | |
| 6387 | - const { from, to } = meta.action.payload; | |
| 6388 | - return moveItem({ | |
| 6389 | - toIndex: to, | |
| 6390 | - tabsMenuId: tabList.id, | |
| 6391 | - tabContentAreaId: tabContentArea.id, | |
| 6392 | - movedElementId: tabLinks[from].id, | |
| 6393 | - movedElementIndex: from | |
| 6394 | - }); | |
| 6395 | - } | |
| 6396 | - }; | |
| 6397 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.Repeater, { | |
| 6398 | - showToggle: false, | |
| 6399 | - values: repeaterValues, | |
| 6400 | - setValues: setValue, | |
| 6401 | - showRemove: repeaterValues.length > 1, | |
| 6402 | - label, | |
| 6403 | - itemSettings: { | |
| 6404 | - getId: ({ item }) => item.id, | |
| 6405 | - initialValues: { | |
| 6406 | - id: "", | |
| 6407 | - title: "Tab" | |
| 6408 | - }, | |
| 6409 | - Label: ItemLabel, | |
| 6410 | - Content: ItemContent, | |
| 6411 | - Icon: () => null | |
| 6412 | - } | |
| 6413 | - }); | |
| 6414 | - }; | |
| 6415 | - var ItemLabel = ({ value, index }) => { | |
| 6416 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6417 | - sx: { minHeight: 20 }, | |
| 6418 | - direction: "row", | |
| 6419 | - alignItems: "center", | |
| 6420 | - gap: 1.5 | |
| 6421 | - }, value.id ? /* @__PURE__ */ react.createElement(TabRepeaterLabel, { | |
| 6422 | - elementId: value.id, | |
| 6423 | - fallbackTitle: value.title | |
| 6424 | - }) : /* @__PURE__ */ react.createElement("span", null, value?.title), /* @__PURE__ */ react.createElement(ItemDefaultTab, { index })); | |
| 6425 | - }; | |
| 6426 | - var TabRepeaterLabel = ({ elementId, fallbackTitle }) => { | |
| 6427 | - const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? fallbackTitle ?? ""; | |
| 6428 | - return /* @__PURE__ */ react.createElement("span", null, label); | |
| 6429 | - }; | |
| 6430 | - var ItemDefaultTab = ({ index }) => { | |
| 6431 | - const { value: defaultItem } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil); | |
| 6432 | - if (!(defaultItem === index)) return null; | |
| 6433 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 6434 | - size: "tiny", | |
| 6435 | - shape: "rounded", | |
| 6436 | - label: (0, _wordpress_i18n.__)("Default", "elementor") | |
| 6437 | - }); | |
| 6438 | - }; | |
| 6439 | - var ItemContent = ({ value, index }) => { | |
| 6440 | - if (!value.id) return null; | |
| 6441 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6442 | - p: 2, | |
| 6443 | - gap: 1.5 | |
| 6444 | - }, /* @__PURE__ */ react.createElement(TabLabelControl, { elementId: value.id }), /* @__PURE__ */ react.createElement(SettingsField, { | |
| 6445 | - bind: "default-active-tab", | |
| 6446 | - propDisplayName: (0, _wordpress_i18n.__)("Tabs", "elementor") | |
| 6447 | - }, /* @__PURE__ */ react.createElement(DefaultTabControl, { tabIndex: index }))); | |
| 6448 | - }; | |
| 6449 | - var DefaultTabControl = ({ tabIndex }) => { | |
| 6450 | - const { value, setValue } = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.numberPropTypeUtil); | |
| 6451 | - const isDefault = value === tabIndex; | |
| 6452 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6453 | - direction: "row", | |
| 6454 | - alignItems: "center", | |
| 6455 | - justifyContent: "space-between", | |
| 6456 | - gap: 2 | |
| 6457 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Set as default tab", "elementor")), /* @__PURE__ */ react.createElement(ConditionalTooltip, { | |
| 6458 | - showTooltip: isDefault, | |
| 6459 | - placement: "right" | |
| 6460 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Switch, { | |
| 6461 | - size: "small", | |
| 6462 | - checked: isDefault, | |
| 6463 | - disabled: isDefault, | |
| 6464 | - onChange: ({ target }) => { | |
| 6465 | - setValue(target.checked ? tabIndex : null); | |
| 6466 | - }, | |
| 6467 | - inputProps: { ...isDefault ? { style: { | |
| 6468 | - opacity: 0, | |
| 6469 | - cursor: "not-allowed" | |
| 6470 | - } } : {} } | |
| 6471 | - }))); | |
| 6472 | - }; | |
| 6473 | - var TabLabelControl = ({ elementId }) => { | |
| 6474 | - const label = (0, _elementor_editor_elements.useElementEditorSettings)(elementId)?.title ?? ""; | |
| 6475 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { gap: 1 }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, (0, _wordpress_i18n.__)("Tab name", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.TextField, { | |
| 6476 | - size: "tiny", | |
| 6477 | - value: label, | |
| 6478 | - onChange: ({ target }) => { | |
| 6479 | - (0, _elementor_editor_elements.updateElementEditorSettings)({ | |
| 6480 | - elementId, | |
| 6481 | - settings: { title: target.value } | |
| 6482 | - }); | |
| 6483 | - } | |
| 6484 | - })); | |
| 6485 | - }; | |
| 6486 | - var ConditionalTooltip = ({ showTooltip, children }) => { | |
| 6487 | - if (!showTooltip) return children; | |
| 6488 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, { | |
| 6489 | - arrow: false, | |
| 6490 | - content: /* @__PURE__ */ react.createElement(_elementor_ui.Alert, { | |
| 6491 | - color: "secondary", | |
| 6492 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, { fontSize: "tiny" }), | |
| 6493 | - size: "small", | |
| 6494 | - sx: { width: 288 } | |
| 6495 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("To change the default tab, simply set another tab as default.", "elementor"))) | |
| 6496 | - }, /* @__PURE__ */ react.createElement("span", null, children)); | |
| 6497 | - }; | |
| 6498 | - | |
| 6499 | -//#endregion | |
| 6500 | -//#region packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/registry.ts | |
| 6501 | - var controlTypes = { | |
| 6502 | - "list-items": { | |
| 6503 | - component: ListItemsControl, | |
| 6504 | - layout: "full" | |
| 6505 | - }, | |
| 6506 | - tabs: { | |
| 6507 | - component: TabsControl, | |
| 6508 | - layout: "full" | |
| 6509 | - }, | |
| 6510 | - "accordion-items": { | |
| 6511 | - component: AccordionItemsControl, | |
| 6512 | - layout: "full" | |
| 6513 | - } | |
| 6514 | - }; | |
| 6515 | - var registerElementControls = () => { | |
| 6516 | - Object.entries(controlTypes).forEach(([type, { component, layout }]) => { | |
| 6517 | - controlsRegistry.register(type, component, layout); | |
| 6518 | - }); | |
| 6519 | - }; | |
| 6520 | - | |
| 6521 | -//#endregion | |
| 6522 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts | |
| 6523 | - var config = { expired: false }; | |
| 6524 | - var listeners = /* @__PURE__ */ new Set(); | |
| 6525 | - function setLicenseConfig(newConfig) { | |
| 6526 | - config = { | |
| 6527 | - ...config, | |
| 6528 | - ...newConfig | |
| 6529 | - }; | |
| 6530 | - listeners.forEach((listener) => listener()); | |
| 6531 | - } | |
| 6532 | - function getLicenseConfig() { | |
| 6533 | - return config; | |
| 6534 | - } | |
| 6535 | - function subscribe(listener) { | |
| 6536 | - listeners.add(listener); | |
| 6537 | - return () => listeners.delete(listener); | |
| 6538 | - } | |
| 6539 | - function useLicenseConfig() { | |
| 6540 | - return (0, react.useSyncExternalStore)(subscribe, getLicenseConfig, getLicenseConfig); | |
| 6541 | - } | |
| 6542 | - | |
| 6543 | -//#endregion | |
| 6544 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/sync/get-atomic-dynamic-tags.ts | |
| 6545 | - var getAtomicDynamicTags = (shouldFilterByLicense = true) => { | |
| 6546 | - const { atomicDynamicTags } = (0, _elementor_editor_v1_adapters.getElementorConfig)(); | |
| 6547 | - if (!atomicDynamicTags) return null; | |
| 6548 | - return { | |
| 6549 | - tags: shouldFilterByLicense ? filterByLicense(atomicDynamicTags.tags) : atomicDynamicTags.tags, | |
| 6550 | - groups: atomicDynamicTags.groups | |
| 6551 | - }; | |
| 6552 | - }; | |
| 6553 | - var filterByLicense = (tags) => { | |
| 6554 | - const { expired } = getLicenseConfig(); | |
| 6555 | - if (expired) return Object.fromEntries(Object.entries(tags).filter(([, tag]) => !(tag?.meta?.origin === "elementor" && tag?.meta?.required_license))); | |
| 6556 | - return tags; | |
| 6557 | - }; | |
| 6558 | - | |
| 6559 | -//#endregion | |
| 6560 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/utils.ts | |
| 6561 | - var DYNAMIC_PROP_TYPE_KEY = "dynamic"; | |
| 6562 | - var dynamicPropTypeUtil = (0, _elementor_editor_props.createPropUtils)(DYNAMIC_PROP_TYPE_KEY, _elementor_schema.z.strictObject({ | |
| 6563 | - name: _elementor_schema.z.string(), | |
| 6564 | - group: _elementor_schema.z.string(), | |
| 6565 | - settings: _elementor_schema.z.any().optional() | |
| 6566 | - })); | |
| 6567 | - var isDynamicTagSupported = (tagName) => { | |
| 6568 | - return !!(0, _elementor_editor_v1_adapters.getElementorConfig)()?.atomicDynamicTags?.tags?.[tagName]; | |
| 6569 | - }; | |
| 6570 | - var isDynamicPropType = (prop) => prop.key === DYNAMIC_PROP_TYPE_KEY; | |
| 6571 | - var getDynamicPropType = (propType) => { | |
| 6572 | - const dynamicPropType = propType.kind === "union" && propType.prop_types[DYNAMIC_PROP_TYPE_KEY]; | |
| 6573 | - return dynamicPropType && isDynamicPropType(dynamicPropType) ? dynamicPropType : null; | |
| 6574 | - }; | |
| 6575 | - var isDynamicPropValue = (prop) => { | |
| 6576 | - return (0, _elementor_editor_props.isTransformable)(prop) && prop.$$type === DYNAMIC_PROP_TYPE_KEY; | |
| 6577 | - }; | |
| 6578 | - var supportsDynamic = (propType) => { | |
| 6579 | - return !!getDynamicPropType(propType); | |
| 6580 | - }; | |
| 6581 | - | |
| 6582 | -//#endregion | |
| 6583 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-tags.ts | |
| 6584 | - var usePropDynamicTags = () => { | |
| 6585 | - return usePropDynamicTagsInternal(true); | |
| 6586 | - }; | |
| 6587 | - var useAllPropDynamicTags = () => { | |
| 6588 | - return usePropDynamicTagsInternal(false); | |
| 6589 | - }; | |
| 6590 | - var usePropDynamicTagsInternal = (filterByLicense) => { | |
| 6591 | - let categories = []; | |
| 6592 | - const { propType } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 6593 | - if (propType) categories = getDynamicPropType(propType)?.settings.categories || []; | |
| 6594 | - return (0, react.useMemo)(() => getDynamicTagsByCategories(categories, filterByLicense), [categories.join(), filterByLicense]); | |
| 6595 | - }; | |
| 6596 | - var getDynamicTagsByCategories = (categories, filterByLicense) => { | |
| 6597 | - const { tags, groups } = getAtomicDynamicTags(filterByLicense) || {}; | |
| 6598 | - if (!categories.length || !tags || !groups) return []; | |
| 6599 | - const _categories = new Set(categories); | |
| 6600 | - const dynamicTags = []; | |
| 6601 | - const groupedFilteredTags = {}; | |
| 6602 | - for (const tag of Object.values(tags)) { | |
| 6603 | - if (!tag.categories.some((category) => _categories.has(category))) continue; | |
| 6604 | - if (!groupedFilteredTags[tag.group]) groupedFilteredTags[tag.group] = []; | |
| 6605 | - groupedFilteredTags[tag.group].push(tag); | |
| 6606 | - } | |
| 6607 | - for (const group in groups) if (groupedFilteredTags[group]) dynamicTags.push(...groupedFilteredTags[group]); | |
| 6608 | - return dynamicTags; | |
| 6609 | - }; | |
| 6610 | - | |
| 6611 | -//#endregion | |
| 6612 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts | |
| 6613 | - var useDynamicTag = (tagName) => { | |
| 6614 | - const dynamicTags = useAllPropDynamicTags(); | |
| 6615 | - return (0, react.useMemo)(() => dynamicTags.find((tag) => tag.name === tagName) ?? null, [dynamicTags, tagName]); | |
| 6616 | - }; | |
| 6617 | - | |
| 6618 | -//#endregion | |
| 6619 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/components/background-control-dynamic-tag.tsx | |
| 6620 | - var BackgroundControlDynamicTagIcon = () => /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "tiny" }); | |
| 6621 | - var BackgroundControlDynamicTagLabel = ({ value }) => { | |
| 6622 | - const context = (0, _elementor_editor_controls.useBoundProp)(_elementor_editor_props.backgroundImageOverlayPropTypeUtil); | |
| 6623 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 6624 | - ...context, | |
| 6625 | - value: value.value | |
| 6626 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "image" }, /* @__PURE__ */ react.createElement(Wrapper, { rawValue: value.value }))); | |
| 6627 | - }; | |
| 6628 | - var Wrapper = ({ rawValue }) => { | |
| 6629 | - const { propType } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 6630 | - const imageOverlayPropType = propType.prop_types["background-image-overlay"]; | |
| 6631 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 6632 | - propType: imageOverlayPropType.shape.image, | |
| 6633 | - value: rawValue, | |
| 6634 | - setValue: () => void 0 | |
| 6635 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind: "src" }, /* @__PURE__ */ react.createElement(Content, { rawValue: rawValue.image }))); | |
| 6636 | - }; | |
| 6637 | - var Content = ({ rawValue }) => { | |
| 6638 | - const src = rawValue.value.src; | |
| 6639 | - const dynamicTag = useDynamicTag(src.value.name || ""); | |
| 6640 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, dynamicTag?.label); | |
| 6641 | - }; | |
| 6642 | - | |
| 6643 | -//#endregion | |
| 6644 | -//#region packages/packages/core/editor-editing-panel/src/hooks/use-persist-dynamic-value.ts | |
| 6645 | - var usePersistDynamicValue = (propKey) => { | |
| 6646 | - const { element } = useElement(); | |
| 6647 | - return (0, _elementor_session.useSessionStorage)(`dynamic/non-dynamic-values-history/${element.id}/${propKey}`); | |
| 6648 | - }; | |
| 6649 | - | |
| 6650 | -//#endregion | |
| 6651 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-conditional-control.tsx | |
| 6652 | - var DynamicConditionalControl = ({ children, propType, propsSchema, dynamicSettings }) => { | |
| 6653 | - const defaults = (0, react.useMemo)(() => { | |
| 6654 | - if (!propsSchema) return {}; | |
| 6655 | - return Object.entries(propsSchema).reduce((result, [key, prop]) => { | |
| 6656 | - result[key] = prop?.default ?? null; | |
| 6657 | - return result; | |
| 6658 | - }, {}); | |
| 6659 | - }, [propsSchema]); | |
| 6660 | - const convertedSettings = (0, react.useMemo)(() => { | |
| 6661 | - if (!dynamicSettings) return {}; | |
| 6662 | - return Object.entries(dynamicSettings).reduce((result, [key, dynamicValue]) => { | |
| 6663 | - if (dynamicValue && typeof dynamicValue === "object" && "$$type" in dynamicValue) result[key] = dynamicValue; | |
| 6664 | - else result[key] = { | |
| 6665 | - $$type: "plain", | |
| 6666 | - value: dynamicValue | |
| 6667 | - }; | |
| 6668 | - return result; | |
| 6669 | - }, {}); | |
| 6670 | - }, [dynamicSettings]); | |
| 6671 | - const effectiveSettings = (0, react.useMemo)(() => { | |
| 6672 | - return { | |
| 6673 | - ...defaults, | |
| 6674 | - ...convertedSettings | |
| 6675 | - }; | |
| 6676 | - }, [defaults, convertedSettings]); | |
| 6677 | - if (!propType?.dependencies?.terms.length) return /* @__PURE__ */ react.createElement(react.Fragment, null, children); | |
| 6678 | - return !(0, _elementor_editor_props.isDependencyMet)(propType?.dependencies, effectiveSettings).isMet ? null : /* @__PURE__ */ react.createElement(react.Fragment, null, children); | |
| 6679 | - }; | |
| 6680 | - | |
| 6681 | -//#endregion | |
| 6682 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/dynamic-control.tsx | |
| 6683 | - var DynamicControl = ({ bind, children }) => { | |
| 6684 | - const { value, setValue } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil); | |
| 6685 | - const { name = "", group = "", settings } = value ?? {}; | |
| 6686 | - const dynamicTag = useDynamicTag(name); | |
| 6687 | - if (!dynamicTag) throw new Error(`Dynamic tag ${name} not found`); | |
| 6688 | - const dynamicPropType = dynamicTag.props_schema[bind]; | |
| 6689 | - const defaultValue = dynamicPropType?.default; | |
| 6690 | - const dynamicValue = settings?.[bind] ?? defaultValue; | |
| 6691 | - const setDynamicValue = (newValues) => { | |
| 6692 | - setValue({ | |
| 6693 | - name, | |
| 6694 | - group, | |
| 6695 | - settings: { | |
| 6696 | - ...settings, | |
| 6697 | - ...newValues | |
| 6698 | - } | |
| 6699 | - }); | |
| 6700 | - }; | |
| 6701 | - const propType = createTopLevelObjectType({ schema: dynamicTag.props_schema }); | |
| 6702 | - return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 6703 | - propType, | |
| 6704 | - setValue: setDynamicValue, | |
| 6705 | - value: { [bind]: dynamicValue } | |
| 6706 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(DynamicConditionalControl, { | |
| 6707 | - propType: dynamicPropType, | |
| 6708 | - propsSchema: dynamicTag.props_schema, | |
| 6709 | - dynamicSettings: settings | |
| 6710 | - }, children))); | |
| 6711 | - }; | |
| 6712 | - | |
| 6713 | -//#endregion | |
| 6714 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection.tsx | |
| 6715 | - var SIZE$3 = "tiny"; | |
| 6716 | - var PROMO_TEXT_WIDTH = 170; | |
| 6717 | - var PRO_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-modal/"; | |
| 6718 | - var RENEW_DYNAMIC_TAGS_URL = "https://go.elementor.com/go-pro-dynamic-tags-renew-modal/"; | |
| 6719 | - var DynamicSelection = ({ close: closePopover, expired = false }) => { | |
| 6720 | - const [searchValue, setSearchValue] = (0, react.useState)(""); | |
| 6721 | - const { groups: dynamicGroups } = getAtomicDynamicTags() || {}; | |
| 6722 | - const theme = (0, _elementor_ui.useTheme)(); | |
| 6723 | - const { value: anyValue } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 6724 | - const { bind, value: dynamicValue, setValue } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil); | |
| 6725 | - const [, updatePropValueHistory] = usePersistDynamicValue(bind); | |
| 6726 | - const isCurrentValueDynamic = !!dynamicValue; | |
| 6727 | - const options = useFilteredOptions(searchValue); | |
| 6728 | - const hasNoDynamicTags = !options.length && !searchValue.trim(); | |
| 6729 | - (0, react.useEffect)(() => { | |
| 6730 | - if (hasNoDynamicTags) (0, _elementor_editor_controls.trackViewPromotion)({ target_name: "dynamic_tags" }); | |
| 6731 | - else if (expired) (0, _elementor_editor_controls.trackViewPromotion)({ target_name: "dynamic_tags" }); | |
| 6732 | - }, [hasNoDynamicTags, expired]); | |
| 6733 | - const handleSearch = (value) => { | |
| 6734 | - setSearchValue(value); | |
| 6735 | - }; | |
| 6736 | - const handleSetDynamicTag = (value) => { | |
| 6737 | - if (!isCurrentValueDynamic) updatePropValueHistory(anyValue); | |
| 6738 | - const selectedOption = options.flatMap(([, items]) => items).find((item) => item.value === value); | |
| 6739 | - setValue({ | |
| 6740 | - name: value, | |
| 6741 | - group: selectedOption?.group ?? "", | |
| 6742 | - settings: { label: selectedOption?.label } | |
| 6743 | - }); | |
| 6744 | - closePopover(); | |
| 6745 | - }; | |
| 6746 | - const virtualizedItems = options.flatMap(([category, items]) => [{ | |
| 6747 | - type: "category", | |
| 6748 | - value: category, | |
| 6749 | - label: dynamicGroups?.[category]?.title || category | |
| 6750 | - }, ...items.map((item) => ({ | |
| 6751 | - type: "item", | |
| 6752 | - value: item.value, | |
| 6753 | - label: item.label | |
| 6754 | - }))]); | |
| 6755 | - const getPopOverContent = () => { | |
| 6756 | - if (hasNoDynamicTags) return /* @__PURE__ */ react.createElement(NoDynamicTags, null); | |
| 6757 | - if (expired) return /* @__PURE__ */ react.createElement(ExpiredDynamicTags, null); | |
| 6758 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SearchField, { | |
| 6759 | - value: searchValue, | |
| 6760 | - onSearch: handleSearch, | |
| 6761 | - placeholder: (0, _wordpress_i18n.__)("Search dynamic tags…", "elementor") | |
| 6762 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverMenuList, { | |
| 6763 | - items: virtualizedItems, | |
| 6764 | - onSelect: handleSetDynamicTag, | |
| 6765 | - onClose: closePopover, | |
| 6766 | - selectedValue: dynamicValue?.name, | |
| 6767 | - itemStyle: (item) => item.type === "item" ? { paddingInlineStart: theme.spacing(3.5) } : {}, | |
| 6768 | - noResultsComponent: /* @__PURE__ */ react.createElement(NoResults, { | |
| 6769 | - searchValue, | |
| 6770 | - onClear: () => setSearchValue("") | |
| 6771 | - }) | |
| 6772 | - })); | |
| 6773 | - }; | |
| 6774 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, { | |
| 6775 | - title: (0, _wordpress_i18n.__)("Dynamic tags", "elementor"), | |
| 6776 | - onClose: closePopover, | |
| 6777 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$3 }) | |
| 6778 | - }), getPopOverContent()); | |
| 6779 | - }; | |
| 6780 | - var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6781 | - gap: 1, | |
| 6782 | - alignItems: "center", | |
| 6783 | - justifyContent: "center", | |
| 6784 | - height: "100%", | |
| 6785 | - p: 2.5, | |
| 6786 | - color: "text.secondary", | |
| 6787 | - sx: { pb: 3.5 } | |
| 6788 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6789 | - align: "center", | |
| 6790 | - variant: "subtitle2" | |
| 6791 | - }, (0, _wordpress_i18n.__)("Sorry, nothing matched", "elementor"), /* @__PURE__ */ react.createElement("br", null), "“", searchValue, "”."), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6792 | - align: "center", | |
| 6793 | - variant: "caption", | |
| 6794 | - sx: { | |
| 6795 | - display: "flex", | |
| 6796 | - flexDirection: "column" | |
| 6797 | - } | |
| 6798 | - }, (0, _wordpress_i18n.__)("Try something else.", "elementor"), /* @__PURE__ */ react.createElement(_elementor_ui.Link, { | |
| 6799 | - color: "text.secondary", | |
| 6800 | - variant: "caption", | |
| 6801 | - component: "button", | |
| 6802 | - onClick: onClear | |
| 6803 | - }, (0, _wordpress_i18n.__)("Clear & try again", "elementor")))); | |
| 6804 | - var NoDynamicTags = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6805 | - gap: 1, | |
| 6806 | - alignItems: "center", | |
| 6807 | - justifyContent: "center", | |
| 6808 | - height: "100%", | |
| 6809 | - p: 2.5, | |
| 6810 | - color: "text.secondary", | |
| 6811 | - sx: { pb: 3.5 } | |
| 6812 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6813 | - align: "center", | |
| 6814 | - variant: "subtitle2" | |
| 6815 | - }, (0, _wordpress_i18n.__)("Streamline your workflow with dynamic tags", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6816 | - align: "center", | |
| 6817 | - variant: "caption", | |
| 6818 | - width: PROMO_TEXT_WIDTH | |
| 6819 | - }, (0, _wordpress_i18n.__)("Upgrade now to display your content dynamically.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.CtaButton, { | |
| 6820 | - size: "small", | |
| 6821 | - href: PRO_DYNAMIC_TAGS_URL, | |
| 6822 | - onClick: () => (0, _elementor_editor_controls.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }) | |
| 6823 | - }))); | |
| 6824 | - var ExpiredDynamicTags = () => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 6825 | - gap: 1, | |
| 6826 | - alignItems: "center", | |
| 6827 | - justifyContent: "center", | |
| 6828 | - height: "100%", | |
| 6829 | - p: 2.5, | |
| 6830 | - color: "text.secondary", | |
| 6831 | - sx: { pb: 3.5 } | |
| 6832 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: "large" }), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6833 | - align: "center", | |
| 6834 | - variant: "subtitle2" | |
| 6835 | - }, (0, _wordpress_i18n.__)("Unlock your Dynamic tags again", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 6836 | - align: "center", | |
| 6837 | - variant: "caption", | |
| 6838 | - width: PROMO_TEXT_WIDTH | |
| 6839 | - }, (0, _wordpress_i18n.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.", "elementor")), /* @__PURE__ */ react.createElement(_elementor_editor_ui.CtaButton, { | |
| 6840 | - size: "small", | |
| 6841 | - href: RENEW_DYNAMIC_TAGS_URL, | |
| 6842 | - onClick: () => (0, _elementor_editor_controls.trackUpgradePromotionClick)({ target_name: "dynamic_tags" }), | |
| 6843 | - children: (0, _wordpress_i18n.__)("Renew Now", "elementor") | |
| 6844 | - }))); | |
| 6845 | - var useFilteredOptions = (searchValue) => { | |
| 6846 | - return [...usePropDynamicTags().reduce((categories, { name, label, group }) => { | |
| 6847 | - if (!label.toLowerCase().includes(searchValue.trim().toLowerCase())) return categories; | |
| 6848 | - if (!categories.has(group)) categories.set(group, []); | |
| 6849 | - categories.get(group)?.push({ | |
| 6850 | - label, | |
| 6851 | - group, | |
| 6852 | - value: name | |
| 6853 | - }); | |
| 6854 | - return categories; | |
| 6855 | - }, /* @__PURE__ */ new Map())]; | |
| 6856 | - }; | |
| 6857 | - | |
| 6858 | -//#endregion | |
| 6859 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection-control.tsx | |
| 6860 | - var SIZE$2 = "tiny"; | |
| 6861 | - var tagsWithoutTabs = ["popup"]; | |
| 6862 | - var DynamicSelectionControl = ({ OriginalControl, ...props }) => { | |
| 6863 | - const { setValue: setAnyValue, propType } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 6864 | - const { bind, value } = (0, _elementor_editor_controls.useBoundProp)(dynamicPropTypeUtil); | |
| 6865 | - const { expired: readonly } = useLicenseConfig(); | |
| 6866 | - const originalPropType = createTopLevelObjectType({ schema: { [bind]: propType } }); | |
| 6867 | - const [propValueFromHistory] = usePersistDynamicValue(bind); | |
| 6868 | - const selectionPopoverState = (0, _elementor_ui.usePopupState)({ variant: "popover" }); | |
| 6869 | - const { name: tagName = "" } = value; | |
| 6870 | - const dynamicTag = useDynamicTag(tagName); | |
| 6871 | - if (!isDynamicTagSupported(tagName) && OriginalControl) return /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropProvider, { | |
| 6872 | - propType: originalPropType, | |
| 6873 | - value: { [bind]: null }, | |
| 6874 | - setValue: setAnyValue | |
| 6875 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.PropKeyProvider, { bind }, /* @__PURE__ */ react.createElement(OriginalControl, { ...props }))); | |
| 6876 | - const removeDynamicTag = () => { | |
| 6877 | - setAnyValue(propValueFromHistory ?? null); | |
| 6878 | - }; | |
| 6879 | - if (!dynamicTag) throw new Error(`Dynamic tag ${tagName} not found`); | |
| 6880 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, null, /* @__PURE__ */ react.createElement(_elementor_ui.UnstableTag, { | |
| 6881 | - fullWidth: true, | |
| 6882 | - showActionsOnHover: true, | |
| 6883 | - label: dynamicTag.label, | |
| 6884 | - startIcon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$2 }), | |
| 6885 | - ...(0, _elementor_ui.bindTrigger)(selectionPopoverState), | |
| 6886 | - actions: /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(DynamicSettingsPopover, { | |
| 6887 | - dynamicTag, | |
| 6888 | - disabled: readonly | |
| 6889 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 6890 | - size: SIZE$2, | |
| 6891 | - onClick: removeDynamicTag, | |
| 6892 | - "aria-label": (0, _wordpress_i18n.__)("Remove dynamic value", "elementor") | |
| 6893 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, { fontSize: SIZE$2 }))) | |
| 6894 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, { | |
| 6895 | - disablePortal: true, | |
| 6896 | - disableScrollLock: true, | |
| 6897 | - anchorOrigin: { | |
| 6898 | - vertical: "bottom", | |
| 6899 | - horizontal: "right" | |
| 6900 | - }, | |
| 6901 | - transformOrigin: { | |
| 6902 | - vertical: "top", | |
| 6903 | - horizontal: "right" | |
| 6904 | - }, | |
| 6905 | - PaperProps: { sx: { my: 1 } }, | |
| 6906 | - ...(0, _elementor_ui.bindPopover)(selectionPopoverState) | |
| 6907 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic tags", "elementor") }, /* @__PURE__ */ react.createElement(DynamicSelection, { | |
| 6908 | - close: selectionPopoverState.close, | |
| 6909 | - expired: readonly | |
| 6910 | - })))); | |
| 6911 | - }; | |
| 6912 | - var DynamicSettingsPopover = ({ dynamicTag, disabled = false }) => { | |
| 6913 | - const popupState = (0, _elementor_ui.usePopupState)({ variant: "popover" }); | |
| 6914 | - if (!!!dynamicTag.atomic_controls.length) return null; | |
| 6915 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 6916 | - size: SIZE$2, | |
| 6917 | - disabled, | |
| 6918 | - ...!disabled && (0, _elementor_ui.bindTrigger)(popupState), | |
| 6919 | - "aria-label": (0, _wordpress_i18n.__)("Dynamic settings", "elementor") | |
| 6920 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.SettingsIcon, { fontSize: SIZE$2 })), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, { | |
| 6921 | - disablePortal: true, | |
| 6922 | - disableScrollLock: true, | |
| 6923 | - anchorOrigin: { | |
| 6924 | - vertical: "bottom", | |
| 6925 | - horizontal: "right" | |
| 6926 | - }, | |
| 6927 | - transformOrigin: { | |
| 6928 | - vertical: "top", | |
| 6929 | - horizontal: "right" | |
| 6930 | - }, | |
| 6931 | - PaperProps: { sx: { my: 1 } }, | |
| 6932 | - ...(0, _elementor_ui.bindPopover)(popupState) | |
| 6933 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.SectionPopoverBody, { "aria-label": (0, _wordpress_i18n.__)("Dynamic settings", "elementor") }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, { | |
| 6934 | - title: dynamicTag.label, | |
| 6935 | - onClose: popupState.close, | |
| 6936 | - icon: /* @__PURE__ */ react.createElement(_elementor_icons.DatabaseIcon, { fontSize: SIZE$2 }) | |
| 6937 | - }), /* @__PURE__ */ react.createElement(DynamicSettings, { | |
| 6938 | - controls: dynamicTag.atomic_controls, | |
| 6939 | - tagName: dynamicTag.name | |
| 6940 | - })))); | |
| 6941 | - }; | |
| 6942 | - var DynamicSettings = ({ controls, tagName }) => { | |
| 6943 | - const tabs = controls.filter(({ type }) => type === "section"); | |
| 6944 | - const { getTabsProps, getTabProps, getTabPanelProps } = (0, _elementor_ui.useTabs)(0); | |
| 6945 | - if (!tabs.length) return null; | |
| 6946 | - if (tagsWithoutTabs.includes(tagName)) { | |
| 6947 | - const singleTab = tabs[0]; | |
| 6948 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), /* @__PURE__ */ react.createElement(ControlsItemsStack, { items: singleTab.value.items })); | |
| 6949 | - } | |
| 6950 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, tabs.length > 1 && /* @__PURE__ */ react.createElement(_elementor_ui.Tabs, { | |
| 6951 | - size: "small", | |
| 6952 | - variant: "fullWidth", | |
| 6953 | - ...getTabsProps() | |
| 6954 | - }, tabs.map(({ value }, index) => /* @__PURE__ */ react.createElement(_elementor_ui.Tab, { | |
| 6955 | - key: index, | |
| 6956 | - label: value.label, | |
| 6957 | - sx: { | |
| 6958 | - px: 1, | |
| 6959 | - py: .5 | |
| 6960 | - }, | |
| 6961 | - ...getTabProps(index) | |
| 6962 | - }))), /* @__PURE__ */ react.createElement(_elementor_ui.Divider, null), tabs.map(({ value }, index) => { | |
| 6963 | - return /* @__PURE__ */ react.createElement(_elementor_ui.TabPanel, { | |
| 6964 | - key: index, | |
| 6965 | - sx: { | |
| 6966 | - flexGrow: 1, | |
| 6967 | - py: 0, | |
| 6968 | - overflowY: "auto" | |
| 6969 | - }, | |
| 6970 | - ...getTabPanelProps(index) | |
| 6971 | - }, /* @__PURE__ */ react.createElement(ControlsItemsStack, { items: value.items })); | |
| 6972 | - })); | |
| 6973 | - }; | |
| 6974 | - var LAYOUT_OVERRIDE_FIELDS = { | |
| 6975 | - separator: "two-columns", | |
| 6976 | - action: "full", | |
| 6977 | - off_canvas: "full", | |
| 6978 | - type: "two-columns" | |
| 6979 | - }; | |
| 6980 | - var DYNAMIC_TAG_LAYOUT_OVERRIDES = { select: "full" }; | |
| 6981 | - var getLayout = (control) => { | |
| 6982 | - const dynamicOverride = DYNAMIC_TAG_LAYOUT_OVERRIDES[control.type]; | |
| 6983 | - if (dynamicOverride) return dynamicOverride; | |
| 6984 | - return LAYOUT_OVERRIDE_FIELDS[control.bind] ?? controlsRegistry.getLayout(control.type); | |
| 6985 | - }; | |
| 6986 | - var Control = ({ control }) => { | |
| 6987 | - if (!controlsRegistry.get(control.type)) return null; | |
| 6988 | - const layout = getLayout(control); | |
| 6989 | - const controlProps = { | |
| 6990 | - ...control.type === "select" ? { | |
| 6991 | - ...control.props, | |
| 6992 | - MenuProps: { | |
| 6993 | - ...control.props?.MenuProps ?? {}, | |
| 6994 | - disablePortal: true | |
| 6995 | - } | |
| 6996 | - } : { ...control.props }, | |
| 6997 | - ariaLabel: control.label | |
| 6998 | - }; | |
| 6999 | - const isSwitchControl = control.type === "switch"; | |
| 7000 | - const layoutStyleProps = layout === "two-columns" ? { | |
| 7001 | - display: "grid", | |
| 7002 | - gridTemplateColumns: isSwitchControl ? "minmax(0, 1fr) max-content" : "1fr 1fr" | |
| 7003 | - } : {}; | |
| 7004 | - return /* @__PURE__ */ react.createElement(DynamicControl, { bind: control.bind }, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 7005 | - container: true, | |
| 7006 | - gap: .75, | |
| 7007 | - sx: layoutStyleProps | |
| 7008 | - }, control.label ? /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 7009 | - item: true, | |
| 7010 | - xs: 12 | |
| 7011 | - }, /* @__PURE__ */ react.createElement(_elementor_editor_controls.ControlFormLabel, null, control.label)) : null, /* @__PURE__ */ react.createElement(_elementor_ui.Grid, { | |
| 7012 | - item: true, | |
| 7013 | - xs: 12 | |
| 7014 | - }, /* @__PURE__ */ react.createElement(Control$1, { | |
| 7015 | - type: control.type, | |
| 7016 | - props: controlProps | |
| 7017 | - })))); | |
| 7018 | - }; | |
| 7019 | - function ControlsItemsStack({ items }) { | |
| 7020 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7021 | - p: 2, | |
| 7022 | - gap: 2, | |
| 7023 | - sx: { overflowY: "auto" } | |
| 7024 | - }, items.map((item) => item.type === "control" ? /* @__PURE__ */ react.createElement(Control, { | |
| 7025 | - key: item.value.bind, | |
| 7026 | - control: item.value | |
| 7027 | - }) : null)); | |
| 7028 | - } | |
| 7029 | - | |
| 7030 | -//#endregion | |
| 7031 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/errors.ts | |
| 7032 | - var DynamicTagsManagerNotFoundError = (0, _elementor_utils.createError)({ | |
| 7033 | - code: "dynamic_tags_manager_not_found", | |
| 7034 | - message: "Dynamic tags manager not found" | |
| 7035 | - }); | |
| 7036 | - | |
| 7037 | -//#endregion | |
| 7038 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/dynamic-transformer.ts | |
| 7039 | - var dynamicTransformer = (0, _elementor_editor_canvas.createTransformer)((value, { propType, renderContext }) => { | |
| 7040 | - if (!value?.name || !isDynamicTagSupported(value.name)) return propType?.default ?? null; | |
| 7041 | - const renderPostId = renderContext?.currentPostId; | |
| 7042 | - return getDynamicValue(value.name, simpleTransform(value?.settings ?? {}), renderPostId); | |
| 7043 | - }); | |
| 7044 | - function simpleTransform(props) { | |
| 7045 | - const transformed = Object.entries(props).map(([settingKey, settingValue]) => { | |
| 7046 | - return [settingKey, (0, _elementor_editor_props.isTransformable)(settingValue) ? settingValue.value : settingValue]; | |
| 7047 | - }); | |
| 7048 | - return Object.fromEntries(transformed); | |
| 7049 | - } | |
| 7050 | - function getDynamicValue(name, settings, renderPostId) { | |
| 7051 | - const { dynamicTags } = window.elementor ?? {}; | |
| 7052 | - if (!dynamicTags) throw new DynamicTagsManagerNotFoundError(); | |
| 7053 | - const getTagValue = () => { | |
| 7054 | - const tag = dynamicTags.createTag("v4-dynamic-tag", name, settings); | |
| 7055 | - if (!tag) return null; | |
| 7056 | - if (renderPostId) tag.editorRenderPostId = renderPostId; | |
| 7057 | - return dynamicTags.loadTagDataFromCache(tag) ?? null; | |
| 7058 | - }; | |
| 7059 | - const tagValue = getTagValue(); | |
| 7060 | - if (tagValue !== null) return tagValue; | |
| 7061 | - return new Promise((resolve) => { | |
| 7062 | - dynamicTags.refreshCacheFromServer(() => { | |
| 7063 | - resolve(getTagValue()); | |
| 7064 | - }); | |
| 7065 | - }); | |
| 7066 | - } | |
| 7067 | - | |
| 7068 | -//#endregion | |
| 7069 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-action.tsx | |
| 7070 | - var usePropDynamicAction = () => { | |
| 7071 | - const { propType } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 7072 | - return { | |
| 7073 | - visible: !!propType && supportsDynamic(propType), | |
| 7074 | - icon: _elementor_icons.DatabaseIcon, | |
| 7075 | - title: (0, _wordpress_i18n.__)("Dynamic tags", "elementor"), | |
| 7076 | - content: ({ close }) => /* @__PURE__ */ react.createElement(DynamicSelection, { close }) | |
| 7077 | - }; | |
| 7078 | - }; | |
| 7079 | - | |
| 7080 | -//#endregion | |
| 7081 | -//#region packages/packages/core/editor-editing-panel/src/dynamics/init.ts | |
| 7082 | - var { registerPopoverAction } = _elementor_menus.controlActionsMenu; | |
| 7083 | - var init$2 = /* @__PURE__ */ __name(() => { | |
| 7084 | - (0, _elementor_editor_controls.registerControlReplacement)({ | |
| 7085 | - component: DynamicSelectionControl, | |
| 7086 | - condition: ({ value }) => isDynamicPropValue(value) | |
| 7087 | - }); | |
| 7088 | - (0, _elementor_editor_controls.injectIntoRepeaterItemLabel)({ | |
| 7089 | - id: "dynamic-background-image", | |
| 7090 | - condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src), | |
| 7091 | - component: BackgroundControlDynamicTagLabel | |
| 7092 | - }); | |
| 7093 | - (0, _elementor_editor_controls.injectIntoRepeaterItemIcon)({ | |
| 7094 | - id: "dynamic-background-image", | |
| 7095 | - condition: ({ value }) => isDynamicPropValue(value.value?.image?.value?.src), | |
| 7096 | - component: BackgroundControlDynamicTagIcon | |
| 7097 | - }); | |
| 7098 | - registerPopoverAction({ | |
| 7099 | - id: "dynamic-tags", | |
| 7100 | - priority: 20, | |
| 7101 | - useProps: usePropDynamicAction | |
| 7102 | - }); | |
| 7103 | - _elementor_editor_canvas.styleTransformersRegistry.register("dynamic", dynamicTransformer); | |
| 7104 | - _elementor_editor_canvas.settingsTransformersRegistry.register("dynamic", dynamicTransformer); | |
| 7105 | - }, "init"); | |
| 7106 | - | |
| 7107 | -//#endregion | |
| 7108 | -//#region packages/packages/core/editor-editing-panel/src/utils/is-equal.ts | |
| 7109 | - function isEqual(a, b) { | |
| 7110 | - if (a === b) return true; | |
| 7111 | - if (a === null || b === null) return false; | |
| 7112 | - if (typeof a !== typeof b) return false; | |
| 7113 | - if (Array.isArray(a) && Array.isArray(b)) { | |
| 7114 | - if (a.length !== b.length) return false; | |
| 7115 | - for (let i = 0; i < a.length; i++) if (!isEqual(a[i], b[i])) return false; | |
| 7116 | - return true; | |
| 7117 | - } | |
| 7118 | - if (typeof a === "object" && typeof b === "object") { | |
| 7119 | - const objA = a; | |
| 7120 | - const objB = b; | |
| 7121 | - const keysA = Object.keys(objA); | |
| 7122 | - const keysB = Object.keys(objB); | |
| 7123 | - if (keysA.length !== keysB.length) return false; | |
| 7124 | - for (const key of keysA) { | |
| 7125 | - if (!(key in objB)) return false; | |
| 7126 | - if (!isEqual(objA[key], objB[key])) return false; | |
| 7127 | - } | |
| 7128 | - return true; | |
| 7129 | - } | |
| 7130 | - return false; | |
| 7131 | - } | |
| 7132 | - | |
| 7133 | -//#endregion | |
| 7134 | -//#region packages/packages/core/editor-editing-panel/src/reset-style-props.tsx | |
| 7135 | - var { registerAction } = _elementor_menus.controlActionsMenu; | |
| 7136 | - function initResetStyleProps() { | |
| 7137 | - registerAction({ | |
| 7138 | - id: "reset-style-value", | |
| 7139 | - priority: 10, | |
| 7140 | - useProps: useResetStyleValueProps | |
| 7141 | - }); | |
| 7142 | - } | |
| 7143 | - function useResetStyleValueProps() { | |
| 7144 | - const isStyle = useIsStyle(); | |
| 7145 | - const { value, resetValue, propType } = (0, _elementor_editor_controls.useBoundProp)(); | |
| 7146 | - const hasValue = value !== null && value !== void 0; | |
| 7147 | - const hasInitial = propType.initial_value !== void 0 && propType.initial_value !== null; | |
| 7148 | - const isRequired = !!propType.settings?.required; | |
| 7149 | - const shouldHide = !!propType.settings?.hide_reset; | |
| 7150 | - const isPropTypeValue = value; | |
| 7151 | - const isVariable = isPropTypeValue?.$$type?.includes("variable"); | |
| 7152 | - const variableExists = isVariable && (0, _elementor_editor_variables.hasVariable)(isPropTypeValue?.value); | |
| 7153 | - function calculateVisibility() { | |
| 7154 | - if (!isStyle || !hasValue || shouldHide || isVariable && !variableExists) return false; | |
| 7155 | - if (hasInitial) return !isEqual(value, propType.initial_value); | |
| 7156 | - return !isRequired; | |
| 7157 | - } | |
| 7158 | - return { | |
| 7159 | - visible: calculateVisibility(), | |
| 7160 | - title: (0, _wordpress_i18n.__)("Clear", "elementor"), | |
| 7161 | - icon: _elementor_icons.BrushBigIcon, | |
| 7162 | - onClick: () => resetValue() | |
| 7163 | - }; | |
| 7164 | - } | |
| 7165 | - | |
| 7166 | -//#endregion | |
| 7167 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx | |
| 7168 | - var MAXIMUM_ITEMS = 2; | |
| 7169 | - var useNormalizedInheritanceChainItems = (inheritanceChain, bind, resolve) => { | |
| 7170 | - const [items, setItems] = (0, react.useState)([]); | |
| 7171 | - (0, react.useEffect)(() => { | |
| 7172 | - (async () => { | |
| 7173 | - const validItems = (await Promise.all(inheritanceChain.filter(({ style }) => style).map((item, index) => normalizeInheritanceItem(item, index, bind, resolve)))).map((item) => ({ | |
| 7174 | - ...item, | |
| 7175 | - displayLabel: _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY !== item.provider ? item.displayLabel : (0, _wordpress_i18n.__)("Base", "elementor") | |
| 7176 | - })).filter((item) => !item.value || item.displayLabel !== "").slice(0, MAXIMUM_ITEMS); | |
| 7177 | - setItems(validItems); | |
| 7178 | - })(); | |
| 7179 | - }, [ | |
| 7180 | - inheritanceChain, | |
| 7181 | - bind, | |
| 7182 | - resolve | |
| 7183 | - ]); | |
| 7184 | - return items; | |
| 7185 | - }; | |
| 7186 | - var DEFAULT_BREAKPOINT$1 = "desktop"; | |
| 7187 | - var normalizeInheritanceItem = async (item, index, bind, resolve) => { | |
| 7188 | - const { variant: { meta: { state, breakpoint } }, style: { label, id } } = item; | |
| 7189 | - const displayLabel = getDisplayLabel({ | |
| 7190 | - label, | |
| 7191 | - state | |
| 7192 | - }); | |
| 7193 | - return { | |
| 7194 | - id: id ? id + (state ?? "") : index, | |
| 7195 | - provider: item.provider || "", | |
| 7196 | - breakpoint: breakpoint ?? DEFAULT_BREAKPOINT$1, | |
| 7197 | - displayLabel, | |
| 7198 | - value: await getTransformedValue(item, bind, resolve) | |
| 7199 | - }; | |
| 7200 | - }; | |
| 7201 | - function getDisplayLabel({ label, state }) { | |
| 7202 | - if (!state) return label; | |
| 7203 | - if ((0, _elementor_editor_styles.isClassState)(state)) return `${label}.${state}`; | |
| 7204 | - if ((0, _elementor_editor_styles.isPseudoState)(state)) return `${label}:${state}`; | |
| 7205 | - throw new _elementor_editor_canvas.UnknownStyleStateError({ context: { state } }); | |
| 7206 | - } | |
| 7207 | - var getTransformedValue = async (item, bind, resolve) => { | |
| 7208 | - try { | |
| 7209 | - const result = await resolve({ props: { [bind]: item.value } }); | |
| 7210 | - const value = result?.[bind] ?? result; | |
| 7211 | - if ((0, react.isValidElement)(value)) return value; | |
| 7212 | - if (typeof value === "object") return JSON.stringify(value); | |
| 7213 | - return String(value); | |
| 7214 | - } catch { | |
| 7215 | - return ""; | |
| 7216 | - } | |
| 7217 | - }; | |
| 7218 | - | |
| 7219 | -//#endregion | |
| 7220 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/breakpoint-icon.tsx | |
| 7221 | - var SIZE$1 = "tiny"; | |
| 7222 | - var DEFAULT_BREAKPOINT = "desktop"; | |
| 7223 | - var breakpointIconMap = { | |
| 7224 | - widescreen: _elementor_icons.WidescreenIcon, | |
| 7225 | - desktop: _elementor_icons.DesktopIcon, | |
| 7226 | - laptop: _elementor_icons.LaptopIcon, | |
| 7227 | - tablet_extra: _elementor_icons.TabletLandscapeIcon, | |
| 7228 | - tablet: _elementor_icons.TabletPortraitIcon, | |
| 7229 | - mobile_extra: _elementor_icons.MobileLandscapeIcon, | |
| 7230 | - mobile: _elementor_icons.MobilePortraitIcon | |
| 7231 | - }; | |
| 7232 | - var BreakpointIcon = ({ breakpoint }) => { | |
| 7233 | - const breakpoints = (0, _elementor_editor_responsive.useBreakpoints)(); | |
| 7234 | - const currentBreakpoint = breakpoint || DEFAULT_BREAKPOINT; | |
| 7235 | - const IconComponent = breakpointIconMap[currentBreakpoint]; | |
| 7236 | - if (!IconComponent) return null; | |
| 7237 | - const breakpointLabel = breakpoints.find((breakpointItem) => breakpointItem.id === currentBreakpoint)?.label; | |
| 7238 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 7239 | - title: breakpointLabel, | |
| 7240 | - placement: "top" | |
| 7241 | - }, /* @__PURE__ */ react.createElement(IconComponent, { | |
| 7242 | - fontSize: SIZE$1, | |
| 7243 | - sx: { mt: "2px" } | |
| 7244 | - })); | |
| 7245 | - }; | |
| 7246 | - | |
| 7247 | -//#endregion | |
| 7248 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/label-chip.tsx | |
| 7249 | - var SIZE = "tiny"; | |
| 7250 | - var LabelChip = ({ displayLabel, provider }) => { | |
| 7251 | - const chipIcon = provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY ? /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 7252 | - title: (0, _wordpress_i18n.__)("Inherited from base styles", "elementor"), | |
| 7253 | - placement: "top" | |
| 7254 | - }, /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleIcon, { fontSize: SIZE })) : void 0; | |
| 7255 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, { | |
| 7256 | - label: displayLabel, | |
| 7257 | - size: SIZE, | |
| 7258 | - color: getStylesProviderColorName(provider), | |
| 7259 | - variant: "standard", | |
| 7260 | - state: "enabled", | |
| 7261 | - icon: chipIcon, | |
| 7262 | - sx: (theme) => ({ | |
| 7263 | - lineHeight: 1, | |
| 7264 | - flexWrap: "nowrap", | |
| 7265 | - alignItems: "center", | |
| 7266 | - borderRadius: `${theme.shape.borderRadius * .75}px`, | |
| 7267 | - flexDirection: "row-reverse", | |
| 7268 | - ".MuiChip-label": { | |
| 7269 | - overflow: "hidden", | |
| 7270 | - textOverflow: "ellipsis", | |
| 7271 | - whiteSpace: "nowrap" | |
| 7272 | - } | |
| 7273 | - }) | |
| 7274 | - }); | |
| 7275 | - }; | |
| 7276 | - | |
| 7277 | -//#endregion | |
| 7278 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/value-component.tsx | |
| 7279 | - var ValueComponent = ({ index, value }) => { | |
| 7280 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 7281 | - title: value, | |
| 7282 | - placement: "top" | |
| 7283 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { | |
| 7284 | - variant: "caption", | |
| 7285 | - color: "text.tertiary", | |
| 7286 | - sx: { | |
| 7287 | - mt: "1px", | |
| 7288 | - textDecoration: index === 0 ? "none" : "line-through", | |
| 7289 | - overflow: "hidden", | |
| 7290 | - display: "-webkit-box", | |
| 7291 | - WebkitLineClamp: 1, | |
| 7292 | - WebkitBoxOrient: "vertical", | |
| 7293 | - pl: 2.5, | |
| 7294 | - minWidth: 0, | |
| 7295 | - maxWidth: "100%" | |
| 7296 | - } | |
| 7297 | - }, value)); | |
| 7298 | - }; | |
| 7299 | - | |
| 7300 | -//#endregion | |
| 7301 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/action-icons.tsx | |
| 7302 | - var ActionIcons = () => /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 7303 | - display: "flex", | |
| 7304 | - gap: .5, | |
| 7305 | - alignItems: "center" | |
| 7306 | - }); | |
| 7307 | - | |
| 7308 | -//#endregion | |
| 7309 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-infotip.tsx | |
| 7310 | - var SECTION_PADDING_INLINE = 32; | |
| 7311 | - var INFOTIP_MAX_WIDTH = 496; | |
| 7312 | - var StylesInheritanceInfotip = ({ inheritanceChain, propType, path, label, children, isDisabled }) => { | |
| 7313 | - const [showInfotip, setShowInfotip] = (0, react.useState)(false); | |
| 7314 | - const triggerRef = (0, react.useRef)(null); | |
| 7315 | - const toggleInfotip = () => { | |
| 7316 | - if (isDisabled) return; | |
| 7317 | - setShowInfotip((prev) => !prev); | |
| 7318 | - }; | |
| 7319 | - const closeInfotip = () => { | |
| 7320 | - if (isDisabled) return; | |
| 7321 | - setShowInfotip(false); | |
| 7322 | - }; | |
| 7323 | - const key = path.join("."); | |
| 7324 | - const sectionWidth = (0, _elementor_editor_ui.useSectionWidth)(); | |
| 7325 | - const items = useNormalizedInheritanceChainItems(inheritanceChain, key, (0, react.useMemo)(() => { | |
| 7326 | - return (0, _elementor_editor_canvas.createPropsResolver)({ | |
| 7327 | - transformers: _elementor_editor_canvas.stylesInheritanceTransformersRegistry, | |
| 7328 | - schema: { [key]: propType } | |
| 7329 | - }); | |
| 7330 | - }, [key, propType])); | |
| 7331 | - const infotipContent = /* @__PURE__ */ react.createElement(_elementor_ui.ClickAwayListener, { onClickAway: closeInfotip }, /* @__PURE__ */ react.createElement(_elementor_ui.Card, { | |
| 7332 | - elevation: 0, | |
| 7333 | - sx: { | |
| 7334 | - width: `${sectionWidth - SECTION_PADDING_INLINE}px`, | |
| 7335 | - maxWidth: INFOTIP_MAX_WIDTH, | |
| 7336 | - maxHeight: 268, | |
| 7337 | - overflowX: "hidden", | |
| 7338 | - display: "flex", | |
| 7339 | - flexDirection: "column" | |
| 7340 | - } | |
| 7341 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { | |
| 7342 | - position: "sticky", | |
| 7343 | - top: 0, | |
| 7344 | - zIndex: 1, | |
| 7345 | - backgroundColor: "background.paper" | |
| 7346 | - } }, /* @__PURE__ */ react.createElement(_elementor_editor_ui.PopoverHeader, { | |
| 7347 | - title: (0, _wordpress_i18n.__)("Style origin", "elementor"), | |
| 7348 | - onClose: closeInfotip | |
| 7349 | - })), /* @__PURE__ */ react.createElement(_elementor_ui.CardContent, { sx: { | |
| 7350 | - display: "flex", | |
| 7351 | - flexDirection: "column", | |
| 7352 | - p: 0, | |
| 7353 | - flex: 1, | |
| 7354 | - overflow: "auto", | |
| 7355 | - "&:last-child": { pb: 0 } | |
| 7356 | - } }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7357 | - gap: 1.5, | |
| 7358 | - sx: { | |
| 7359 | - pl: 2, | |
| 7360 | - pr: 1, | |
| 7361 | - pt: 1.5, | |
| 7362 | - pb: 1.5 | |
| 7363 | - }, | |
| 7364 | - role: "list" | |
| 7365 | - }, items.map((item, index) => { | |
| 7366 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 7367 | - key: item.id, | |
| 7368 | - display: "flex", | |
| 7369 | - gap: .5, | |
| 7370 | - role: "listitem", | |
| 7371 | - "aria-label": (0, _wordpress_i18n.__)("Inheritance item: %s", "elementor").replace("%s", item.displayLabel) | |
| 7372 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 7373 | - display: "flex", | |
| 7374 | - gap: .5, | |
| 7375 | - sx: { | |
| 7376 | - flexWrap: "wrap", | |
| 7377 | - width: "100%", | |
| 7378 | - alignItems: "flex-start" | |
| 7379 | - } | |
| 7380 | - }, /* @__PURE__ */ react.createElement(BreakpointIcon, { breakpoint: item.breakpoint }), /* @__PURE__ */ react.createElement(LabelChip, { | |
| 7381 | - displayLabel: item.displayLabel, | |
| 7382 | - provider: item.provider | |
| 7383 | - }), /* @__PURE__ */ react.createElement(ValueComponent, { | |
| 7384 | - index, | |
| 7385 | - value: item.value | |
| 7386 | - })), /* @__PURE__ */ react.createElement(ActionIcons, null)); | |
| 7387 | - }))))); | |
| 7388 | - if (isDisabled) return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { display: "inline-flex" } }, children); | |
| 7389 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { | |
| 7390 | - ref: triggerRef, | |
| 7391 | - sx: { display: "inline-flex" } | |
| 7392 | - }, /* @__PURE__ */ react.createElement(TooltipOrInfotip, { | |
| 7393 | - showInfotip, | |
| 7394 | - onClose: closeInfotip, | |
| 7395 | - infotipContent, | |
| 7396 | - isDisabled | |
| 7397 | - }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, { | |
| 7398 | - onClick: toggleInfotip, | |
| 7399 | - "aria-label": label, | |
| 7400 | - sx: { my: "-1px" }, | |
| 7401 | - disabled: isDisabled | |
| 7402 | - }, children))); | |
| 7403 | - }; | |
| 7404 | - function TooltipOrInfotip({ children, showInfotip, onClose, infotipContent, isDisabled }) { | |
| 7405 | - if (isDisabled) return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: { display: "inline-flex" } }, children); | |
| 7406 | - if (showInfotip) return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Backdrop, { | |
| 7407 | - open: showInfotip, | |
| 7408 | - onClick: onClose, | |
| 7409 | - sx: { | |
| 7410 | - backgroundColor: "transparent", | |
| 7411 | - zIndex: (theme) => theme.zIndex.modal - 1 | |
| 7412 | - } | |
| 7413 | - }), /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, { | |
| 7414 | - placement: "top-end", | |
| 7415 | - content: infotipContent, | |
| 7416 | - open: showInfotip, | |
| 7417 | - onClose, | |
| 7418 | - disableHoverListener: true | |
| 7419 | - }, children)); | |
| 7420 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, { | |
| 7421 | - title: (0, _wordpress_i18n.__)("Style origin", "elementor"), | |
| 7422 | - placement: "top" | |
| 7423 | - }, children); | |
| 7424 | - } | |
| 7425 | - | |
| 7426 | -//#endregion | |
| 7427 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-indicator.tsx | |
| 7428 | - var StylesInheritanceIndicator = ({ customContext }) => { | |
| 7429 | - const context = (0, _elementor_editor_controls.useBoundProp)(); | |
| 7430 | - const { path, propType } = customContext || context; | |
| 7431 | - const inheritanceChain = useStylesInheritanceChain(path); | |
| 7432 | - if (!path || !inheritanceChain.length) return null; | |
| 7433 | - return /* @__PURE__ */ react.createElement(Indicator, { | |
| 7434 | - inheritanceChain, | |
| 7435 | - path, | |
| 7436 | - propType | |
| 7437 | - }); | |
| 7438 | - }; | |
| 7439 | - var Indicator = ({ inheritanceChain, path, propType, isDisabled }) => { | |
| 7440 | - const { id: currentStyleId, provider: currentStyleProvider, meta: currentStyleMeta } = useStyle(); | |
| 7441 | - const currentItem = currentStyleId ? getValueFromInheritanceChain(inheritanceChain, currentStyleId, currentStyleMeta) : null; | |
| 7442 | - const hasValue = !(0, _elementor_editor_props.isEmpty)(currentItem?.value); | |
| 7443 | - const [actualStyle] = inheritanceChain; | |
| 7444 | - if (actualStyle.provider === _elementor_editor_styles_repository.ELEMENTS_BASE_STYLES_PROVIDER_KEY) return null; | |
| 7445 | - const isFinalValue = currentItem === actualStyle; | |
| 7446 | - const label = getLabel({ | |
| 7447 | - isFinalValue, | |
| 7448 | - hasValue | |
| 7449 | - }); | |
| 7450 | - const styleIndicatorProps = { | |
| 7451 | - getColor: isFinalValue && currentStyleProvider ? getStylesProviderThemeColor(currentStyleProvider.getKey()) : void 0, | |
| 7452 | - isOverridden: hasValue && !isFinalValue ? true : void 0 | |
| 7453 | - }; | |
| 7454 | - return /* @__PURE__ */ react.createElement(StylesInheritanceInfotip, { | |
| 7455 | - inheritanceChain, | |
| 7456 | - path, | |
| 7457 | - propType, | |
| 7458 | - label, | |
| 7459 | - isDisabled | |
| 7460 | - }, /* @__PURE__ */ react.createElement(StyleIndicator, { ...styleIndicatorProps })); | |
| 7461 | - }; | |
| 7462 | - var getLabel = ({ isFinalValue, hasValue }) => { | |
| 7463 | - if (isFinalValue) return (0, _wordpress_i18n.__)("This is the final value", "elementor"); | |
| 7464 | - if (hasValue) return (0, _wordpress_i18n.__)("This value is overridden by another style", "elementor"); | |
| 7465 | - return (0, _wordpress_i18n.__)("This has value from another style", "elementor"); | |
| 7466 | - }; | |
| 7467 | - | |
| 7468 | -//#endregion | |
| 7469 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/consts.ts | |
| 7470 | - var excludePropTypeTransformers = /* @__PURE__ */ new Set([ | |
| 7471 | - "background-color-overlay", | |
| 7472 | - "background-image-overlay", | |
| 7473 | - "background-gradient-overlay", | |
| 7474 | - "gradient-color-stop", | |
| 7475 | - "color-stop", | |
| 7476 | - "background-image-position-offset", | |
| 7477 | - "background-image-size-scale", | |
| 7478 | - "image-src", | |
| 7479 | - "image", | |
| 7480 | - "background-overlay" | |
| 7481 | - ]); | |
| 7482 | - | |
| 7483 | -//#endregion | |
| 7484 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/array-transformer.tsx | |
| 7485 | - var arrayTransformer = (0, _elementor_editor_canvas.createTransformer)((values) => { | |
| 7486 | - if (!values || values.length === 0) return null; | |
| 7487 | - if (values.every((item) => typeof item === "string" || typeof item === "number")) return values.join(" "); | |
| 7488 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, values.map((item, index) => /* @__PURE__ */ react.createElement(react.Fragment, { key: index }, index > 0 && " ", item))); | |
| 7489 | - }); | |
| 7490 | - | |
| 7491 | -//#endregion | |
| 7492 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx | |
| 7493 | - var backgroundColorOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7494 | - direction: "row", | |
| 7495 | - gap: 1, | |
| 7496 | - alignItems: "center" | |
| 7497 | - }, /* @__PURE__ */ react.createElement(ItemLabelColor, { value }))); | |
| 7498 | - var ItemLabelColor = ({ value: { color } }) => { | |
| 7499 | - return /* @__PURE__ */ react.createElement("span", null, color); | |
| 7500 | - }; | |
| 7501 | - var StyledUnstableColorIndicator = (0, _elementor_ui.styled)(_elementor_ui.UnstableColorIndicator)(({ theme }) => ({ | |
| 7502 | - width: "1em", | |
| 7503 | - height: "1em", | |
| 7504 | - borderRadius: `${theme.shape.borderRadius / 2}px`, | |
| 7505 | - outline: `1px solid ${theme.palette.action.disabled}`, | |
| 7506 | - flexShrink: 0 | |
| 7507 | - })); | |
| 7508 | - | |
| 7509 | -//#endregion | |
| 7510 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx | |
| 7511 | - var backgroundGradientOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7512 | - direction: "row", | |
| 7513 | - gap: 1, | |
| 7514 | - alignItems: "center" | |
| 7515 | - }, /* @__PURE__ */ react.createElement(ItemIconGradient, { value }), /* @__PURE__ */ react.createElement(ItemLabelGradient, { value }))); | |
| 7516 | - var ItemIconGradient = ({ value }) => { | |
| 7517 | - const gradient = getGradientValue(value); | |
| 7518 | - return /* @__PURE__ */ react.createElement(StyledUnstableColorIndicator, { | |
| 7519 | - size: "inherit", | |
| 7520 | - component: "span", | |
| 7521 | - value: gradient | |
| 7522 | - }); | |
| 7523 | - }; | |
| 7524 | - var ItemLabelGradient = ({ value }) => { | |
| 7525 | - if (value.type === "linear") return /* @__PURE__ */ react.createElement("span", null, (0, _wordpress_i18n.__)("Linear gradient", "elementor")); | |
| 7526 | - return /* @__PURE__ */ react.createElement("span", null, (0, _wordpress_i18n.__)("Radial gradient", "elementor")); | |
| 7527 | - }; | |
| 7528 | - var getGradientValue = (gradient) => { | |
| 7529 | - const stops = gradient.stops?.map(({ color, offset }) => `${color} ${offset ?? 0}%`)?.join(","); | |
| 7530 | - if (gradient.type === "linear") return `linear-gradient(${gradient.angle}deg, ${stops})`; | |
| 7531 | - return `radial-gradient(circle at ${gradient.positions}, ${stops})`; | |
| 7532 | - }; | |
| 7533 | - | |
| 7534 | -//#endregion | |
| 7535 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx | |
| 7536 | - var backgroundImageOverlayTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7537 | - direction: "row", | |
| 7538 | - gap: 1, | |
| 7539 | - alignItems: "center" | |
| 7540 | - }, /* @__PURE__ */ react.createElement(ItemIconImage, { value }), /* @__PURE__ */ react.createElement(ItemLabelImage, { value }))); | |
| 7541 | - var ItemIconImage = ({ value }) => { | |
| 7542 | - const { imageUrl } = useImage(value); | |
| 7543 | - return /* @__PURE__ */ react.createElement(_elementor_ui.CardMedia, { | |
| 7544 | - image: imageUrl, | |
| 7545 | - sx: (theme) => ({ | |
| 7546 | - height: "1em", | |
| 7547 | - width: "1em", | |
| 7548 | - borderRadius: `${theme.shape.borderRadius / 2}px`, | |
| 7549 | - outline: `1px solid ${theme.palette.action.disabled}`, | |
| 7550 | - flexShrink: 0 | |
| 7551 | - }) | |
| 7552 | - }); | |
| 7553 | - }; | |
| 7554 | - var ItemLabelImage = ({ value }) => { | |
| 7555 | - const { imageTitle } = useImage(value); | |
| 7556 | - return /* @__PURE__ */ react.createElement(_elementor_editor_ui.EllipsisWithTooltip, { title: imageTitle }, /* @__PURE__ */ react.createElement("span", null, imageTitle)); | |
| 7557 | - }; | |
| 7558 | - var useImage = (image) => { | |
| 7559 | - let imageTitle; | |
| 7560 | - let imageUrl = null; | |
| 7561 | - const imageSrc = image?.image.src; | |
| 7562 | - const { data: attachment } = (0, _elementor_wp_media.useWpMediaAttachment)(imageSrc.id || null); | |
| 7563 | - if (imageSrc.id) { | |
| 7564 | - const imageFileTypeExtension = getFileExtensionFromFilename(attachment?.filename); | |
| 7565 | - imageTitle = `${attachment?.title}${imageFileTypeExtension}` || null; | |
| 7566 | - imageUrl = attachment?.url || null; | |
| 7567 | - } else if (imageSrc.url) { | |
| 7568 | - imageUrl = imageSrc.url; | |
| 7569 | - imageTitle = imageUrl?.substring(imageUrl.lastIndexOf("/") + 1) || null; | |
| 7570 | - } | |
| 7571 | - return { | |
| 7572 | - imageTitle, | |
| 7573 | - imageUrl | |
| 7574 | - }; | |
| 7575 | - }; | |
| 7576 | - var getFileExtensionFromFilename = (filename) => { | |
| 7577 | - if (!filename) return ""; | |
| 7578 | - return `.${filename.substring(filename.lastIndexOf(".") + 1)}`; | |
| 7579 | - }; | |
| 7580 | - | |
| 7581 | -//#endregion | |
| 7582 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/box-shadow-transformer.tsx | |
| 7583 | - var boxShadowTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => { | |
| 7584 | - if (!value) return null; | |
| 7585 | - const { color, hOffset, vOffset, blur, spread, position } = value; | |
| 7586 | - const colorValue = color || "#000000"; | |
| 7587 | - const sizes = [ | |
| 7588 | - hOffset || "0px", | |
| 7589 | - vOffset || "0px", | |
| 7590 | - blur || "10px", | |
| 7591 | - spread || "0px" | |
| 7592 | - ].join(" "); | |
| 7593 | - const positionValue = position || "outset"; | |
| 7594 | - return /* @__PURE__ */ react.createElement(react.Fragment, null, colorValue, " ", positionValue, ", ", sizes); | |
| 7595 | - }); | |
| 7596 | - | |
| 7597 | -//#endregion | |
| 7598 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/color-transformer.tsx | |
| 7599 | - function isValidCSSColor(value) { | |
| 7600 | - if (!value.trim()) return false; | |
| 7601 | - return CSS.supports("color", value.trim()); | |
| 7602 | - } | |
| 7603 | - var StyledColorIndicator = (0, _elementor_ui.styled)(_elementor_ui.UnstableColorIndicator)(({ theme }) => ({ | |
| 7604 | - width: "1em", | |
| 7605 | - height: "1em", | |
| 7606 | - borderRadius: `${theme.shape.borderRadius / 2}px`, | |
| 7607 | - outline: `1px solid ${theme.palette.action.disabled}`, | |
| 7608 | - flexShrink: 0 | |
| 7609 | - })); | |
| 7610 | - var colorTransformer = (0, _elementor_editor_canvas.createTransformer)((value) => { | |
| 7611 | - if (!isValidCSSColor(value)) return value; | |
| 7612 | - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { | |
| 7613 | - direction: "row", | |
| 7614 | - gap: 1, | |
| 7615 | - alignItems: "center" | |
| 7616 | - }, /* @__PURE__ */ react.createElement(StyledColorIndicator, { | |
| 7617 | - size: "inherit", | |
| 7618 | - component: "span", | |
| 7619 | - value | |
| 7620 | - }), /* @__PURE__ */ react.createElement("span", null, value)); | |
| 7621 | - }); | |
| 7622 | - | |
| 7623 | -//#endregion | |
| 7624 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx | |
| 7625 | - var createRepeaterToItemsTransformer = (originalTransformer) => { | |
| 7626 | - return (0, _elementor_editor_canvas.createTransformer)((value, options) => { | |
| 7627 | - const stringResult = originalTransformer(value, options); | |
| 7628 | - if (!stringResult || typeof stringResult !== "string") return stringResult; | |
| 7629 | - return stringResult; | |
| 7630 | - }); | |
| 7631 | - }; | |
| 7632 | - | |
| 7633 | -//#endregion | |
| 7634 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/init-styles-inheritance-transformers.ts | |
| 7635 | - function initStylesInheritanceTransformers() { | |
| 7636 | - const originalStyleTransformers = _elementor_editor_canvas.styleTransformersRegistry.all(); | |
| 7637 | - Object.entries(originalStyleTransformers).forEach(([propType, transformer]) => { | |
| 7638 | - if (excludePropTypeTransformers.has(propType)) return; | |
| 7639 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register(propType, transformer); | |
| 7640 | - }); | |
| 7641 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.registerFallback((0, _elementor_editor_canvas.createTransformer)((value) => { | |
| 7642 | - return value; | |
| 7643 | - })); | |
| 7644 | - registerCustomTransformers(originalStyleTransformers); | |
| 7645 | - } | |
| 7646 | - function registerCustomTransformers(originalStyleTransformers) { | |
| 7647 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("color", colorTransformer); | |
| 7648 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-color-overlay", backgroundColorOverlayTransformer); | |
| 7649 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-gradient-overlay", backgroundGradientOverlayTransformer); | |
| 7650 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("background-image-overlay", backgroundImageOverlayTransformer); | |
| 7651 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("shadow", boxShadowTransformer); | |
| 7652 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("filter", createRepeaterToItemsTransformer(originalStyleTransformers.filter)); | |
| 7653 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("backdrop-filter", createRepeaterToItemsTransformer(originalStyleTransformers["backdrop-filter"])); | |
| 7654 | - _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register("transition", createRepeaterToItemsTransformer(originalStyleTransformers.transition)); | |
| 7655 | - [ | |
| 7656 | - "background-overlay", | |
| 7657 | - "box-shadow", | |
| 7658 | - "transform-functions" | |
| 7659 | - ].forEach((propType) => _elementor_editor_canvas.stylesInheritanceTransformersRegistry.register(propType, arrayTransformer)); | |
| 7660 | - } | |
| 7661 | - | |
| 7662 | -//#endregion | |
| 7663 | -//#region packages/packages/core/editor-editing-panel/src/styles-inheritance/init.ts | |
| 7664 | - var init$1 = /* @__PURE__ */ __name(() => { | |
| 7665 | - initStylesInheritanceTransformers(); | |
| 7666 | - registerFieldIndicator({ | |
| 7667 | - fieldType: FIELD_TYPE.STYLES, | |
| 7668 | - id: "styles-inheritance", | |
| 7669 | - priority: 1, | |
| 7670 | - indicator: StylesInheritanceIndicator | |
| 7671 | - }); | |
| 7672 | - }, "init"); | |
| 7673 | - | |
| 7674 | -//#endregion | |
| 7675 | -//#region packages/packages/core/editor-editing-panel/src/init.ts | |
| 7676 | - function init() { | |
| 7677 | - (0, _elementor_editor_panels.registerPanel)(panel); | |
| 7678 | - blockV1Panel(); | |
| 7679 | - (0, _elementor_editor.injectIntoLogic)({ | |
| 7680 | - id: "editing-panel-hooks", | |
| 7681 | - component: EditingPanelHooks | |
| 7682 | - }); | |
| 7683 | - init$2(); | |
| 7684 | - init$1(); | |
| 7685 | - registerElementControls(); | |
| 7686 | - initResetStyleProps(); | |
| 7687 | - init$3(); | |
| 7688 | - } | |
| 7689 | - var blockV1Panel = () => { | |
| 7690 | - (0, _elementor_editor_v1_adapters.blockCommand)({ | |
| 7691 | - command: "panel/editor/open", | |
| 7692 | - condition: isAtomicWidgetSelected | |
| 7693 | - }); | |
| 7694 | - }; | |
| 7695 | - | |
| 7696 | -//#endregion | |
| 7697 | -//#region packages/packages/core/editor-editing-panel/src/index.ts | |
| 7698 | - var src_exports = /* @__PURE__ */ __exportAll({ | |
| 7699 | - BaseControl: () => Control$1, | |
| 7700 | - ClassesPropProvider: () => ClassesPropProvider, | |
| 7701 | - ControlLabel: () => ControlLabel, | |
| 7702 | - ControlTypeContainer: () => ControlTypeContainer, | |
| 7703 | - CreatableAutocomplete: () => CreatableAutocomplete, | |
| 7704 | - CustomCssIndicator: () => CustomCssIndicator, | |
| 7705 | - DEFAULT_PSEUDO_STATES: () => DEFAULT_PSEUDO_STATES, | |
| 7706 | - EditingPanelTabs: () => EditingPanelTabs, | |
| 7707 | - ElementProvider: () => ElementProvider, | |
| 7708 | - FIELD_TYPE: () => FIELD_TYPE, | |
| 7709 | - HISTORY_DEBOUNCE_WAIT: () => 800, | |
| 7710 | - PseudoStateMenuItems: () => PseudoStateMenuItems, | |
| 7711 | - STYLE_SECTIONS: () => STYLE_SECTIONS, | |
| 7712 | - STYLE_SECTION_NAMES: () => STYLE_SECTION_NAMES, | |
| 7713 | - SectionContent: () => SectionContent, | |
| 7714 | - SectionsList: () => SectionsList, | |
| 7715 | - SettingsControl: () => SettingsControl, | |
| 7716 | - SettingsField: () => SettingsField, | |
| 7717 | - StyleIndicator: () => StyleIndicator, | |
| 7718 | - StyleInheritanceProvider: () => StyleInheritanceProvider, | |
| 7719 | - StyleProvider: () => StyleProvider, | |
| 7720 | - StyleSections: () => StyleSections, | |
| 7721 | - StyleTabSection: () => StyleTabSection, | |
| 7722 | - StyleTabSlot: () => StyleTabSlot, | |
| 7723 | - StylesProviderCannotUpdatePropsError: () => StylesProviderCannotUpdatePropsError, | |
| 7724 | - controlsRegistry: () => controlsRegistry, | |
| 7725 | - createTopLevelObjectType: () => createTopLevelObjectType, | |
| 7726 | - doApplyClasses: () => doApplyClasses, | |
| 7727 | - doGetAppliedClasses: () => doGetAppliedClasses, | |
| 7728 | - doUnapplyClass: () => doUnapplyClass, | |
| 7729 | - extractDependencyEffect: () => extractDependencyEffect, | |
| 7730 | - extractOrderedDependencies: () => extractOrderedDependencies, | |
| 7731 | - getElementSettingsWithDefaults: () => getElementSettingsWithDefaults, | |
| 7732 | - getFieldIndicators: () => getFieldIndicators, | |
| 7733 | - getSubtitle: () => getSubtitle, | |
| 7734 | - getTitle: () => getTitle, | |
| 7735 | - getUpdatedValues: () => getUpdatedValues, | |
| 7736 | - init: () => init, | |
| 7737 | - injectIntoClassSelectorActions: () => injectIntoClassSelectorActions, | |
| 7738 | - injectIntoCssClassConvert: () => injectIntoCssClassConvert, | |
| 7739 | - injectIntoGridFields: () => injectIntoGridFields, | |
| 7740 | - injectIntoPanelHeaderTop: () => injectIntoPanelHeaderTop, | |
| 7741 | - injectIntoStyleTab: () => injectIntoStyleTab, | |
| 7742 | - isDynamicPropValue: () => isDynamicPropValue, | |
| 7743 | - registerEditingPanelReplacement: () => registerEditingPanelReplacement, | |
| 7744 | - registerElementPanelDefaults: () => registerElementPanelDefaults, | |
| 7745 | - registerFieldIndicator: () => registerFieldIndicator, | |
| 7746 | - registerStyleProviderToColors: () => registerStyleProviderToColors, | |
| 7747 | - setLicenseConfig: () => setLicenseConfig, | |
| 7748 | - useClassesProp: () => useClassesProp, | |
| 7749 | - useCustomCss: () => useCustomCss, | |
| 7750 | - useElement: () => useElement, | |
| 7751 | - usePanelActions: () => usePanelActions, | |
| 7752 | - usePanelStatus: () => usePanelStatus, | |
| 7753 | - usePseudoStates: () => usePseudoStates, | |
| 7754 | - useStateByElement: () => useStateByElement, | |
| 7755 | - useStyle: () => useStyle, | |
| 7756 | - useStylesRerender: () => useStylesRerender | |
| 7757 | - }); | |
| 7758 | - | |
| 7759 | -//#endregion | |
| 7760 | -//#region \0elementor-package-library-entry | |
| 7761 | - (window.elementorV2 = window.elementorV2 || {}).editorEditingPanel = src_exports; | |
| 7762 | - | |
| 7763 | -//#endregion | |
| 7764 | -})(React, elementorV2.ui, elementorV2.editorElements, elementorV2.editorProps, elementorV2.locations, elementorV2.session, elementorV2.editorStylesRepository, elementorV2.utils, elementorV2.editorControls, elementorV2.icons, elementorV2.editorUi, wp.i18n, elementorV2.editorStyles, elementorV2.editorV1Adapters, elementorV2.editorDocuments, elementorV2.editorResponsive, elementorV2.editorPanels, elementorV2.menus, elementorV2.editorInteractions, elementorV2.editorVariables, elementorV2.editorCanvas, elementorV2.editor, elementorV2.schema, elementorV2.wpMedia); | |
| 7765 | -window.elementorV2.editorEditingPanel?.init?.(); | |
| 18 | +`,i="up";function ScrollProvider({children:e}){const[t,n]=(0,r.useState)(i),o=(0,r.useRef)(null),l=(0,r.useRef)(0);return(0,r.useEffect)(()=>{const e=o.current;if(!e)return;const handleScroll=()=>{const{scrollTop:t}=e;t>l.current?n("down"):t<l.current&&n("up"),l.current=t};return e.addEventListener("scroll",handleScroll),()=>{e.removeEventListener("scroll",handleScroll)}}),r.createElement(s.Provider,{value:{direction:t}},r.createElement(a,{ref:o},e))}function useScrollDirection(){return(0,r.useContext)(s)?.direction??i}},"./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx":function(e,t,n){n.r(t),n.d(t,{StyleProvider:function(){return StyleProvider},getProviderByStyleId:function(){return getProviderByStyleId},useIsStyle:function(){return useIsStyle},useStyle:function(){return useStyle}});var r=n("react"),o=n("@elementor/editor-styles-repository"),s=n("./packages/packages/core/editor-editing-panel/src/errors.ts");const a=(0,r.createContext)(null);function StyleProvider({children:e,...t}){const n=null===t.id?null:getProviderByStyleId(t.id),{userCan:i}=(0,o.useUserStylesCapability)();if(t.id&&!n)throw new s.StylesProviderNotFoundError({context:{styleId:t.id}});const l=i(n?.getKey()??"").updateProps;return r.createElement(a.Provider,{value:{...t,provider:n,canEdit:l}},e)}function useStyle(){const e=(0,r.useContext)(a);if(!e)throw new Error("useStyle must be used within a StyleProvider");return e}function getProviderByStyleId(e){return o.stylesRepository.getProviders().find(t=>t.actions.all().find(t=>t.id===e))??null}function useIsStyle(){return!!(0,r.useContext)(a)}},"./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx":function(e,t,n){n.r(t),n.d(t,{StyleInheritanceProvider:function(){return StyleInheritanceProvider},useStylesInheritanceChain:function(){return useStylesInheritanceChain},useStylesInheritanceSnapshot:function(){return useStylesInheritanceSnapshot}});var r=n("react"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-props"),a=n("@elementor/editor-responsive"),i=n("@elementor/editor-styles"),l=n("@elementor/editor-styles-repository"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/create-styles-inheritance.ts"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx");const g=(0,r.createContext)(null);function StyleInheritanceProvider({children:e}){const t=useAppliedStyles(),n=(0,a.getBreakpointsTree)(),{getSnapshot:o,getInheritanceChain:s}=(0,p.createStylesInheritance)(t,n);return r.createElement(g.Provider,{value:{getSnapshot:o,getInheritanceChain:s}},e)}function useStylesInheritanceSnapshot(){const e=(0,r.useContext)(g),{meta:t}=(0,m.useStyle)();if(!e)throw new Error("useStylesInheritanceSnapshot must be used within a StyleInheritanceProvider");return t?e.getSnapshot(t)??null:null}function useStylesInheritanceChain(e){const t=(0,r.useContext)(g);if(!t)throw new Error("useStylesInheritanceChain must be used within a StyleInheritanceProvider");const n=(0,i.getStylesSchema)(),o=n?.[e[0]],s=useStylesInheritanceSnapshot();return s?t.getInheritanceChain(s,e,o):[]}const useAppliedStyles=()=>{const e=(0,d.useClassesProp)(),t=useBaseStyles();(0,c.useStylesRerender)();const n=(0,u.usePanelElementSetting)(e),r=s.classesPropTypeUtil.extract(n)??[];return l.stylesRepository.all().filter(e=>[...t,...r].includes(e.id))},useBaseStyles=()=>{const{elementType:e}=(0,u.useElement)(),t=(0,o.getWidgetsCache)(),n=t?.[e.key];return Object.keys(n?.base_styles??{})}},"./packages/packages/core/editor-editing-panel/src/controls-registry/conditional-field.tsx":function(e,t,n){n.r(t),n.d(t,{ConditionalField:function(){return ConditionalField},getDependencies:function(){return getDependencies}});var r=n("@elementor/editor-controls"),o=n("@elementor/editor-props"),s=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts");const ConditionalField=({children:e})=>{const{propType:t}=(0,r.useBoundProp)(),n=getDependencies(t),{values:a}=(0,s.useStylesFields)(n);return!(0,o.isDependencyMet)(t?.dependencies,a).isMet?null:e};function getDependencies(e){return e?.dependencies?.terms.length?e.dependencies.terms.flatMap(e=>(0,o.isDependency)(e)?[]:e.path):[]}},"./packages/packages/core/editor-editing-panel/src/controls-registry/control-type-container.tsx":function(e,t,n){n.r(t),n.d(t,{ControlTypeContainer:function(){return ControlTypeContainer}});var r=n("react"),o=n("@elementor/ui");const ControlTypeContainer=({children:e,layout:t})=>"custom"===t?e:r.createElement(s,{layout:t},e),s=(0,o.styled)(o.Box,{shouldForwardProp:e=>!["layout"].includes(e)})(({layout:e,theme:t})=>({display:"grid",gridGap:t.spacing(1),...getGridLayout(e)})),getGridLayout=e=>({justifyContent:"space-between",...getStyleByLayout(e)}),getStyleByLayout=e=>"full"===e?{gridTemplateColumns:"minmax(0, 1fr)"}:"two-columns"===e?{alignItems:"center",gridTemplateColumns:"repeat(2, minmax(0, 1fr))"}:void 0},"./packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx":function(e,t,n){n.r(t),n.d(t,{Control:function(){return Control}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/errors.ts"),a=n("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const Control=({props:e,type:t})=>{const n=a.controlsRegistry.get(t),{element:i}=(0,o.useElement)();if(!n)throw new s.ControlTypeNotFoundError({context:{controlType:t}});return r.createElement(n,_extends({},e,{context:{elementId:i.id}}))}},"./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx":function(e,t,n){n.r(t),n.d(t,{controlsRegistry:function(){return i}});var r=n("@elementor/editor-controls"),o=n("@elementor/editor-props"),s=n("./packages/packages/core/editor-editing-panel/src/errors.ts");const a={image:{component:r.ImageControl,layout:"custom",propTypeUtil:o.imagePropTypeUtil},"svg-media":{component:r.SvgMediaControl,layout:"full",propTypeUtil:o.imageSrcPropTypeUtil},text:{component:r.TextControl,layout:"full",propTypeUtil:o.stringPropTypeUtil},textarea:{component:r.TextAreaControl,layout:"full",propTypeUtil:o.stringPropTypeUtil},size:{component:r.SizeControl,layout:"two-columns",propTypeUtil:o.sizePropTypeUtil},select:{component:r.SelectControlWrapper,layout:"two-columns",propTypeUtil:o.stringPropTypeUtil},chips:{component:r.ChipsControl,layout:"full",propTypeUtil:o.stringArrayPropTypeUtil},link:{component:r.LinkControl,layout:"custom",propTypeUtil:o.linkPropTypeUtil},query:{component:r.QueryControl,layout:"full",propTypeUtil:o.queryPropTypeUtil},url:{component:r.UrlControl,layout:"full",propTypeUtil:o.stringPropTypeUtil},switch:{component:r.SwitchControl,layout:"two-columns",propTypeUtil:o.booleanPropTypeUtil},number:{component:r.NumberControl,layout:"two-columns",propTypeUtil:o.numberPropTypeUtil},repeatable:{component:r.RepeatableControl,layout:"full",propTypeUtil:void 0},"key-value":{component:r.KeyValueControl,layout:"full",propTypeUtil:o.keyValuePropTypeUtil},"html-tag":{component:r.HtmlTagControl,layout:"two-columns",propTypeUtil:o.stringPropTypeUtil},toggle:{component:r.ToggleControl,layout:"full",propTypeUtil:o.stringPropTypeUtil},"date-time":{component:r.DateTimeControl,layout:"full",propTypeUtil:o.DateTimePropTypeUtil},video:{component:r.VideoMediaControl,layout:"full",propTypeUtil:o.videoSrcPropTypeUtil},"inline-editing":{component:r.InlineEditingControl,layout:"full",propTypeUtil:o.htmlV3PropTypeUtil},email:{component:r.EmailFormActionControl,layout:"custom",propTypeUtil:o.emailPropTypeUtil}};const i=new class ControlsRegistry{constructor(e){this.controlsRegistry=e,this.controlsRegistry=e}get(e){return this.controlsRegistry[e]?.component}getLayout(e){return this.controlsRegistry[e]?.layout}getPropTypeUtil(e){return this.controlsRegistry[e]?.propTypeUtil}registry(){return this.controlsRegistry}register(e,t,n,r){if(this.controlsRegistry[e])throw new s.ControlTypeAlreadyRegisteredError({context:{controlType:e}});this.controlsRegistry[e]={component:t,layout:n,propTypeUtil:r}}unregister(e){if(!this.controlsRegistry[e])throw new s.ControlTypeNotRegisteredError({context:{controlType:e}});delete this.controlsRegistry[e]}}(a)},"./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts":function(e,t,n){n.r(t),n.d(t,{createTopLevelObjectType:function(){return createTopLevelObjectType}});const createTopLevelObjectType=({schema:e})=>({key:"",kind:"object",meta:{},settings:{},default:null,shape:e})},"./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/get-element-by-type.ts":function(e,t,n){n.r(t),n.d(t,{getElementByType:function(){return getElementByType}});var r=n("@elementor/editor-elements");const getElementByType=(e,t)=>{const n=(0,r.getContainer)(e);return n?n.model.get("elType")===t?n:n.children?.findRecursive?.(e=>e.model.get("elType")===t)??null:null}},"./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/registry.ts":function(e,t,n){n.r(t),n.d(t,{registerElementControls:function(){return registerElementControls}});var r=n("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx");const o={tabs:{component:n("./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/tabs-control.tsx").TabsControl,layout:"full"}},registerElementControls=()=>{Object.entries(o).forEach(([e,{component:t,layout:n}])=>{r.controlsRegistry.register(e,t,n)})}},"./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/tabs-control.tsx":function(e,t,n){n.r(t),n.d(t,{ConditionalTooltip:function(){return ConditionalTooltip},TabsControl:function(){return TabsControl},TabsControlContent:function(){return TabsControlContent}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-elements"),a=n("@elementor/editor-props"),i=n("@elementor/icons"),l=n("@elementor/ui"),c=n("@wordpress/i18n"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/get-element-by-type.ts"),m=n("./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/use-actions.ts");const g="e-tabs-menu",TabsControl=({label:e})=>r.createElement(d.SettingsField,{bind:"default-active-tab",propDisplayName:(0,c.__)("Tabs","elementor")},r.createElement(TabsControlContent,{label:e})),TabsControlContent=({label:e})=>{const{element:t}=(0,p.useElement)(),{addItem:n,duplicateItem:a,moveItem:i,removeItem:l}=(0,m.useActions)(),{[m.TAB_ELEMENT_TYPE]:c}=(0,s.useElementChildren)(t.id,{[g]:m.TAB_ELEMENT_TYPE}),d=(0,u.getElementByType)(t.id,g),y=(0,u.getElementByType)(t.id,"e-tabs-content-area"),f=c.map((e,t)=>({id:e.id,title:e.editorSettings?.title,index:t}));return r.createElement(o.Repeater,{showToggle:!1,values:f,setValues:(e,t,r)=>{if("add"===r?.action?.type){const e=r.action.payload;return n({tabContentAreaId:y.id,items:e,tabsMenuId:d.id})}if("remove"===r?.action?.type){const e=r.action.payload;return l({items:e,tabContentAreaId:y.id})}if("duplicate"===r?.action?.type){const e=r.action.payload;return a({items:e,tabContentAreaId:y.id})}if("reorder"===r?.action?.type){const{from:e,to:t}=r.action.payload;return i({toIndex:t,tabsMenuId:d.id,tabContentAreaId:y.id,movedElementId:c[e].id,movedElementIndex:e})}},showRemove:f.length>1,label:e,itemSettings:{getId:({item:e})=>e.id,initialValues:{id:"",title:"Tab"},Label:ItemLabel,Content:ItemContent,Icon:()=>null}})},ItemLabel=({value:e,index:t})=>{const n=e?.title;return r.createElement(l.Stack,{sx:{minHeight:20},direction:"row",alignItems:"center",gap:1.5},r.createElement("span",null,n),r.createElement(ItemDefaultTab,{index:t}))},ItemDefaultTab=({index:e})=>{const{value:t}=(0,o.useBoundProp)(a.numberPropTypeUtil);return t===e?r.createElement(l.Chip,{size:"tiny",shape:"rounded",label:(0,c.__)("Default","elementor")}):null},ItemContent=({value:e,index:t})=>e.id?r.createElement(l.Stack,{p:2,gap:1.5},r.createElement(TabLabelControl,{elementId:e.id}),r.createElement(d.SettingsField,{bind:"default-active-tab",propDisplayName:(0,c.__)("Tabs","elementor")},r.createElement(DefaultTabControl,{tabIndex:t}))):null,DefaultTabControl=({tabIndex:e})=>{const{value:t,setValue:n}=(0,o.useBoundProp)(a.numberPropTypeUtil),s=t===e;return r.createElement(l.Stack,{direction:"row",alignItems:"center",justifyContent:"space-between",gap:2},r.createElement(o.ControlFormLabel,null,(0,c.__)("Set as default tab","elementor")),r.createElement(ConditionalTooltip,{showTooltip:s,placement:"right"},r.createElement(l.Switch,{size:"small",checked:s,disabled:s,onChange:({target:t})=>{n(t.checked?e:null)},inputProps:{...s?{style:{opacity:0,cursor:"not-allowed"}}:{}}})))},TabLabelControl=({elementId:e})=>{const t=(0,s.useElementEditorSettings)(e),n=t?.title??"";return r.createElement(l.Stack,{gap:1},r.createElement(o.ControlFormLabel,null,(0,c.__)("Tab name","elementor")),r.createElement(l.TextField,{size:"tiny",value:n,onChange:({target:t})=>{(0,s.updateElementEditorSettings)({elementId:e,settings:{title:t.value}})}}))},ConditionalTooltip=({showTooltip:e,children:t})=>e?r.createElement(l.Infotip,{arrow:!1,content:r.createElement(l.Alert,{color:"secondary",icon:r.createElement(i.InfoCircleFilledIcon,{fontSize:"tiny"}),size:"small",sx:{width:288}},r.createElement(l.Typography,{variant:"body2"},(0,c.__)("To change the default tab, simply set another tab as default.","elementor")))},r.createElement("span",null,t)):t},"./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/tabs-control/use-actions.ts":function(e,t,n){n.r(t),n.d(t,{TAB_CONTENT_ELEMENT_TYPE:function(){return l},TAB_ELEMENT_TYPE:function(){return i},useActions:function(){return useActions}});var r=n("@elementor/editor-controls"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-props"),a=n("@wordpress/i18n");const i="e-tab",l="e-tab-content",useActions=()=>{const{value:e,setValue:t}=(0,r.useBoundProp)(s.numberPropTypeUtil),n=e??0;return{duplicateItem:({items:e,tabContentAreaId:r})=>{const s=calculateDefaultOnDuplicate({items:e,defaultActiveTab:n});e.forEach(({item:e,index:i})=>{const l=e.id,c=(0,o.getContainer)(r),p=c?.children?.[i]?.id;if(!p)throw new Error("Original content ID is required for duplication");(0,o.duplicateElements)({elementIds:[l,p],title:(0,a.__)("Duplicate Tab","elementor"),onDuplicateElements:()=>{s!==n&&t(s,{},{withHistory:!1})},onRestoreElements:()=>{s!==n&&t(n,{},{withHistory:!1})}})})},moveItem:({toIndex:e,tabsMenuId:r,tabContentAreaId:s,movedElementId:i,movedElementIndex:l})=>{const c=(0,o.getContainer)(s),p=c?.children?.[l],d=(0,o.getContainer)(i),u=(0,o.getContainer)(r);if(!p)throw new Error("Content element is required");if(!d||!u)throw new Error("Tab element or menu not found");const m=calculateDefaultOnMove({from:l,to:e,defaultActiveTab:n});(0,o.moveElements)({title:(0,a.__)("Reorder Tabs","elementor"),moves:[{element:d,targetContainer:u,options:{at:e}},{element:p,targetContainer:c,options:{at:e}}],onMoveElements:()=>{m!==n&&t(m,{},{withHistory:!1})},onRestoreElements:()=>{m!==n&&t(n,{},{withHistory:!1})}})},removeItem:({items:e,tabContentAreaId:r})=>{const s=calculateDefaultOnRemove({items:e,defaultActiveTab:n});(0,o.removeElements)({title:(0,a.__)("Tabs","elementor"),elementIds:e.flatMap(({item:e,index:t})=>{const n=e.id,s=(0,o.getContainer)(r),a=s?.children?.[t]?.id;if(!a)throw new Error("Content ID is required");return[n,a]}),onRemoveElements:()=>{s!==n&&t(s,{},{withHistory:!1})},onRestoreElements:()=>{s!==n&&t(n,{},{withHistory:!1})}})},addItem:({tabContentAreaId:e,tabsMenuId:t,items:n})=>{const r=(0,o.getContainer)(e),s=(0,o.getContainer)(t);if(!r||!s)throw new Error("Tab containers not found");n.forEach(({index:e})=>{const t=e+1;(0,o.createElements)({title:(0,a.__)("Tabs","elementor"),elements:[{container:r,model:{elType:l,editor_settings:{title:`Tab ${t} content`,initial_position:t}}},{container:s,model:{elType:i,editor_settings:{title:`Tab ${t} trigger`,initial_position:t}}}]})})}}},calculateDefaultOnMove=({from:e,to:t,defaultActiveTab:n})=>e===n?t:e<n&&t>=n?n-1:e>n&&t<=n?n+1:n,calculateDefaultOnRemove=({items:e,defaultActiveTab:t})=>{if(e.some(({index:e})=>e===t))return 0;const n=e.reduce((e,{index:n})=>n<t?e+1:e,0);return t-n},calculateDefaultOnDuplicate=({items:e,defaultActiveTab:t})=>{const n=e.reduce((e,{index:n})=>n<t?e+1:e,0);return t+n}},"./packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx":function(e,t,n){n.r(t),n.d(t,{SettingsField:function(){return SettingsField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-documents"),a=n("@elementor/editor-elements"),i=n("@elementor/editor-props"),l=n("@elementor/editor-v1-adapters"),c=n("@wordpress/i18n"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/utils/prop-dependency-utils.ts"),u=n("./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts");const SettingsField=({bind:e,children:t,propDisplayName:n})=>{const{element:{id:m},elementType:{propsSchema:g,dependenciesPerTargetMapping:y={}},settings:f}=(0,p.useElement)(),k={[e]:f?.[e]??null},b=(0,u.createTopLevelObjectType)({schema:g}),v=function useUndoableUpdateElementProp({elementId:e,propDisplayName:t}){return(0,r.useMemo)(()=>(0,l.undoable)({do:t=>{const n=(0,a.getElementSettings)(e,Object.keys(t));return(0,a.updateElementSettings)({id:e,props:t,withHistory:!1}),(0,s.setDocumentModifiedStatus)(!0),n},undo:({},t)=>{(0,a.updateElementSettings)({id:e,props:t,withHistory:!1})}},{title:(0,a.getElementLabel)(e),subtitle:(0,c.__)("%s edited","elementor").replace("%s",t),debounce:{wait:800}}),[e,t])}({elementId:m,propDisplayName:n}),{isDisabled:x,isHidden:E,settingsWithDefaults:h}=((e,t,n)=>{const r=(0,d.getElementSettingsWithDefaults)(t,n),o=t[e],s=(0,i.isDependencyMet)(o?.dependencies,r);return{isDisabled:e=>!(0,i.isDependencyMet)(e?.dependencies,r).isMet,isHidden:!s.isMet&&!(0,i.isDependency)(s.failingDependencies[0])&&"hide"===s.failingDependencies[0]?.effect,settingsWithDefaults:r}})(e,g,f);if(E)return null;return r.createElement(o.PropProvider,{propType:b,value:k,setValue:(e,t={},n)=>{const{withHistory:r=!0}=n??{},o=(0,d.extractOrderedDependencies)(y),s=(0,d.getUpdatedValues)(e,o,g,h,m);r?v(s):(0,a.updateElementSettings)({id:m,props:s,withHistory:!1})},isDisabled:x},r.createElement(o.PropKeyProvider,{bind:e},t))}},"./packages/packages/core/editor-editing-panel/src/controls-registry/styles-field.tsx":function(e,t,n){n.r(t),n.d(t,{StylesField:function(){return StylesField}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-styles"),a=n("./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts"),l=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts"),c=n("./packages/packages/core/editor-editing-panel/src/controls-registry/conditional-field.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts");const StylesField=({bind:e,propDisplayName:t,children:n})=>{const d=(0,s.getStylesSchema)(),u=(0,a.useStylesInheritanceChain)([e]),{value:m,canEdit:g,...y}=(0,l.useStylesField)(e,{history:{propDisplayName:t}}),f=(0,p.createTopLevelObjectType)({schema:d}),[k]=u,b={[e]:k?.value};return r.createElement(o.ControlAdornmentsProvider,{items:(0,i.getFieldIndicators)("styles")},r.createElement(o.PropProvider,{propType:f,value:{[e]:m},setValue:t=>{y.setValue(t[e])},placeholder:b,isDisabled:()=>!g},r.createElement(o.PropKeyProvider,{bind:e},r.createElement(c.ConditionalField,null,n))))}},"./packages/packages/core/editor-editing-panel/src/dynamics/components/background-control-dynamic-tag.tsx":function(e,t,n){n.r(t),n.d(t,{BackgroundControlDynamicTagIcon:function(){return BackgroundControlDynamicTagIcon},BackgroundControlDynamicTagLabel:function(){return BackgroundControlDynamicTagLabel}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-props"),a=n("@elementor/icons"),i=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const BackgroundControlDynamicTagIcon=()=>r.createElement(a.DatabaseIcon,{fontSize:"tiny"}),BackgroundControlDynamicTagLabel=({value:e})=>{const t=(0,o.useBoundProp)(s.backgroundImageOverlayPropTypeUtil);return r.createElement(o.PropProvider,_extends({},t,{value:e.value}),r.createElement(o.PropKeyProvider,{bind:"image"},r.createElement(Wrapper,{rawValue:e.value})))},Wrapper=({rawValue:e})=>{const{propType:t}=(0,o.useBoundProp)(),n=t.prop_types["background-image-overlay"];return r.createElement(o.PropProvider,{propType:n.shape.image,value:e,setValue:()=>{}},r.createElement(o.PropKeyProvider,{bind:"src"},r.createElement(Content,{rawValue:e.image})))},Content=({rawValue:e})=>{const t=e.value.src,n=(0,i.useDynamicTag)(t.value.name||"");return r.createElement(r.Fragment,null,n?.label)}},"./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-conditional-control.tsx":function(e,t,n){n.r(t),n.d(t,{DynamicConditionalControl:function(){return DynamicConditionalControl}});var r=n("react"),o=n("@elementor/editor-props");const DynamicConditionalControl=({children:e,propType:t,propsSchema:n,dynamicSettings:s})=>{const a=r.useMemo(()=>{if(!n)return{};return Object.entries(n).reduce((e,[t,n])=>(e[t]=n?.default??null,e),{})},[n]),i=r.useMemo(()=>s?Object.entries(s).reduce((e,[t,n])=>(e[t]=n&&"object"==typeof n&&"$$type"in n?n:{$$type:"plain",value:n},e),{}):{},[s]),l=r.useMemo(()=>({...a,...i}),[a,i]);if(!t?.dependencies?.terms.length)return r.createElement(r.Fragment,null,e);return!(0,o.isDependencyMet)(t?.dependencies,l).isMet?null:r.createElement(r.Fragment,null,e)}},"./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection-control.tsx":function(e,t,n){n.r(t),n.d(t,{DynamicSelectionControl:function(){return DynamicSelectionControl},DynamicSettingsPopover:function(){return DynamicSettingsPopover}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-ui"),a=n("@elementor/icons"),i=n("@elementor/ui"),l=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts"),u=n("./packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts"),m=n("./packages/packages/core/editor-editing-panel/src/hooks/use-persist-dynamic-value.ts"),g=n("./packages/packages/core/editor-editing-panel/src/dynamics/dynamic-control.tsx"),y=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts"),f=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts"),k=n("./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection.tsx");function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}const b="tiny",v=["popup"],DynamicSelectionControl=({OriginalControl:e,...t})=>{const{setValue:n,propType:c}=(0,o.useBoundProp)(),{bind:p,value:g}=(0,o.useBoundProp)(f.dynamicPropTypeUtil),{expired:v}=(0,u.useLicenseConfig)(),x=(0,d.createTopLevelObjectType)({schema:{[p]:c}}),[E]=(0,m.usePersistDynamicValue)(p),h=(0,i.usePopupState)({variant:"popover"}),{name:_=""}=g,S=(0,y.useDynamicTag)(_);if(!(0,f.isDynamicTagSupported)(_)&&e)return r.createElement(o.PropProvider,{propType:x,value:{[p]:null},setValue:n},r.createElement(o.PropKeyProvider,{bind:p},r.createElement(e,t)));if(!S)throw new Error(`Dynamic tag ${_} not found`);return r.createElement(i.Box,null,r.createElement(i.UnstableTag,_extends({fullWidth:!0,showActionsOnHover:!0,label:S.label,startIcon:r.createElement(a.DatabaseIcon,{fontSize:b})},(0,i.bindTrigger)(h),{actions:r.createElement(r.Fragment,null,r.createElement(DynamicSettingsPopover,{dynamicTag:S,disabled:v}),r.createElement(i.IconButton,{size:b,onClick:()=>{n(E??null)},"aria-label":(0,l.__)("Remove dynamic value","elementor")},r.createElement(a.XIcon,{fontSize:b})))})),r.createElement(i.Popover,_extends({disablePortal:!0,disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,i.bindPopover)(h)),r.createElement(s.SectionPopoverBody,{"aria-label":(0,l.__)("Dynamic tags","elementor")},r.createElement(k.DynamicSelection,{close:h.close,expired:v}))))},DynamicSettingsPopover=({dynamicTag:e,disabled:t=!1})=>{const n=(0,i.usePopupState)({variant:"popover"});return!!e.atomic_controls.length?r.createElement(r.Fragment,null,r.createElement(i.IconButton,_extends({size:b,disabled:t},!t&&(0,i.bindTrigger)(n),{"aria-label":(0,l.__)("Dynamic settings","elementor")}),r.createElement(a.SettingsIcon,{fontSize:b})),r.createElement(i.Popover,_extends({disablePortal:!0,disableScrollLock:!0,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},PaperProps:{sx:{my:1}}},(0,i.bindPopover)(n)),r.createElement(s.SectionPopoverBody,{"aria-label":(0,l.__)("Dynamic settings","elementor")},r.createElement(s.PopoverHeader,{title:e.label,onClose:n.close,icon:r.createElement(a.DatabaseIcon,{fontSize:b})}),r.createElement(DynamicSettings,{controls:e.atomic_controls,tagName:e.name})))):null},DynamicSettings=({controls:e,tagName:t})=>{const n=e.filter(({type:e})=>"section"===e),{getTabsProps:o,getTabProps:s,getTabPanelProps:a}=(0,i.useTabs)(0);if(!n.length)return null;if(v.includes(t)){const e=n[0];return r.createElement(r.Fragment,null,r.createElement(i.Divider,null),r.createElement(ControlsItemsStack,{items:e.value.items}))}return r.createElement(r.Fragment,null,n.length>1&&r.createElement(i.Tabs,_extends({size:"small",variant:"fullWidth"},o()),n.map(({value:e},t)=>r.createElement(i.Tab,_extends({key:t,label:e.label,sx:{px:1,py:.5}},s(t))))),r.createElement(i.Divider,null),n.map(({value:e},t)=>r.createElement(i.TabPanel,_extends({key:t,sx:{flexGrow:1,py:0,overflowY:"auto"}},a(t)),r.createElement(ControlsItemsStack,{items:e.items}))))},x={separator:"two-columns",action:"full",off_canvas:"full",type:"two-columns"},E={select:"full"},Control=({control:e})=>{if(!p.controlsRegistry.get(e.type))return null;const t=(e=>{const t=E[e.type];return t||(x[e.bind]??p.controlsRegistry.getLayout(e.type))})(e),n={..."select"===e.type?{...e.props,MenuProps:{...e.props?.MenuProps??{},disablePortal:!0}}:{...e.props},ariaLabel:e.label},s="switch"===e.type,a="two-columns"===t?{display:"grid",gridTemplateColumns:s?"minmax(0, 1fr) max-content":"1fr 1fr"}:{};return r.createElement(g.DynamicControl,{bind:e.bind},r.createElement(i.Grid,{container:!0,gap:.75,sx:a},e.label?r.createElement(i.Grid,{item:!0,xs:12},r.createElement(o.ControlFormLabel,null,e.label)):null,r.createElement(i.Grid,{item:!0,xs:12},r.createElement(c.Control,{type:e.type,props:n}))))};function ControlsItemsStack({items:e}){return r.createElement(i.Stack,{p:2,gap:2,sx:{overflowY:"auto"}},e.map(e=>"control"===e.type?r.createElement(Control,{key:e.value.bind,control:e.value}):null))}},"./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection.tsx":function(e,t,n){n.r(t),n.d(t,{DynamicSelection:function(){return DynamicSelection}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-ui"),a=n("@elementor/icons"),i=n("@elementor/ui"),l=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-editing-panel/src/hooks/use-persist-dynamic-value.ts"),p=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-tags.ts"),d=n("./packages/packages/core/editor-editing-panel/src/dynamics/sync/get-atomic-dynamic-tags.ts"),u=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const DynamicSelection=({close:e,expired:t=!1})=>{const[n,p]=(0,r.useState)(""),{groups:m}=(0,d.getAtomicDynamicTags)()||{},g=(0,i.useTheme)(),{value:y}=(0,o.useBoundProp)(),{bind:f,value:k,setValue:b}=(0,o.useBoundProp)(u.dynamicPropTypeUtil),[,v]=(0,c.usePersistDynamicValue)(f),x=!!k,E=useFilteredOptions(n),h=!E.length&&!n.trim();(0,r.useEffect)(()=>{(h||t)&&(0,o.trackViewPromotion)({target_name:"dynamic_tags"})},[h,t]);const handleSearch=e=>{p(e)},handleSetDynamicTag=t=>{x||v(y);const n=E.flatMap(([,e])=>e).find(e=>e.value===t);b({name:t,group:n?.group??"",settings:{label:n?.label}}),e()},_=E.flatMap(([e,t])=>[{type:"category",value:e,label:m?.[e]?.title||e},...t.map(e=>({type:"item",value:e.value,label:e.label}))]);return r.createElement(s.SectionPopoverBody,{"aria-label":(0,l.__)("Dynamic tags","elementor")},r.createElement(s.PopoverHeader,{title:(0,l.__)("Dynamic tags","elementor"),onClose:e,icon:r.createElement(a.DatabaseIcon,{fontSize:"tiny"})}),h?r.createElement(NoDynamicTags,null):t?r.createElement(ExpiredDynamicTags,null):r.createElement(r.Fragment,null,r.createElement(s.SearchField,{value:n,onSearch:handleSearch,placeholder:(0,l.__)("Search dynamic tags…","elementor")}),r.createElement(i.Divider,null),r.createElement(s.PopoverMenuList,{items:_,onSelect:handleSetDynamicTag,onClose:e,selectedValue:k?.name,itemStyle:e=>"item"===e.type?{paddingInlineStart:g.spacing(3.5)}:{},noResultsComponent:r.createElement(NoResults,{searchValue:n,onClear:()=>p("")})})))},NoResults=({searchValue:e,onClear:t})=>r.createElement(i.Stack,{gap:1,alignItems:"center",justifyContent:"center",height:"100%",p:2.5,color:"text.secondary",sx:{pb:3.5}},r.createElement(a.DatabaseIcon,{fontSize:"large"}),r.createElement(i.Typography,{align:"center",variant:"subtitle2"},(0,l.__)("Sorry, nothing matched","elementor"),r.createElement("br",null),"“",e,"”."),r.createElement(i.Typography,{align:"center",variant:"caption",sx:{display:"flex",flexDirection:"column"}},(0,l.__)("Try something else.","elementor"),r.createElement(i.Link,{color:"text.secondary",variant:"caption",component:"button",onClick:t},(0,l.__)("Clear & try again","elementor")))),NoDynamicTags=()=>r.createElement(r.Fragment,null,r.createElement(i.Divider,null),r.createElement(i.Stack,{gap:1,alignItems:"center",justifyContent:"center",height:"100%",p:2.5,color:"text.secondary",sx:{pb:3.5}},r.createElement(a.DatabaseIcon,{fontSize:"large"}),r.createElement(i.Typography,{align:"center",variant:"subtitle2"},(0,l.__)("Streamline your workflow with dynamic tags","elementor")),r.createElement(i.Typography,{align:"center",variant:"caption",width:170},(0,l.__)("Upgrade now to display your content dynamically.","elementor")),r.createElement(s.CtaButton,{size:"small",href:"https://go.elementor.com/go-pro-dynamic-tags-modal/",onClick:()=>(0,o.trackUpgradePromotionClick)({target_name:"dynamic_tags"})}))),ExpiredDynamicTags=()=>r.createElement(r.Fragment,null,r.createElement(i.Divider,null),r.createElement(i.Stack,{gap:1,alignItems:"center",justifyContent:"center",height:"100%",p:2.5,color:"text.secondary",sx:{pb:3.5}},r.createElement(a.DatabaseIcon,{fontSize:"large"}),r.createElement(i.Typography,{align:"center",variant:"subtitle2"},(0,l.__)("Unlock your Dynamic tags again","elementor")),r.createElement(i.Typography,{align:"center",variant:"caption",width:170},(0,l.__)("Dynamic tags need Elementor Pro. Renew now to keep them active.","elementor")),r.createElement(s.CtaButton,{size:"small",href:"https://go.elementor.com/go-pro-dynamic-tags-renew-modal/",onClick:()=>(0,o.trackUpgradePromotionClick)({target_name:"dynamic_tags"}),children:(0,l.__)("Renew Now","elementor")}))),useFilteredOptions=e=>[...(0,p.usePropDynamicTags)().reduce((t,{name:n,label:r,group:o})=>r.toLowerCase().includes(e.trim().toLowerCase())?(t.has(o)||t.set(o,[]),t.get(o)?.push({label:r,group:o,value:n}),t):t,new Map)]},"./packages/packages/core/editor-editing-panel/src/dynamics/dynamic-control.tsx":function(e,t,n){n.r(t),n.d(t,{DynamicControl:function(){return DynamicControl}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts"),a=n("./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-conditional-control.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts"),l=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const DynamicControl=({bind:e,children:t})=>{const{value:n,setValue:c}=(0,o.useBoundProp)(l.dynamicPropTypeUtil),{name:p="",group:d="",settings:u}=n??{},m=(0,i.useDynamicTag)(p);if(!m)throw new Error(`Dynamic tag ${p} not found`);const g=m.props_schema[e],y=g?.default,f=u?.[e]??y,k=(0,s.createTopLevelObjectType)({schema:m.props_schema});return r.createElement(o.PropProvider,{propType:k,setValue:e=>{c({name:p,group:d,settings:{...u,...e}})},value:{[e]:f}},r.createElement(o.PropKeyProvider,{bind:e},r.createElement(a.DynamicConditionalControl,{propType:g,propsSchema:m.props_schema,dynamicSettings:u},t)))}},"./packages/packages/core/editor-editing-panel/src/dynamics/dynamic-transformer.ts":function(e,t,n){n.r(t),n.d(t,{dynamicTransformer:function(){return i}});var r=n("@elementor/editor-canvas"),o=n("@elementor/editor-props"),s=n("./packages/packages/core/editor-editing-panel/src/dynamics/errors.ts"),a=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const i=(0,r.createTransformer)((e,{propType:t})=>e?.name&&(0,a.isDynamicTagSupported)(e.name)?function getDynamicValue(e,t){const{dynamicTags:n}=window.elementor??{};if(!n)throw new s.DynamicTagsManagerNotFoundError;const getTagValue=()=>{const r=n.createTag("v4-dynamic-tag",e,t);return r?n.loadTagDataFromCache(r)??null:null},r=getTagValue();if(null!==r)return r;return new Promise(e=>{n.refreshCacheFromServer(()=>{e(getTagValue())})})}(e.name,function simpleTransform(e){const t=Object.entries(e).map(([e,t])=>[e,(0,o.isTransformable)(t)?t.value:t]);return Object.fromEntries(t)}(e?.settings??{})):t?.default??null)},"./packages/packages/core/editor-editing-panel/src/dynamics/errors.ts":function(e,t,n){n.r(t),n.d(t,{DynamicTagsManagerNotFoundError:function(){return o}});var r=n("@elementor/utils");const o=(0,r.createError)({code:"dynamic_tags_manager_not_found",message:"Dynamic tags manager not found"})},"./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-dynamic-tag.ts":function(e,t,n){n.r(t),n.d(t,{useDynamicTag:function(){return useDynamicTag}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-tags.ts");const useDynamicTag=e=>{const t=(0,o.useAllPropDynamicTags)();return(0,r.useMemo)(()=>t.find(t=>t.name===e)??null,[t,e])}},"./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-action.tsx":function(e,t,n){n.r(t),n.d(t,{usePropDynamicAction:function(){return usePropDynamicAction}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/icons"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const usePropDynamicAction=()=>{const{propType:e}=(0,o.useBoundProp)();return{visible:!!e&&(0,l.supportsDynamic)(e),icon:s.DatabaseIcon,title:(0,a.__)("Dynamic tags","elementor"),content:({close:e})=>r.createElement(i.DynamicSelection,{close:e})}}},"./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-tags.ts":function(e,t,n){n.r(t),n.d(t,{useAllPropDynamicTags:function(){return useAllPropDynamicTags},usePropDynamicTags:function(){return usePropDynamicTags}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("./packages/packages/core/editor-editing-panel/src/dynamics/sync/get-atomic-dynamic-tags.ts"),a=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const usePropDynamicTags=()=>usePropDynamicTagsInternal(!0),useAllPropDynamicTags=()=>usePropDynamicTagsInternal(!1),usePropDynamicTagsInternal=e=>{let t=[];const{propType:n}=(0,o.useBoundProp)();if(n){const e=(0,a.getDynamicPropType)(n);t=e?.settings.categories||[]}const s=t.join();return(0,r.useMemo)(()=>getDynamicTagsByCategories(t,e),[s,e])},getDynamicTagsByCategories=(e,t)=>{const{tags:n,groups:r}=(0,s.getAtomicDynamicTags)(t)||{};if(!e.length||!n||!r)return[];const o=new Set(e),a=[],i={};for(const e of Object.values(n))e.categories.some(e=>o.has(e))&&(i[e.group]||(i[e.group]=[]),i[e.group].push(e));for(const e in r)i[e]&&a.push(...i[e]);return a}},"./packages/packages/core/editor-editing-panel/src/dynamics/init.ts":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("@elementor/editor-canvas"),o=n("@elementor/editor-controls"),s=n("@elementor/menus"),a=n("./packages/packages/core/editor-editing-panel/src/dynamics/components/background-control-dynamic-tag.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/dynamics/components/dynamic-selection-control.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/dynamics/dynamic-transformer.ts"),c=n("./packages/packages/core/editor-editing-panel/src/dynamics/hooks/use-prop-dynamic-action.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts");const{registerPopoverAction:d}=s.controlActionsMenu,init=()=>{(0,o.registerControlReplacement)({component:i.DynamicSelectionControl,condition:({value:e})=>(0,p.isDynamicPropValue)(e)}),(0,o.injectIntoRepeaterItemLabel)({id:"dynamic-background-image",condition:({value:e})=>(0,p.isDynamicPropValue)(e.value?.image?.value?.src),component:a.BackgroundControlDynamicTagLabel}),(0,o.injectIntoRepeaterItemIcon)({id:"dynamic-background-image",condition:({value:e})=>(0,p.isDynamicPropValue)(e.value?.image?.value?.src),component:a.BackgroundControlDynamicTagIcon}),d({id:"dynamic-tags",priority:20,useProps:c.usePropDynamicAction}),r.styleTransformersRegistry.register("dynamic",l.dynamicTransformer),r.settingsTransformersRegistry.register("dynamic",l.dynamicTransformer)}},"./packages/packages/core/editor-editing-panel/src/dynamics/sync/get-atomic-dynamic-tags.ts":function(e,t,n){n.r(t),n.d(t,{getAtomicDynamicTags:function(){return getAtomicDynamicTags}});var r=n("@elementor/editor-v1-adapters"),o=n("./packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts");const getAtomicDynamicTags=(e=!0)=>{const{atomicDynamicTags:t}=(0,r.getElementorConfig)();return t?{tags:e?filterByLicense(t.tags):t.tags,groups:t.groups}:null},filterByLicense=e=>{const{expired:t}=(0,o.getLicenseConfig)();return t?Object.fromEntries(Object.entries(e).filter(([,e])=>!("elementor"===e?.meta?.origin&&e?.meta?.required_license))):e}},"./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts":function(e,t,n){n.r(t),n.d(t,{dynamicPropTypeUtil:function(){return i},getDynamicPropType:function(){return getDynamicPropType},isDynamicPropValue:function(){return isDynamicPropValue},isDynamicTagSupported:function(){return isDynamicTagSupported},supportsDynamic:function(){return supportsDynamic}});var r=n("@elementor/editor-props"),o=n("@elementor/editor-v1-adapters"),s=n("@elementor/schema");const a="dynamic",i=(0,r.createPropUtils)(a,s.z.strictObject({name:s.z.string(),group:s.z.string(),settings:s.z.any().optional()})),isDynamicTagSupported=e=>!!(0,o.getElementorConfig)()?.atomicDynamicTags?.tags?.[e],getDynamicPropType=e=>{const t="union"===e.kind&&e.prop_types[a];return t&&t.key===a?t:null},isDynamicPropValue=e=>(0,r.isTransformable)(e)&&e.$$type===a,supportsDynamic=e=>!!getDynamicPropType(e)},"./packages/packages/core/editor-editing-panel/src/editing-panel-replacement-registry.tsx":function(e,t,n){n.r(t),n.d(t,{getEditingPanelReplacement:function(){return getEditingPanelReplacement},registerEditingPanelReplacement:function(){return registerEditingPanelReplacement}});const r=new Map,registerEditingPanelReplacement=({id:e,priority:t=10,...n})=>{r.set(e,{...n,priority:t})},getEditingPanelReplacement=(e,t)=>Array.from(r.values()).filter(({condition:n})=>n(e,t)).sort((e,t)=>e.priority-t.priority)?.[0]??null},"./packages/packages/core/editor-editing-panel/src/errors.ts":function(e,t,n){n.r(t),n.d(t,{ControlTypeAlreadyRegisteredError:function(){return s},ControlTypeNotFoundError:function(){return o},ControlTypeNotRegisteredError:function(){return a},StyleNotFoundUnderProviderError:function(){return c},StylesProviderCannotUpdatePropsError:function(){return l},StylesProviderNotFoundError:function(){return i}});var r=n("@elementor/utils");const o=(0,r.createError)({code:"control_type_not_found",message:"Control type not found."}),s=(0,r.createError)({code:"control_type_already_registered",message:"Control type is already registered."}),a=(0,r.createError)({code:"control_type_not_registered",message:"Control type is not registered."}),i=(0,r.createError)({code:"provider_not_found",message:"Styles provider not found."}),l=(0,r.createError)({code:"provider_cannot_update_props",message:"Styles provider doesn't support updating props."}),c=(0,r.createError)({code:"style_not_found_under_provider",message:"Style not found under the provider."})},"./packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts":function(e,t,n){n.r(t),n.d(t,{FIELD_TYPE:function(){return o},getFieldIndicators:function(){return getFieldIndicators},registerFieldIndicator:function(){return registerFieldIndicator}});const r={settings:new Map,styles:new Map},o={SETTINGS:"settings",STYLES:"styles"},registerFieldIndicator=({fieldType:e,id:t,indicator:n,priority:o=10})=>{r[e].set(t,{id:t,indicator:n,priority:o})},getFieldIndicators=e=>Array.from(r[e].values()).sort((e,t)=>e.priority-t.priority).map(({id:e,indicator:t})=>({id:e,Adornment:t}))},"./packages/packages/core/editor-editing-panel/src/hooks/use-active-style-def-id.ts":function(e,t,n){n.r(t),n.d(t,{useActiveStyleDefId:function(){return useActiveStyleDefId}});var r=n("@elementor/editor-elements"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts");function useActiveStyleDefId(e){const[t,n]=(0,s.useStateByElement)("active-style-id",null),a=(0,o.usePanelElementSetting)(e)?.value||[],i=function useFirstAppliedClass(e){const{element:t}=(0,o.useElement)(),n=(0,r.getElementStyles)(t.id)??{};return Object.values(n).find(t=>e.includes(t.id))}(a),l=function useActiveAndAppliedClassId(e,t){const n=!!e&&t.includes(e);return n?e:null}(t,a);return[l||i?.id||null,n]}},"./packages/packages/core/editor-editing-panel/src/hooks/use-computed-style.ts":function(e,t,n){n.r(t),n.d(t,{useComputedStyle:function(){return useComputedStyle}});var r=n("@elementor/editor-v1-adapters");function useComputedStyle(e){return(0,r.__privateUseListenTo)([(0,r.windowEvent)("elementor/device-mode/change"),(0,r.commandEndEvent)("document/elements/reset-style"),(0,r.commandEndEvent)("document/elements/settings"),(0,r.commandEndEvent)("document/elements/paste-style")],()=>{if(!e)return null;const t=window.elementor?.getContainer?.(e);if(!t?.view?.el)return null;return window.getComputedStyle(t.view.el)})}},"./packages/packages/core/editor-editing-panel/src/hooks/use-custom-css.ts":function(e,t,n){n.r(t),n.d(t,{useCustomCss:function(){return useCustomCss}});var r=n("react"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-props"),a=n("@elementor/editor-styles"),i=n("@elementor/editor-styles-repository"),l=n("@elementor/editor-v1-adapters"),c=n("@elementor/utils"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),m=n("./packages/packages/core/editor-editing-panel/src/errors.ts"),g=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts"),y=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts");const useCustomCss=()=>{const{element:{id:e}}=(0,d.useElement)(),{id:t,meta:n,provider:s}=(0,u.useStyle)(),f=s?.actions.get(t,{elementId:e}),k=function useUndoableActions({elementId:e,meta:{breakpoint:t,state:n}}){const s=(0,p.useClassesProp)();return(0,r.useMemo)(()=>{const r={breakpoint:t,state:n},c={elementId:e,classesProp:s,meta:r,label:i.ELEMENTS_STYLES_RESERVED_LABEL};return(0,l.undoable)({do:e=>(0,o.shouldCreateNewLocalStyle)(e)?create(e):update(e),undo:(e,t)=>(0,o.shouldCreateNewLocalStyle)(e)?undoCreate(e,t):undoUpdate(e,t),redo:(e,t)=>(0,o.shouldCreateNewLocalStyle)(e)?create(e,t):update(e)},{title:({provider:t,styleId:n})=>(0,g.getTitle)({provider:t,styleId:n,elementId:e}),subtitle:({provider:t,styleId:n,propDisplayName:r})=>(0,g.getSubtitle)({provider:t,styleId:n,elementId:e,propDisplayName:r}),debounce:{wait:g.HISTORY_DEBOUNCE_WAIT}});function create({customCss:e},t){return{createdStyleId:(0,o.createElementStyle)({...c,props:{},custom_css:e??null,styleId:t?.createdStyleId})}}function undoCreate(t,{createdStyleId:n}){(0,o.deleteElementStyle)(e,n)}function update({provider:t,styleId:n,customCss:o}){if(!t.actions.updateCustomCss)throw new m.StylesProviderCannotUpdatePropsError({context:{providerKey:t.getKey()}});const s=function getCurrentCustomCss(e,t){if(!e)return null;const n=(0,a.getVariantByMeta)(e,t);return n?.custom_css??null}(t.actions.get(n,{elementId:e}),r);return t.actions.updateCustomCss({id:n,meta:r,custom_css:o},{elementId:e}),{styleId:n,provider:t,prevCustomCss:s}}function undoUpdate(t,{styleId:n,provider:o,prevCustomCss:s}){o.actions.updateCustomCss?.({id:n,meta:r,custom_css:s??{raw:""}},{elementId:e})}},[e,t,n,s])}({elementId:e,meta:n}),b=t||null,v=t?s:null;(0,y.useStylesRerender)();const x=f?(0,a.getVariantByMeta)(f,n):null;return{customCss:x?.custom_css?.raw?{raw:(0,c.decodeString)(x.custom_css.raw)}:null,setCustomCss:(e,{history:{propDisplayName:t}})=>{const n={raw:(0,c.encodeString)(sanitize(e))};k({styleId:b,provider:v,customCss:n,propDisplayName:t})}}};function sanitize(e){return s.stringPropTypeUtil.schema.safeParse(s.stringPropTypeUtil.create(e)).data?.value?.trim()??""}},"./packages/packages/core/editor-editing-panel/src/hooks/use-default-panel-settings.ts":function(e,t,n){n.r(t),n.d(t,{useDefaultPanelSettings:function(){return useDefaultPanelSettings}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx");const s={defaultSectionsExpanded:{settings:["Content","Settings"],style:[]},defaultTab:"settings"},a=(0,r.createContext)({"e-div-block":{defaultSectionsExpanded:s.defaultSectionsExpanded,defaultTab:"style"},"e-flexbox":{defaultSectionsExpanded:s.defaultSectionsExpanded,defaultTab:"style"},"e-divider":{defaultSectionsExpanded:s.defaultSectionsExpanded,defaultTab:"style"}}),useDefaultPanelSettings=()=>{const{element:e}=(0,o.useElement)();return(0,r.useContext)(a)[e.type]||s}},"./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts":function(e,t,n){n.r(t),n.d(t,{useDirection:function(){return useDirection}});var r=n("@elementor/editor-v1-adapters"),o=n("@elementor/ui");function useDirection(){const e="rtl"===(0,o.useTheme)().direction;return{isSiteRtl:!!(0,r.getElementorFrontendConfig)()?.is_rtl,isUiRtl:e}}},"./packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts":function(e,t,n){n.r(t),n.d(t,{getLicenseConfig:function(){return getLicenseConfig},setLicenseConfig:function(){return setLicenseConfig},useLicenseConfig:function(){return useLicenseConfig}});var r=n("react");let o={expired:!1};const s=new Set;function setLicenseConfig(e){o={...o,...e},s.forEach(e=>e())}function getLicenseConfig(){return o}function subscribe(e){return s.add(e),()=>s.delete(e)}function useLicenseConfig(){return(0,r.useSyncExternalStore)(subscribe,getLicenseConfig,getLicenseConfig)}},"./packages/packages/core/editor-editing-panel/src/hooks/use-open-editor-panel.ts":function(e,t,n){n.r(t),n.d(t,{useOpenEditorPanel:function(){return useOpenEditorPanel}});var r=n("react"),o=n("@elementor/editor-v1-adapters"),s=n("./packages/packages/core/editor-editing-panel/src/panel.ts"),a=n("./packages/packages/core/editor-editing-panel/src/sync/is-atomic-widget-selected.ts");const useOpenEditorPanel=()=>{const{open:e}=(0,s.usePanelActions)();(0,r.useEffect)(()=>(0,o.__privateListenTo)((0,o.commandStartEvent)("panel/editor/open"),()=>{(0,a.isAtomicWidgetSelected)()&&e()}),[])}},"./packages/packages/core/editor-editing-panel/src/hooks/use-persist-dynamic-value.ts":function(e,t,n){n.r(t),n.d(t,{usePersistDynamicValue:function(){return usePersistDynamicValue}});var r=n("@elementor/session"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx");const usePersistDynamicValue=e=>{const{element:t}=(0,o.useElement)(),n=`dynamic/non-dynamic-values-history/${t.id}/${e}`;return(0,r.useSessionStorage)(n)}},"./packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts":function(e,t,n){n.r(t),n.d(t,{useStateByElement:function(){return useStateByElement}});var r=n("react"),o=n("@elementor/session"),s=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx");const useStateByElement=(e,t)=>{const{element:n}=(0,s.useElement)(),a=`elementor/editor-state/${n.id}/${e}`,i=(0,o.getSessionStorageItem)(a),[l,c]=(0,r.useState)(i??t);return[l,e=>{(0,o.setSessionStorageItem)(a,e),c(e)}]}},"./packages/packages/core/editor-editing-panel/src/hooks/use-styles-field.ts":function(e,t,n){n.r(t),n.d(t,{useStylesField:function(){return useStylesField}});var r=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts");function useStylesField(e,t){const{values:n,setValues:o,canEdit:s}=(0,r.useStylesFields)([e]);return{value:n?.[e]??null,setValue:n=>{o({[e]:n},t)},canEdit:s}}},"./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts":function(e,t,n){n.r(t),n.d(t,{HISTORY_DEBOUNCE_WAIT:function(){return g},getSubtitle:function(){return getSubtitle},getTitle:function(){return getTitle},useStylesFields:function(){return useStylesFields}});var r=n("react"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-styles"),a=n("@elementor/editor-styles-repository"),i=n("@elementor/editor-v1-adapters"),l=n("@wordpress/i18n"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/errors.ts"),m=n("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts");const g=800;function useStylesFields(e){const{element:{id:t}}=(0,p.useElement)(),{id:n,meta:l,provider:y,canEdit:f}=(0,d.useStyle)(),k=function useUndoableActions({elementId:e,meta:{breakpoint:t,state:n}}){const l=(0,c.useClassesProp)();return(0,r.useMemo)(()=>{const r={breakpoint:t,state:n},c={elementId:e,classesProp:l,meta:r,label:a.ELEMENTS_STYLES_RESERVED_LABEL};return(0,i.undoable)({do:e=>(0,o.shouldCreateNewLocalStyle)(e)?create(e):update(e),undo:(e,t)=>(0,o.shouldCreateNewLocalStyle)(e)?undoCreate(e,t):undo(e,t),redo:(e,t)=>(0,o.shouldCreateNewLocalStyle)(e)?create(e,t):update(e)},{title:({provider:t,styleId:n})=>getTitle({provider:t,styleId:n,elementId:e}),subtitle:({provider:t,styleId:n,propDisplayName:r})=>getSubtitle({provider:t,styleId:n,elementId:e,propDisplayName:r}),debounce:{wait:g}});function create({props:e},t){return{createdStyleId:(0,o.createElementStyle)({...c,props:e,styleId:t?.createdStyleId})}}function undoCreate(t,{createdStyleId:n}){(0,o.deleteElementStyle)(e,n)}function update({provider:t,styleId:n,props:o}){if(!t.actions.updateProps)throw new u.StylesProviderCannotUpdatePropsError({context:{providerKey:t.getKey()}});const a=function getCurrentProps(e,t){if(!e)return{};const n=(0,s.getVariantByMeta)(e,t),r=n?.props??{};return structuredClone(r)}(t.actions.get(n,{elementId:e}),r);return t.actions.updateProps({id:n,meta:r,props:o},{elementId:e}),{styleId:n,provider:t,prevProps:a}}function undo(t,{styleId:n,provider:o,prevProps:s}){o.actions.updateProps?.({id:n,meta:r,props:s},{elementId:e})}},[e,t,n,l])}({elementId:t,meta:l});(0,m.useStylesRerender)();const b=function getProps({styleId:e,elementId:t,provider:n,meta:r,propNames:o}){if(!n||!e)return null;const a=n.actions.get(e,{elementId:t});if(!a)throw new u.StyleNotFoundUnderProviderError({context:{styleId:e,providerKey:n.getKey()}});const i=(0,s.getVariantByMeta)(a,r);return Object.fromEntries(o.map(e=>[e,i?.props[e]??null]))}({elementId:t,styleId:n,provider:y,meta:l,propNames:e});return{values:b,setValues:(e,{history:{propDisplayName:t}})=>{k(n?{styleId:n,provider:y,props:e,propDisplayName:t}:{styleId:null,provider:null,props:e,propDisplayName:t})},canEdit:f}}const defaultHistoryTitles_title=({provider:e})=>{const t=e.labels?.singular;return t?function capitalize(e){return e.charAt(0).toUpperCase()+e.slice(1)}(t):(0,l.__)("Style","elementor")},defaultHistoryTitles_subtitle=({provider:e,styleId:t,elementId:n,propDisplayName:r})=>{const o=e.actions.get(t,{elementId:n})?.label;if(!o)throw new Error(`Style ${t} not found`);return(0,l.__)("%s$1 %s$2 edited","elementor").replace("%s$1",o).replace("%s$2",r)},localStyleHistoryTitles_title=({elementId:e})=>(0,o.getElementLabel)(e),localStyleHistoryTitles_subtitle=({propDisplayName:e})=>(0,l.__)("%s edited","elementor").replace("%s",e);const isLocalStyle=(e,t)=>!e||!t||(0,a.isElementsStylesProvider)(e.getKey()),getTitle=({provider:e,styleId:t,elementId:n})=>isLocalStyle(e,t)?localStyleHistoryTitles_title({elementId:n}):defaultHistoryTitles_title({provider:e}),getSubtitle=({provider:e,styleId:t,propDisplayName:n,elementId:r})=>isLocalStyle(e,t)?localStyleHistoryTitles_subtitle({propDisplayName:n}):defaultHistoryTitles_subtitle({provider:e,styleId:t,elementId:r,propDisplayName:n})},"./packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts":function(e,t,n){n.r(t),n.d(t,{useStylesRerender:function(){return useStylesRerender}});var r=n("react"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx");const useStylesRerender=()=>{const{provider:e}=(0,o.useStyle)(),[,t]=(0,r.useReducer)(e=>!e,!1);(0,r.useEffect)(()=>e?.subscribe(t),[e])}},"./packages/packages/core/editor-editing-panel/src/init.ts":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("@elementor/editor"),o=n("@elementor/editor-panels"),s=n("@elementor/editor-v1-adapters"),a=n("./packages/packages/core/editor-editing-panel/src/components/editing-panel-hooks.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/components/promotions/init.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/controls-registry/element-controls/registry.ts"),c=n("./packages/packages/core/editor-editing-panel/src/dynamics/init.ts"),p=n("./packages/packages/core/editor-editing-panel/src/panel.ts"),d=n("./packages/packages/core/editor-editing-panel/src/reset-style-props.tsx"),u=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/init.ts"),m=n("./packages/packages/core/editor-editing-panel/src/sync/is-atomic-widget-selected.ts");function init(){(0,o.__registerPanel)(p.panel),blockV1Panel(),(0,r.injectIntoLogic)({id:"editing-panel-hooks",component:a.EditingPanelHooks}),(0,c.init)(),(0,u.init)(),(0,l.registerElementControls)(),(0,d.initResetStyleProps)(),(0,i.init)()}const blockV1Panel=()=>{(0,s.blockCommand)({command:"panel/editor/open",condition:m.isAtomicWidgetSelected})}},"./packages/packages/core/editor-editing-panel/src/panel.ts":function(e,t,n){n.r(t),n.d(t,{panel:function(){return s},usePanelActions:function(){return a},usePanelStatus:function(){return i}});var r=n("@elementor/editor-panels"),o=n("./packages/packages/core/editor-editing-panel/src/components/editing-panel.tsx");const{panel:s,usePanelActions:a,usePanelStatus:i}=(0,r.__createPanel)({id:"editing-panel",component:o.EditingPanel})},"./packages/packages/core/editor-editing-panel/src/provider-colors-registry.ts":function(e,t,n){n.r(t),n.d(t,{getStyleProviderColors:function(){return getStyleProviderColors},registerStyleProviderToColors:function(){return registerStyleProviderToColors}});const r={name:"default",getThemeColor:null},o=new Map,registerStyleProviderToColors=(e,t)=>{o.set(e,t)},getStyleProviderColors=e=>o.get(e)??r},"./packages/packages/core/editor-editing-panel/src/reset-style-props.tsx":function(e,t,n){n.r(t),n.d(t,{initResetStyleProps:function(){return initResetStyleProps},useResetStyleValueProps:function(){return useResetStyleValueProps}});var r=n("@elementor/editor-controls"),o=n("@elementor/editor-variables"),s=n("@elementor/icons"),a=n("@elementor/menus"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/utils/is-equal.ts");const{registerAction:p}=a.controlActionsMenu;function initResetStyleProps(){p({id:"reset-style-value",priority:10,useProps:useResetStyleValueProps})}function useResetStyleValueProps(){const e=(0,l.useIsStyle)(),{value:t,resetValue:n,propType:a}=(0,r.useBoundProp)(),p=null!=t,d=void 0!==a.initial_value&&null!==a.initial_value,u=!!a.settings?.required,m=!!a.settings?.hide_reset,g=t,y=g?.$$type?.includes("variable"),f=y&&(0,o.hasVariable)(g?.value);return{visible:function calculateVisibility(){return!(!e||!p||m||y&&!f)&&(d?!(0,c.isEqual)(t,a.initial_value):!u)}(),title:(0,i.__)("Clear","elementor"),icon:s.BrushBigIcon,onClick:()=>n()}}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/action-icons.tsx":function(e,t,n){n.r(t),n.d(t,{ActionIcons:function(){return ActionIcons}});var r=n("react"),o=n("@elementor/ui");const ActionIcons=()=>r.createElement(o.Box,{display:"flex",gap:.5,alignItems:"center"})},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/breakpoint-icon.tsx":function(e,t,n){n.r(t),n.d(t,{BreakpointIcon:function(){return BreakpointIcon}});var r=n("react"),o=n("@elementor/editor-responsive"),s=n("@elementor/icons"),a=n("@elementor/ui");const i={widescreen:s.WidescreenIcon,desktop:s.DesktopIcon,laptop:s.LaptopIcon,tablet_extra:s.TabletLandscapeIcon,tablet:s.TabletPortraitIcon,mobile_extra:s.MobileLandscapeIcon,mobile:s.MobilePortraitIcon},BreakpointIcon=({breakpoint:e})=>{const t=(0,o.useBreakpoints)(),n=e||"desktop",s=i[n];if(!s)return null;const l=t.find(e=>e.id===n)?.label;return r.createElement(a.Tooltip,{title:l,placement:"top"},r.createElement(s,{fontSize:"tiny",sx:{mt:"2px"}}))}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/index.ts":function(e,t,n){n.r(t),n.d(t,{ActionIcons:function(){return a.ActionIcons},BreakpointIcon:function(){return r.BreakpointIcon},LabelChip:function(){return o.LabelChip},ValueComponent:function(){return s.ValueComponent}});var r=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/breakpoint-icon.tsx"),o=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/label-chip.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/value-component.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/action-icons.tsx")},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/label-chip.tsx":function(e,t,n){n.r(t),n.d(t,{LabelChip:function(){return LabelChip}});var r=n("react"),o=n("@elementor/editor-styles-repository"),s=n("@elementor/icons"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts");const c="tiny",LabelChip=({displayLabel:e,provider:t})=>{const n=t===o.ELEMENTS_BASE_STYLES_PROVIDER_KEY?r.createElement(a.Tooltip,{title:(0,i.__)("Inherited from base styles","elementor"),placement:"top"},r.createElement(s.InfoCircleIcon,{fontSize:c})):void 0;return r.createElement(a.Chip,{label:e,size:c,color:(0,l.getStylesProviderColorName)(t),variant:"standard",state:"enabled",icon:n,sx:e=>({lineHeight:1,flexWrap:"nowrap",alignItems:"center",borderRadius:.75*e.shape.borderRadius+"px",flexDirection:"row-reverse",".MuiChip-label":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}})})}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/value-component.tsx":function(e,t,n){n.r(t),n.d(t,{ValueComponent:function(){return ValueComponent}});var r=n("react"),o=n("@elementor/ui");const ValueComponent=({index:e,value:t})=>r.createElement(o.Tooltip,{title:t,placement:"top"},r.createElement(o.Typography,{variant:"caption",color:"text.tertiary",sx:{mt:"1px",textDecoration:0===e?"none":"line-through",overflow:"hidden",display:"-webkit-box",WebkitLineClamp:1,WebkitBoxOrient:"vertical",pl:2.5,minWidth:0,maxWidth:"100%"}},t))},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-indicator.tsx":function(e,t,n){n.r(t),n.d(t,{StylesInheritanceIndicator:function(){return StylesInheritanceIndicator}});var r=n("react"),o=n("@elementor/editor-controls"),s=n("@elementor/editor-props"),a=n("@elementor/editor-styles-repository"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts"),u=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts"),m=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-infotip.tsx");const StylesInheritanceIndicator=({customContext:e})=>{const t=(0,o.useBoundProp)(),{path:n,propType:s}=e||t,a=(0,p.useStylesInheritanceChain)(n);return n&&a.length?r.createElement(Indicator,{inheritanceChain:a,path:n,propType:s}):null},Indicator=({inheritanceChain:e,path:t,propType:n,isDisabled:o})=>{const{id:i,provider:p,meta:g}=(0,c.useStyle)(),y=i?(0,u.getValueFromInheritanceChain)(e,i,g):null,f=!(0,s.isEmpty)(y?.value),[k]=e;if(k.provider===a.ELEMENTS_BASE_STYLES_PROVIDER_KEY)return null;const b=y===k,v=getLabel({isFinalValue:b,hasValue:f}),x={getColor:b&&p?(0,d.getStylesProviderThemeColor)(p.getKey()):void 0,isOverridden:!(!f||b)||void 0};return r.createElement(m.StylesInheritanceInfotip,{inheritanceChain:e,path:t,propType:n,label:v,isDisabled:o},r.createElement(l.StyleIndicator,x))},getLabel=({isFinalValue:e,hasValue:t})=>e?(0,i.__)("This is the final value","elementor"):t?(0,i.__)("This value is overridden by another style","elementor"):(0,i.__)("This has value from another style","elementor")},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-infotip.tsx":function(e,t,n){n.r(t),n.d(t,{StylesInheritanceInfotip:function(){return StylesInheritanceInfotip},calculatePopoverOffset:function(){return calculatePopoverOffset}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/editor-ui"),a=n("@elementor/ui"),i=n("@wordpress/i18n"),l=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/infotip/index.ts");const calculatePopoverOffset=(e,t,n)=>{if(!e)return 0;const r=e.width;return n?r-t:-t/2+r/2},StylesInheritanceInfotip=({inheritanceChain:e,propType:t,path:n,label:l,children:d,isDisabled:u})=>{const[m,g]=(0,r.useState)(!1),y=(0,r.useRef)(null),closeInfotip=()=>{u||g(!1)},f=n.join("."),k=(0,s.useSectionWidth)(),b=(0,r.useMemo)(()=>(0,o.createPropsResolver)({transformers:o.stylesInheritanceTransformersRegistry,schema:{[f]:t}}),[f,t]),v=(0,c.useNormalizedInheritanceChainItems)(e,f,b),x=r.createElement(a.ClickAwayListener,{onClickAway:closeInfotip},r.createElement(a.Card,{elevation:0,sx:{width:k-32+"px",maxWidth:496,maxHeight:268,overflowX:"hidden",display:"flex",flexDirection:"column"}},r.createElement(a.Box,{sx:{position:"sticky",top:0,zIndex:1,backgroundColor:"background.paper"}},r.createElement(s.PopoverHeader,{title:(0,i.__)("Style origin","elementor"),onClose:closeInfotip})),r.createElement(a.CardContent,{sx:{display:"flex",flexDirection:"column",p:0,flex:1,overflow:"auto","&:last-child":{pb:0}}},r.createElement(a.Stack,{gap:1.5,sx:{pl:2,pr:1,pt:1.5,pb:1.5},role:"list"},v.map((e,t)=>r.createElement(a.Box,{key:e.id,display:"flex",gap:.5,role:"listitem","aria-label":(0,i.__)("Inheritance item: %s","elementor").replace("%s",e.displayLabel)},r.createElement(a.Box,{display:"flex",gap:.5,sx:{flexWrap:"wrap",width:"100%",alignItems:"flex-start"}},r.createElement(p.BreakpointIcon,{breakpoint:e.breakpoint}),r.createElement(p.LabelChip,{displayLabel:e.displayLabel,provider:e.provider}),r.createElement(p.ValueComponent,{index:t,value:e.value})),r.createElement(p.ActionIcons,null)))))));return u?r.createElement(a.Box,{sx:{display:"inline-flex"}},d):r.createElement(a.Box,{ref:y,sx:{display:"inline-flex"}},r.createElement(TooltipOrInfotip,{showInfotip:m,onClose:closeInfotip,infotipContent:x,isDisabled:u,triggerRef:y,sectionWidth:k},r.createElement(a.IconButton,{onClick:()=>{u||g(e=>!e)},"aria-label":l,sx:{my:"-1px"},disabled:u},d)))};function TooltipOrInfotip({children:e,showInfotip:t,onClose:n,infotipContent:o,isDisabled:s,triggerRef:c,sectionWidth:p}){const d=(0,l.useDirection)().isSiteRtl;if(s)return r.createElement(a.Box,{sx:{display:"inline-flex"}},e);if(t){const s=c.current?.getBoundingClientRect(),i=Math.min(p-32,496),l=calculatePopoverOffset(s,i,d);return r.createElement(r.Fragment,null,r.createElement(a.Backdrop,{open:t,onClick:n,sx:{backgroundColor:"transparent",zIndex:e=>e.zIndex.modal-1}}),r.createElement(a.Infotip,{placement:"top",content:o,open:t,onClose:n,disableHoverListener:!0,componentsProps:{tooltip:{sx:{mx:2}}},PopperProps:{modifiers:[{name:"offset",options:{offset:[l,0]}}]}},e))}return r.createElement(a.Tooltip,{title:(0,i.__)("Style origin","elementor"),placement:"top"},e)}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-section-indicators.tsx":function(e,t,n){n.r(t),n.d(t,{StylesInheritanceSectionIndicators:function(){return StylesInheritanceSectionIndicators}});var r=n("react"),o=n("@elementor/editor-styles-repository"),s=n("@elementor/ui"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/components/custom-css-indicator.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/contexts/styles-inheritance-context.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts");const StylesInheritanceSectionIndicators=({fields:e})=>{const{id:t,meta:n,provider:u}=(0,c.useStyle)(),m=(0,p.useStylesInheritanceSnapshot)();if(e.includes("custom_css"))return r.createElement(i.CustomCssIndicator,null);const g=Object.fromEntries(Object.entries(m??{}).filter(([t])=>e.includes(t))),{hasValues:y,hasOverrides:f}=function getIndicators(e,t,n){let r=!1,o=!1;return Object.values(e).forEach(e=>{const s=function getCurrentStyleFromChain(e,t,n){return e.find(({style:{id:e},variant:{meta:{breakpoint:r,state:o}}})=>e===t&&r===n.breakpoint&&o===n.state)}(e,t,n);if(!s)return;const[a]=e;s===a?r=!0:o=!0}),{hasValues:r,hasOverrides:o}}(g,t??"",n);if(!y&&!f)return null;const k=(0,a.__)("Has effective styles","elementor"),b=(0,a.__)("Has overridden styles","elementor");return r.createElement(s.Tooltip,{title:(0,a.__)("Has styles","elementor"),placement:"top"},r.createElement(s.Stack,{direction:"row",sx:{"& > *":{marginInlineStart:-.25}},role:"list"},y&&u&&r.createElement(l.StyleIndicator,{getColor:(0,d.getStylesProviderThemeColor)(u.getKey()),"data-variant":(0,o.isElementsStylesProvider)(u.getKey())?"local":"global",role:"listitem","aria-label":k}),f&&r.createElement(l.StyleIndicator,{isOverridden:!0,"data-variant":"overridden",role:"listitem","aria-label":b})))}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/ui-providers.tsx":function(e,t,n){n.r(t),n.d(t,{UiProviders:function(){return UiProviders}});var r=n("react"),o=n("@elementor/ui"),s=n("./packages/packages/core/editor-editing-panel/src/hooks/use-direction.ts");const UiProviders=({children:e})=>{const{isSiteRtl:t}=(0,s.useDirection)();return r.createElement(o.DirectionProvider,{rtl:t},r.createElement(o.ThemeProvider,null,e))}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/consts.ts":function(e,t,n){n.r(t),n.d(t,{excludePropTypeTransformers:function(){return r}});const r=new Set(["background-color-overlay","background-image-overlay","background-gradient-overlay","gradient-color-stop","color-stop","background-image-position-offset","background-image-size-scale","image-src","image","background-overlay"])},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/create-snapshots-manager.ts":function(e,t,n){n.r(t),n.d(t,{createSnapshotsManager:function(){return createSnapshotsManager}});var r=n("@elementor/editor-props"),o=n("@elementor/editor-variables"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts");function createSnapshotsManager(e,t){const n=function makeBreakpointsInheritancePaths(e){const t={},traverse=(e,n)=>{const{id:r,children:o}=e;t[r]=n?[...n]:[],o?.forEach(e=>{traverse(e,[...t[r]??[],r])})};return traverse(e),t}(t),r={};return t=>{const{breakpoint:o,state:a}=t,i=(0,s.getStateKey)(a),l=(0,s.getBreakpointKey)(o);if(r[l]?.[i])return r[l]?.[i]?.snapshot;const c=[...n[l],o];return c.forEach((t,n)=>{const o=n>0?c[n-1]:null;((t,n,o)=>{const a=(0,s.getBreakpointKey)(t),i=(0,s.getStateKey)(o);r[a]||(r[a]={[s.DEFAULT_STATE]:buildStateSnapshotSlot(e({breakpoint:t,state:null}),n,{},null)}),o&&!r[a]?.[i]&&(r[a][i]=buildStateSnapshotSlot(e({breakpoint:t,state:o}),n,r[a]??{},o))})(t,o?r[o]:void 0,a)}),r[l]?.[i]?.snapshot}}function buildStateSnapshotSlot(e,t,n,a){const i=function buildInitialSnapshotFromStyles(e){const t={};return e.forEach(e=>{const{variant:{props:n}}=e;Object.entries(n).forEach(([n,s])=>{const a=(0,r.filterEmptyValues)(s),i=a?.$$type?.includes("variable")&&!(0,o.hasVariable)(a?.value)?null:a;if(null===i)return;t[n]||(t[n]=[]);const l={...e,value:i};t[n].push(l)})}),{snapshot:t,stateSpecificSnapshot:t}}(e);return a?{snapshot:mergeSnapshots([i.snapshot,t?.[a]?.stateSpecificSnapshot,n[s.DEFAULT_STATE]?.snapshot]),stateSpecificSnapshot:mergeSnapshots([i.stateSpecificSnapshot,t?.[a]?.stateSpecificSnapshot])}:{snapshot:mergeSnapshots([i.snapshot,t?.[s.DEFAULT_STATE]?.snapshot]),stateSpecificSnapshot:void 0}}function mergeSnapshots(e){const t={};return e.filter(Boolean).forEach(e=>Object.entries(e).forEach(([e,n])=>{t[e]||(t[e]=[]),t[e]=t[e].concat(n)})),t}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/create-styles-inheritance.ts":function(e,t,n){n.r(t),n.d(t,{createStylesInheritance:function(){return createStylesInheritance}});var r=n("@elementor/editor-props"),o=n("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/create-snapshots-manager.ts"),a=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts");function createStylesInheritance(e,t){const n=function buildStyleVariantsByMetaMapping(e){const t={};return e.forEach(e=>{const n=(0,o.getProviderByStyleId)(e.id)?.getKey()??null;e.variants.forEach(r=>{const{meta:o}=r,{state:s,breakpoint:i}=o,l=(0,a.getBreakpointKey)(i),c=(0,a.getStateKey)(s);t[l]||(t[l]={});const p=t[l];p[c]||(p[c]=[]),p[c].push({style:e,variant:r,provider:n})})}),t}(e);return{getSnapshot:(0,s.createSnapshotsManager)(({breakpoint:e,state:t})=>n?.[(0,a.getBreakpointKey)(e)]?.[(0,a.getStateKey)(t)]??[],t),getInheritanceChain:(e,t,n)=>{const[o,...s]=t;let a=e[o]??[];if(s.length>0){const e=getFilterPropType(n,s);a=a.map(({value:t,...n})=>({...n,value:getValueByPath(t,s,e)})).filter(({value:e})=>!(0,r.isEmpty)(e))}return a}}}function getValueByPath(e,t,n){return e&&"object"==typeof e?function shouldUseOriginalValue(e,t){return!!e&&(0,r.isTransformable)(t)&&e.key!==t.$$type}(n,e)?e:t.reduce((e,t)=>e?(0,r.isTransformable)(e)?e.value?.[t]??null:"object"==typeof e?e[t]??null:null:null,e):null}const getFilterPropType=(e,t)=>e&&"union"===e.kind?Object.values(e.prop_types).find(e=>!!t.reduce((e,t)=>{if("object"!==e?.kind)return null;const{shape:n}=e;return n[t]?n[t]:null},e))??null:null},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/hooks/use-normalized-inheritance-chain-items.tsx":function(e,t,n){n.r(t),n.d(t,{normalizeInheritanceItem:function(){return normalizeInheritanceItem},useNormalizedInheritanceChainItems:function(){return useNormalizedInheritanceChainItems}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/editor-styles"),a=n("@elementor/editor-styles-repository"),i=n("@wordpress/i18n");const useNormalizedInheritanceChainItems=(e,t,n)=>{const[o,s]=(0,r.useState)([]);return(0,r.useEffect)(()=>{(async()=>{const r=(await Promise.all(e.filter(({style:e})=>e).map((e,r)=>normalizeInheritanceItem(e,r,t,n)))).map(e=>({...e,displayLabel:a.ELEMENTS_BASE_STYLES_PROVIDER_KEY!==e.provider?e.displayLabel:(0,i.__)("Base","elementor")})).filter(e=>!e.value||""!==e.displayLabel).slice(0,2);s(r)})()},[e,t,n]),o},normalizeInheritanceItem=async(e,t,n,r)=>{const{variant:{meta:{state:a,breakpoint:i}},style:{label:l,id:c}}=e,p=function getDisplayLabel({label:e,state:t}){if(!t)return e;if((0,s.isClassState)(t))return`${e}.${t}`;if((0,s.isPseudoState)(t))return`${e}:${t}`;throw new o.UnknownStyleStateError({context:{state:t}})}({label:l,state:a});return{id:c?c+(a??""):t,provider:e.provider||"",breakpoint:i??"desktop",displayLabel:p,value:await getTransformedValue(e,n,r)}};const getTransformedValue=async(e,t,n)=>{try{const o=await n({props:{[t]:e.value}}),s=o?.[t]??o;return(0,r.isValidElement)(s)?s:"object"==typeof s?JSON.stringify(s):String(s)}catch{return""}}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/init-styles-inheritance-transformers.ts":function(e,t,n){n.r(t),n.d(t,{initStylesInheritanceTransformers:function(){return initStylesInheritanceTransformers}});var r=n("@elementor/editor-canvas"),o=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/consts.ts"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/array-transformer.tsx"),a=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx"),i=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx"),l=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx"),c=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/box-shadow-transformer.tsx"),p=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/color-transformer.tsx"),d=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx");function initStylesInheritanceTransformers(){const e=r.styleTransformersRegistry.all();Object.entries(e).forEach(([e,t])=>{o.excludePropTypeTransformers.has(e)||r.stylesInheritanceTransformersRegistry.register(e,t)}),r.stylesInheritanceTransformersRegistry.registerFallback((0,r.createTransformer)(e=>e)),function registerCustomTransformers(e){r.stylesInheritanceTransformersRegistry.register("color",p.colorTransformer),r.stylesInheritanceTransformersRegistry.register("background-color-overlay",a.backgroundColorOverlayTransformer),r.stylesInheritanceTransformersRegistry.register("background-gradient-overlay",i.backgroundGradientOverlayTransformer),r.stylesInheritanceTransformersRegistry.register("background-image-overlay",l.backgroundImageOverlayTransformer),r.stylesInheritanceTransformersRegistry.register("shadow",c.boxShadowTransformer),r.stylesInheritanceTransformersRegistry.register("filter",(0,d.createRepeaterToItemsTransformer)(e.filter)),r.stylesInheritanceTransformersRegistry.register("backdrop-filter",(0,d.createRepeaterToItemsTransformer)(e["backdrop-filter"])),r.stylesInheritanceTransformersRegistry.register("transition",(0,d.createRepeaterToItemsTransformer)(e.transition)),["background-overlay","box-shadow","transform-functions"].forEach(e=>r.stylesInheritanceTransformersRegistry.register(e,s.arrayTransformer))}(e)}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/init.ts":function(e,t,n){n.r(t),n.d(t,{init:function(){return init}});var r=n("./packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts"),o=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/components/styles-inheritance-indicator.tsx"),s=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/init-styles-inheritance-transformers.ts");const init=()=>{(0,s.initStylesInheritanceTransformers)(),(0,r.registerFieldIndicator)({fieldType:r.FIELD_TYPE.STYLES,id:"styles-inheritance",priority:1,indicator:o.StylesInheritanceIndicator})}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/array-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{arrayTransformer:function(){return s}});var r=n("react"),o=n("@elementor/editor-canvas");const s=(0,o.createTransformer)(e=>{if(!e||0===e.length)return null;return e.every(e=>"string"==typeof e||"number"==typeof e)?e.join(" "):r.createElement(r.Fragment,null,e.map((e,t)=>r.createElement(r.Fragment,{key:t},t>0&&" ",e)))})},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{StyledUnstableColorIndicator:function(){return i},backgroundColorOverlayTransformer:function(){return a}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/ui");const a=(0,o.createTransformer)(e=>r.createElement(s.Stack,{direction:"row",gap:1,alignItems:"center"},r.createElement(ItemLabelColor,{value:e}))),ItemLabelColor=({value:{color:e}})=>r.createElement("span",null,e),i=(0,s.styled)(s.UnstableColorIndicator)(({theme:e})=>({width:"1em",height:"1em",borderRadius:e.shape.borderRadius/2+"px",outline:`1px solid ${e.palette.action.disabled}`,flexShrink:0}))},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-gradient-overlay-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{backgroundGradientOverlayTransformer:function(){return l}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/ui"),a=n("@wordpress/i18n"),i=n("./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-color-overlay-transformer.tsx");const l=(0,o.createTransformer)(e=>r.createElement(s.Stack,{direction:"row",gap:1,alignItems:"center"},r.createElement(ItemIconGradient,{value:e}),r.createElement(ItemLabelGradient,{value:e}))),ItemIconGradient=({value:e})=>{const t=getGradientValue(e);return r.createElement(i.StyledUnstableColorIndicator,{size:"inherit",component:"span",value:t})},ItemLabelGradient=({value:e})=>"linear"===e.type?r.createElement("span",null,(0,a.__)("Linear gradient","elementor")):r.createElement("span",null,(0,a.__)("Radial gradient","elementor")),getGradientValue=e=>{const t=e.stops?.map(({color:e,offset:t})=>`${e} ${t??0}%`)?.join(",");return"linear"===e.type?`linear-gradient(${e.angle}deg, ${t})`:`radial-gradient(circle at ${e.positions}, ${t})`}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/background-image-overlay-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{backgroundImageOverlayTransformer:function(){return l}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/editor-ui"),a=n("@elementor/ui"),i=n("@elementor/wp-media");const l=(0,o.createTransformer)(e=>r.createElement(a.Stack,{direction:"row",gap:1,alignItems:"center"},r.createElement(ItemIconImage,{value:e}),r.createElement(ItemLabelImage,{value:e}))),ItemIconImage=({value:e})=>{const{imageUrl:t}=useImage(e);return r.createElement(a.CardMedia,{image:t,sx:e=>({height:"1em",width:"1em",borderRadius:e.shape.borderRadius/2+"px",outline:`1px solid ${e.palette.action.disabled}`,flexShrink:0})})},ItemLabelImage=({value:e})=>{const{imageTitle:t}=useImage(e);return r.createElement(s.EllipsisWithTooltip,{title:t},r.createElement("span",null,t))},useImage=e=>{let t,n=null;const r=e?.image.src,{data:o}=(0,i.useWpMediaAttachment)(r.id||null);if(r.id){const e=getFileExtensionFromFilename(o?.filename);t=`${o?.title}${e}`||null,n=o?.url||null}else r.url&&(n=r.url,t=n?.substring(n.lastIndexOf("/")+1)||null);return{imageTitle:t,imageUrl:n}},getFileExtensionFromFilename=e=>{if(!e)return"";return`.${e.substring(e.lastIndexOf(".")+1)}`}},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/box-shadow-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{boxShadowTransformer:function(){return s}});var r=n("react"),o=n("@elementor/editor-canvas");const s=(0,o.createTransformer)(e=>{if(!e)return null;const{color:t,hOffset:n,vOffset:o,blur:s,spread:a,position:i}=e,l=t||"#000000",c=[n||"0px",o||"0px",s||"10px",a||"0px"].join(" "),p=i||"outset";return r.createElement(r.Fragment,null,l," ",p,", ",c)})},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/color-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{colorTransformer:function(){return i}});var r=n("react"),o=n("@elementor/editor-canvas"),s=n("@elementor/ui");const a=(0,s.styled)(s.UnstableColorIndicator)(({theme:e})=>({width:"1em",height:"1em",borderRadius:e.shape.borderRadius/2+"px",outline:`1px solid ${e.palette.action.disabled}`,flexShrink:0})),i=(0,o.createTransformer)(e=>function isValidCSSColor(e){return!!e.trim()&&CSS.supports("color",e.trim())}(e)?r.createElement(s.Stack,{direction:"row",gap:1,alignItems:"center"},r.createElement(a,{size:"inherit",component:"span",value:e}),r.createElement("span",null,e)):e)},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/transformers/repeater-to-items-transformer.tsx":function(e,t,n){n.r(t),n.d(t,{createRepeaterToItemsTransformer:function(){return createRepeaterToItemsTransformer}});var r=n("@elementor/editor-canvas");const createRepeaterToItemsTransformer=e=>(0,r.createTransformer)((t,n)=>{const r=e(t,n);return r})},"./packages/packages/core/editor-editing-panel/src/styles-inheritance/utils.ts":function(e,t,n){n.r(t),n.d(t,{DEFAULT_STATE:function(){return r},getBreakpointKey:function(){return getBreakpointKey},getStateKey:function(){return getStateKey},getValueFromInheritanceChain:function(){return getValueFromInheritanceChain}});const r="normal",getStateKey=e=>e??r,getBreakpointKey=e=>e??"desktop",getValueFromInheritanceChain=(e,t,n)=>e.find(({style:e,variant:{meta:{breakpoint:r,state:o}}})=>e.id===t&&r===n.breakpoint&&o===n.state)},"./packages/packages/core/editor-editing-panel/src/sync/is-atomic-widget-selected.ts":function(e,t,n){n.r(t),n.d(t,{isAtomicWidgetSelected:function(){return isAtomicWidgetSelected}});var r=n("@elementor/editor-elements");const isAtomicWidgetSelected=()=>{const e=(0,r.getSelectedElements)(),t=(0,r.getWidgetsCache)();return 1===e.length&&!!t?.[e[0].type]?.atomic_controls}},"./packages/packages/core/editor-editing-panel/src/utils/can-element-have-children.ts":function(e,t,n){n.r(t),n.d(t,{canElementHaveChildren:function(){return canElementHaveChildren}});var r=n("@elementor/editor-elements");const canElementHaveChildren=e=>{const t=(0,r.getContainer)(e);return!!t&&"widget"!==t.model.get("elType")}},"./packages/packages/core/editor-editing-panel/src/utils/get-recently-used-styles.ts":function(e,t,n){n.r(t),n.d(t,{getRecentlyUsedList:function(){return getRecentlyUsedList}});var r=n("@elementor/editor-canvas"),o=n("@elementor/editor-elements"),s=n("@elementor/editor-styles");const getRecentlyUsedList=async e=>{if(!e)return[];const t=(0,r.createPropsResolver)({transformers:r.styleTransformersRegistry,schema:(0,s.getStylesSchema)()}),n=(0,o.getElementStyles)(e)??{},a=Object.keys(n??{}).map(e=>n?.[e]?.variants??[]),i=await Promise.all(a.flat().map(async e=>{const n=await t({props:e.props??{},schema:(0,s.getStylesSchema)()});return Object.entries(n).filter(([,e])=>null!==e).map(([e])=>e)})),l=new Set(i.flat());return Array.from(l)}},"./packages/packages/core/editor-editing-panel/src/utils/get-styles-provider-color.ts":function(e,t,n){n.r(t),n.d(t,{getStylesProviderColorName:function(){return getStylesProviderColorName},getStylesProviderThemeColor:function(){return getStylesProviderThemeColor},getTempStylesProviderThemeColor:function(){return getTempStylesProviderThemeColor}});var r=n("@elementor/editor-styles-repository"),o=n("./packages/packages/core/editor-editing-panel/src/provider-colors-registry.ts");const getStylesProviderColorName=e=>e&&e!==r.ELEMENTS_BASE_STYLES_PROVIDER_KEY?(0,r.isElementsStylesProvider)(e)?"accent":(0,o.getStyleProviderColors)(e).name:"default",getStylesProviderThemeColor=e=>e&&e!==r.ELEMENTS_BASE_STYLES_PROVIDER_KEY?(0,r.isElementsStylesProvider)(e)?e=>e.palette.accent.main:(0,o.getStyleProviderColors)(e).getThemeColor:null;function getTempStylesProviderThemeColor(e){return(0,r.isElementsStylesProvider)(e)?e=>e.palette.primary.main:getStylesProviderThemeColor(e)}},"./packages/packages/core/editor-editing-panel/src/utils/is-equal.ts":function(e,t,n){function isEqual(e,t){if(e===t)return!0;if(null===e||null===t)return!1;if(typeof e!=typeof t)return!1;if(Array.isArray(e)&&Array.isArray(t)){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(!isEqual(e[n],t[n]))return!1;return!0}if("object"==typeof e&&"object"==typeof t){const n=e,r=t,o=Object.keys(n),s=Object.keys(r);if(o.length!==s.length)return!1;for(const e of o){if(!(e in r))return!1;if(!isEqual(n[e],r[e]))return!1}return!0}return!1}n.r(t),n.d(t,{isEqual:function(){return isEqual}})},"./packages/packages/core/editor-editing-panel/src/utils/prop-dependency-utils.ts":function(e,t,n){n.r(t),n.d(t,{extractOrderedDependencies:function(){return extractOrderedDependencies},getElementSettingsWithDefaults:function(){return getElementSettingsWithDefaults},getUpdatedValues:function(){return getUpdatedValues}});var r=n("@elementor/editor-props"),o=n("@elementor/session");function getElementSettingsWithDefaults(e,t){const n={...t};return Object.keys(e).forEach(t=>{null===n[t]&&null!==e[t].default&&(n[t]=e[t].default)}),n}function extractOrderedDependencies(e){return Object.values(e).flat().filter((e,t,n)=>n.indexOf(e)===t)}function getUpdatedValues(e,t,n,s,a){return t.length?t.reduce((e,t)=>{const i=t.split("."),l={...s,...e},c=getPropType(n,l,i);if(!c)return e;const p={previousValues:(0,r.isDependencyMet)(c.dependencies,s),newValues:(0,r.isDependencyMet)(c.dependencies,l)};if(!p.newValues.isMet){const n=function handleUnmetCondition(e){const{failingDependencies:t,dependency:n,elementValues:s,defaultValue:a,elementId:i}=e,l=t.find(e=>"newValue"in e&&!!e.newValue),c=l?.newValue??null,p=(0,r.extractValue)(n.split("."),s)??a;return function savePreviousValueToStorage({path:e,elementId:t,value:n}){const r=`elementor/${t}`,s=retrievePreviousValueFromStorage({path:e,elementId:t});if(s)return;const a=`${r}:${e}`;(0,o.setSessionStorageItem)(a,n)}({path:n,elementId:i,value:p}),c}({failingDependencies:p.newValues.failingDependencies,dependency:t,elementValues:l,defaultValue:c.default,elementId:a});return{...e,...updateValue(i,n,l)}}if(!p.previousValues.isMet){const n=retrievePreviousValueFromStorage({path:t,elementId:a});return function removePreviousValueFromStorage({path:e,elementId:t}){const n=`elementor/${t}`,r=`${n}:${e}`;(0,o.removeSessionStorageItem)(r)}({path:t,elementId:a}),{...e,...updateValue(i,n??c.default,l)}}return e},{...e}):e}function getPropType(e,t,n){if(!n.length)return null;const[o,...s]=n,a=e[o];return a?s.reduce((e,s,a)=>function evaluatePropType(e){const{prop:t}=e;if(!t?.kind)return null;const{key:n,index:o,path:s,elementValues:a,basePropKey:i}=e;switch(t.kind){case"union":const e=(0,r.extractValue)(s.slice(0,o+1),a),l=e?.$$type??null;return getPropType({[i]:t.prop_types?.[l]},a,s.slice(0,o+2));case"array":return t.item_prop_type;case"object":return t.shape[n]}return t[n]}({prop:e,key:s,index:a,path:n,elementValues:t,basePropKey:o}),a):null}function updateValue(e,t,n){const r=e[0],o={...n};return e.reduce((n,r,o)=>n?o===e.length-1?(n[r]=t??null,n[r]?.value??n.value):n[r]?.value??n.value:null,o),{[r]:o[r]??null}}function retrievePreviousValueFromStorage({path:e,elementId:t}){const n=`${`elementor/${t}`}:${e}`;return(0,o.getSessionStorageItem)(n)??null}},"./packages/packages/core/editor-editing-panel/src/utils/tracking/subscribe.ts":function(e,t,n){n.r(t),n.d(t,{trackStyles:function(){return trackStyles}});var r=n("@elementor/editor-styles-repository");const trackStyles=(e,t,n)=>{const o=r.stylesRepository.getProviderByKey(e);o?.actions.tracking?.({event:t,...n})}},"@elementor/editor":function(e){e.exports=window.elementorV2.editor},"@elementor/editor-canvas":function(e){e.exports=window.elementorV2.editorCanvas},"@elementor/editor-controls":function(e){e.exports=window.elementorV2.editorControls},"@elementor/editor-documents":function(e){e.exports=window.elementorV2.editorDocuments},"@elementor/editor-elements":function(e){e.exports=window.elementorV2.editorElements},"@elementor/editor-interactions":function(e){e.exports=window.elementorV2.editorInteractions},"@elementor/editor-panels":function(e){e.exports=window.elementorV2.editorPanels},"@elementor/editor-props":function(e){e.exports=window.elementorV2.editorProps},"@elementor/editor-responsive":function(e){e.exports=window.elementorV2.editorResponsive},"@elementor/editor-styles":function(e){e.exports=window.elementorV2.editorStyles},"@elementor/editor-styles-repository":function(e){e.exports=window.elementorV2.editorStylesRepository},"@elementor/editor-ui":function(e){e.exports=window.elementorV2.editorUi},"@elementor/editor-v1-adapters":function(e){e.exports=window.elementorV2.editorV1Adapters},"@elementor/editor-variables":function(e){e.exports=window.elementorV2.editorVariables},"@elementor/icons":function(e){e.exports=window.elementorV2.icons},"@elementor/locations":function(e){e.exports=window.elementorV2.locations},"@elementor/menus":function(e){e.exports=window.elementorV2.menus},"@elementor/schema":function(e){e.exports=window.elementorV2.schema},"@elementor/session":function(e){e.exports=window.elementorV2.session},"@elementor/ui":function(e){e.exports=window.elementorV2.ui},"@elementor/utils":function(e){e.exports=window.elementorV2.utils},"@elementor/wp-media":function(e){e.exports=window.elementorV2.wpMedia},"@wordpress/i18n":function(e){e.exports=window.wp.i18n},react:function(e){e.exports=window.React}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}__webpack_require__.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(t,{a:t}),t},__webpack_require__.d=function(e,t){for(var n in t)__webpack_require__.o(t,n)&&!__webpack_require__.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},__webpack_require__.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};!function(){__webpack_require__.r(n),__webpack_require__.d(n,{BaseControl:function(){return g.Control},ControlTypeContainer:function(){return y.ControlTypeContainer},CustomCssIndicator:function(){return r.CustomCssIndicator},ElementProvider:function(){return u.ElementProvider},FIELD_TYPE:function(){return w.FIELD_TYPE},HISTORY_DEBOUNCE_WAIT:function(){return E.HISTORY_DEBOUNCE_WAIT},SectionContent:function(){return s.SectionContent},SettingsControl:function(){return a.SettingsControl},SettingsField:function(){return i.SettingsField},StyleIndicator:function(){return l.StyleIndicator},StyleTabSection:function(){return p.StyleTabSection},StylesProviderCannotUpdatePropsError:function(){return k.StylesProviderCannotUpdatePropsError},controlsRegistry:function(){return f.controlsRegistry},createTopLevelObjectType:function(){return b.createTopLevelObjectType},doApplyClasses:function(){return I.doApplyClasses},doGetAppliedClasses:function(){return I.doGetAppliedClasses},doUnapplyClass:function(){return I.doUnapplyClass},getFieldIndicators:function(){return w.getFieldIndicators},getSubtitle:function(){return E.getSubtitle},getTitle:function(){return E.getTitle},init:function(){return _.init},injectIntoClassSelectorActions:function(){return t.injectIntoClassSelectorActions},injectIntoCssClassConvert:function(){return e.injectIntoCssClassConvert},injectIntoPanelHeaderTop:function(){return o.injectIntoPanelHeaderTop},injectIntoStyleTab:function(){return c.injectIntoStyleTab},isDynamicPropValue:function(){return D.isDynamicPropValue},registerEditingPanelReplacement:function(){return T.registerEditingPanelReplacement},registerFieldIndicator:function(){return w.registerFieldIndicator},registerStyleProviderToColors:function(){return C.registerStyleProviderToColors},setLicenseConfig:function(){return P.setLicenseConfig},useClassesProp:function(){return d.useClassesProp},useCustomCss:function(){return v.useCustomCss},useElement:function(){return u.useElement},usePanelActions:function(){return S.usePanelActions},usePanelStatus:function(){return S.usePanelStatus},useStateByElement:function(){return x.useStateByElement},useStyle:function(){return m.useStyle},useStylesRerender:function(){return h.useStylesRerender}});var e=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-convert-local.tsx"),t=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/css-classes/css-class-selector.tsx"),r=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/custom-css-indicator.tsx"),o=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/editing-panel.tsx"),s=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/section-content.tsx"),a=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/settings-control.tsx"),i=__webpack_require__("./packages/packages/core/editor-editing-panel/src/controls-registry/settings-field.tsx"),l=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/style-indicator.tsx"),c=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/style-tab.tsx"),p=__webpack_require__("./packages/packages/core/editor-editing-panel/src/components/style-tab-section.tsx"),d=__webpack_require__("./packages/packages/core/editor-editing-panel/src/contexts/classes-prop-context.tsx"),u=__webpack_require__("./packages/packages/core/editor-editing-panel/src/contexts/element-context.tsx"),m=__webpack_require__("./packages/packages/core/editor-editing-panel/src/contexts/style-context.tsx"),g=__webpack_require__("./packages/packages/core/editor-editing-panel/src/controls-registry/control.tsx"),y=__webpack_require__("./packages/packages/core/editor-editing-panel/src/controls-registry/control-type-container.tsx"),f=__webpack_require__("./packages/packages/core/editor-editing-panel/src/controls-registry/controls-registry.tsx"),k=__webpack_require__("./packages/packages/core/editor-editing-panel/src/errors.ts"),b=__webpack_require__("./packages/packages/core/editor-editing-panel/src/controls-registry/create-top-level-object-type.ts"),v=__webpack_require__("./packages/packages/core/editor-editing-panel/src/hooks/use-custom-css.ts"),x=__webpack_require__("./packages/packages/core/editor-editing-panel/src/hooks/use-state-by-element.ts"),E=__webpack_require__("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-fields.ts"),h=__webpack_require__("./packages/packages/core/editor-editing-panel/src/hooks/use-styles-rerender.ts"),_=__webpack_require__("./packages/packages/core/editor-editing-panel/src/init.ts"),S=__webpack_require__("./packages/packages/core/editor-editing-panel/src/panel.ts"),C=__webpack_require__("./packages/packages/core/editor-editing-panel/src/provider-colors-registry.ts"),w=__webpack_require__("./packages/packages/core/editor-editing-panel/src/field-indicators-registry.ts"),T=__webpack_require__("./packages/packages/core/editor-editing-panel/src/editing-panel-replacement-registry.tsx"),I=__webpack_require__("./packages/packages/core/editor-editing-panel/src/apply-unapply-actions.ts"),P=__webpack_require__("./packages/packages/core/editor-editing-panel/src/hooks/use-license-config.ts"),D=__webpack_require__("./packages/packages/core/editor-editing-panel/src/dynamics/utils.ts")}(),(window.elementorV2=window.elementorV2||{}).editorEditingPanel=n}(),window.elementorV2.editorEditingPanel?.init?.(); | |
| 7766 | 19 | //# sourceMappingURL=editor-editing-panel.js.map |