npm - @elementor/editor-global-classes - Versions diffs - 0.14.0 → 0.15.3 - Mend

@elementor/editor-global-classes 0.14.0 → 0.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md +65 -0
package/dist/index.js +81 -61
package/dist/index.js.map +1 -1
package/dist/index.mjs +88 -73
package/dist/index.mjs.map +1 -1
package/package.json +8 -8
package/src/components/class-manager/class-manager-button.tsx +3 -6
package/src/components/class-manager/class-manager-introduction.tsx +21 -24
package/src/components/class-manager/class-manager-panel.tsx +14 -22
package/src/components/class-manager/delete-class.ts +34 -0
package/src/components/class-manager/delete-confirmation-dialog.tsx +4 -4
package/src/components/class-manager/global-classes-list.tsx +8 -5
package/src/global-classes-styles-provider.ts +2 -2

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/hooks/use-dirty-state.ts","../src/store.ts","../src/errors.ts","../src/save-global-classes.ts","../src/api.ts","../src/components/class-manager/class-manager-introduction.tsx","../src/components/class-manager/flipped-color-swatch-icon.tsx","../src/components/class-manager/global-classes-list.tsx","../src/global-classes-styles-provider.ts","../src/hooks/use-classes-order.ts","../src/hooks/use-ordered-classes.ts","../src/components/class-manager/delete-confirmation-dialog.tsx","../src/components/class-manager/sortable.tsx","../src/components/class-manager/save-changes-dialog.tsx","../src/components/populate-store.tsx","../src/sync-with-document-save.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { PopulateStore } from './components/populate-store';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\nimport { syncWithDocumentSave } from './sync-with-document-save';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-populate-store',\n\t\tcomponent: PopulateStore,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes-manager-button',\n\t\tcomponent: ClassManagerButton,\n\t} );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tsyncWithDocumentSave();\n\t} );\n}\n","import * as React from 'react';\nimport {\n\t__useActiveDocument as useActiveDocument,\n\t__useActiveDocumentActions as useActiveDocumentActions,\n} from '@elementor/editor-documents';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nexport const ClassManagerButton = () => {\n\tconst document = useActiveDocument();\n\tconst { open: openPanel } = usePanelActions();\n\tconst { save: saveDocument } = useActiveDocumentActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\tconst handleOpenPanel = () => {\n\t\tif ( document?.isDirty ) {\n\t\t\topenSaveChangesDialog();\n\t\t\treturn;\n\t\t}\n\n\t\topenPanel();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip title={ __( 'Class manager', 'elementor' ) } placement=\"top\">\n\t\t\t\t<IconButton onClick={ handleOpenPanel }>\n\t\t\t\t\t<FlippedColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t\t</IconButton>\n\t\t\t</Tooltip>\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText sx={ { mb: 2 } }>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Save your changes before moving to the class manager to ensure all updates are applied and saved.',\n\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'If you leave without saving, all changes will be discarded.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Keep editing', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait saveDocument();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\topenPanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\t__useActiveDocument as useActiveDocument,\n\tgetDocumentModifiedStatus,\n\tsetDocumentModifiedStatus,\n} from '@elementor/editor-documents';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelFooter,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { changeEditMode } from '@elementor/editor-v1-adapters';\nimport { XIcon } from '@elementor/icons';\nimport { useMutation } from '@elementor/query';\nimport { Alert, Box, Button, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useDirtyState } from '../../hooks/use-dirty-state';\nimport { saveGlobalClasses } from '../../save-global-classes';\nimport { ClassManagerIntroduction } from './class-manager-introduction';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { GlobalClassesList } from './global-classes-list';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nconst id = 'global-classes-manager';\n\n// We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.\n// The buttons and overlays are enabled only in edit mode, so we're creating a custom new edit mode that\n// will force them to be disabled. We can't use the `preview` edit mode in this case since it'll force\n// the panel to be closed.\nexport const { panel, usePanelActions } = createPanel( {\n\tid,\n\tcomponent: ClassManagerPanel,\n\tallowedEditModes: [ 'edit', id ],\n\tonOpen: () => {\n\t\tchangeEditMode( id );\n\n\t\treturn getDocumentModifiedStatus();\n\t},\n\tonClose: ( documentModifiedState ) => {\n\t\tchangeEditMode( 'edit' );\n\n\t\tif ( getDocumentModifiedStatus() !== documentModifiedState ) {\n\t\t\tsetDocumentModifiedStatus( documentModifiedState );\n\t\t}\n\t},\n} );\n\nexport function ClassManagerPanel() {\n\tconst isDirty = useDirtyState();\n\n\tconst { close: closePanel } = usePanelActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\tconst { mutateAsync: publish, isPending: isPublishing } = usePublish();\n\n\tusePreventUnload();\n\n\treturn (\n\t\t<>\n\t\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelHeader>\n\t\t\t\t\t\t<Stack p={ 1 } pl={ 2 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t\t<FlippedColorSwatchIcon fontSize=\"inherit\" />\n\t\t\t\t\t\t\t\t{ __( 'CSS Class manager', 'elementor' ) }\n\t\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\t\tsx={ { marginLeft: 'auto' } }\n\t\t\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\t\t\tif ( isDirty ) {\n\t\t\t\t\t\t\t\t\t\topenSaveChangesDialog();\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t\t<GlobalClassesList disabled={ isPublishing } />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t\t<PanelFooter>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tcolor=\"global\"\n\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\tonClick={ publish }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\tloading={ isPublishing }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save changes', 'elementor' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PanelFooter>\n\t\t\t\t</Panel>\n\t\t\t</ErrorBoundary>\n\t\t\t<ClassManagerIntroduction />\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Cancel', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait publish();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (\n\t<IconButton size=\"small\" color=\"secondary\" onClick={ onClose } aria-label=\"Close\" { ...props }>\n\t\t<XIcon fontSize=\"small\" />\n\t</IconButton>\n);\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n\nconst usePreventUnload = () => {\n\tconst isDirty = useDirtyState();\n\n\tuseEffect( () => {\n\t\tconst handleBeforeUnload = ( event: BeforeUnloadEvent ) => {\n\t\t\tif ( isDirty ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'beforeunload', handleBeforeUnload );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'beforeunload', handleBeforeUnload );\n\t\t};\n\t}, [ isDirty ] );\n};\n\nconst usePublish = () => {\n\tconst document = useActiveDocument();\n\tconst [ initialDocumentStatus ] = useState( document?.isDirty ?? false );\n\n\treturn useMutation( {\n\t\tmutationFn: () => saveGlobalClasses( { context: 'frontend' } ),\n\t\tonSuccess: () => {\n\t\t\tif ( initialDocumentStatus !== document?.isDirty ) {\n\t\t\t\tsetDocumentModifiedStatus( initialDocumentStatus );\n\t\t\t}\n\t\t},\n\t} );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectIsDirty } from '../store';\n\nexport const useDirtyState = () => {\n\treturn useSelector( selectIsDirty );\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport { type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type GlobalClassesState = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n\tisDirty: boolean;\n};\n\nconst initialState: GlobalClassesState = {\n\titems: {},\n\torder: [],\n\tisDirty: false,\n};\n\nexport type StateWithGlobalClasses = SliceState< typeof slice >;\n\n// Slice\nconst SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' \| 'order' > > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\n\t\t\tstate.isDirty = false;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< StyleDefinition > ) {\n\t\t\tstate.items[ payload.id ] = payload;\n\t\t\tstate.order.unshift( payload.id );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tdelete( state, { payload }: PayloadAction< StyleDefinitionID > ) {\n\t\t\tstate.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );\n\n\t\t\tstate.order = state.order.filter( ( id ) => id !== payload );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tsetOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {\n\t\t\tstate.order = payload;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {\n\t\t\tconst style = state.items[ payload.style.id ];\n\n\t\t\tconst mergedData = {\n\t\t\t\t...style,\n\t\t\t\t...payload.style,\n\t\t\t};\n\n\t\t\tstate.items[ payload.style.id ] = mergedData;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\n\t\tsetPristine( state ) {\n\t\t\tstate.isDirty = false;\n\t\t},\n\t},\n} );\n\n// Selectors\nexport const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\n\nexport const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n\nexport const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {\n\tcode: 'global_class_label_already_exists',\n\tmessage: 'Class with this name already exists.',\n} );\n","import { __dispatch as dispatch, __getState as getState } from '@elementor/store';\n\nimport { apiClient, type UpdateContext } from './api';\nimport { type GlobalClassesState, slice } from './store';\n\ntype Options = {\n\tcontext: UpdateContext;\n};\n\nexport async function saveGlobalClasses( { context }: Options ) {\n\tconst state: GlobalClassesState = getState().globalClasses;\n\n\tconst data = {\n\t\titems: state.items,\n\t\torder: state.order,\n\t};\n\n\tif ( context === 'preview' ) {\n\t\tawait apiClient.saveDraft( data );\n\n\t\treturn;\n\t}\n\n\tawait apiClient.publish( data );\n\n\tdispatch( slice.actions.setPristine() );\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nimport { type GlobalClassesState } from './store';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\n\ntype UpdatePayload = Pick< GlobalClassesState, 'items' \| 'order' >;\n\nexport type UpdateContext = 'preview' \| 'frontend';\n\nexport const apiClient = {\n\tall: () =>\n\t\thttpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'preview' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n\n\tpublish: ( payload: UpdatePayload ) =>\n\t\thttpService().put( 'elementor/v1' + RESOURCE_URL, payload, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'frontend' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n\n\tsaveDraft: ( payload: UpdatePayload ) =>\n\t\thttpService().put( 'elementor/v1' + RESOURCE_URL, payload, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'preview' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useSuppressedMessage } from '@elementor/editor-current-user';\nimport { IntroductionModal } from '@elementor/editor-ui';\nimport { Box, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst MESSAGE_KEY = 'global-class-manager';\n\nexport const ClassManagerIntroduction = () => {\n\tconst [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );\n\tconst [ shouldShowIntroduction, setShouldShowIntroduction ] = useState( ! isMessageSuppressed );\n\n\treturn (\n\t\t<IntroductionModal\n\t\t\topen={ shouldShowIntroduction }\n\t\t\ttitle={ __( 'CSS Class manager', 'elementor' ) }\n\t\t\tcontent={ <IntroductionContent /> }\n\t\t\thandleClose={ ( shouldShowAgain ) => {\n\t\t\t\tif ( ! shouldShowAgain ) {\n\t\t\t\t\tsuppressMessage();\n\t\t\t\t}\n\n\t\t\t\tsetShouldShowIntroduction( false );\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst IntroductionContent = () => {\n\treturn (\n\t\t<Stack gap={ 1.5 } padding={ 3 }>\n\t\t\t<Image\n\t\t\t\tsx={ { width: '100%', height: '312px' } }\n\t\t\t\tsrc=\"https://assets.elementor.com/packages/v1/images/class-manager-intro.svg\"\n\t\t\t\talt=\"\"\n\t\t\t/>\n\t\t\t<Box>\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t\"The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.\",\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t\t<br />\n\t\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Changes apply globally—any modifications will affect all elements using the class, impacting the class order and priority across your site.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</Typography>\n\t\t\t</Box>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { type SvgIconProps } from '@elementor/ui';\n\nexport const FlippedColorSwatchIcon = ( { sx, ...props }: SvgIconProps ) => (\n\t<ColorSwatchIcon sx={ { transform: 'rotate(90deg)', ...sx } } { ...props } />\n);\n","import * as React from 'react';\nimport { type StyleDefinitionID } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from '@elementor/editor-ui';\nimport { DotsVerticalIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tList,\n\tListItemButton,\n\ttype ListItemButtonProps,\n\tListItemText,\n\tMenu,\n\tStack,\n\tstyled,\n\ttype Theme,\n\tTooltip,\n\tTypography,\n\ttype TypographyProps,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\nimport { useClassesOrder } from '../../hooks/use-classes-order';\nimport { useOrderedClasses } from '../../hooks/use-ordered-classes';\nimport { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';\n\nexport const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {\n\tconst cssClasses = useOrderedClasses();\n\n\tconst [ classesOrder, reorderClasses ] = useReorder();\n\n\tif ( ! cssClasses?.length ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<DeleteConfirmationProvider>\n\t\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>\n\t\t\t\t<SortableProvider value={ classesOrder } onChange={ reorderClasses }>\n\t\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\t\tconst renameClass = ( newLabel: string ) => {\n\t\t\t\t\t\t\tglobalClassesStylesProvider.actions.update( { label: newLabel, id } );\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SortableItem key={ id } id={ id }>\n\t\t\t\t\t\t\t\t{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (\n\t\t\t\t\t\t\t\t\t<ClassItem\n\t\t\t\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\trenameClass={ renameClass }\n\t\t\t\t\t\t\t\t\t\tselected={ isDragged }\n\t\t\t\t\t\t\t\t\t\tdisabled={ disabled \|\| isDragPlaceholder }\n\t\t\t\t\t\t\t\t\t\tsortableTriggerProps={ { ...triggerProps, style: triggerStyle } }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</SortableItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</SortableProvider>\n\t\t\t</List>\n\t\t</DeleteConfirmationProvider>\n\t);\n};\n\nconst useReorder = () => {\n\tconst order = useClassesOrder();\n\n\tconst reorder = ( newIds: StyleDefinitionID[] ) => {\n\t\tglobalClassesStylesProvider.actions.setOrder( newIds );\n\t};\n\n\treturn [ order, reorder ] as const;\n};\n\ntype ClassItemProps = React.PropsWithChildren< {\n\tid: string;\n\tlabel: string;\n\trenameClass: ( newLabel: string ) => void;\n\tselected?: boolean;\n\tdisabled?: boolean;\n\tsortableTriggerProps: SortableTriggerProps;\n} >;\n\nconst ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {\n\tconst {\n\t\tref: editableRef,\n\t\topenEditMode,\n\t\tisEditing,\n\t\terror,\n\t\tgetProps: getEditableProps,\n\t} = useEditable( {\n\t\tvalue: label,\n\t\tonSubmit: renameClass,\n\t\tvalidation: validateLabel,\n\t} );\n\n\tconst { openDialog } = useDeleteConfirmation();\n\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\tconst isSelected = ( selected \|\| popupState.isOpen ) && ! disabled;\n\n\treturn (\n\t\t<>\n\t\t\t<StyledListItemButton\n\t\t\t\tdense\n\t\t\t\tdisableGutters\n\t\t\t\tshowActions={ isSelected \|\| isEditing }\n\t\t\t\tshape=\"rounded\"\n\t\t\t\tonDoubleClick={ openEditMode }\n\t\t\t\tselected={ isSelected }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tfocusVisibleClassName=\"visible-class-item\"\n\t\t\t>\n\t\t\t\t<SortableTrigger { ...sortableTriggerProps } />\n\t\t\t\t<Indicator isActive={ isEditing } isError={ !! error }>\n\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t<EditableField\n\t\t\t\t\t\t\tref={ editableRef }\n\t\t\t\t\t\t\terror={ error }\n\t\t\t\t\t\t\tas={ Typography }\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t{ ...getEditableProps() }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t) }\n\t\t\t\t</Indicator>\n\t\t\t\t<Tooltip\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tclassName={ 'class-item-more-actions' }\n\t\t\t\t\ttitle={ __( 'More actions', 'elementor' ) }\n\t\t\t\t>\n\t\t\t\t\t<IconButton size=\"tiny\" { ...bindTrigger( popupState ) } aria-label=\"More actions\">\n\t\t\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Tooltip>\n\t\t\t</StyledListItemButton>\n\t\t\t<Menu\n\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\tanchorOrigin={ {\n\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t\ttransformOrigin={ {\n\t\t\t\t\tvertical: 'top',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<MenuListItem\n\t\t\t\t\tsx={ { minWidth: '160px' } }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\topenEditMode();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<ListItemText primary={ __( 'Rename', 'elementor' ) } />\n\t\t\t\t</MenuListItem>\n\t\t\t\t<MenuListItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\topenDialog( { id, label } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<ListItemText primary={ __( 'Delete', 'elementor' ) } sx={ { color: 'error.light' } } />\n\t\t\t\t</MenuListItem>\n\t\t\t</Menu>\n\t\t</>\n\t);\n};\n\n// Custom styles for sortable list item, until the component is available in the UI package.\nconst StyledListItemButton = styled( ListItemButton, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'showActions' ].includes( prop ),\n} )< ListItemButtonProps & { showActions: boolean } >(\n\t( { showActions } ) => `\n\tmin-height: 36px;\n\n\t&.visible-class-item {\n\t\tbox-shadow: none !important;\n\t}\n\n\t.class-item-more-actions, .class-item-sortable-trigger {\n\t\tvisibility: ${ showActions ? 'visible' : 'hidden' };\n\t}\n\n\t.class-item-sortable-trigger {\n\t\tvisibility: ${ showActions ? 'visible' : 'hidden' };\n\t}\n\n\t&:hover&:not(:disabled) {\n\t\t.class-item-more-actions, .class-item-sortable-trigger {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n`\n);\n\nconst EmptyState = () => (\n\t<Stack alignItems=\"center\" gap={ 1.5 } pt={ 10 } px={ 0.5 } maxWidth=\"260px\" margin=\"auto\">\n\t\t<FlippedColorSwatchIcon fontSize=\"large\" />\n\t\t<StyledHeader variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\">\n\t\t\t{ __( 'There are no global classes yet.', 'elementor' ) }\n\t\t</StyledHeader>\n\t\t<Typography align=\"center\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ __(\n\t\t\t\t'CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.',\n\t\t\t\t'elementor'\n\t\t\t) }\n\t\t</Typography>\n\t</Stack>\n);\n\n// Override panel reset styles.\nconst StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {\n\t'&.MuiTypography-root': {\n\t\t...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),\n\t},\n} ) );\n\nconst Indicator = styled( Box, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),\n} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {\n\tdisplay: 'flex',\n\twidth: '100%',\n\tflexGrow: 1,\n\tborderRadius: theme.spacing( 0.5 ),\n\tborder: getIndicatorBorder( { isActive, isError, theme } ),\n\tpadding: `0 ${ theme.spacing( 1 ) }`,\n\tmarginLeft: isActive ? theme.spacing( 1 ) : 0,\n\tminWidth: 0,\n} ) );\n\nconst getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {\n\tif ( isError ) {\n\t\treturn `2px solid ${ theme.palette.error.main }`;\n\t}\n\n\tif ( isActive ) {\n\t\treturn `2px solid ${ theme.palette.secondary.main }`;\n\t}\n\n\treturn 'none';\n};\n\nconst validateLabel = ( newLabel: string ) => {\n\tif ( ! stylesRepository.isLabelValid( newLabel ) ) {\n\t\treturn __( 'Format is not valid', 'elementor' );\n\t}\n\n\tif ( stylesRepository.isLabelExist( newLabel ) ) {\n\t\treturn __( 'Existing name', 'elementor' );\n\t}\n\n\treturn null;\n};\n","import { generateId } from '@elementor/editor-styles';\nimport type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassLabelAlreadyExistsError } from './errors';\nimport { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type StateWithGlobalClasses } from './store';\n\nconst MAX_CLASSES = 50;\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tlimit: MAX_CLASSES,\n\tactions: {\n\t\tget: () => selectOrderedClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: ( label ) => {\n\t\t\tconst classes = selectGlobalClasses( getState() );\n\n\t\t\tconst existingLabels = Object.values( classes ).map( ( style ) => style.label );\n\n\t\t\tif ( existingLabels.includes( label ) ) {\n\t\t\t\tthrow new GlobalClassLabelAlreadyExistsError( { context: { label } } );\n\t\t\t}\n\n\t\t\tconst existingIds = Object.keys( classes );\n\t\t\tconst id = generateId( 'g-', existingIds );\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'class',\n\t\t\t\t\tlabel,\n\t\t\t\t\tvariants: [],\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn id;\n\t\t},\n\t\tupdate: ( payload ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: payload,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tdelete: ( id ) => {\n\t\t\tdispatch( slice.actions.delete( id ) );\n\t\t},\n\t\tsetOrder: ( order ) => {\n\t\t\tdispatch( slice.actions.setOrder( order ) );\n\t\t},\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'Global class', 'elementor' ),\n\t\tplural: __( 'Global CSS classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrder } from '../store';\n\nexport const useClassesOrder = () => {\n\treturn useSelector( selectOrder );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrderedClasses } from '../store';\n\nexport const useOrderedClasses = () => {\n\treturn useSelector( selectOrderedClasses );\n};\n","import * as React from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { AlertOctagonFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\tDialogTitle,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\n\ntype DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' \| 'label' >;\n\ntype DeleteConfirmationContext = {\n\topenDialog: ( props: DeleteConfirmationDialogProps ) => void;\n\tcloseDialog: () => void;\n\tdialogProps: DeleteConfirmationDialogProps \| null;\n};\n\nconst context = createContext< DeleteConfirmationContext \| null >( null );\n\nexport const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {\n\tconst [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps \| null >( null );\n\n\tconst openDialog = ( props: DeleteConfirmationDialogProps ) => {\n\t\tsetDialogProps( props );\n\t};\n\n\tconst closeDialog = () => {\n\t\tsetDialogProps( null );\n\t};\n\n\treturn (\n\t\t<context.Provider value={ { openDialog, closeDialog, dialogProps } }>\n\t\t\t{ children }\n\t\t\t{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }\n\t\t</context.Provider>\n\t);\n};\n\nconst TITLE_ID = 'delete-class-dialog';\n\nconst DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {\n\tconst { closeDialog } = useDeleteConfirmation();\n\n\tconst onConfirm = () => {\n\t\tglobalClassesStylesProvider.actions.delete( id );\n\n\t\tcloseDialog();\n\t};\n\n\treturn (\n\t\t<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t\t\t<AlertOctagonFilledIcon color=\"error\" />\n\t\t\t\t{ __( 'Delete global class', 'elementor' ) }\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t\t\t{ __( 'Deleting', 'elementor' ) }\n\t\t\t\t\t<Typography variant=\"subtitle2\" component=\"span\">\n\t\t\t\t\t\t { label } \n\t\t\t\t\t</Typography>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button color=\"secondary\" onClick={ closeDialog }>\n\t\t\t\t\t{ __( 'Cancel', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button variant=\"contained\" color=\"error\" onClick={ onConfirm }>\n\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nexport const useDeleteConfirmation = () => {\n\tconst contextValue = useContext( context );\n\n\tif ( ! contextValue ) {\n\t\tthrow new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );\n\t}\n\n\treturn contextValue;\n};\n","import * as React from 'react';\nimport { GripVerticalIcon } from '@elementor/icons';\nimport {\n\tBox,\n\tstyled,\n\tUnstableSortableItem,\n\ttype UnstableSortableItemProps,\n\ttype UnstableSortableItemRenderProps,\n\tUnstableSortableProvider,\n\ttype UnstableSortableProviderProps,\n} from '@elementor/ui';\n\nexport const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (\n\t<UnstableSortableProvider restrictAxis variant=\"static\" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />\n);\n\nexport type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;\n\nexport const SortableTrigger = ( props: SortableTriggerProps ) => (\n\t<StyledSortableTrigger { ...props } role=\"button\" className=\"class-item-sortable-trigger\">\n\t\t<GripVerticalIcon fontSize=\"tiny\" />\n\t</StyledSortableTrigger>\n);\n\ntype SortableItemProps = {\n\tid: UnstableSortableItemProps[ 'id' ];\n\tchildren: ( props: Partial< UnstableSortableItemRenderProps > ) => React.ReactNode;\n};\n\nexport const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {\n\treturn (\n\t\t<UnstableSortableItem\n\t\t\t{ ...props }\n\t\t\tid={ id }\n\t\t\trender={ ( {\n\t\t\t\titemProps,\n\t\t\t\tisDragged,\n\t\t\t\ttriggerProps,\n\t\t\t\titemStyle,\n\t\t\t\ttriggerStyle,\n\t\t\t\tdropIndicationStyle,\n\t\t\t\tshowDropIndication,\n\t\t\t\tisDragOverlay,\n\t\t\t\tisDragPlaceholder,\n\t\t\t}: UnstableSortableItemRenderProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Box\n\t\t\t\t\t\t{ ...itemProps }\n\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\tcomponent={ 'li' }\n\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\tbackgroundColor: isDragOverlay ? 'background.paper' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children( {\n\t\t\t\t\t\t\titemProps,\n\t\t\t\t\t\t\tisDragged,\n\t\t\t\t\t\t\ttriggerProps,\n\t\t\t\t\t\t\titemStyle,\n\t\t\t\t\t\t\ttriggerStyle,\n\t\t\t\t\t\t\tisDragPlaceholder,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ showDropIndication && <SortableItemIndicator style={ dropIndicationStyle } /> }\n\t\t\t\t\t</Box>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst StyledSortableTrigger = styled( 'div' )( ( { theme } ) => ( {\n\tposition: 'absolute',\n\tleft: 0,\n\ttop: '50%',\n\ttransform: `translate( -${ theme.spacing( 1.5 ) }, -50% )`,\n\tcolor: theme.palette.action.active,\n} ) );\n\nconst SortableItemIndicator = styled( Box )`\n\twidth: 100%;\n\theight: 1px;\n\tbackground-color: ${ ( { theme } ) => theme.palette.text.primary };\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { AlertTriangleFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\ttype DialogContentTextProps,\n\ttype DialogProps,\n\tDialogTitle,\n} from '@elementor/ui';\n\nconst TITLE_ID = 'save-changes-dialog';\n\nconst SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' \| 'onClose' > ) => (\n\t<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t{ children }\n\t</Dialog>\n);\n\nconst SaveChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (\n\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t<AlertTriangleFilledIcon color=\"secondary\" />\n\t\t{ children }\n\t</DialogTitle>\n);\n\nconst SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (\n\t<DialogContent>{ children }</DialogContent>\n);\n\nconst SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (\n\t<DialogContentText variant=\"body2\" color=\"textPrimary\" display=\"flex\" flexDirection=\"column\" { ...props } />\n);\n\ntype Action = {\n\tlabel: string;\n\taction: () => void \| Promise< void >;\n};\n\ntype ConfirmationDialogActionsProps = {\n\tactions: {\n\t\tcancel: Action;\n\t\tconfirm: Action;\n\t};\n};\nconst SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {\n\tconst [ isConfirming, setIsConfirming ] = useState( false );\n\tconst { cancel, confirm } = actions;\n\n\tconst onConfirm = async () => {\n\t\tsetIsConfirming( true );\n\t\tawait confirm.action();\n\t\tsetIsConfirming( false );\n\t};\n\treturn (\n\t\t<DialogActions>\n\t\t\t<Button variant=\"text\" color=\"secondary\" onClick={ cancel.action }>\n\t\t\t\t{ cancel.label }\n\t\t\t</Button>\n\t\t\t<Button variant=\"contained\" color=\"secondary\" onClick={ onConfirm } loading={ isConfirming }>\n\t\t\t\t{ confirm.label }\n\t\t\t</Button>\n\t\t</DialogActions>\n\t);\n};\n\nSaveChangesDialog.Title = SaveChangesDialogTitle;\nSaveChangesDialog.Content = SaveChangesDialogContent;\nSaveChangesDialog.ContentText = SaveChangesDialogContentText;\nSaveChangesDialog.Actions = SaveChangesDialogActions;\n\nconst useDialog = () => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst open = () => setIsOpen( true );\n\tconst close = () => setIsOpen( false );\n\n\treturn { isOpen, open, close };\n};\n\nexport { SaveChangesDialog, useDialog };\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function PopulateStore() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { setDocumentModifiedStatus } from '@elementor/editor-documents';\nimport { registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';\n\nimport { saveGlobalClasses } from './save-global-classes';\nimport { selectIsDirty } from './store';\n\nexport function syncWithDocumentSave() {\n\tconst unsubscribe = syncDirtyState();\n\n\tbindSaveAction();\n\n\treturn unsubscribe;\n}\n\nfunction syncDirtyState() {\n\treturn subscribeWithSelector( selectIsDirty, () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetDocumentModifiedStatus( true );\n\t} );\n}\n\nfunction bindSaveAction() {\n\tregisterDataHook( 'after', 'document/save/save', ( args ) => {\n\t\treturn saveGlobalClasses( {\n\t\t\tcontext: args.status === 'publish' ? 'frontend' : 'preview',\n\t\t} );\n\t} );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","import_editor_styles_repository","import_editor_v1_adapters","import_store","React","import_editor_documents","import_ui","import_i18n","React","import_react","import_icons","import_ui","import_i18n","import_store","createSlice","id","createSelector","useSelector","import_store","context","getState","dispatch","React","React","import_editor_ui","import_icons","import_ui","import_i18n","import_editor_styles","import_store","import_i18n","getState","id","dispatch","subscribeWithSelector","import_store","useSelector","import_store","useSelector","React","import_react","import_icons","import_ui","import_i18n","id","React","import_icons","import_ui","id","id","React","import_react","import_icons","import_ui","TITLE_ID","createPanel","isDirty","useActiveDocument","useActiveDocument","useActiveDocumentActions","import_react","import_store","dispatch","useDispatch","import_editor_documents","import_editor_v1_adapters","import_store","subscribeWithSelector","getState","registerSlice","registerPanel","listenTo"]}
1	+ {"version":3,"sources":["../src/init.ts","../src/components/class-manager/class-manager-button.tsx","../src/components/class-manager/class-manager-panel.tsx","../src/hooks/use-dirty-state.ts","../src/store.ts","../src/errors.ts","../src/save-global-classes.ts","../src/api.ts","../src/components/class-manager/class-manager-introduction.tsx","../src/components/class-manager/delete-class.ts","../src/global-classes-styles-provider.ts","../src/components/class-manager/flipped-color-swatch-icon.tsx","../src/components/class-manager/global-classes-list.tsx","../src/hooks/use-classes-order.ts","../src/hooks/use-ordered-classes.ts","../src/components/class-manager/delete-confirmation-dialog.tsx","../src/components/class-manager/sortable.tsx","../src/components/class-manager/save-changes-dialog.tsx","../src/components/populate-store.tsx","../src/sync-with-document-save.ts","../src/index.ts"],"sourcesContent":["import { injectIntoLogic } from '@elementor/editor';\nimport { injectIntoClassSelectorActions } from '@elementor/editor-editing-panel';\nimport { __registerPanel as registerPanel } from '@elementor/editor-panels';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { __privateListenTo as listenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport { ClassManagerButton } from './components/class-manager/class-manager-button';\nimport { panel } from './components/class-manager/class-manager-panel';\nimport { PopulateStore } from './components/populate-store';\nimport { globalClassesStylesProvider } from './global-classes-styles-provider';\nimport { slice } from './store';\nimport { syncWithDocumentSave } from './sync-with-document-save';\n\nexport function init() {\n\tregisterSlice( slice );\n\tregisterPanel( panel );\n\n\tstylesRepository.register( globalClassesStylesProvider );\n\n\tinjectIntoLogic( {\n\t\tid: 'global-classes-populate-store',\n\t\tcomponent: PopulateStore,\n\t} );\n\n\tinjectIntoClassSelectorActions( {\n\t\tid: 'global-classes-manager-button',\n\t\tcomponent: ClassManagerButton,\n\t} );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tsyncWithDocumentSave();\n\t} );\n}\n","import * as React from 'react';\nimport {\n\t__useActiveDocument as useActiveDocument,\n\t__useActiveDocumentActions as useActiveDocumentActions,\n} from '@elementor/editor-documents';\nimport { IconButton, Tooltip } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { usePanelActions } from './class-manager-panel';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nexport const ClassManagerButton = () => {\n\tconst document = useActiveDocument();\n\tconst { open: openPanel } = usePanelActions();\n\tconst { save: saveDocument } = useActiveDocumentActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\tconst handleOpenPanel = () => {\n\t\tif ( document?.isDirty ) {\n\t\t\topenSaveChangesDialog();\n\t\t\treturn;\n\t\t}\n\n\t\topenPanel();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Tooltip title={ __( 'Class Manager', 'elementor' ) } placement=\"top\">\n\t\t\t\t<IconButton onClick={ handleOpenPanel }>\n\t\t\t\t\t<FlippedColorSwatchIcon fontSize=\"tiny\" />\n\t\t\t\t</IconButton>\n\t\t\t</Tooltip>\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText sx={ { mb: 2 } }>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\"To open the Class Manager, save your page first. You can't continue without saving.\",\n\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Stay here', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait saveDocument();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\topenPanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</>\n\t);\n};\n","import * as React from 'react';\nimport { useEffect } from 'react';\nimport { setDocumentModifiedStatus } from '@elementor/editor-documents';\nimport {\n\t__createPanel as createPanel,\n\tPanel,\n\tPanelBody,\n\tPanelFooter,\n\tPanelHeader,\n\tPanelHeaderTitle,\n} from '@elementor/editor-panels';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { changeEditMode } from '@elementor/editor-v1-adapters';\nimport { XIcon } from '@elementor/icons';\nimport { useMutation } from '@elementor/query';\nimport { Alert, Box, Button, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { useDirtyState } from '../../hooks/use-dirty-state';\nimport { saveGlobalClasses } from '../../save-global-classes';\nimport { ClassManagerIntroduction } from './class-manager-introduction';\nimport { hasDeletedItems, onDelete } from './delete-class';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { GlobalClassesList } from './global-classes-list';\nimport { SaveChangesDialog, useDialog } from './save-changes-dialog';\n\nconst id = 'global-classes-manager';\n\n// We need to disable the app-bar buttons, and the elements overlays when opening the classes manager panel.\n// The buttons and overlays are enabled only in edit mode, so we're creating a custom new edit mode that\n// will force them to be disabled. We can't use the `preview` edit mode in this case since it'll force\n// the panel to be closed.\nexport const { panel, usePanelActions } = createPanel( {\n\tid,\n\tcomponent: ClassManagerPanel,\n\tallowedEditModes: [ 'edit', id ],\n\tonOpen: () => {\n\t\tchangeEditMode( id );\n\t},\n\tonClose: () => {\n\t\tchangeEditMode( 'edit' );\n\t},\n} );\n\nexport function ClassManagerPanel() {\n\tconst isDirty = useDirtyState();\n\n\tconst { close: closePanel } = usePanelActions();\n\tconst { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();\n\n\tconst { mutateAsync: publish, isPending: isPublishing } = usePublish();\n\n\tusePreventUnload();\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>\n\t\t\t\t<Panel>\n\t\t\t\t\t<PanelHeader>\n\t\t\t\t\t\t<Stack p={ 1 } pl={ 2 } width=\"100%\" direction=\"row\" alignItems=\"center\">\n\t\t\t\t\t\t\t<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>\n\t\t\t\t\t\t\t\t<FlippedColorSwatchIcon fontSize=\"inherit\" />\n\t\t\t\t\t\t\t\t{ __( 'Class Manager', 'elementor' ) }\n\t\t\t\t\t\t\t</PanelHeaderTitle>\n\t\t\t\t\t\t\t<CloseButton\n\t\t\t\t\t\t\t\tsx={ { marginLeft: 'auto' } }\n\t\t\t\t\t\t\t\tdisabled={ isPublishing }\n\t\t\t\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\t\t\t\tif ( isDirty ) {\n\t\t\t\t\t\t\t\t\t\topenSaveChangesDialog();\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</PanelHeader>\n\t\t\t\t\t<PanelBody px={ 2 }>\n\t\t\t\t\t\t<GlobalClassesList disabled={ isPublishing } />\n\t\t\t\t\t</PanelBody>\n\t\t\t\t\t<PanelFooter>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tcolor=\"global\"\n\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\tonClick={ publish }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t\tloading={ isPublishing }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save changes', 'elementor' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</PanelFooter>\n\t\t\t\t</Panel>\n\t\t\t</ErrorBoundary>\n\t\t\t<ClassManagerIntroduction />\n\t\t\t{ isSaveChangesDialogOpen && (\n\t\t\t\t<SaveChangesDialog>\n\t\t\t\t\t<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>\n\t\t\t\t\t<SaveChangesDialog.Content>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t\t<SaveChangesDialog.ContentText>\n\t\t\t\t\t\t\t{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }\n\t\t\t\t\t\t</SaveChangesDialog.ContentText>\n\t\t\t\t\t</SaveChangesDialog.Content>\n\t\t\t\t\t<SaveChangesDialog.Actions\n\t\t\t\t\t\tactions={ {\n\t\t\t\t\t\t\tcancel: {\n\t\t\t\t\t\t\t\tlabel: __( 'Cancel', 'elementor' ),\n\t\t\t\t\t\t\t\taction: closeSaveChangesDialog,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tconfirm: {\n\t\t\t\t\t\t\t\tlabel: __( 'Save & Continue', 'elementor' ),\n\t\t\t\t\t\t\t\taction: async () => {\n\t\t\t\t\t\t\t\t\tawait publish();\n\t\t\t\t\t\t\t\t\tcloseSaveChangesDialog();\n\t\t\t\t\t\t\t\t\tclosePanel();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</SaveChangesDialog>\n\t\t\t) }\n\t\t</ThemeProvider>\n\t);\n}\n\nconst CloseButton = ( { onClose, ...props }: IconButtonProps & { onClose: () => void } ) => (\n\t<IconButton size=\"small\" color=\"secondary\" onClick={ onClose } aria-label=\"Close\" { ...props }>\n\t\t<XIcon fontSize=\"small\" />\n\t</IconButton>\n);\n\nconst ErrorBoundaryFallback = () => (\n\t<Box role=\"alert\" sx={ { minHeight: '100%', p: 2 } }>\n\t\t<Alert severity=\"error\" sx={ { mb: 2, maxWidth: 400, textAlign: 'center' } }>\n\t\t\t<strong>{ __( 'Something went wrong', 'elementor' ) }</strong>\n\t\t</Alert>\n\t</Box>\n);\n\nconst usePreventUnload = () => {\n\tconst isDirty = useDirtyState();\n\n\tuseEffect( () => {\n\t\tconst handleBeforeUnload = ( event: BeforeUnloadEvent ) => {\n\t\t\tif ( isDirty ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'beforeunload', handleBeforeUnload );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'beforeunload', handleBeforeUnload );\n\t\t};\n\t}, [ isDirty ] );\n};\n\nconst usePublish = () => {\n\treturn useMutation( {\n\t\tmutationFn: () => saveGlobalClasses( { context: 'frontend' } ),\n\t\tonSuccess: async () => {\n\t\t\tsetDocumentModifiedStatus( false );\n\n\t\t\tif ( hasDeletedItems() ) {\n\t\t\t\tawait onDelete();\n\t\t\t}\n\t\t},\n\t} );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectIsDirty } from '../store';\n\nexport const useDirtyState = () => {\n\treturn useSelector( selectIsDirty );\n};\n","import { mergeProps, type Props } from '@elementor/editor-props';\nimport {\n\tgetVariantByMeta,\n\ttype StyleDefinition,\n\ttype StyleDefinitionID,\n\ttype StyleDefinitionVariant,\n} from '@elementor/editor-styles';\nimport { type UpdateActionPayload } from '@elementor/editor-styles-repository';\nimport {\n\t__createSelector as createSelector,\n\t__createSlice as createSlice,\n\ttype PayloadAction,\n\ttype SliceState,\n} from '@elementor/store';\n\nimport { GlobalClassNotFoundError } from './errors';\n\nexport type GlobalClassesState = {\n\titems: Record< StyleDefinitionID, StyleDefinition >;\n\torder: StyleDefinitionID[];\n\tisDirty: boolean;\n};\n\nconst initialState: GlobalClassesState = {\n\titems: {},\n\torder: [],\n\tisDirty: false,\n};\n\nexport type StateWithGlobalClasses = SliceState< typeof slice >;\n\n// Slice\nconst SLICE_NAME = 'globalClasses';\n\nexport const slice = createSlice( {\n\tname: SLICE_NAME,\n\tinitialState,\n\treducers: {\n\t\tinit( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' \| 'order' > > ) {\n\t\t\tstate.items = payload.items;\n\t\t\tstate.order = payload.order;\n\n\t\t\tstate.isDirty = false;\n\t\t},\n\t\tadd( state, { payload }: PayloadAction< StyleDefinition > ) {\n\t\t\tstate.items[ payload.id ] = payload;\n\t\t\tstate.order.unshift( payload.id );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tdelete( state, { payload }: PayloadAction< StyleDefinitionID > ) {\n\t\t\tstate.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );\n\n\t\t\tstate.order = state.order.filter( ( id ) => id !== payload );\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tsetOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {\n\t\t\tstate.order = payload;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdate( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {\n\t\t\tconst style = state.items[ payload.style.id ];\n\n\t\t\tconst mergedData = {\n\t\t\t\t...style,\n\t\t\t\t...payload.style,\n\t\t\t};\n\n\t\t\tstate.items[ payload.style.id ] = mergedData;\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\t\tupdateProps(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\tpayload,\n\t\t\t}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >\n\t\t) {\n\t\t\tconst style = state.items[ payload.id ];\n\n\t\t\tif ( ! style ) {\n\t\t\t\tthrow new GlobalClassNotFoundError( { context: { styleId: payload.id } } );\n\t\t\t}\n\n\t\t\tconst variant = getVariantByMeta( style, payload.meta );\n\n\t\t\tif ( variant ) {\n\t\t\t\tvariant.props = mergeProps( variant.props, payload.props );\n\t\t\t} else {\n\t\t\t\tstyle.variants.push( { meta: payload.meta, props: payload.props } );\n\t\t\t}\n\n\t\t\tstate.isDirty = true;\n\t\t},\n\n\t\tsetPristine( state ) {\n\t\t\tstate.isDirty = false;\n\t\t},\n\t},\n} );\n\n// Selectors\nexport const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;\n\nexport const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;\n\nexport const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>\n\torder.map( ( id ) => items[ id ] )\n);\n\nexport const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>\n\tstate[ SLICE_NAME ].items[ id ] ?? null;\n\nexport const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;\n","import { createError } from '@elementor/utils';\n\nexport const GlobalClassNotFoundError = createError< { styleId: string } >( {\n\tcode: 'global_class_not_found',\n\tmessage: 'Global class not found.',\n} );\n\nexport const GlobalClassLabelAlreadyExistsError = createError< { label: string } >( {\n\tcode: 'global_class_label_already_exists',\n\tmessage: 'Class with this name already exists.',\n} );\n","import { __dispatch as dispatch, __getState as getState } from '@elementor/store';\n\nimport { apiClient, type UpdateContext } from './api';\nimport { type GlobalClassesState, slice } from './store';\n\ntype Options = {\n\tcontext: UpdateContext;\n};\n\nexport async function saveGlobalClasses( { context }: Options ) {\n\tconst state: GlobalClassesState = getState().globalClasses;\n\n\tconst data = {\n\t\titems: state.items,\n\t\torder: state.order,\n\t};\n\n\tif ( context === 'preview' ) {\n\t\tawait apiClient.saveDraft( data );\n\n\t\treturn;\n\t}\n\n\tawait apiClient.publish( data );\n\n\tdispatch( slice.actions.setPristine() );\n}\n","import { type StyleDefinition, type StyleDefinitionsMap } from '@elementor/editor-styles';\nimport { type HttpResponse, httpService } from '@elementor/http';\n\nimport { type GlobalClassesState } from './store';\n\nconst RESOURCE_URL = '/global-classes';\n\nexport type GlobalClassesGetAllResponse = HttpResponse< StyleDefinitionsMap, { order: StyleDefinition[ 'id' ][] } >;\n\ntype UpdatePayload = Pick< GlobalClassesState, 'items' \| 'order' >;\n\nexport type UpdateContext = 'preview' \| 'frontend';\n\nexport const apiClient = {\n\tall: () =>\n\t\thttpService().get< GlobalClassesGetAllResponse >( 'elementor/v1' + RESOURCE_URL, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'preview' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n\n\tpublish: ( payload: UpdatePayload ) =>\n\t\thttpService().put( 'elementor/v1' + RESOURCE_URL, payload, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'frontend' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n\n\tsaveDraft: ( payload: UpdatePayload ) =>\n\t\thttpService().put( 'elementor/v1' + RESOURCE_URL, payload, {\n\t\t\tparams: {\n\t\t\t\tcontext: 'preview' satisfies UpdateContext,\n\t\t\t},\n\t\t} ),\n};\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { useSuppressedMessage } from '@elementor/editor-current-user';\nimport { IntroductionModal } from '@elementor/editor-ui';\nimport { Box, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst MESSAGE_KEY = 'global-class-manager';\n\nexport const ClassManagerIntroduction = () => {\n\tconst [ isMessageSuppressed, suppressMessage ] = useSuppressedMessage( MESSAGE_KEY );\n\tconst [ shouldShowIntroduction, setShouldShowIntroduction ] = useState( ! isMessageSuppressed );\n\n\treturn (\n\t\t<IntroductionModal\n\t\t\topen={ shouldShowIntroduction }\n\t\t\ttitle={ __( 'Class Manager', 'elementor' ) }\n\t\t\tcontent={ <IntroductionContent /> }\n\t\t\timage={ {\n\t\t\t\tsrc: 'https://assets.elementor.com/packages/v1/images/class-manager-intro.svg',\n\t\t\t\talt: '',\n\t\t\t} }\n\t\t\thandleClose={ ( shouldShowAgain ) => {\n\t\t\t\tif ( ! shouldShowAgain ) {\n\t\t\t\t\tsuppressMessage();\n\t\t\t\t}\n\n\t\t\t\tsetShouldShowIntroduction( false );\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst IntroductionContent = () => {\n\treturn (\n\t\t<Box p={ 3 }>\n\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t{ __(\n\t\t\t\t\t\"The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.\",\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\t\t\t<br />\n\t\t\t<Typography variant={ 'body2' }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.',\n\t\t\t\t\t'elementor'\n\t\t\t\t) }\n\t\t\t</Typography>\n\t\t</Box>\n\t);\n};\n","import { getCurrentDocument, getV1DocumentsManager } from '@elementor/editor-documents';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\n\nlet isDeleted = false;\n\nexport const deleteClass = ( id: string ) => {\n\tglobalClassesStylesProvider.actions.delete( id );\n\tisDeleted = true;\n};\n\nexport const onDelete = async () => {\n\tawait reloadDocument();\n\n\tisDeleted = false;\n};\n\nexport const hasDeletedItems = () => isDeleted;\n\n// When deleting a class, we remove it from all the documents that have it applied.\n// In order to reflect the changes in the active document, we need to reload it.\nconst reloadDocument = () => {\n\tconst currentDocument = getCurrentDocument();\n\tconst documentsManager = getV1DocumentsManager();\n\n\tdocumentsManager.invalidateCache();\n\n\treturn runCommand( 'editor/documents/switch', {\n\t\tid: currentDocument?.id,\n\t\tshouldScroll: false,\n\t\tshouldNavigateToDefaultRoute: false,\n\t} );\n};\n","import { generateId } from '@elementor/editor-styles';\nimport type { StylesProvider } from '@elementor/editor-styles-repository';\nimport {\n\t__dispatch as dispatch,\n\t__getState as getState,\n\t__subscribeWithSelector as subscribeWithSelector,\n} from '@elementor/store';\nimport { __ } from '@wordpress/i18n';\n\nimport { GlobalClassLabelAlreadyExistsError } from './errors';\nimport { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type StateWithGlobalClasses } from './store';\n\nconst MAX_CLASSES = 50;\n\nexport const globalClassesStylesProvider = {\n\tkey: 'global-classes',\n\tpriority: 30,\n\tlimit: MAX_CLASSES,\n\tactions: {\n\t\tget: () => selectOrderedClasses( getState() ),\n\t\tgetById: ( id ) => selectClass( getState(), id ),\n\t\tcreate: ( label ) => {\n\t\t\tconst classes = selectGlobalClasses( getState() );\n\n\t\t\tconst existingLabels = Object.values( classes ).map( ( style ) => style.label );\n\n\t\t\tif ( existingLabels.includes( label ) ) {\n\t\t\t\tthrow new GlobalClassLabelAlreadyExistsError( { context: { label } } );\n\t\t\t}\n\n\t\t\tconst existingIds = Object.keys( classes );\n\t\t\tconst id = generateId( 'g-', existingIds );\n\n\t\t\tdispatch(\n\t\t\t\tslice.actions.add( {\n\t\t\t\t\tid,\n\t\t\t\t\ttype: 'class',\n\t\t\t\t\tlabel,\n\t\t\t\t\tvariants: [],\n\t\t\t\t} )\n\t\t\t);\n\n\t\t\treturn id;\n\t\t},\n\t\tupdate: ( payload ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.update( {\n\t\t\t\t\tstyle: payload,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\tdelete: ( id ) => {\n\t\t\tdispatch( slice.actions.delete( id ) );\n\t\t},\n\t\tsetOrder: ( order ) => {\n\t\t\tdispatch( slice.actions.setOrder( order ) );\n\t\t},\n\t\tupdateProps: ( args ) => {\n\t\t\tdispatch(\n\t\t\t\tslice.actions.updateProps( {\n\t\t\t\t\tid: args.id,\n\t\t\t\t\tmeta: args.meta,\n\t\t\t\t\tprops: args.props,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t},\n\tsubscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),\n\tlabels: {\n\t\tsingular: __( 'class', 'elementor' ),\n\t\tplural: __( 'classes', 'elementor' ),\n\t},\n} satisfies StylesProvider;\n","import * as React from 'react';\nimport { ColorSwatchIcon } from '@elementor/icons';\nimport { type SvgIconProps } from '@elementor/ui';\n\nexport const FlippedColorSwatchIcon = ( { sx, ...props }: SvgIconProps ) => (\n\t<ColorSwatchIcon sx={ { transform: 'rotate(90deg)', ...sx } } { ...props } />\n);\n","import * as React from 'react';\nimport { type StyleDefinitionID } from '@elementor/editor-styles';\nimport { stylesRepository } from '@elementor/editor-styles-repository';\nimport { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from '@elementor/editor-ui';\nimport { DotsVerticalIcon } from '@elementor/icons';\nimport {\n\tbindMenu,\n\tbindTrigger,\n\tBox,\n\tIconButton,\n\tList,\n\tListItemButton,\n\ttype ListItemButtonProps,\n\tMenu,\n\tStack,\n\tstyled,\n\ttype Theme,\n\tTooltip,\n\tTypography,\n\ttype TypographyProps,\n\tusePopupState,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { globalClassesStylesProvider } from '../../global-classes-styles-provider';\nimport { useClassesOrder } from '../../hooks/use-classes-order';\nimport { useOrderedClasses } from '../../hooks/use-ordered-classes';\nimport { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';\nimport { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';\nimport { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';\n\nexport const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {\n\tconst cssClasses = useOrderedClasses();\n\n\tconst [ classesOrder, reorderClasses ] = useReorder();\n\n\tif ( ! cssClasses?.length ) {\n\t\treturn <EmptyState />;\n\t}\n\n\treturn (\n\t\t<DeleteConfirmationProvider>\n\t\t\t<List sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>\n\t\t\t\t<SortableProvider value={ classesOrder } onChange={ reorderClasses }>\n\t\t\t\t\t{ cssClasses?.map( ( { id, label } ) => {\n\t\t\t\t\t\tconst renameClass = ( newLabel: string ) => {\n\t\t\t\t\t\t\tglobalClassesStylesProvider.actions.update( { label: newLabel, id } );\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SortableItem key={ id } id={ id }>\n\t\t\t\t\t\t\t\t{ ( { isDragged, isDragPlaceholder, triggerProps, triggerStyle } ) => (\n\t\t\t\t\t\t\t\t\t<ClassItem\n\t\t\t\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\trenameClass={ renameClass }\n\t\t\t\t\t\t\t\t\t\tselected={ isDragged }\n\t\t\t\t\t\t\t\t\t\tdisabled={ disabled \|\| isDragPlaceholder }\n\t\t\t\t\t\t\t\t\t\tsortableTriggerProps={ { ...triggerProps, style: triggerStyle } }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</SortableItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</SortableProvider>\n\t\t\t</List>\n\t\t</DeleteConfirmationProvider>\n\t);\n};\n\nconst useReorder = () => {\n\tconst order = useClassesOrder();\n\n\tconst reorder = ( newIds: StyleDefinitionID[] ) => {\n\t\tglobalClassesStylesProvider.actions.setOrder( newIds );\n\t};\n\n\treturn [ order, reorder ] as const;\n};\n\ntype ClassItemProps = React.PropsWithChildren< {\n\tid: string;\n\tlabel: string;\n\trenameClass: ( newLabel: string ) => void;\n\tselected?: boolean;\n\tdisabled?: boolean;\n\tsortableTriggerProps: SortableTriggerProps;\n} >;\n\nconst ClassItem = ( { id, label, renameClass, selected, disabled, sortableTriggerProps }: ClassItemProps ) => {\n\tconst {\n\t\tref: editableRef,\n\t\topenEditMode,\n\t\tisEditing,\n\t\terror,\n\t\tgetProps: getEditableProps,\n\t} = useEditable( {\n\t\tvalue: label,\n\t\tonSubmit: renameClass,\n\t\tvalidation: validateLabel,\n\t} );\n\n\tconst { openDialog } = useDeleteConfirmation();\n\n\tconst popupState = usePopupState( {\n\t\tvariant: 'popover',\n\t\tdisableAutoFocus: true,\n\t} );\n\n\tconst isSelected = ( selected \|\| popupState.isOpen ) && ! disabled;\n\n\treturn (\n\t\t<>\n\t\t\t<StyledListItemButton\n\t\t\t\tdense\n\t\t\t\tdisableGutters\n\t\t\t\tshowActions={ isSelected \|\| isEditing }\n\t\t\t\tshape=\"rounded\"\n\t\t\t\tonDoubleClick={ openEditMode }\n\t\t\t\tselected={ isSelected }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tfocusVisibleClassName=\"visible-class-item\"\n\t\t\t>\n\t\t\t\t<SortableTrigger { ...sortableTriggerProps } />\n\t\t\t\t<Indicator isActive={ isEditing } isError={ !! error }>\n\t\t\t\t\t{ isEditing ? (\n\t\t\t\t\t\t<EditableField\n\t\t\t\t\t\t\tref={ editableRef }\n\t\t\t\t\t\t\terror={ error }\n\t\t\t\t\t\t\tas={ Typography }\n\t\t\t\t\t\t\tvariant=\"caption\"\n\t\t\t\t\t\t\t{ ...getEditableProps() }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<EllipsisWithTooltip title={ label } as={ Typography } variant=\"caption\" />\n\t\t\t\t\t) }\n\t\t\t\t</Indicator>\n\t\t\t\t<Tooltip\n\t\t\t\t\tplacement=\"top\"\n\t\t\t\t\tclassName={ 'class-item-more-actions' }\n\t\t\t\t\ttitle={ __( 'More actions', 'elementor' ) }\n\t\t\t\t>\n\t\t\t\t\t<IconButton size=\"tiny\" { ...bindTrigger( popupState ) } aria-label=\"More actions\">\n\t\t\t\t\t\t<DotsVerticalIcon fontSize=\"tiny\" />\n\t\t\t\t\t</IconButton>\n\t\t\t\t</Tooltip>\n\t\t\t</StyledListItemButton>\n\t\t\t<Menu\n\t\t\t\t{ ...bindMenu( popupState ) }\n\t\t\t\tanchorOrigin={ {\n\t\t\t\t\tvertical: 'bottom',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t\ttransformOrigin={ {\n\t\t\t\t\tvertical: 'top',\n\t\t\t\t\thorizontal: 'right',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<MenuListItem\n\t\t\t\t\tsx={ { minWidth: '160px' } }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\topenEditMode();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'text.primary' } }>\n\t\t\t\t\t\t{ __( 'Rename', 'elementor' ) }\n\t\t\t\t\t</Typography>\n\t\t\t\t</MenuListItem>\n\t\t\t\t<MenuListItem\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tpopupState.close();\n\t\t\t\t\t\topenDialog( { id, label } );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Typography variant=\"caption\" sx={ { color: 'error.light' } }>\n\t\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t\t</Typography>\n\t\t\t\t</MenuListItem>\n\t\t\t</Menu>\n\t\t</>\n\t);\n};\n\n// Custom styles for sortable list item, until the component is available in the UI package.\nconst StyledListItemButton = styled( ListItemButton, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'showActions' ].includes( prop ),\n} )< ListItemButtonProps & { showActions: boolean } >(\n\t( { showActions } ) => `\n\tmin-height: 36px;\n\n\t&.visible-class-item {\n\t\tbox-shadow: none !important;\n\t}\n\n\t.class-item-more-actions, .class-item-sortable-trigger {\n\t\tvisibility: ${ showActions ? 'visible' : 'hidden' };\n\t}\n\n\t.class-item-sortable-trigger {\n\t\tvisibility: ${ showActions ? 'visible' : 'hidden' };\n\t}\n\n\t&:hover&:not(:disabled) {\n\t\t.class-item-more-actions, .class-item-sortable-trigger {\n\t\t\tvisibility: visible;\n\t\t}\n\t}\n`\n);\n\nconst EmptyState = () => (\n\t<Stack alignItems=\"center\" gap={ 1.5 } pt={ 10 } px={ 0.5 } maxWidth=\"260px\" margin=\"auto\">\n\t\t<FlippedColorSwatchIcon fontSize=\"large\" />\n\t\t<StyledHeader variant=\"subtitle2\" component=\"h2\" color=\"text.secondary\">\n\t\t\t{ __( 'There are no global classes yet.', 'elementor' ) }\n\t\t</StyledHeader>\n\t\t<Typography align=\"center\" variant=\"caption\" color=\"text.secondary\">\n\t\t\t{ __(\n\t\t\t\t'CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.',\n\t\t\t\t'elementor'\n\t\t\t) }\n\t\t</Typography>\n\t</Stack>\n);\n\n// Override panel reset styles.\nconst StyledHeader = styled( Typography )< TypographyProps >( ( { theme, variant } ) => ( {\n\t'&.MuiTypography-root': {\n\t\t...( theme.typography[ variant as keyof typeof theme.typography ] as React.CSSProperties ),\n\t},\n} ) );\n\nconst Indicator = styled( Box, {\n\tshouldForwardProp: ( prop: string ) => ! [ 'isActive', 'isError' ].includes( prop ),\n} )< { isActive: boolean; isError: boolean } >( ( { theme, isActive, isError } ) => ( {\n\tdisplay: 'flex',\n\twidth: '100%',\n\tflexGrow: 1,\n\tborderRadius: theme.spacing( 0.5 ),\n\tborder: getIndicatorBorder( { isActive, isError, theme } ),\n\tpadding: `0 ${ theme.spacing( 1 ) }`,\n\tmarginLeft: isActive ? theme.spacing( 1 ) : 0,\n\tminWidth: 0,\n} ) );\n\nconst getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean; isError: boolean; theme: Theme } ) => {\n\tif ( isError ) {\n\t\treturn `2px solid ${ theme.palette.error.main }`;\n\t}\n\n\tif ( isActive ) {\n\t\treturn `2px solid ${ theme.palette.secondary.main }`;\n\t}\n\n\treturn 'none';\n};\n\nconst validateLabel = ( newLabel: string ) => {\n\tif ( ! stylesRepository.isLabelValid( newLabel ) ) {\n\t\treturn __( 'Invalid format', 'elementor' );\n\t}\n\n\tif ( stylesRepository.isLabelExist( newLabel ) ) {\n\t\treturn __( 'Name exists', 'elementor' );\n\t}\n\n\treturn null;\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrder } from '../store';\n\nexport const useClassesOrder = () => {\n\treturn useSelector( selectOrder );\n};\n","import { __useSelector as useSelector } from '@elementor/store';\n\nimport { selectOrderedClasses } from '../store';\n\nexport const useOrderedClasses = () => {\n\treturn useSelector( selectOrderedClasses );\n};\n","import * as React from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport { type StyleDefinition } from '@elementor/editor-styles';\nimport { AlertOctagonFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\tDialogTitle,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nimport { deleteClass } from './delete-class';\n\ntype DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' \| 'label' >;\n\ntype DeleteConfirmationContext = {\n\topenDialog: ( props: DeleteConfirmationDialogProps ) => void;\n\tcloseDialog: () => void;\n\tdialogProps: DeleteConfirmationDialogProps \| null;\n};\n\nconst context = createContext< DeleteConfirmationContext \| null >( null );\n\nexport const DeleteConfirmationProvider = ( { children }: React.PropsWithChildren ) => {\n\tconst [ dialogProps, setDialogProps ] = useState< DeleteConfirmationDialogProps \| null >( null );\n\n\tconst openDialog = ( props: DeleteConfirmationDialogProps ) => {\n\t\tsetDialogProps( props );\n\t};\n\n\tconst closeDialog = () => {\n\t\tsetDialogProps( null );\n\t};\n\n\treturn (\n\t\t<context.Provider value={ { openDialog, closeDialog, dialogProps } }>\n\t\t\t{ children }\n\t\t\t{ !! dialogProps && <DeleteConfirmationDialog { ...dialogProps } /> }\n\t\t</context.Provider>\n\t);\n};\n\nconst TITLE_ID = 'delete-class-dialog';\n\nconst DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps ) => {\n\tconst { closeDialog } = useDeleteConfirmation();\n\n\tconst onConfirm = () => {\n\t\tdeleteClass( id );\n\n\t\tcloseDialog();\n\t};\n\n\treturn (\n\t\t<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t\t\t<AlertOctagonFilledIcon color=\"error\" />\n\t\t\t\t{ __( 'Delete this class?', 'elementor' ) }\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent>\n\t\t\t\t<DialogContentText variant=\"body2\" color=\"textPrimary\">\n\t\t\t\t\t{ __( 'Deleting', 'elementor' ) }\n\t\t\t\t\t<Typography variant=\"subtitle2\" component=\"span\">\n\t\t\t\t\t\t { label } \n\t\t\t\t\t</Typography>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.',\n\t\t\t\t\t\t'elementor'\n\t\t\t\t\t) }\n\t\t\t\t</DialogContentText>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions>\n\t\t\t\t<Button color=\"secondary\" onClick={ closeDialog }>\n\t\t\t\t\t{ __( 'Not now', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t\t<Button variant=\"contained\" color=\"error\" onClick={ onConfirm }>\n\t\t\t\t\t{ __( 'Delete', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nexport const useDeleteConfirmation = () => {\n\tconst contextValue = useContext( context );\n\n\tif ( ! contextValue ) {\n\t\tthrow new Error( 'useDeleteConfirmation must be used within a DeleteConfirmationProvider' );\n\t}\n\n\treturn contextValue;\n};\n","import * as React from 'react';\nimport { GripVerticalIcon } from '@elementor/icons';\nimport {\n\tBox,\n\tstyled,\n\tUnstableSortableItem,\n\ttype UnstableSortableItemProps,\n\ttype UnstableSortableItemRenderProps,\n\tUnstableSortableProvider,\n\ttype UnstableSortableProviderProps,\n} from '@elementor/ui';\n\nexport const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (\n\t<UnstableSortableProvider restrictAxis variant=\"static\" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />\n);\n\nexport type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;\n\nexport const SortableTrigger = ( props: SortableTriggerProps ) => (\n\t<StyledSortableTrigger { ...props } role=\"button\" className=\"class-item-sortable-trigger\">\n\t\t<GripVerticalIcon fontSize=\"tiny\" />\n\t</StyledSortableTrigger>\n);\n\ntype SortableItemProps = {\n\tid: UnstableSortableItemProps[ 'id' ];\n\tchildren: ( props: Partial< UnstableSortableItemRenderProps > ) => React.ReactNode;\n};\n\nexport const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {\n\treturn (\n\t\t<UnstableSortableItem\n\t\t\t{ ...props }\n\t\t\tid={ id }\n\t\t\trender={ ( {\n\t\t\t\titemProps,\n\t\t\t\tisDragged,\n\t\t\t\ttriggerProps,\n\t\t\t\titemStyle,\n\t\t\t\ttriggerStyle,\n\t\t\t\tdropIndicationStyle,\n\t\t\t\tshowDropIndication,\n\t\t\t\tisDragOverlay,\n\t\t\t\tisDragPlaceholder,\n\t\t\t}: UnstableSortableItemRenderProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Box\n\t\t\t\t\t\t{ ...itemProps }\n\t\t\t\t\t\tstyle={ itemStyle }\n\t\t\t\t\t\tcomponent={ 'li' }\n\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\tbackgroundColor: isDragOverlay ? 'background.paper' : undefined,\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ children( {\n\t\t\t\t\t\t\titemProps,\n\t\t\t\t\t\t\tisDragged,\n\t\t\t\t\t\t\ttriggerProps,\n\t\t\t\t\t\t\titemStyle,\n\t\t\t\t\t\t\ttriggerStyle,\n\t\t\t\t\t\t\tisDragPlaceholder,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t{ showDropIndication && <SortableItemIndicator style={ dropIndicationStyle } /> }\n\t\t\t\t\t</Box>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n};\n\nconst StyledSortableTrigger = styled( 'div' )( ( { theme } ) => ( {\n\tposition: 'absolute',\n\tleft: 0,\n\ttop: '50%',\n\ttransform: `translate( -${ theme.spacing( 1.5 ) }, -50% )`,\n\tcolor: theme.palette.action.active,\n} ) );\n\nconst SortableItemIndicator = styled( Box )`\n\twidth: 100%;\n\theight: 1px;\n\tbackground-color: ${ ( { theme } ) => theme.palette.text.primary };\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport { AlertTriangleFilledIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tDialog,\n\tDialogActions,\n\tDialogContent,\n\tDialogContentText,\n\ttype DialogContentTextProps,\n\ttype DialogProps,\n\tDialogTitle,\n} from '@elementor/ui';\n\nconst TITLE_ID = 'save-changes-dialog';\n\nconst SaveChangesDialog = ( { children, onClose }: Pick< DialogProps, 'children' \| 'onClose' > ) => (\n\t<Dialog open onClose={ onClose } aria-labelledby={ TITLE_ID } maxWidth=\"xs\">\n\t\t{ children }\n\t</Dialog>\n);\n\nconst SaveChangesDialogTitle = ( { children }: React.PropsWithChildren ) => (\n\t<DialogTitle id={ TITLE_ID } display=\"flex\" alignItems=\"center\" gap={ 1 } sx={ { lineHeight: 1 } }>\n\t\t<AlertTriangleFilledIcon color=\"secondary\" />\n\t\t{ children }\n\t</DialogTitle>\n);\n\nconst SaveChangesDialogContent = ( { children }: React.PropsWithChildren ) => (\n\t<DialogContent>{ children }</DialogContent>\n);\n\nconst SaveChangesDialogContentText = ( props: DialogContentTextProps ) => (\n\t<DialogContentText variant=\"body2\" color=\"textPrimary\" display=\"flex\" flexDirection=\"column\" { ...props } />\n);\n\ntype Action = {\n\tlabel: string;\n\taction: () => void \| Promise< void >;\n};\n\ntype ConfirmationDialogActionsProps = {\n\tactions: {\n\t\tcancel: Action;\n\t\tconfirm: Action;\n\t};\n};\nconst SaveChangesDialogActions = ( { actions }: ConfirmationDialogActionsProps ) => {\n\tconst [ isConfirming, setIsConfirming ] = useState( false );\n\tconst { cancel, confirm } = actions;\n\n\tconst onConfirm = async () => {\n\t\tsetIsConfirming( true );\n\t\tawait confirm.action();\n\t\tsetIsConfirming( false );\n\t};\n\treturn (\n\t\t<DialogActions>\n\t\t\t<Button variant=\"text\" color=\"secondary\" onClick={ cancel.action }>\n\t\t\t\t{ cancel.label }\n\t\t\t</Button>\n\t\t\t<Button variant=\"contained\" color=\"secondary\" onClick={ onConfirm } loading={ isConfirming }>\n\t\t\t\t{ confirm.label }\n\t\t\t</Button>\n\t\t</DialogActions>\n\t);\n};\n\nSaveChangesDialog.Title = SaveChangesDialogTitle;\nSaveChangesDialog.Content = SaveChangesDialogContent;\nSaveChangesDialog.ContentText = SaveChangesDialogContentText;\nSaveChangesDialog.Actions = SaveChangesDialogActions;\n\nconst useDialog = () => {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst open = () => setIsOpen( true );\n\tconst close = () => setIsOpen( false );\n\n\treturn { isOpen, open, close };\n};\n\nexport { SaveChangesDialog, useDialog };\n","import { useEffect } from 'react';\nimport { __useDispatch as useDispatch } from '@elementor/store';\n\nimport { apiClient } from '../api';\nimport { slice } from '../store';\n\nexport function PopulateStore() {\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tapiClient.all().then( ( res ) => {\n\t\t\tconst { data, meta } = res.data;\n\n\t\t\tdispatch( slice.actions.init( { items: data, order: meta.order } ) );\n\t\t} );\n\t}, [ dispatch ] );\n\n\treturn null;\n}\n","import { setDocumentModifiedStatus } from '@elementor/editor-documents';\nimport { registerDataHook } from '@elementor/editor-v1-adapters';\nimport { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';\n\nimport { saveGlobalClasses } from './save-global-classes';\nimport { selectIsDirty } from './store';\n\nexport function syncWithDocumentSave() {\n\tconst unsubscribe = syncDirtyState();\n\n\tbindSaveAction();\n\n\treturn unsubscribe;\n}\n\nfunction syncDirtyState() {\n\treturn subscribeWithSelector( selectIsDirty, () => {\n\t\tif ( ! isDirty() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetDocumentModifiedStatus( true );\n\t} );\n}\n\nfunction bindSaveAction() {\n\tregisterDataHook( 'after', 'document/save/save', ( args ) => {\n\t\treturn saveGlobalClasses( {\n\t\t\tcontext: args.status === 'publish' ? 'frontend' : 'preview',\n\t\t} );\n\t} );\n}\n\nfunction isDirty() {\n\treturn selectIsDirty( getState() );\n}\n","import { init } from './init';\n\ninit();\n"],"mappings":"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","names":["import_editor_panels","import_editor_styles_repository","import_editor_v1_adapters","import_store","React","import_editor_documents","import_ui","import_i18n","React","import_react","import_editor_documents","import_editor_ui","import_editor_v1_adapters","import_icons","import_ui","import_i18n","import_store","createSlice","id","createSelector","useSelector","import_store","context","getState","dispatch","import_editor_styles","import_store","import_i18n","getState","id","dispatch","subscribeWithSelector","id","runCommand","React","React","import_editor_ui","import_icons","import_ui","import_i18n","import_store","useSelector","import_store","useSelector","React","import_react","import_icons","import_ui","import_i18n","id","React","import_icons","import_ui","id","id","React","import_react","import_icons","import_ui","TITLE_ID","createPanel","isDirty","useActiveDocument","useActiveDocumentActions","import_react","import_store","dispatch","useDispatch","import_editor_documents","import_editor_v1_adapters","import_store","subscribeWithSelector","getState","registerSlice","registerPanel","listenTo"]}

package/dist/index.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 // src/components/class-manager/class-manager-button.tsx
 import * as React8 from "react";
 import {
-  __useActiveDocument as useActiveDocument2,
+  __useActiveDocument as useActiveDocument,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
@@ -17,12 +17,8 @@ import { __ as __6 } from "@wordpress/i18n";
 // src/components/class-manager/class-manager-panel.tsx
 import * as React7 from "react";
-import { useEffect, useState as useState4 } from "react";
-import {
-  __useActiveDocument as useActiveDocument,
-  getDocumentModifiedStatus,
-  setDocumentModifiedStatus
-} from "@elementor/editor-documents";
+import { useEffect } from "react";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
   Panel,
@@ -31,10 +27,11 @@ import {
   PanelHeader,
   PanelHeaderTitle
 } from "@elementor/editor-panels";
+import { ThemeProvider } from "@elementor/editor-ui";
 import { changeEditMode } from "@elementor/editor-v1-adapters";
 import { XIcon } from "@elementor/icons";
 import { useMutation } from "@elementor/query";
-import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack3 } from "@elementor/ui";
+import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 // src/hooks/use-dirty-state.ts
@@ -179,7 +176,7 @@ import * as React from "react";
 import { useState } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
-import { Box, Image, Stack, Typography } from "@elementor/ui";
+import { Box, Typography } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
@@ -189,8 +186,12 @@ var ClassManagerIntroduction = () => {
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __("CSS Class manager", "elementor"),
+      title: __("Class Manager", "elementor"),
       content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
+      image: {
+        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+        alt: ""
+      },
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -201,48 +202,18 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(Stack, { gap: 1.5, padding: 3 }, /* @__PURE__ */ React.createElement(
-    Image,
-    {
-      sx: { width: "100%", height: "312px" },
-      src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
-      alt: ""
-    }
-  ), /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
-    "The CSS Class Manager allows you to manage and organize your site's CSS classes efficiently. You can reorder classes to adjust their priority, rename them to maintain clarity in your design system, and delete unused classes to keep your CSS structured.",
+  return /* @__PURE__ */ React.createElement(Box, { p: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+    "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
   )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
-    "Changes apply globally\u2014any modifications will affect all elements using the class, impacting the class order and priority across your site.",
+    "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
-  ))));
+  )));
 };
-// src/components/class-manager/flipped-color-swatch-icon.tsx
-import * as React2 from "react";
-import { ColorSwatchIcon } from "@elementor/icons";
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
-// src/components/class-manager/global-classes-list.tsx
-import * as React5 from "react";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from "@elementor/editor-ui";
-import { DotsVerticalIcon } from "@elementor/icons";
-import {
-  bindMenu,
-  bindTrigger,
-  Box as Box3,
-  IconButton,
-  List,
-  ListItemButton,
-  ListItemText,
-  Menu,
-  Stack as Stack2,
-  styled as styled2,
-  Tooltip,
-  Typography as Typography3,
-  usePopupState
-} from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+// src/components/class-manager/delete-class.ts
+import { getCurrentDocument, getV1DocumentsManager } from "@elementor/editor-documents";
+import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
 // src/global-classes-styles-provider.ts
 import { generateId } from "@elementor/editor-styles";
@@ -303,11 +274,59 @@ var globalClassesStylesProvider = {
   },
   subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
   labels: {
-    singular: __2("Global class", "elementor"),
-    plural: __2("Global CSS classes", "elementor")
+    singular: __2("class", "elementor"),
+    plural: __2("classes", "elementor")
   }
 };
+// src/components/class-manager/delete-class.ts
+var isDeleted = false;
+var deleteClass = (id2) => {
+  globalClassesStylesProvider.actions.delete(id2);
+  isDeleted = true;
+};
+var onDelete = async () => {
+  await reloadDocument();
+  isDeleted = false;
+};
+var hasDeletedItems = () => isDeleted;
+var reloadDocument = () => {
+  const currentDocument = getCurrentDocument();
+  const documentsManager = getV1DocumentsManager();
+  documentsManager.invalidateCache();
+  return runCommand("editor/documents/switch", {
+    id: currentDocument?.id,
+    shouldScroll: false,
+    shouldNavigateToDefaultRoute: false
+  });
+};
+// src/components/class-manager/flipped-color-swatch-icon.tsx
+import * as React2 from "react";
+import { ColorSwatchIcon } from "@elementor/icons";
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+// src/components/class-manager/global-classes-list.tsx
+import * as React5 from "react";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from "@elementor/editor-ui";
+import { DotsVerticalIcon } from "@elementor/icons";
+import {
+  bindMenu,
+  bindTrigger,
+  Box as Box3,
+  IconButton,
+  List,
+  ListItemButton,
+  Menu,
+  Stack,
+  styled as styled2,
+  Tooltip,
+  Typography as Typography3,
+  usePopupState
+} from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
 var useClassesOrder = () => {
@@ -349,13 +368,13 @@ var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
   const onConfirm = () => {
-    globalClassesStylesProvider.actions.delete(id2);
+    deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete global class", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
+  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Cancel", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Not now", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext(context);
@@ -534,7 +553,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Rename", "elementor") })
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       MenuListItem,
@@ -544,7 +563,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(ListItemText, { primary: __4("Delete", "elementor"), sx: { color: "error.light" } })
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __4("Delete", "elementor"))
     )
   ));
 };
@@ -573,7 +592,7 @@ var StyledListItemButton = styled2(ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack2, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
   "elementor"
 )));
@@ -605,10 +624,10 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
 };
 var validateLabel = (newLabel) => {
   if (!stylesRepository.isLabelValid(newLabel)) {
-    return __4("Format is not valid", "elementor");
+    return __4("Invalid format", "elementor");
   }
   if (stylesRepository.isLabelExist(newLabel)) {
-    return __4("Existing name", "elementor");
+    return __4("Name exists", "elementor");
   }
   return null;
 };
@@ -659,13 +678,9 @@ var { panel, usePanelActions } = createPanel({
   allowedEditModes: ["edit", id],
   onOpen: () => {
     changeEditMode(id);
-    return getDocumentModifiedStatus();
   },
-  onClose: (documentModifiedState) => {
+  onClose: () => {
     changeEditMode("edit");
-    if (getDocumentModifiedStatus() !== documentModifiedState) {
-      setDocumentModifiedStatus(documentModifiedState);
-    }
   }
 });
 function ClassManagerPanel() {
@@ -674,10 +689,11 @@ function ClassManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack3, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("CSS Class manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
+      disabled: isPublishing,
       onClose: () => {
         if (isDirty2) {
           openSaveChangesDialog();
@@ -735,13 +751,12 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  const document = useActiveDocument();
-  const [initialDocumentStatus] = useState4(document?.isDirty ?? false);
   return useMutation({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
-    onSuccess: () => {
-      if (initialDocumentStatus !== document?.isDirty) {
-        setDocumentModifiedStatus(initialDocumentStatus);
+    onSuccess: async () => {
+      setDocumentModifiedStatus(false);
+      if (hasDeletedItems()) {
+        await onDelete();
       }
     }
   });
@@ -749,7 +764,7 @@ var usePublish = () => {
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = useActiveDocument2();
+  const document = useActiveDocument();
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = useActiveDocumentActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
@@ -760,15 +775,15 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
-    "Save your changes before moving to the class manager to ensure all updates are applied and saved.",
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
+    "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  )), /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, null, __6("If you leave without saving, all changes will be discarded.", "elementor"))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React8.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __6("Keep editing", "elementor"),
+          label: __6("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {