← All changes
|
assets/js/packages/editor-editing-panel/editor-editing-panel.js
+7757
-10
4.0.9
→
trunk
View file →
| @@ -1,19 +1,7766 @@ | ||
| 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")` | |
| 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")` | |
| 3 | 336 | &:not( :last-of-type ) { |
| 4 | - border-bottom: 1px solid ${({theme:e})=>e.palette.divider}; | |
| 337 | + border-bottom: 1px solid ${({ theme }) => theme.palette.divider}; | |
| 5 | 338 | } |
| 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")` | |
| 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")` | |
| 7 | 348 | padding: 0; |
| 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)})` | |
| 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) })` | |
| 11 | 548 | width: 5px; |
| 12 | 549 | height: 5px; |
| 13 | 550 | border-radius: 50%; |
| 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")` | |
| 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")` | |
| 16 | 1844 | height: 100%; |
| 17 | 1845 | overflow-y: auto; |
| 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.svgSrcPropTypeUtil},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?.(); | |
| 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?.(); | |
| 19 | 7766 | //# sourceMappingURL=editor-editing-panel.js.map |