@omnia/fx 8.0.12-vnext → 8.0.15-vnext

package/internal-do-not-import-from-here/ux/layoutcanvas/editor/LayoutEditorCanvas.d.ts

@@ -1,73 +1,424 @@
-import { LayoutEditorCanvasApi, LayoutEditorCanvasStyles, LayoutItem } from "@omnia/fx/models";
-import { LayoutMediaContext, LayoutFileContext, ThemeStoreV2 } from "@omnia/fx/ux";
-import { BlockCatalogStore, LayoutCanvasStore, ThemingRenditionManager } from "../";
-import { ThemeStore, VueComponentBase } from "../..";
-import { SubscriptionHandler } from "../../..";
-import { IWebComponentInstance } from "../../../runtime/core/InternalWebComponentBootstrapper";
-import { MediaPickerService } from "../../../services";
-import { BlockTitleSettingsStore, DirectionRuleStore } from "../../../stores";
-import { AnchorLink } from "../../AnchorLink";
-import { ILayoutEditorCanvas } from "./ILayoutEditorCanvas";
+import { LayoutEditorCanvasApi } from "@omnia/fx-models";
 import "./LayoutEditorCanvas.css";
-export declare class LayoutEditorCanvas extends VueComponentBase implements IWebComponentInstance, ILayoutEditorCanvas {
-    styles?: Partial<typeof LayoutEditorCanvasStyles>;
-    getApi: (inst: LayoutEditorCanvasApi) => void;
-    provider: string;
-    layoutStore: LayoutCanvasStore;
-    mediaContext: LayoutMediaContext;
-    fileContext: LayoutFileContext;
-    blockTitleSettingsStore: BlockTitleSettingsStore;
-    themeStoreV2: ThemeStoreV2;
-    layoutItemStore: BlockCatalogStore;
-    SubscriptionHandler: SubscriptionHandler;
-    mediaPickerService: MediaPickerService;
-    themeStore: ThemeStore;
-    directionRuleStore: DirectionRuleStore;
-    themingRenditionManager: ThemingRenditionManager;
-    anchorLink: AnchorLink;
-    private omniaUxLoc;
-    onStyleChange(newValue: any, oldValue: any): void;
-    private tabState;
-    private LayoutEditorCanvasClasses;
-    private model;
-    private isDragging;
-    private originalScreenWidth;
-    private originalWindowWidth;
-    private colorSchemaDrawer;
-    private colorSchemaHeader;
-    beforeCreate(): void;
-    created(): void;
-    destroyed(): void;
-    mounted(): void;
-    beforeDestroy(): void;
-    private handleWindowResize;
-    private enalbeRightResizer;
-    private DragStart;
-    private DragStop;
-    private ResizePanelSettings;
-    private setSettingsPanelWrapperWidthWhenIconClicked;
-    private get backgroundImage();
-    setupLayout(): void;
-    private onToggleSettingsDrawer;
-    createOrphanedBlocks(orphanedBlocks: Array<LayoutItem>): JSX.Element[];
-    /**
-    * Function to render the sections fast
-    * @param h is the hyperscript reference
-    */
-    createSectionMarkup(): Array<JSX.Element>;
-    /**
-     * Renders the layout item selector
-     * @param h
-     */
-    renderLayoutItemSelector(): JSX.Element;
-    private renderDevicePreviewer;
-    private renderStructure;
-    private renderLayoutTemplates;
-    private renderLayoutClipboard;
-    private renderDrawerOptions;
-    private renderDrawer;
-    private renderDeveloperTools;
-    private isSettingsLocked;
-    private renderSettings;
-    render(): JSX.Element;
-}
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            "get-api": {
+                type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+                required: boolean;
+                default?: (inst: LayoutEditorCanvasApi) => void;
+            };
+            getApi: {
+                type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+                required: boolean;
+                default?: (inst: LayoutEditorCanvasApi) => void;
+            };
+            styles: {
+                type: import("vue").PropType<Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>>;
+                required: boolean;
+                default?: Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>;
+            } & {
+                type: import("vue").PropType<Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>>;
+                required: boolean;
+                default?: Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>;
+            };
+            provider: {
+                type: import("vue").PropType<string>;
+                required: boolean;
+                default?: string;
+            } & {
+                type: import("vue").PropType<string>;
+                required: boolean;
+                default?: string;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            "get-api": {
+                type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+                required: boolean;
+                default?: (inst: LayoutEditorCanvasApi) => void;
+            };
+            getApi: {
+                type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+                required: boolean;
+                default?: (inst: LayoutEditorCanvasApi) => void;
+            };
+            styles: {
+                type: import("vue").PropType<Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>>;
+                required: boolean;
+                default?: Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>;
+            } & {
+                type: import("vue").PropType<Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>>;
+                required: boolean;
+                default?: Partial<{
+                    container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                    rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                }>;
+            };
+            provider: {
+                type: import("vue").PropType<string>;
+                required: boolean;
+                default?: string;
+            } & {
+                type: import("vue").PropType<string>;
+                required: boolean;
+                default?: string;
+            };
+        }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        "get-api": {
+            type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+            required: boolean;
+            default?: (inst: LayoutEditorCanvasApi) => void;
+        };
+        getApi: {
+            type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+            required: boolean;
+            default?: (inst: LayoutEditorCanvasApi) => void;
+        };
+        styles: {
+            type: import("vue").PropType<Partial<{
+                container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            }>>;
+            required: boolean;
+            default?: Partial<{
+                container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            }>;
+        } & {
+            type: import("vue").PropType<Partial<{
+                container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            }>>;
+            required: boolean;
+            default?: Partial<{
+                container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+                rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            }>;
+        };
+        provider: {
+            type: import("vue").PropType<string>;
+            required: boolean;
+            default?: string;
+        } & {
+            type: import("vue").PropType<string>;
+            required: boolean;
+            default?: string;
+        };
+    }>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    "get-api": {
+        type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+        required: boolean;
+        default?: (inst: LayoutEditorCanvasApi) => void;
+    };
+    getApi: {
+        type: import("vue").PropType<(inst: LayoutEditorCanvasApi) => void>;
+        required: boolean;
+        default?: (inst: LayoutEditorCanvasApi) => void;
+    };
+    styles: {
+        type: import("vue").PropType<Partial<{
+            container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+        }>>;
+        required: boolean;
+        default?: Partial<{
+            container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+        }>;
+    } & {
+        type: import("vue").PropType<Partial<{
+            container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+        }>>;
+        required: boolean;
+        default?: Partial<{
+            container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+        }>;
+    };
+    provider: {
+        type: import("vue").PropType<string>;
+        required: boolean;
+        default?: string;
+    } & {
+        type: import("vue").PropType<string>;
+        required: boolean;
+        default?: string;
+    };
+}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    propsDefinition: Readonly<{} & {
+        styles?: Partial<{
+            container: (isEditMode: boolean) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            layoutItemSelectorPosition: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            buttomSpacer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockContainer: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockCard: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            orphanedBlockText: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsPanelWrapper: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerPanel: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            developerDialog: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbar: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            drawerToolbarWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            settingsWrapper: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            closeButton: import("@omnia/fx-models").NestedCSSPropertiesExtends;
+            rightResizer: (backgroundColor: string) => import("@omnia/fx-models").NestedCSSPropertiesExtends;
+        }>;
+        provider?: string;
+        getApi?: (inst: LayoutEditorCanvasApi) => void;
+        "get-api"?: (inst: LayoutEditorCanvasApi) => void;
+    }>;
+};
+export default _default;

package/internal-do-not-import-from-here/ux/layoutcanvas/editor/developertools/DeveloperTools copy.d.ts

@@ -0,0 +1 @@
+export {};

package/internal-do-not-import-from-here/ux/layoutcanvas/editor/developertools/DeveloperTools.d.ts

@@ -1,24 +1,94 @@
-import { IWebComponentInstance } from "@omnia/fx";
-import { VueComponentBase } from "@omnia/fx/ux";
-import { OmniaTheming } from "@omnia/fx/ux";
 import { LayoutCanvasStore } from "../../";
-import { IDeveloperTools } from "./IDeveloperTools";
-export default class DeveloperToolsComponent extends VueComponentBase implements IWebComponentInstance, IDeveloperTools {
-    private tabs;
-    private idForTextAreaToCopyToClipboard;
-    visible: boolean;
-    layoutCanvasStore: LayoutCanvasStore;
-    omniaTheming: OmniaTheming;
-    private model;
-    mounted(): void;
-    onUploadCompleted(): void;
-    onRestartImport(): void;
-    onUpdateImportedDefinition(): void;
-    onCopyToClipBoard(): void;
-    onUpdatePageDefinition(): void;
-    onGetPageDefinition(): void;
-    private updateDefinition;
-    renderCurrentDefinitionTab(): JSX.Element;
-    renderImportDefinitionTab(): JSX.Element;
-    render(): JSX.Element;
-}
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            "layout-canvas-store": {
+                type: import("vue").PropType<LayoutCanvasStore>;
+                required: boolean;
+                default?: LayoutCanvasStore;
+            };
+            layoutCanvasStore: {
+                type: import("vue").PropType<LayoutCanvasStore>;
+                required: boolean;
+                default?: LayoutCanvasStore;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            "layout-canvas-store": {
+                type: import("vue").PropType<LayoutCanvasStore>;
+                required: boolean;
+                default?: LayoutCanvasStore;
+            };
+            layoutCanvasStore: {
+                type: import("vue").PropType<LayoutCanvasStore>;
+                required: boolean;
+                default?: LayoutCanvasStore;
+            };
+        }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        "layout-canvas-store": {
+            type: import("vue").PropType<LayoutCanvasStore>;
+            required: boolean;
+            default?: LayoutCanvasStore;
+        };
+        layoutCanvasStore: {
+            type: import("vue").PropType<LayoutCanvasStore>;
+            required: boolean;
+            default?: LayoutCanvasStore;
+        };
+    }>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    "layout-canvas-store": {
+        type: import("vue").PropType<LayoutCanvasStore>;
+        required: boolean;
+        default?: LayoutCanvasStore;
+    };
+    layoutCanvasStore: {
+        type: import("vue").PropType<LayoutCanvasStore>;
+        required: boolean;
+        default?: LayoutCanvasStore;
+    };
+}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    propsDefinition: Readonly<{} & {
+        layoutCanvasStore?: LayoutCanvasStore;
+        "layout-canvas-store"?: LayoutCanvasStore;
+    }>;
+};
+export default _default;

package/internal-do-not-import-from-here/ux/layoutcanvas/editor/developertools/DeveloperToolsStyles.css.d.ts

@@ -7,7 +7,6 @@ export declare const IFrameDimension: {
 };
 export declare const DeveloperToolsStyles: {
     container: string;
-    buttonContainer: string;
     buttonStepperContent: string;
     textarea: string;
     omniaJsonViewer: string;