@elementor/editor-elements-panel 3.35.0-423 → 3.35.0-425

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 (9) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.js +9 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +9 -4
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +4 -4
  8. package/src/inject-tab.ts +3 -1
  9. package/src/utils/create-tab-nav-item.ts +7 -2
package/dist/index.d.mts CHANGED
@@ -6,7 +6,8 @@ type Config = {
6
6
  id: string;
7
7
  label: string;
8
8
  component: ComponentType;
9
+ position?: number;
9
10
  };
10
- declare function injectTab({ id, label, component }: Config): void;
11
+ declare function injectTab({ id, label, component, position }: Config): void;
11
12
 
12
13
  export { init, injectTab };
package/dist/index.d.ts CHANGED
@@ -6,7 +6,8 @@ type Config = {
6
6
  id: string;
7
7
  label: string;
8
8
  component: ComponentType;
9
+ position?: number;
9
10
  };
10
- declare function injectTab({ id, label, component }: Config): void;
11
+ declare function injectTab({ id, label, component, position }: Config): void;
11
12
 
12
13
  export { init, injectTab };
package/dist/index.js CHANGED
@@ -128,7 +128,7 @@ function getNavigationWrapperElement() {
128
128
  }
129
129
 
130
130
  // src/utils/create-tab-nav-item.ts
131
- function createTabNavItem({ id, label, route, isActive }) {
131
+ function createTabNavItem({ id, label, route, isActive, position }) {
132
132
  const wrapper = getNavigationWrapperElement();
133
133
  const btn = document.createElement("button");
134
134
  btn.className = ["elementor-component-tab", "elementor-panel-navigation-tab", isActive ? "elementor-active" : ""].filter(Boolean).join(" ");
@@ -137,7 +137,11 @@ function createTabNavItem({ id, label, route, isActive }) {
137
137
  btn.addEventListener("click", () => {
138
138
  getWindow().$e.route(route);
139
139
  });
140
- wrapper.appendChild(btn);
140
+ if (position !== void 0 && wrapper.children[position]) {
141
+ wrapper.insertBefore(btn, wrapper.children[position]);
142
+ } else {
143
+ wrapper.appendChild(btn);
144
+ }
141
145
  }
142
146
 
143
147
  // src/utils/get-legacy-elements-panel-component.ts
@@ -155,7 +159,7 @@ function getLegacyElementsPanelComponent() {
155
159
  }
156
160
 
157
161
  // src/inject-tab.ts
158
- function injectTab({ id, label, component }) {
162
+ function injectTab({ id, label, component, position }) {
159
163
  registerTab({ id, label, component });
160
164
  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
161
165
  getWindow().elementor.hooks.addFilter("panel/elements/regionViews", (regions, { elements }) => {
@@ -172,7 +176,8 @@ function injectTab({ id, label, component }) {
172
176
  id,
173
177
  label,
174
178
  route,
175
- isActive: "route" in e && e.route === route
179
+ isActive: "route" in e && e.route === route,
180
+ position
176
181
  });
177
182
  });
178
183
  }
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["export { init } from './init';\nexport { injectTab } from './inject-tab';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nexport function injectTab( { id, label, component }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n};\n\nexport function createTabNavItem( { id, label, route, isActive }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\twrapper.appendChild( btn );\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":"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","names":["useListenTo","import_editor_v1_adapters","import_utils","listenTo"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["export { init } from './init';\nexport { injectTab } from './inject-tab';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t\tposition,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":"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","names":["useListenTo","import_editor_v1_adapters","import_utils","listenTo"]}
package/dist/index.mjs CHANGED
@@ -101,7 +101,7 @@ function getNavigationWrapperElement() {
101
101
  }
102
102
 
103
103
  // src/utils/create-tab-nav-item.ts
104
- function createTabNavItem({ id, label, route, isActive }) {
104
+ function createTabNavItem({ id, label, route, isActive, position }) {
105
105
  const wrapper = getNavigationWrapperElement();
106
106
  const btn = document.createElement("button");
107
107
  btn.className = ["elementor-component-tab", "elementor-panel-navigation-tab", isActive ? "elementor-active" : ""].filter(Boolean).join(" ");
@@ -110,7 +110,11 @@ function createTabNavItem({ id, label, route, isActive }) {
110
110
  btn.addEventListener("click", () => {
111
111
  getWindow().$e.route(route);
112
112
  });
113
- wrapper.appendChild(btn);
113
+ if (position !== void 0 && wrapper.children[position]) {
114
+ wrapper.insertBefore(btn, wrapper.children[position]);
115
+ } else {
116
+ wrapper.appendChild(btn);
117
+ }
114
118
  }
115
119
 
116
120
  // src/utils/get-legacy-elements-panel-component.ts
@@ -128,7 +132,7 @@ function getLegacyElementsPanelComponent() {
128
132
  }
129
133
 
130
134
  // src/inject-tab.ts
131
- function injectTab({ id, label, component }) {
135
+ function injectTab({ id, label, component, position }) {
132
136
  registerTab({ id, label, component });
133
137
  listenTo(v1ReadyEvent2(), () => {
134
138
  getWindow().elementor.hooks.addFilter("panel/elements/regionViews", (regions, { elements }) => {
@@ -145,7 +149,8 @@ function injectTab({ id, label, component }) {
145
149
  id,
146
150
  label,
147
151
  route,
148
- isActive: "route" in e && e.route === route
152
+ isActive: "route" in e && e.route === route,
153
+ position
149
154
  });
150
155
  });
151
156
  }
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nexport function injectTab( { id, label, component }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n};\n\nexport function createTabNavItem( { id, label, route, isActive }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\twrapper.appendChild( btn );\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;;;ACA9B,YAAY,WAAW;AACvB,SAAS,cAAc;;;ACDvB;AAAA,EACC,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,OACM;;;ACLA,IAAM,uCAAuC;AAC7C,IAAM,qCAAqC,GAAI,oCAAqC;;;ACO3F,IAAM,OAAmC,CAAC;AAEnC,SAAS,YAAa,KAAW;AACvC,OAAM,IAAI,EAAG,IAAI;AAClB;AAEO,SAAS,OAAQ,IAAyB;AAChD,SAAO,KAAM,EAAG,KAAK;AACtB;;;ACkCO,SAAS,YAAY;AAC3B,SAAO;AACR;;;AHzCO,SAAS,eAAe;AAC9B,SAAO;AAAA,IACN;AAAA,MACC,aAAa;AAAA,MACb,eAAgB,kCAAmC;AAAA,MACnD,gBAAiB,kCAAmC;AAAA,IACrD;AAAA,IACA,MAAM;AACL,YAAM,aAAa,UAAU,EAAE,GAAG,OAAO,WAAW,GAAG;AAEvD,UAAK,CAAE,cAAc,CAAE,WAAW,WAAY,kCAAmC,GAAI;AACpF,eAAO;AAAA,MACR;AAEA,YAAM,MAAM,WAAW,QAAS,oCAAoC,EAAG;AAEvE,aAAO,OAAQ,GAAI,KAAK;AAAA,IACzB;AAAA,EACD;AACD;;;ADzBA,IAAM,mBAAmB;AAElB,SAAS,mBAAmB;AAClC,QAAM,MAAM,aAAa;AAEzB,QAAM,eAAe,KAAK;AAC1B,QAAM,YAAY,SAAS,eAAgB,gBAAiB;AAE5D,SAAO,gBAAgB,YACtB,oCAAC,UAAO,aACP,oCAAC,kBAAa,CACf,IACG;AACL;;;ADdO,SAAS,OAAO;AACtB,gBAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;;;AMRA;AAAA,EACC,qBAAqB;AAAA,EACrB,kBAAAA;AAAA,EACA,gBAAAC;AAAA,EACA;AAAA,OACM;;;ACJA,SAAS,mBAAmB;AAClC,SAAO,UAAU,EAAE,WAAW,cAAc,OAAQ;AAAA,IACnD,UAAU;AAAA,IAEV,aAAa;AACZ,gBAAU,EAAE,UAAU,aAAa,EAAE,mBAAmB,EAAE,OAAO,MAAM;AAAA,IACxE;AAAA,EACD,CAAE;AACH;;;ACVA,SAAS,mBAAmB;AAE5B,IAAM,wBAAwB;AAE9B,IAAM,2CAA2C,YAAa;AAAA,EAC7D,MAAM;AAAA,EACN,SAAS;AACV,CAAE;AAEK,SAAS,8BAA8B;AAC7C,QAAM,UAAU,SAAS,eAAgB,qBAAsB;AAE/D,MAAK,CAAE,SAAU;AAChB,UAAM,IAAI,yCAAyC;AAAA,EACpD;AAEA,SAAO;AACR;;;ACPO,SAAS,iBAAkB,EAAE,IAAI,OAAO,OAAO,SAAS,GAAgB;AAC9E,QAAM,UAAU,4BAA4B;AAE5C,QAAM,MAAM,SAAS,cAAe,QAAS;AAE7C,MAAI,YAAY,CAAE,2BAA2B,kCAAkC,WAAW,qBAAqB,EAAG,EAChH,OAAQ,OAAQ,EAChB,KAAM,GAAI;AAEZ,MAAI,aAAc,YAAY,EAAG;AAEjC,MAAI,cAAc;AAElB,MAAI,iBAAkB,SAAS,MAAM;AACpC,cAAU,EAAE,GAAG,MAAO,KAAM;AAAA,EAC7B,CAAE;AAEF,UAAQ,YAAa,GAAI;AAC1B;;;AC5BA,SAAS,eAAAC,oBAAmB;AAK5B,IAAM,yBAAyBC,aAAwC;AAAA,EACtE,MAAM;AAAA,EACN,SAAS;AACV,CAAE;AAEK,SAAS,kCAAkC;AACjD,QAAM,aAAa,UAAU,EAAE,GAAG,WAAW,IAAK,oCAAqC;AAEvF,MAAK,CAAE,YAAa;AACnB,UAAM,IAAI,uBAAwB,EAAE,SAAS,EAAE,aAAa,qCAAqC,EAAE,CAAE;AAAA,EACtG;AAEA,SAAO;AACR;;;AJGO,SAAS,UAAW,EAAE,IAAI,OAAO,UAAU,GAAY;AAC7D,cAAa,EAAE,IAAI,OAAO,UAAU,CAAE;AAEtC,WAAUC,cAAa,GAAG,MAAM;AAC/B,cAAU,EAAE,UAAU,MAAM,UAAW,8BAA8B,CAAE,SAAS,EAAE,SAAS,MAAO;AAEjG,cAAS,EAAG,IAAI,EAAE,QAAQ,UAAU,MAAM,iBAAiB,EAAE;AAE7D,aAAO;AAAA,IACR,CAAE;AAAA,EACH,CAAE;AAEF,WAAU,YAAa,sBAAuB,GAAG,MAAM;AAEtD,oCAAgC,EAAE,OAAQ,IAAI,EAAE,OAAO,MAAM,CAAE;AAAA,EAChE,CAAE;AAEF,WAAUC,gBAAgB,kCAAmC,GAAG,CAAE,MAAO;AACxE,UAAM,QAAQ,GAAI,kCAAmC,GAAI,EAAG;AAE5D,qBAAkB;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,WAAW,KAAK,EAAE,UAAU;AAAA,IACvC,CAAE;AAAA,EACH,CAAE;AACH;","names":["routeOpenEvent","v1ReadyEvent","createError","createError","v1ReadyEvent","routeOpenEvent"]}
1
+ {"version":3,"sources":["../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t\tposition,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":"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","names":["routeOpenEvent","v1ReadyEvent","createError","createError","v1ReadyEvent","routeOpenEvent"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-elements-panel",
3
- "version": "3.35.0-423",
3
+ "version": "3.35.0-425",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@elementor/ui": "1.36.17",
43
- "@elementor/editor": "3.35.0-423",
44
- "@elementor/editor-v1-adapters": "3.35.0-423",
45
- "@elementor/utils": "3.35.0-423"
43
+ "@elementor/editor": "3.35.0-425",
44
+ "@elementor/editor-v1-adapters": "3.35.0-425",
45
+ "@elementor/utils": "3.35.0-425"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": "^18.3.1",
package/src/inject-tab.ts CHANGED
@@ -17,9 +17,10 @@ type Config = {
17
17
  id: string;
18
18
  label: string;
19
19
  component: ComponentType;
20
+ position?: number;
20
21
  };
21
22
 
22
- export function injectTab( { id, label, component }: Config ) {
23
+ export function injectTab( { id, label, component, position }: Config ) {
23
24
  registerTab( { id, label, component } );
24
25
 
25
26
  listenTo( v1ReadyEvent(), () => {
@@ -44,6 +45,7 @@ export function injectTab( { id, label, component }: Config ) {
44
45
  label,
45
46
  route,
46
47
  isActive: 'route' in e && e.route === route,
48
+ position,
47
49
  } );
48
50
  } );
49
51
  }
package/src/utils/create-tab-nav-item.ts CHANGED
@@ -6,9 +6,10 @@ type Args = {
6
6
  label: string;
7
7
  route: string;
8
8
  isActive: boolean;
9
+ position?: number;
9
10
  };
10
11
 
11
- export function createTabNavItem( { id, label, route, isActive }: Args ): void {
12
+ export function createTabNavItem( { id, label, route, isActive, position }: Args ): void {
12
13
  const wrapper = getNavigationWrapperElement();
13
14
 
14
15
  const btn = document.createElement( 'button' );
@@ -25,5 +26,9 @@ export function createTabNavItem( { id, label, route, isActive }: Args ): void {
25
26
  getWindow().$e.route( route );
26
27
  } );
27
28
 
28
- wrapper.appendChild( btn );
29
+ if ( position !== undefined && wrapper.children[ position ] ) {
30
+ wrapper.insertBefore( btn, wrapper.children[ position ] );
31
+ } else {
32
+ wrapper.appendChild( btn );
33
+ }
29
34
  }