@nu-art/thunderstorm-frontend 0.400.5

package/_ats/ATS_SyncEnv/ATS_SyncEnv.d.ts

@@ -0,0 +1,51 @@
+import './ATS_SyncEnv.scss';
+import { TypedMap } from '@nu-art/ts-common';
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { Response_FetchBackupMetadata } from '@nu-art/thunderstorm-shared';
+import { ComponentSync } from '../../core/ComponentSync.js';
+declare const Environments: readonly ["prod", "staging", "dev", "local"];
+type Env = typeof Environments[number];
+declare const ChunkSizes: readonly [2000, 1000, 500, 200, 100, 50];
+type ChunkSize = typeof ChunkSizes[number];
+type ModuleMetadata = {
+    local?: boolean;
+    remote?: boolean;
+    backup?: boolean;
+};
+type State = {
+    selectedEnv?: Env;
+    selectedChunkSize?: ChunkSize;
+    backupId?: string;
+    selectedModules: Set<string>;
+    moduleList: TypedMap<ModuleMetadata>;
+    searchFilter: string;
+    restoreTime?: string;
+    backingUpInProgress?: boolean;
+    fetchMetadataInProgress?: boolean;
+    metadata?: Response_FetchBackupMetadata;
+    cleanSync: boolean;
+};
+export declare class ATS_SyncEnvironment extends ComponentSync<{}, State> {
+    static screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    private fetchMetadata;
+    private syncEnv;
+    private syncFirebase;
+    private createNewBackup;
+    private canSync;
+    private getCollectionModuleList;
+    private allModulesSelected;
+    private setBackupId;
+    private setEnv;
+    private setChunkSize;
+    private toggleSelectAll;
+    private toggleSelectedModule;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderHeader;
+    private renderMenu;
+    private renderOperations;
+    private renderStatus;
+    private renderBackupModules;
+    private renderModule;
+}
+export {};

package/_ats/ATS_SyncEnv/ATS_SyncEnv.js

@@ -0,0 +1,215 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import './ATS_SyncEnv.scss';
+import { _keys, filterKeys, RuntimeModules, tsValidateResult, tsValidateUniqueId } from '@nu-art/ts-common';
+import { ATS_Fullstack, TS_AppTools } from '../../components/TS_AppTools/index.js';
+import { genericNotificationAction } from '../../components/TS_Notifications/index.js';
+import { ModuleFE_SyncEnvV2 } from '../../modules/sync-env/ModuleFE_SyncEnvV2.js';
+import { LL_H_C, LL_V_L } from '../../components/Layouts/index.js';
+import { TS_Checkbox } from '../../components/TS_Checkbox/index.js';
+import { TS_Input } from '../../components/TS_Input/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Thunder } from '../../core/Thunder.js';
+import { TS_PropRenderer } from '../../components/TS_PropRenderer/index.js';
+import { SimpleListAdapter } from '../../components/adapter/Adapter.js';
+import { TS_DropDown } from '../../components/TS_Dropdown/index.js';
+import { _className } from '../../utils/tools.js';
+import { StorageKey } from '../../modules/ModuleFE_LocalStorage.js';
+import { ModuleFE_SyncManager } from '../../modules/sync-manager/ModuleFE_SyncManager.js';
+import { Button } from '../../components/Button/Button.js';
+const Environments = ['prod', 'staging', 'dev', 'local'];
+const ChunkSizes = [2000, 1000, 500, 200, 100, 50];
+const StorageKey_BackupId = new StorageKey('sync-env--backup-id');
+const StorageKey_Env = new StorageKey('sync-env--env');
+const StorageKey_ChunkSize = new StorageKey('sync-env--chunk-size');
+export class ATS_SyncEnvironment extends ComponentSync {
+    static screen = {
+        name: 'Sync Environment',
+        key: 'sync-environment',
+        renderer: this,
+        group: ATS_Fullstack
+    };
+    // ######################## Life Cycle ########################
+    deriveStateFromProps(nextProps, state) {
+        //Set Initials
+        state.selectedModules ??= new Set();
+        state.selectedChunkSize ??= StorageKey_ChunkSize.get(100);
+        state.selectedEnv ??= StorageKey_Env.get('prod');
+        state.backupId ??= StorageKey_BackupId.get();
+        //Add local module data
+        state.moduleList = this.getCollectionModuleList().reduce((toRet, name) => {
+            toRet[name] = { local: true };
+            return toRet;
+        }, {});
+        if (state.metadata) {
+            state.metadata.collectionsData.forEach(moduleData => {
+                state.moduleList[moduleData.dbKey] = { ...state.moduleList[moduleData.dbKey], backup: true };
+            });
+            state.metadata.remoteCollectionNames.forEach(moduleName => {
+                state.moduleList[moduleName] = { ...state.moduleList[moduleName], remote: true };
+            });
+        }
+        return state;
+    }
+    // ######################## Logic ########################
+    fetchMetadata = async () => {
+        if (!this.state.backupId?.length)
+            return;
+        if (!this.state.selectedEnv)
+            return;
+        this.setState({ fetchMetadataInProgress: true });
+        try {
+            await genericNotificationAction(async () => {
+                const metadata = await ModuleFE_SyncEnvV2.vv1.fetchBackupMetadata({
+                    env: this.state.selectedEnv,
+                    backupId: this.state.backupId,
+                }).executeSync();
+                this.reDeriveState({ metadata: metadata });
+            }, 'Fetching backup metadata');
+        }
+        catch (err) {
+            this.logError(err);
+        }
+        this.setState({ fetchMetadataInProgress: false });
+    };
+    syncEnv = async () => {
+        if (!this.canSync())
+            return;
+        const start = performance.now();
+        ModuleFE_SyncManager.stopListening();
+        await genericNotificationAction(async () => {
+            try {
+                await ModuleFE_SyncEnvV2.vv1.syncFromEnvBackup(filterKeys({
+                    env: this.state.selectedEnv,
+                    backupId: this.state.backupId,
+                    chunkSize: this.state.selectedChunkSize,
+                    selectedModules: Array.from(this.state.selectedModules),
+                    cleanSync: this.state.cleanSync,
+                }, 'selectedModules')).executeSync();
+            }
+            catch (err) {
+                this.logError(err);
+            }
+            finally {
+                ModuleFE_SyncManager.startListening();
+            }
+        }, 'Syncing Env');
+        const end = performance.now();
+        this.setState({ restoreTime: `${((end - start) / 1000).toFixed(3)} seconds` });
+    };
+    syncFirebase = async () => {
+        if (!this.canSync())
+            return;
+        await genericNotificationAction(async () => {
+            await ModuleFE_SyncEnvV2.vv1.syncFirebaseFromBackup({
+                env: this.state.selectedEnv,
+                backupId: this.state.backupId
+            }).executeSync();
+        }, 'Syncing Firebase');
+    };
+    createNewBackup = async () => {
+        return genericNotificationAction(async () => {
+            this.setState({ backingUpInProgress: true }, async () => {
+                const toRet = await ModuleFE_SyncEnvV2.vv1.createBackup({}).executeSync();
+                this.setState({ backingUpInProgress: false });
+                return toRet;
+            });
+        }, 'Create Backup');
+    };
+    canSync = () => {
+        return !!this.state.selectedEnv && !!this.state.backupId;
+    };
+    getCollectionModuleList() {
+        //the moduleKey in ModuleBE_BaseDB's config is taken from collection's name.
+        return (RuntimeModules().filter((module) => !!module.dbDef?.dbKey)).map(_module => _module.dbDef.dbKey).sort();
+    }
+    allModulesSelected = () => {
+        return this.state.selectedModules.size === _keys(this.state.moduleList).length;
+    };
+    // ######################## Set Data
+    setBackupId = (id) => {
+        this.setState({ backupId: id }, () => {
+            if (!id)
+                return StorageKey_BackupId.delete();
+            StorageKey_BackupId.set(id);
+            if (tsValidateResult(this.state.backupId, tsValidateUniqueId)) //Don't fetch metadata if id doesn't fit
+                return;
+            return this.fetchMetadata();
+        });
+    };
+    setEnv = (env) => {
+        this.setState({ selectedEnv: env }, () => {
+            if (!env)
+                return StorageKey_Env.delete();
+            StorageKey_Env.set(env);
+            this.fetchMetadata();
+        });
+    };
+    setChunkSize = (size) => {
+        this.setState({ selectedChunkSize: size });
+        if (size)
+            return this.fetchMetadata();
+    };
+    toggleSelectAll = () => {
+        const selectedLength = this.state.selectedModules.size;
+        const allModules = _keys(this.state.moduleList);
+        //All are selected, clear all modules
+        if (selectedLength === allModules.length)
+            return this.setState({ selectedModules: new Set() });
+        //Some or none of the modules are selected, select all
+        this.setState({ selectedModules: new Set(allModules) });
+    };
+    toggleSelectedModule = (moduleName) => {
+        if (this.state.selectedModules.has(moduleName))
+            this.state.selectedModules.delete(moduleName);
+        else
+            this.state.selectedModules.add(moduleName);
+        this.forceUpdate();
+    };
+    // ######################## Render ########################
+    render() {
+        return _jsxs(LL_V_L, { className: 'sync-env-page', children: [this.renderHeader(), this.renderMenu(), this.renderBackupModules()] });
+    }
+    renderHeader = () => {
+        return TS_AppTools.renderPageHeader('Sync Environment V2');
+    };
+    renderMenu = () => {
+        const envAdapter = SimpleListAdapter([...Environments], item => _jsx("div", { className: 'node-data', children: item.item }));
+        const chunkSizesAdapter = SimpleListAdapter([...ChunkSizes], item => _jsx("div", { className: 'node-data', children: item.item }));
+        return _jsxs(LL_V_L, { className: 'sync-env-page__menu', children: [_jsxs(LL_H_C, { className: 'sync-env-page__menu__row', children: [_jsx(TS_PropRenderer.Vertical, { label: 'Environment', children: _jsx(TS_DropDown, { placeholder: 'Select Environment', className: 'fancy', adapter: envAdapter, onSelected: this.setEnv, selected: this.state.selectedEnv, canUnselect: true }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Chunk Size', children: _jsx(TS_DropDown, { placeholder: 'Chunk Size', className: 'fancy', adapter: chunkSizesAdapter, onSelected: this.setChunkSize, selected: this.state.selectedChunkSize, canUnselect: true }) }), this.renderOperations()] }), _jsxs(LL_H_C, { className: 'sync-env-page__menu__row', children: [_jsx(TS_PropRenderer.Vertical, { label: 'Backup ID', children: _jsx(TS_Input, { className: _className(!tsValidateResult(this.state.backupId, tsValidateUniqueId) ? 'valid-id' : 'invalid-id'), type: 'text', value: this.state.backupId, onBlur: this.setBackupId }) }), _jsx(TS_PropRenderer.Vertical, { label: 'Collection Filter', children: _jsx(TS_Input, { onChange: val => this.setState({ searchFilter: val }), type: 'text', placeholder: 'search collection' }) }), this.renderStatus(), this.state.restoreTime && _jsx("div", { children: this.state.restoreTime })] })] });
+    };
+    renderOperations = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Operations', children: _jsxs(LL_H_C, { className: 'sync-env-page__operations', children: [_jsx(Button, { onClick: this.createNewBackup, children: "Trigger Backup" }), _jsx(Button, { onClick: this.syncEnv, disabled: !this.canSync(), children: "Sync Environment" }), Thunder.getInstance().getConfig().name?.toLowerCase() === this.state.selectedEnv && _jsx(Button, { onClick: this.syncFirebase, disabled: !this.canSync(), className: 'deter-users-from-this-button', children: "Restore Firebase To Older Backup" }), _jsx(TS_Checkbox, { checked: this.state.cleanSync, onCheck: (value) => {
+                            this.setState({ cleanSync: value });
+                        }, children: "Clean Sync" })] }) });
+    };
+    renderStatus = () => {
+        const style = {
+            '--color': '#000',
+            '--color-faded': '#0008',
+        };
+        if (this.state.fetchMetadataInProgress)
+            return _jsxs(LL_H_C, { className: 'sync-env-page__status', children: ["Fetching Metadata", _jsxs("span", { style: style, className: 'three-dot-loader', children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })] });
+        if (this.state.backingUpInProgress)
+            return _jsxs(LL_H_C, { className: 'sync-env-page__status', children: ["Backup In Progress", _jsxs("span", { style: style, className: 'three-dot-loader', children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] })] });
+    };
+    renderBackupModules = () => {
+        if (!this.canSync())
+            return;
+        return _jsx(_Fragment, { children: _jsxs(LL_V_L, { className: 'sync-env_modules-list-v2', children: [_jsx(LL_H_C, { className: 'utils', children: _jsx(TS_Checkbox, { checked: this.allModulesSelected(), onCheck: this.toggleSelectAll, children: "Select All" }) }), _keys(this.state.moduleList).map(this.renderModule)] }) });
+    };
+    renderModule = (moduleName) => {
+        const collectionMetadata = this.state.metadata?.collectionsData.find(collection => collection.dbKey === moduleName);
+        if ((this.state.searchFilter && this.state.searchFilter.length) && !moduleName.includes(this.state.searchFilter))
+            return;
+        const relevantLocalModules = RuntimeModules().filter((module) => {
+            return (!!module.getCollectionName && module.getCollectionName() == collectionMetadata?.dbKey);
+        });
+        const localCount = relevantLocalModules.length === 1 && relevantLocalModules[0] ? relevantLocalModules[0].cache._array.length : 0;
+        const diffCount = collectionMetadata?.numOfDocs !== undefined ? collectionMetadata.numOfDocs - localCount : undefined;
+        const diffShow = diffCount !== 0 ? diffCount : undefined;
+        return _jsx(TS_PropRenderer.Horizontal, { label: _jsxs(LL_H_C, { className: 'header', children: [_jsx(TS_Checkbox, { checked: this.state.selectedModules.has(moduleName), onCheck: () => this.toggleSelectedModule(moduleName) }), _jsx("div", { children: moduleName })] }), children: _jsxs(LL_H_C, { className: 'collection-row', children: [_jsxs(LL_H_C, { className: 'backup-info', children: [diffShow !== undefined &&
+                                _jsx("div", { className: _className(diffShow > 0 ? 'higher' : 'lower'), children: `${diffShow > 0 ? '+' : ''}${diffShow}` }), _jsx("div", { children: collectionMetadata?.numOfDocs !== undefined ? collectionMetadata?.numOfDocs : '--' }), "|", _jsx("div", { className: 'left-row', children: collectionMetadata?.version || '--' })] }), _jsx("div", { style: { fontFamily: 'monospace' }, children: `${this.state.moduleList[moduleName].local ? 'L' : '-'}${this.state.moduleList[moduleName].remote
+                            ? 'R'
+                            : '-'}${this.state.moduleList[moduleName].backup ? 'B' : '-'}` })] }) }, moduleName);
+    };
+}

package/_ats/ATS_SyncEnv/ATS_SyncEnv.scss

@@ -0,0 +1,172 @@
+@use '@nu-art/ts-styles' as S;
+
+.sync-env-page {
+  width: 100%;
+  height: 100%;
+
+  .ts-input {
+    width: 300px;
+    background: white;
+    border: 2px solid black;
+    border-radius: 10px;
+    font: {
+      size: 14px;
+    }
+
+    &.invalid-id {
+      background-color: rgba(255, 52, 52, 0.5);
+      background-blend-mode: multiply;
+    }
+
+    &.valid-id {
+      background-color: rgba(142, 255, 98, 0.5);
+      background-blend-mode: multiply;
+    }
+  }
+
+  .ts-busy-button {
+    padding: 8px 16px;
+    margin: 0;
+    @include S.mouse-interactive-background(S.dark-blue(2), S.dark-blue(1));
+
+    &.ts-busy-button__disabled {
+      background: S.dark-blue(2);
+      opacity: 0.5;
+    }
+
+    &.deter-users-from-this-button {
+      background: #FF2222;
+    }
+  }
+
+  .three-dot-loader {
+    display: inline-flex;
+    gap: 5px;
+    translate: 0 -3px;
+
+    & > span {
+      width: 5px;
+      aspect-ratio: 1/1;
+      border-radius: 50%;
+      background: var(--color-faded);
+      animation: ThreeDotLoader 1.5s ease-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.5s;
+      }
+
+      &:last-child {
+        animation-delay: 1s;
+      }
+    }
+  }
+
+  .sync-env-page__menu {
+    padding: 0 16px;
+    align-items: flex-end;
+    gap: 10px;
+
+    .ts-prop-renderer {
+      width: unset;
+
+      .ts-dropdown {
+        width: 145px;
+      }
+
+      .ts-prop-renderer__error {
+        display: none;
+      }
+    }
+
+    .sync-env-page__menu__row {
+      width: 100%;
+      gap: 10px;
+      align-items: flex-end;
+    }
+
+    .sync-env-page__operations {
+      gap: 10px;
+    }
+
+    .sync-env-page__status {
+      align-items: flex-end;
+      gap: 4px;
+      font: {
+        size: 14px;
+        style: italic;
+      }
+    }
+  }
+
+  .sync-env_modules-list-v2 {
+    flex-grow: 1;
+    row-gap: 5px;
+    column-gap: 25px;
+    margin-top: 10px;
+    padding: 0 10px 10px 10px;
+    flex-wrap: wrap;
+    height: 0;
+
+    .utils {
+      width: 500px;
+      justify-content: space-between;
+      align-items: flex-end;
+
+      .ts-checkbox {
+        gap: 5px;
+
+        .ts-checkbox__content {
+          margin-inline-start: 0;
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .ts-prop-renderer {
+      justify-content: space-between;
+      width: 500px;
+
+      .ts-prop-renderer__label {
+        color: #121212;
+        font-weight: normal;
+
+        .header {
+          gap: 5px;
+        }
+      }
+
+      .collection-row {
+        .backup-info {
+          gap: 3px;
+
+          .higher {
+            color: darkgreen;
+          }
+
+          .lower {
+            color: red;
+          }
+
+          div {
+            min-width: 50px;
+            text-align: right;
+
+            &.left-row {
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes ThreeDotLoader {
+  0%, 50%, 100% {
+    background: var(--color-faded);
+  }
+
+  25% {
+    background: var(--color);
+  }
+}

package/_ats/ATS_Toaster/ATS_Toaster.d.ts

@@ -0,0 +1,23 @@
+import { AppToolsScreen } from '../../components/TS_AppTools/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type ATS_Toaster_Props = {};
+type ATS_Toaster_State = {};
+export declare class ATS_Toaster extends ComponentSync<ATS_Toaster_Props, ATS_Toaster_State> {
+    static screen: AppToolsScreen;
+    static defaultProps: {
+        modules: never[];
+        pageTitle: () => string;
+    };
+    protected deriveStateFromProps(nextProps: ATS_Toaster_Props, state?: ATS_Toaster_State): ATS_Toaster_State;
+    constructor(p: ATS_Toaster_Props);
+    showAppToasterSuccessExample: () => void;
+    showToastForVeryLongTime: () => void;
+    showAppToasterErrorExample: () => void;
+    showAppToasterInfoExample: () => void;
+    showAppToasterCustomInfoExample: () => void;
+    showAppToasterCustomErrorExample: () => void;
+    showAppToasterCustomSuccessExample: () => void;
+    showAppToasterLiveDocsExample: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/ATS_Toaster/ATS_Toaster.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ModuleFE_Toaster, ToastBuilder } from '../../component-modules/ModuleFE_Toaster.js';
+import { TS_Toast } from '../../components/TS_Toaster/index.js';
+import { ATS_Frontend } from '../../components/TS_AppTools/index.js';
+import { LL_V_L } from '../../components/Layouts/index.js';
+import { Minute } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+export class ATS_Toaster extends ComponentSync {
+    static screen = { name: `Toaster`, group: ATS_Frontend, renderer: this };
+    static defaultProps = {
+        modules: [],
+        pageTitle: () => this.screen.name
+    };
+    deriveStateFromProps(nextProps, state = {}) {
+        return state;
+    }
+    constructor(p) {
+        super(p);
+        // @ts-ignore
+    }
+    showAppToasterSuccessExample = () => {
+        ModuleFE_Toaster.toastSuccess('Simple success message');
+    };
+    showToastForVeryLongTime = () => {
+        ModuleFE_Toaster.toastSuccess('Simple success message', 6 * Minute);
+    };
+    showAppToasterErrorExample = () => {
+        ModuleFE_Toaster.toastError('Simple error message');
+    };
+    showAppToasterInfoExample = () => {
+        ModuleFE_Toaster.toastInfo('Simple info message');
+    };
+    showAppToasterCustomInfoExample = () => {
+        ModuleFE_Toaster.toastInfo('Custom info message closes in 3 sec', 3000);
+    };
+    showAppToasterCustomErrorExample = () => {
+        ModuleFE_Toaster.toastError('Custom Error message closes in 8 sec', 8000);
+    };
+    showAppToasterCustomSuccessExample = () => {
+        new ToastBuilder().setContent(TS_Toast('is a very nice!', 'success')).show();
+    };
+    showAppToasterLiveDocsExample = () => {
+        new ToastBuilder().setContent(TS_Toast('you spin me right \'round, baby, right \'round', 'success')).show();
+    };
+    render() {
+        return _jsxs(_Fragment, { children: [_jsxs(LL_V_L, { children: [_jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterSuccessExample, children: "Toaster Default Success Example" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterErrorExample, children: "Toaster Default Failure Example" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterInfoExample, children: "Toaster Default Info Example" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterLiveDocsExample, children: "Toaster Default Live Docs Example" })] }), _jsx("hr", {}), _jsxs(LL_V_L, { children: [_jsx("button", { style: { marginRight: 8 }, onClick: this.showToastForVeryLongTime, children: "Toaster for ever" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterCustomSuccessExample, children: "Toaster Custom Success Example" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterCustomErrorExample, children: "Toaster Custom Failure Example" }), _jsx("button", { style: { marginRight: 8 }, onClick: this.showAppToasterCustomInfoExample, children: "Toaster Custom Info Example" })] })] });
+    }
+}

package/_ats/ATS_Toaster/ATS_Toaster.scss

@@ -0,0 +1,2 @@
+.ts-ats.ats-Toaster {
+}

package/_ats/ATS_Toaster/index.d.ts

@@ -0,0 +1 @@
+export * from './ATS_Toaster.js';

package/_ats/ATS_Toaster/index.js

@@ -0,0 +1 @@
+export * from './ATS_Toaster.js';

package/_ats/dialogs/Dialog_ActionProcessorConfirmation/Dialog_ActionProcessorConfirmation.d.ts

@@ -0,0 +1,18 @@
+import { ActionMetaData } from '@nu-art/thunderstorm-shared/action-processor/index';
+import { ComponentSync } from '../../../core/ComponentSync.js';
+import './Dialog_ActionProcessorConfirmation.scss';
+type Props = {
+    action: ActionMetaData;
+    onExecute: () => (void | Promise<void>);
+};
+export declare class Dialog_ActionProcessorConfirmation extends ComponentSync<Props> {
+    static show(action: ActionMetaData, onExecute: () => (void | Promise<void>)): void;
+    protected deriveStateFromProps(nextProps: Props, state?: Partial<any> | undefined): void;
+    private closeDialog;
+    private executeAction;
+    private renderHeader;
+    private renderMain;
+    private renderButtons;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/_ats/dialogs/Dialog_ActionProcessorConfirmation/Dialog_ActionProcessorConfirmation.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { functionThatReturnsTrue } from '@nu-art/ts-common';
+import { ComponentSync } from '../../../core/ComponentSync.js';
+import { TS_Icons } from '@nu-art/ts-styles';
+import './Dialog_ActionProcessorConfirmation.scss';
+import { ModuleFE_Dialog } from '../../../component-modules/ModuleFE_Dialog.js';
+import { LL_H_C, LL_V_L } from '../../../components/Layouts/index.js';
+import { Button } from '../../../components/Button/Button.js';
+export class Dialog_ActionProcessorConfirmation extends ComponentSync {
+    // ######################### Static #########################
+    static show(action, onExecute) {
+        ModuleFE_Dialog.show({
+            content: _jsx(Dialog_ActionProcessorConfirmation, { action: action, onExecute: onExecute }),
+            closeOverlayOnClick: functionThatReturnsTrue
+        });
+    }
+    // ######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+    }
+    // ######################### Logic #########################
+    closeDialog = () => {
+        ModuleFE_Dialog.close(true);
+    };
+    executeAction = () => {
+        this.props.onExecute();
+        this.closeDialog();
+    };
+    // ######################### Render #########################
+    renderHeader = () => {
+        return _jsx(LL_H_C, { className: 'dialog__header', children: _jsx("div", { className: 'dialog__header__title', children: "Refactoring Action Conformation" }) });
+    };
+    renderMain = () => {
+        return _jsxs(LL_H_C, { className: 'dialog__main', children: [_jsx(TS_Icons.information.component, { className: 'dialog__main__warning-icon' }), _jsxs(LL_V_L, { className: 'dialog__main__warning', children: [_jsx("div", { className: 'dialog__main__warning__title', children: "Action Description" }), _jsx("div", { className: 'dialog__main__warning__text', children: this.props.action.description })] })] });
+    };
+    renderButtons = () => {
+        return _jsxs(LL_H_C, { className: 'dialog__buttons', children: [_jsx(Button, { onClick: this.closeDialog, children: "Cancel" }), _jsx(Button, { onClick: this.executeAction, children: "Execute" })] });
+    };
+    render() {
+        return _jsxs(LL_V_L, { className: 'dialog-refactoring-action-conformation', children: [this.renderHeader(), this.renderMain(), this.renderButtons()] });
+    }
+}

package/_ats/dialogs/Dialog_ActionProcessorConfirmation/Dialog_ActionProcessorConfirmation.scss

@@ -0,0 +1,71 @@
+@use '@nu-art/ts-styles' as styles;
+
+.dialog-refactoring-action-conformation {
+  width: 640px;
+  height: 270px;
+  background: styles.gray(6);
+  border-radius: 8px;
+  overflow: hidden;
+  -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.5);
+  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.5);
+  border: 4px solid styles.gray(3);
+
+  .dialog__header {
+    width: 100%;
+    height: 50px;
+    flex-shrink: 0;
+    background: styles.gray(3);
+
+    padding: 0 8px;
+
+    .dialog__header__title {
+      color: white;
+      font: {
+        size: 20px;
+        weight: bold;
+      }
+    }
+  }
+
+  .dialog__main {
+    flex-grow: 1;
+    width: 100%;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+    padding: 32px;
+
+    .dialog__main__warning-icon {
+      width: 60px;
+      height: 60px;
+      flex-shrink: 0;
+    }
+
+    .dialog__main__warning {
+      flex-grow: 1;
+      gap: 4px;
+
+      .dialog__main__warning__title {
+        text-decoration: underline;
+      }
+
+      .dialog__main__warning__text {
+        width: 100%;
+        white-space: pre-wrap;
+      }
+    }
+  }
+
+  .dialog__buttons {
+    height: 50px;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    padding: 0 16px;
+
+    .ts-button {
+      margin: 0;
+    }
+  }
+}

package/_ats/dialogs/index.d.ts

@@ -0,0 +1 @@
+export * from './Dialog_ActionProcessorConfirmation/Dialog_ActionProcessorConfirmation.js';

package/_ats/dialogs/index.js

@@ -0,0 +1 @@
+export * from './Dialog_ActionProcessorConfirmation/Dialog_ActionProcessorConfirmation.js';

package/_ats/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ATS_ActionProcessor/ATS_ActionProcessor.js';
+export * from './ATS_CollectionUpgrades/ATS_CollectionUpgrades.js';
+export * from './ATS_SyncEnv/ATS_SyncEnv.js';
+export * from './ATS_ProtoComponent/ATS_ProtoComponent.js';
+export * from './ATS_IDBCacheComparison/Component_CollectionGrid.js';
+export * from './ATS_IDBCacheComparison/Dialog_IDBCacheComparison.js';
+export * from './ATS_AppConfigEditor/ATS_AppConfigEditor.js';
+export * from './ATS_CrudOperations/ATS_CrudOperations.js';