@nu-art/thunderstorm-frontend 0.400.5

package/_ats/index.js

@@ -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';

package/_entity/app-config/ModuleFE_AppConfig.d.ts

@@ -0,0 +1,24 @@
+import { DispatcherDef, ThunderDispatcherV3 } from '../../core/db-api-gen/types.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ApiDefCaller, ApiStruct_AppConfig, DBProto_AppConfig } from '@nu-art/thunderstorm-shared';
+import { TypedKeyValue } from '@nu-art/ts-common';
+export type DispatcherType_AppConfig = DispatcherDef<DBProto_AppConfig, `__onAppConfigsUpdated`>;
+type InferType<T> = T extends AppConfigKey_FE<infer ValueType> ? ValueType : never;
+export declare const dispatch_onAppConfigsUpdated: ThunderDispatcherV3<DispatcherType_AppConfig>;
+export declare class ModuleFE_AppConfig_Class extends ModuleFE_BaseApi<DBProto_AppConfig> implements ApiDefCaller<ApiStruct_AppConfig> {
+    _v1: ApiDefCaller<ApiStruct_AppConfig>['_v1'];
+    constructor();
+    init(): Promise<void>;
+    get<K extends AppConfigKey_FE<any>>(appConfigKey: K): InferType<K>;
+    set<K extends AppConfigKey_FE<any>>(appConfigKey: K, data: InferType<K>): Promise<void>;
+    delete<K extends AppConfigKey_FE<any>>(appConfigKey: K): Promise<void>;
+}
+export declare const ModuleFE_AppConfig: ModuleFE_AppConfig_Class;
+export declare class AppConfigKey_FE<Binder extends TypedKeyValue<string, any>> {
+    readonly key: Binder['key'];
+    constructor(key: Binder['key']);
+    get(): Binder['value'];
+    set(value: Binder['value']): Promise<void>;
+    delete(): Promise<void>;
+}
+export {};

package/_entity/app-config/ModuleFE_AppConfig.js

@@ -0,0 +1,52 @@
+import { ThunderDispatcherV3 } from '../../core/db-api-gen/types.js';
+import { apiWithQuery } from '../../core/typed-api.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ApiDef_AppConfig, DBDef_AppConfig } from '@nu-art/thunderstorm-shared';
+import { BadImplementationException, cloneObj } from '@nu-art/ts-common';
+export const dispatch_onAppConfigsUpdated = new ThunderDispatcherV3('__onAppConfigsUpdated');
+export class ModuleFE_AppConfig_Class extends ModuleFE_BaseApi {
+    _v1;
+    constructor() {
+        super(DBDef_AppConfig, dispatch_onAppConfigsUpdated);
+        this._v1 = {
+            getConfigByKey: apiWithQuery(ApiDef_AppConfig._v1.getConfigByKey),
+        };
+    }
+    async init() {
+        super.init();
+    }
+    get(appConfigKey) {
+        const config = this.cache.find(item => item.key === appConfigKey.key);
+        return config?.data;
+    }
+    async set(appConfigKey, data) {
+        let _config = cloneObj(this.cache.find(item => item.key === appConfigKey.key));
+        if (!_config)
+            _config = { key: appConfigKey.key };
+        _config.data = data;
+        await this.v1.upsert(_config).executeSync();
+    }
+    async delete(appConfigKey) {
+        const config = this.cache.find(item => item.key === appConfigKey.key);
+        if (!config)
+            throw new BadImplementationException('Config of this key does not exist');
+        await this.v1.delete(config).executeSync();
+    }
+}
+export const ModuleFE_AppConfig = new ModuleFE_AppConfig_Class();
+export class AppConfigKey_FE {
+    key;
+    constructor(key) {
+        this.key = key;
+    }
+    get() {
+        return ModuleFE_AppConfig.get(this);
+    }
+    async set(value) {
+        // @ts-ignore
+        await ModuleFE_AppConfig.set(this, value);
+    }
+    async delete() {
+        await ModuleFE_AppConfig.delete(this);
+    }
+}

package/_entity/app-config/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModuleFE_AppConfig.js';
+export * from './module-pack.js';

package/_entity/app-config/index.js

@@ -0,0 +1,2 @@
+export * from './ModuleFE_AppConfig.js';
+export * from './module-pack.js';

package/_entity/app-config/module-pack.d.ts

@@ -0,0 +1 @@
+export declare const ModulePackFE_AppConfigDB: import("./ModuleFE_AppConfig.js").ModuleFE_AppConfig_Class[];

package/_entity/app-config/module-pack.js

@@ -0,0 +1,2 @@
+import { ModuleFE_AppConfig } from './ModuleFE_AppConfig.js';
+export const ModulePackFE_AppConfigDB = [ModuleFE_AppConfig];

package/_entity/editable-test/ModuleFE_EditableTest.d.ts

@@ -0,0 +1,11 @@
+import { ApiStruct_EditableTest, DBProto_EditableTest } from '@nu-art/thunderstorm-shared/_entity/editable-test/index';
+import { DispatcherDef, ThunderDispatcherV3 } from '../../core/db-api-gen/types.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ApiDefCaller } from '@nu-art/thunderstorm-shared/types';
+export type DispatcherType_EditableTest = DispatcherDef<DBProto_EditableTest, `__onEditableTestUpdated`>;
+export declare const dispatch_onEditableTestChanged: ThunderDispatcherV3<DispatcherType_EditableTest>;
+export declare class ModuleFE_EditableTest_Class extends ModuleFE_BaseApi<DBProto_EditableTest> implements ApiDefCaller<ApiStruct_EditableTest> {
+    _v1: ApiDefCaller<ApiStruct_EditableTest>['_v1'];
+    constructor();
+}
+export declare const ModuleFE_EditableTest: ModuleFE_EditableTest_Class;

package/_entity/editable-test/ModuleFE_EditableTest.js

@@ -0,0 +1,12 @@
+import { DBDef_EditableTest } from '@nu-art/thunderstorm-shared/_entity/editable-test/index';
+import { ThunderDispatcherV3 } from '../../core/db-api-gen/types.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+export const dispatch_onEditableTestChanged = new ThunderDispatcherV3('__onEditableTestUpdated');
+export class ModuleFE_EditableTest_Class extends ModuleFE_BaseApi {
+    _v1;
+    constructor() {
+        super(DBDef_EditableTest, dispatch_onEditableTestChanged);
+        this._v1 = {};
+    }
+}
+export const ModuleFE_EditableTest = new ModuleFE_EditableTest_Class();

package/_entity/editable-test/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ModuleFE_EditableTest.js';
+export * from './ui-components.js';

package/_entity/editable-test/index.js

@@ -0,0 +1,2 @@
+export * from './ModuleFE_EditableTest.js';
+export * from './ui-components.js';

package/_entity/editable-test/module-pack.d.ts

@@ -0,0 +1 @@
+export declare const ModulePackFE_EditableTest: import("./ModuleFE_EditableTest.js").ModuleFE_EditableTest_Class[];

package/_entity/editable-test/module-pack.js

@@ -0,0 +1,2 @@
+import { ModuleFE_EditableTest } from './ModuleFE_EditableTest.js';
+export const ModulePackFE_EditableTest = [ModuleFE_EditableTest];

package/_entity/editable-test/ui-components.d.ts

@@ -0,0 +1,37 @@
+export declare const DropDown_EditableTest: {
+    editable: (props: import("../../components/types.js").ComponentProps_Error & {
+        dropdownRef?: import("react").RefObject<any>;
+        className?: string;
+        style?: import("react").CSSProperties;
+        placeholder?: string;
+        mapper?: ((item: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest) => (string | undefined)[]) | undefined;
+        noOptionsRenderer?: import("react").ReactNode | ((filter?: string) => import("react").ReactNode);
+        renderer?: ((item: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest) => import("react").ReactElement) | undefined;
+        ifNoneShowAll?: boolean;
+        caret?: {
+            open: import("react").ReactNode;
+            close: import("react").ReactNode;
+        };
+        onNoMatchingSelectionForString?: ((filterText: string, matchingItems: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest[], e: import("react").KeyboardEvent) => any) | undefined;
+        limitItems?: number;
+        hidePlaceholderOnOpen?: boolean;
+        itemResolver?: (() => import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest[]) | undefined;
+        innerRef?: import("react").RefObject<any>;
+        tabIndex?: number;
+        unselectLabel?: string;
+        id?: string;
+        queryFilter?: ((item: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest) => boolean) | undefined;
+        sortBy?: ("d" | "a" | "b" | "_id" | "__metadata1" | "__hardDelete" | "__created" | "__updated" | "_v" | "_originDocId" | "c" | ((item: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest) => string | number))[] | undefined;
+    } & {
+        inputValue?: string;
+        boundingParentSelector?: string;
+        renderSearch?: ((dropDown: import("../../index.js").TS_DropDown<import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest>) => import("react").ReactNode) | undefined;
+        limitItems?: number;
+        disabled?: boolean;
+    } & import("../../editable-item.js").UIProps_EditableItem<any, any, string> & {
+        onSelected?: ((selected: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest | undefined, superOnSelected: (selected?: import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest | undefined) => Promise<void>) => void) | undefined;
+        canUnselect?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element;
+    selectable: (props: import("../../components/GenericDropDown/GenericDropDownV3.js").AppLevelProps_TS_GenericDropDownV3<import("@nu-art/thunderstorm-shared/_entity/editable-test/types").DB_EditableTest>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const MultiSelect_EditableTest: <EnclosingItem_, Prop extends import("@nu-art/ts-common").SubsetKeys<keyof EnclosingItem_, EnclosingItem_, string[] | undefined>>(props: import("../../components/TS_MultiSelect/TS_MultiSelect_V2.js").DynamicProps_TS_MultiSelect_V2<EnclosingItem_, Prop> & Partial<import("../../components/TS_MultiSelect/TS_MultiSelect_V2.js").StaticProps_TS_MultiSelect_V2<string>>) => import("react/jsx-runtime").JSX.Element;

package/_entity/editable-test/ui-components.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ModuleFE_EditableTest } from './ModuleFE_EditableTest.js';
+import { DBItemDropDownMultiSelector } from '../../components/_TS_MultiSelect/DBItemDropDownMultiSelector.js';
+import { GenericDropDownV3 } from '../../components/GenericDropDown/index.js';
+import { TS_MultiSelect_V2 } from '../../components/TS_MultiSelect/index.js';
+const Props_DropDown = {
+    module: ModuleFE_EditableTest,
+    modules: [ModuleFE_EditableTest],
+    mapper: item => [item.a],
+    placeholder: 'Choose a EditableTest',
+    renderer: item => _jsxs("div", { className: "ll_h_c", children: [" ", item.a, " "] })
+};
+export const DropDown_EditableTest = GenericDropDownV3.prepare(Props_DropDown);
+const Props_MultiSelect = DBItemDropDownMultiSelector.propsV3({
+    module: ModuleFE_EditableTest,
+    itemRenderer: (item, onDelete) => {
+        return !item ? _jsx(_Fragment, { children: "Not Found" }) : _jsx(_Fragment, { children: item.a });
+    },
+    uiSelector: DropDown_EditableTest.selectable,
+});
+export const MultiSelect_EditableTest = TS_MultiSelect_V2.prepare(Props_MultiSelect);

package/_entity.d.ts

@@ -0,0 +1,2 @@
+export * from './_entity/editable-test/index.js';
+export * from './_entity/app-config/index.js';

package/_entity.js

@@ -0,0 +1,2 @@
+export * from './_entity/editable-test/index.js';
+export * from './_entity/app-config/index.js';

package/_to-refactor/MenuAndButton.d.ts

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

package/_to-refactor/MenuAndButton.js

@@ -0,0 +1,87 @@
+export {};
+// /*
+//  * Thunderstorm is a full web app framework!
+//  *
+//  * Typescript & Express backend infrastructure that natively runs on firebase function
+//  * Typescript & React frontend infrastructure
+//  *
+//  * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+//  *
+//  * Licensed under the Apache License, Version 2.0 (the "License");
+//  * you may not use this file except in compliance with the License.
+//  * You may obtain a copy of the License at
+//  *
+//  *     http://www.apache.org/licenses/LICENSE-2.0
+//  *
+//  * Unless required by applicable law or agreed to in writing, software
+//  * distributed under the License is distributed on an "AS IS" BASIS,
+//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  * See the License for the specific language governing permissions and
+//  * limitations under the License.
+//  */
+//
+// import * as React from 'react';
+// import {CSSProperties, ReactNode} from 'react';
+// import {MenuBuilder, PopUp_Model_Content, PopUpListener, resolveRealPosition} from '../component-modules/mouse-interactivity/ModuleFE_PopUp.js';
+// import {BadImplementationException} from '@nu-art/ts-common';
+// import {Adapter} from '../components/adapter/Adapter.js';
+//
+// type Props = {
+// 	id: string
+// 	iconOpen: ReactNode
+// 	iconClosed: ReactNode
+// 	adapter: Adapter
+// 	resolvePosition?: (button: HTMLImageElement) => { y: number, x: number }
+// 	css?: CSSProperties
+// }
+//
+//
+// export class MenuAndButton
+// 	extends React.Component<Props, { isOpen: boolean, over: boolean }>
+// 	implements PopUpListener {
+//
+// 	ref = React.createRef<HTMLImageElement>();
+//
+// 	state = {
+// 		isOpen: false,
+// 		over: false
+// 	};
+//
+// 	__onPopUpHide = (id: string) => {
+// 		if (this.props.id !== id)
+// 			return;
+//
+// 		this.setState({isOpen: false});
+// 	};
+//
+// 	__onPopUpDisplay = (menu: PopUp_Model_Content) => {
+// 		if (this.props.id !== menu.id)
+// 			return;
+//
+// 		this.setState({isOpen: true});
+// 	};
+//
+// 	render() {
+// 		return <div
+// 			className={'clickable'}
+// 			onClick={this.open}
+// 			style={{position: 'relative'}}>
+// 			<div ref={this.ref}
+// 					 onMouseOver={e => this.setState({over: true})}
+// 					 onMouseOut={e => this.setState({over: false})}>
+// 				{this.state.isOpen || this.state.over ? this.props.iconClosed : this.props.iconOpen}
+// 			</div>
+// 		</div>;
+// 	}
+//
+// 	open = () => {
+// 		if (!this.ref.current)
+// 			throw new BadImplementationException('Could not find image reference');
+//
+// 		const pos = this.props.resolvePosition ? this.props.resolvePosition(this.ref.current) : resolveRealPosition(this.ref.current);
+//
+// 		new MenuBuilder(this.props.adapter, pos, {x: 0, y: 1})
+// 			.setId(this.props.id)
+// 			.show();
+// 	};
+// }

package/behavior-functions/index.d.ts

@@ -0,0 +1 @@
+export * from './scroll-into-view.js';

package/behavior-functions/index.js

@@ -0,0 +1 @@
+export * from './scroll-into-view.js';

package/behavior-functions/scroll-into-view.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type ScrollBehavior = 'smooth' | 'auto';
+export declare const scrollIntoView: (_child: React.RefObject<HTMLElement> | HTMLElement, _container: React.RefObject<HTMLElement> | HTMLElement, scrollBehavior?: ScrollBehavior) => void;
+export declare const scrollIntoView_Horizontal: (_child: React.RefObject<HTMLElement> | HTMLElement, _container: React.RefObject<HTMLElement> | HTMLElement, scrollBehavior?: ScrollBehavior) => void;
+export declare const scrollToTop: (_child: React.RefObject<HTMLElement> | HTMLElement, _container: React.RefObject<HTMLElement> | HTMLElement, scrollBehavior?: ScrollBehavior, offset?: number) => void;
+export {};

package/behavior-functions/scroll-into-view.js

@@ -0,0 +1,55 @@
+import { BadImplementationException } from '@nu-art/ts-common';
+const extractElement = (element) => {
+    return element instanceof HTMLElement ? element : element.current;
+};
+export const scrollIntoView = (_child, _container, scrollBehavior = 'smooth') => {
+    const child = extractElement(_child);
+    const container = extractElement(_container);
+    if (!child || !container)
+        throw new BadImplementationException('Got no elements');
+    const childRect = child.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const inView = (childRect.top >= containerRect.top) && (childRect.bottom <= containerRect.top + container.clientHeight);
+    if (!inView) {
+        const scrollTop = childRect.top - containerRect.top;
+        const scrollBot = childRect.bottom - containerRect.bottom;
+        let scroll = container.scrollTop;
+        if (Math.abs(scrollTop) < Math.abs(scrollBot))
+            scroll += scrollTop - 35;
+        else
+            scroll += scrollBot;
+        container.scroll({ top: scroll, behavior: scrollBehavior });
+    }
+};
+export const scrollIntoView_Horizontal = (_child, _container, scrollBehavior = 'smooth') => {
+    const child = extractElement(_child);
+    const container = extractElement(_container);
+    if (!child || !container)
+        throw new BadImplementationException('Got no elements');
+    const childRect = child.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    const inView = (childRect.left >= containerRect.left) && (childRect.right <= containerRect.left + container.clientWidth);
+    if (!inView) {
+        const scrollLeft = childRect.left - containerRect.left;
+        const scrollRight = childRect.right - containerRect.right;
+        let scroll = container.scrollLeft;
+        if (Math.abs(scrollLeft) < Math.abs(scrollRight))
+            scroll += scrollLeft - 35;
+        else
+            scroll += scrollRight;
+        container.scroll({ left: scroll, behavior: scrollBehavior });
+    }
+};
+export const scrollToTop = (_child, _container, scrollBehavior = 'smooth', offset = 0) => {
+    const child = extractElement(_child);
+    const container = extractElement(_container);
+    if (!child || !container)
+        throw new BadImplementationException('Got no elements');
+    const childRect = child.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    if (childRect.top === containerRect.top)
+        return;
+    let scroll = container.scrollTop;
+    scroll += childRect.top - containerRect.top - offset;
+    container.scroll({ top: scroll, behavior: scrollBehavior });
+};

package/component-modules/ModuleFE_Dialog.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Module, ResolvableContent } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../core/thunder-dispatcher.js';
+export type Dialog_Model = DialogKey & {
+    content: ResolvableContent<React.ReactNode, [VoidFunction]>;
+    closeOverlayOnClick?: () => boolean;
+    overlayClass?: string;
+};
+export type DialogKey = {
+    dialogKey?: string;
+};
+export interface DialogListener {
+    __showDialog(dialogModel?: Dialog_Model): void;
+    __closeDialog(dialogModel?: DialogKey): void;
+}
+export interface DialogCloseListener {
+    __consumeDialogCloseEvent(dialogModel?: DialogKey): boolean;
+}
+export declare const dispatch_canClose: ThunderDispatcher<DialogCloseListener, "__consumeDialogCloseEvent", [dialogModel?: DialogKey | undefined], boolean>;
+export declare const defaultCloseCallback: () => boolean;
+export declare class ModuleFE_Dialog_Class extends Module<{}> {
+    constructor();
+    protected init(): void;
+    close: (force?: boolean, _dialogKey?: string) => void;
+    show: (model: Dialog_Model) => void;
+}
+export declare const ModuleFE_Dialog: ModuleFE_Dialog_Class;

package/component-modules/ModuleFE_Dialog.js

@@ -0,0 +1,48 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { generateHex, Module } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../core/thunder-dispatcher.js';
+const dispatch_showDialog = new ThunderDispatcher('__showDialog');
+const dispatch_closeDialog = new ThunderDispatcher('__closeDialog');
+export const dispatch_canClose = new ThunderDispatcher('__consumeDialogCloseEvent');
+export const defaultCloseCallback = () => true;
+export class ModuleFE_Dialog_Class extends Module {
+    constructor() {
+        super();
+    }
+    init() {
+    }
+    close = (force = true, _dialogKey) => {
+        const dialogKey = _dialogKey ? { dialogKey: _dialogKey } : undefined;
+        if (!force && dispatch_canClose.dispatchUI(dialogKey)[0])
+            return;
+        dispatch_closeDialog.dispatchUI(dialogKey);
+    };
+    show = (model) => {
+        dispatch_showDialog.dispatchUI({
+            content: model.content,
+            closeOverlayOnClick: model.closeOverlayOnClick ?? defaultCloseCallback,
+            dialogKey: model.dialogKey ?? generateHex(8),
+            overlayClass: model.overlayClass,
+        });
+    };
+}
+export const ModuleFE_Dialog = new ModuleFE_Dialog_Class();

package/component-modules/ModuleFE_Notifications.d.ts

@@ -0,0 +1,45 @@
+import { DB_Object, Module } from '@nu-art/ts-common';
+type NS_Normal = 'normal';
+type NS_InProgress = 'in-progress';
+type NS_Resolved = 'resolved';
+type NS_Failed = 'failed';
+export declare const NotificationStatus_Normal: NS_Normal;
+export declare const NotificationStatus_InProgress: NS_InProgress;
+export declare const NotificationStatus_Resolved: NS_Resolved;
+export declare const NotificationStatus_Failed: NS_Failed;
+export type NotificationStatus = NS_Normal | NS_InProgress | NS_Resolved | NS_Failed;
+export type DB_Notification = DB_Object & {
+    title: string;
+    message: string;
+    postDelayed: number;
+    status: NotificationStatus;
+};
+export interface UI_Notification {
+    postDelayed: (postDelayed: number) => UI_Notification;
+    content: (title: string, message?: string) => UI_Notification;
+    execute: <T>(action: (notification: UI_Notification) => Promise<T>) => Promise<T>;
+    setStatus: (status: NotificationStatus) => UI_Notification;
+    show: (postDelay?: number) => void;
+    hide: () => void;
+    delete: () => void;
+}
+export interface NotificationListener {
+    __showNotifications(notifications: DB_Notification[]): void;
+}
+export declare class ModuleFE_Notifications_Class extends Module<{}> {
+    readonly maxNotifications: number;
+    private notificationStorage;
+    private showing;
+    private timeouts;
+    constructor(maxNotifications?: number);
+    create(id?: string): UI_Notification;
+    private upsert;
+    private showImpl;
+    private hide;
+    private delete;
+    showAllNotifications(): void;
+    hideAllNotifications(): void;
+    show(title: string, content: string, action: () => Promise<any>): Promise<UI_Notification>;
+}
+export declare const ModuleFE_Notifications: ModuleFE_Notifications_Class;
+export {};

package/component-modules/ModuleFE_Notifications.js

@@ -0,0 +1,133 @@
+import { addItemToArrayAtIndex, currentTimeMillis, generateHex, Module, removeFromArrayByIndex } from '@nu-art/ts-common';
+import { StorageKey } from '../modules/ModuleFE_LocalStorage.js';
+import { ThunderDispatcher } from '../core/thunder-dispatcher.js';
+export const NotificationStatus_Normal = 'normal';
+export const NotificationStatus_InProgress = 'in-progress';
+export const NotificationStatus_Resolved = 'resolved';
+export const NotificationStatus_Failed = 'failed';
+const dispatch_showNotifications = new ThunderDispatcher('__showNotifications');
+export class ModuleFE_Notifications_Class extends Module {
+    maxNotifications;
+    notificationStorage;
+    showing = [];
+    timeouts = {};
+    constructor(maxNotifications = 15) {
+        super();
+        this.notificationStorage = new StorageKey('notifications');
+        this.maxNotifications = maxNotifications;
+    }
+    create(id) {
+        const __created = currentTimeMillis();
+        const notification = this.notificationStorage.get([]).find(n => n._id === id) || {
+            postDelayed: 5000,
+            status: NotificationStatus_Normal,
+            title: '',
+            message: '',
+            _id: generateHex(8),
+            __created,
+            __updated: __created,
+            _v: '1.0.0'
+        };
+        const uiNotification = {
+            postDelayed: (postDelayed) => {
+                notification.postDelayed = postDelayed;
+                return uiNotification;
+            },
+            content: (title, message) => {
+                notification.title = title;
+                notification.message = message || '';
+                return uiNotification;
+            },
+            setStatus: (status) => {
+                notification.status = status;
+                return uiNotification;
+            },
+            execute: async (action) => {
+                notification.status = NotificationStatus_InProgress;
+                uiNotification.show(-1);
+                try {
+                    const t = await action(uiNotification);
+                    notification.status = NotificationStatus_Resolved;
+                    uiNotification.show();
+                    return t;
+                }
+                catch (e) {
+                    notification.status = NotificationStatus_Failed;
+                    uiNotification.show();
+                    throw e;
+                }
+            },
+            show: (postDelay) => {
+                this.showImpl(notification, postDelay || notification.postDelayed);
+            },
+            hide: () => {
+                this.hide(notification);
+            },
+            delete: () => {
+                this.delete(notification);
+            },
+        };
+        return uiNotification;
+    }
+    upsert(notification) {
+        const notifications = this.notificationStorage.get([]);
+        const index = notifications.findIndex(n => n._id === notification._id);
+        if (index !== -1)
+            notifications[index] = notification;
+        else
+            addItemToArrayAtIndex(notifications, notification, 0);
+        //If length of array is bigger than max, pop last item
+        if (notifications.length > this.maxNotifications)
+            notifications.pop();
+        this.notificationStorage.set(notifications);
+    }
+    showImpl(notification, postDelay) {
+        this.upsert(notification);
+        const index = this.showing.findIndex(n => n._id === notification._id);
+        if (index !== -1)
+            this.showing[index] = notification;
+        else
+            addItemToArrayAtIndex(this.showing, notification, 0);
+        dispatch_showNotifications.dispatchUI(this.showing);
+        if (this.timeouts[notification._id]) {
+            clearTimeout(this.timeouts[notification._id]);
+            delete this.timeouts[notification._id];
+        }
+        if (postDelay <= 0)
+            return;
+        const timeoutId = setTimeout(() => this.hide(notification), postDelay);
+        this.timeouts[notification._id] = timeoutId;
+    }
+    hide(notification) {
+        const index = this.showing.findIndex(n => n._id === notification._id);
+        if (index === -1)
+            return;
+        removeFromArrayByIndex(this.showing, index);
+        dispatch_showNotifications.dispatchUI(this.showing);
+    }
+    delete(notification) {
+        this.hide(notification);
+        this.notificationStorage.set(this.notificationStorage.get([]).filter(item => item._id !== notification._id));
+    }
+    showAllNotifications() {
+        const notifications = this.notificationStorage.get([]);
+        dispatch_showNotifications.dispatchUI(notifications);
+    }
+    hideAllNotifications() {
+        dispatch_showNotifications.dispatchUI([]);
+    }
+    async show(title, content, action) {
+        const notification = this.create().content(title, content);
+        try {
+            await notification.execute(action);
+            notification.content(`${title} - Success`).show();
+        }
+        catch (e) {
+            this.logError(e);
+            notification.content(`Failed ${title}`, e.message).show();
+            throw e;
+        }
+        return notification;
+    }
+}
+export const ModuleFE_Notifications = new ModuleFE_Notifications_Class();