@nu-art/thunderstorm-frontend 0.400.5

package/components/ActionButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * 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.
+ */
+export const ActionButton = (props) => {
+    let _action;
+    if (typeof props.action === 'string')
+        _action = () => window.open(props.action, '_blank');
+    else
+        _action = props.action;
+    return _jsx("div", { style: { padding: 5 }, children: _jsx("img", { className: `clickable ${typeof props.classCss === 'string' ? props.classCss : ''}`, style: typeof props.classCss === 'object' ? props.classCss : {}, src: props.icon, onClick: _action }) });
+};

package/components/AwaitModules/AwaitModules.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+import './AwaitModules.scss';
+import { ModuleFE_BaseDB } from '../../modules/db-api-gen/ModuleFE_BaseDB.js';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
+import { OnSyncStatusChangedListener } from '../../core/db-api-gen/types.js';
+type Props = React.PropsWithChildren<{
+    modules: ResolvableContent<(ModuleFE_BaseDB<any>)[]>;
+    customLoader?: ResolvableContent<React.ReactNode, [AwaitModule_LoaderProps]>;
+}>;
+type State = {
+    validModules: (ModuleFE_BaseDB<any>)[];
+    readyModules: (ModuleFE_BaseDB<any>)[];
+    ready: boolean;
+};
+export type AwaitModule_LoaderProps = {
+    validModules: (ModuleFE_BaseDB<any>)[];
+    readyModules: (ModuleFE_BaseDB<any>)[];
+    awaitedModules: (ModuleFE_BaseDB<any>)[];
+    onClick: VoidFunction;
+};
+interface QueryAwaitedModules {
+    __queryAwaitedModule(): (ModuleFE_BaseDB<any>)[];
+}
+export declare const dispatch_QueryAwaitedModules: ThunderDispatcher<QueryAwaitedModules, "__queryAwaitedModule", [], ModuleFE_BaseDB<any, import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>[]>;
+export declare class AwaitModules extends ComponentSync<Props, State> implements OnSyncStatusChangedListener<any>, QueryAwaitedModules {
+    __onSyncStatusChanged(module: ModuleFE_BaseDB<any, any>): void;
+    __queryAwaitedModule(): ModuleFE_BaseDB<any, import("../../core/db-api-gen/db-def.js").DBApiFEConfig<any>>[];
+    constructor(props: Props);
+    shouldComponentUpdate(): boolean;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    protected getUnpreparedModules(): (ModuleFE_BaseDB<any>)[];
+    private getMissingPermissionModules;
+    protected renderMissingPermissions: () => import("react/jsx-runtime").JSX.Element;
+    private renderLoader;
+    private onLoaderClick;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/components/AwaitModules/AwaitModules.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { exists, resolveContent, RuntimeModules } from '@nu-art/ts-common';
+import { DataStatus } from '../../core/db-api-gen/consts.js';
+import './AwaitModules.scss';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
+import { ModuleFE_SyncManager } from '../../modules/sync-manager/ModuleFE_SyncManager.js';
+import { LL_H_C, LL_V_L } from '../Layouts/Layouts.js';
+import { TS_ProgressBar } from '../TS_ProgressBar/TS_ProgressBar.js';
+import { ModuleSyncType } from '../../modules/db-api-gen/types.js';
+export const dispatch_QueryAwaitedModules = new ThunderDispatcher('__queryAwaitedModule');
+export class AwaitModules extends ComponentSync {
+    // ######################### Life Cycle #########################
+    __onSyncStatusChanged(module) {
+        this.logVerbose(`__onSyncStatusChanged: ${module.getCollectionName()}`);
+        if (this.state.validModules.includes(module))
+            this.reDeriveState();
+    }
+    __queryAwaitedModule() {
+        return resolveContent(this.props.modules);
+    }
+    constructor(props) {
+        super(props);
+        const missingModules = resolveContent(this.props.modules).filter(module => !RuntimeModules().includes(module));
+        if (missingModules.length)
+            this.logWarning('Trying to await modules which are not in the module pack:', missingModules);
+    }
+    shouldComponentUpdate() {
+        return true;
+    }
+    deriveStateFromProps(nextProps, state) {
+        //Collect modules that are awaitable
+        state.validModules ??= resolveContent(nextProps.modules).filter(module => {
+            const validModule = RuntimeModules().includes(module) && exists(module.dbDef);
+            if (!validModule)
+                this.logWarning(`AwaitModules awaits for module ${module.getName()}, but it isn't a collection module!`);
+            return validModule;
+        });
+        //Collect ready modules
+        state.readyModules = state.validModules.filter(module => {
+            return module.getDataStatus() === DataStatus.ContainsData || state.ready && module.getDataStatus() === DataStatus.UpdatingData;
+        });
+        // Set awaiting true if not all valid modules are ready
+        state.ready = state.validModules.length === state.readyModules.length;
+        return state;
+    }
+    // ######################### Logic #########################
+    getUnpreparedModules() {
+        return this.state.validModules.filter(module => !this.state.readyModules.includes(module));
+    }
+    getMissingPermissionModules = () => {
+        const permissibleModules = ModuleFE_SyncManager.getPermissibleModuleNames();
+        if (!permissibleModules.length)
+            return [];
+        return this.state.validModules.filter(module => module.syncType === ModuleSyncType.APISync && !permissibleModules.includes(module.dbDef.dbKey));
+    };
+    // ######################### Render #########################
+    renderMissingPermissions = () => {
+        const missingPermissionModules = this.getMissingPermissionModules();
+        return _jsx("div", { className: 'ts-await-modules', children: _jsxs(LL_V_L, { className: 'missing-permission-modules', children: [_jsx("h1", { children: "Missing Permissions For The Following Databases" }), _jsx(LL_H_C, { children: missingPermissionModules.map(module => _jsx("span", { children: module.dbDef.entityName }, module.dbDef.dbKey)) })] }) });
+    };
+    renderLoader = () => {
+        const awaitedModules = this.getUnpreparedModules();
+        if (this.props.customLoader) {
+            return resolveContent(this.props.customLoader, {
+                validModules: this.state.validModules,
+                readyModules: this.state.readyModules,
+                awaitedModules,
+                onClick: this.onLoaderClick
+            });
+        }
+        //Calculate Ratios
+        const relevantInProgressModules = ModuleFE_SyncManager.getCurrentlySyncingModules()
+            .filter(module => this.state.validModules.includes(module));
+        const readyAndInProgressModulesRatio = (relevantInProgressModules.length + this.state.readyModules.length) / this.state.validModules.length;
+        const readyModulesRatio = this.state.readyModules.length / this.state.validModules.length;
+        return _jsx(TS_ProgressBar, { className: 'ts-await-modules', type: 'radial', radius: 10, ratios: [
+                readyAndInProgressModulesRatio,
+                readyModulesRatio
+            ], onClick: this.onLoaderClick });
+    };
+    onLoaderClick = () => {
+        const awaitedModules = this.getUnpreparedModules();
+        if (!awaitedModules.length)
+            this.logInfo('Not awaiting any modules');
+        this.logInfo('Waiting for modules:', ...awaitedModules.map(module => module.getName()));
+    };
+    render() {
+        if (this.getMissingPermissionModules().length)
+            return this.renderMissingPermissions();
+        if (!this.state.ready)
+            return this.renderLoader();
+        return this.props.children;
+    }
+}

package/components/AwaitModules/AwaitModules.scss

@@ -0,0 +1,53 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-await-modules {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.ts-progress-bar {
+    .ts-progress-bar__radial-bar {
+      width: 100%;
+      height: 100%;
+
+      .ts-progress-bar__radial-bar__text {
+        font-size: 42px;
+        color: styles.dark-blue(4);
+      }
+
+      .ts-progress-bar__radial-bar__bar circle {
+        stroke-width: 1px;
+
+        &.ts-progress-bar__radial-bar__bar-child-0 {
+          stroke: styles.dark-blue(6);
+        }
+
+        &.ts-progress-bar__radial-bar__bar-child-1 {
+          stroke: styles.dark-blue(4);
+        }
+
+        &.ts-progress-bar__radial-bar__bar__background {
+          stroke: #E3E9F2;
+        }
+      }
+    }
+  }
+
+  .missing-permission-modules {
+    width: min-content;
+
+    h1 {
+      font: {
+        size: 24px;
+        weight: 600;
+      }
+    }
+
+    .ll_h_c {
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+  }
+}

package/components/AwaitSync/AwaitSync.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+import { PermissibleModulesUpdated } from '../../modules/sync-manager/ModuleFE_SyncManager.js';
+import './AwaitSync.scss';
+type Props = React.PropsWithChildren<{
+    customLoader?: ResolvableContent<React.ReactNode>;
+}>;
+type State = {
+    awaiting: boolean;
+};
+export declare class AwaitSync extends ComponentSync<Props, State> implements PermissibleModulesUpdated {
+    __onPermissibleModulesUpdated: () => void;
+    shouldComponentUpdate(): boolean;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/components/AwaitSync/AwaitSync.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { resolveContent } from '@nu-art/ts-common';
+import { ModuleFE_SyncManager } from '../../modules/sync-manager/ModuleFE_SyncManager.js';
+import './AwaitSync.scss';
+export class AwaitSync extends ComponentSync {
+    __onPermissibleModulesUpdated = () => this.reDeriveState();
+    shouldComponentUpdate() {
+        return true;
+    }
+    deriveStateFromProps(nextProps, state) {
+        // Wait until we've received the list of modules the user has permission to see. Until we have them, we wait.
+        state.awaiting = ModuleFE_SyncManager.getPermissibleModuleNames().length === 0;
+        return state;
+    }
+    render() {
+        if (!this.state.awaiting)
+            return this.props.children;
+        if (this.props.customLoader)
+            return resolveContent(this.props.customLoader);
+        return _jsx("div", { className: 'ts-await-sync-loader', onClick: () => {
+                this.logInfo('Awaiting Sync');
+            } });
+    }
+}

package/components/AwaitSync/AwaitSync.scss

@@ -0,0 +1,13 @@
+.ts-await-sync-loader {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1.5s await-sync-loader-animation linear infinite;
+}
+
+@keyframes await-sync-loader-animation {
+  to {
+    background-position-x: -200%;
+  }
+}

package/components/Button/ATS_Button.d.ts

@@ -0,0 +1,21 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { AppToolsScreen } from '../TS_AppTools/index.js';
+import './ATS_Button.scss';
+type Props = {};
+type State = {
+    inProgress: boolean;
+};
+export declare class ATS_Button extends ComponentSync<Props, State> {
+    static Screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private executeSyncOperation;
+    private executeAsyncOperation;
+    private executeInProgressOperation;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_SyncOps;
+    private render_AsyncOps;
+    private render_Disabled;
+    private render_ControlledInProgress;
+    private render_RandomTests;
+}
+export {};

package/components/Button/ATS_Button.js

@@ -0,0 +1,66 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { thunderstormATSGroups } from '../../consts.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_H_C, LL_V_L } from '../Layouts/index.js';
+import { TS_AppTools } from '../TS_AppTools/index.js';
+import { Button } from './Button.js';
+import './ATS_Button.scss';
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+import { generateHex } from '@nu-art/ts-common';
+export class ATS_Button extends ComponentSync {
+    static Screen = {
+        key: 'ats-ts-button',
+        name: 'Button',
+        group: thunderstormATSGroups,
+        renderer: this,
+    };
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.inProgress ??= false;
+        return state;
+    }
+    //######################### Logic #########################
+    executeSyncOperation = () => {
+        this.logInfo('Executed synchronous operation');
+    };
+    executeAsyncOperation = () => {
+        const id = generateHex(4);
+        return new Promise(resolve => {
+            this.logInfo(`Executing asynchronous operation: ${id}`);
+            setTimeout(() => {
+                this.logInfo(`Resolved asynchronous operation: ${id}`);
+                resolve();
+            }, 3000);
+        });
+    };
+    executeInProgressOperation = () => {
+        return new Promise(resolve => {
+            this.logInfo('Executing InProgress operation');
+            this.setState({ inProgress: true }, () => {
+                setTimeout(() => this.setState({ inProgress: false }, () => {
+                    this.logInfo('Resolved InProgress operation');
+                    resolve();
+                }), 3000);
+            });
+        });
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__button', children: [TS_AppTools.renderPageHeader('Button'), _jsxs(LL_V_L, { className: 'ats__button__button-board', children: [this.render_SyncOps(), this.render_AsyncOps(), this.render_ControlledInProgress(), this.render_Disabled(), this.render_RandomTests()] })] });
+    }
+    render_SyncOps = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Synchronous Operation', children: _jsxs(LL_H_C, { className: 'ats__button__buttons', children: [_jsx(Button, { variant: 'primary', onClick: this.executeSyncOperation, children: "Primary" }), _jsx(Button, { variant: 'secondary', onClick: this.executeSyncOperation, children: "Secondary" }), _jsx(Button, { variant: 'tertiary', onClick: this.executeSyncOperation, children: "Tertiary" }), _jsx(Button, { variant: 'text', onClick: this.executeSyncOperation, children: "Text" }), _jsx(Button, { variant: 'dangerous', onClick: this.executeSyncOperation, children: "Dangerous" })] }) });
+    };
+    render_AsyncOps = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Asynchronous Operation', children: _jsxs(LL_H_C, { className: 'ats__button__buttons', children: [_jsx(Button, { variant: 'primary', onClick: this.executeAsyncOperation, children: "Primary" }), _jsx(Button, { variant: 'secondary', onClick: this.executeAsyncOperation, children: "Secondary" }), _jsx(Button, { variant: 'tertiary', onClick: this.executeAsyncOperation, children: "Tertiary" }), _jsx(Button, { variant: 'text', onClick: this.executeAsyncOperation, children: "Text" }), _jsx(Button, { variant: 'dangerous', onClick: this.executeAsyncOperation, children: "Dangerous" })] }) });
+    };
+    render_Disabled = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Disabled', children: _jsxs(LL_H_C, { className: 'ats__button__buttons', children: [_jsx(Button, { variant: 'primary', disabled: true, children: "Primary" }), _jsx(Button, { variant: 'secondary', disabled: true, children: "Secondary" }), _jsx(Button, { variant: 'tertiary', disabled: true, children: "Tertiary" }), _jsx(Button, { variant: 'text', disabled: true, children: "Text" }), _jsx(Button, { variant: 'dangerous', disabled: true, children: "Dangerous" })] }) });
+    };
+    render_ControlledInProgress = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'In Progress Operation', children: _jsxs(LL_H_C, { className: 'ats__button__buttons', children: [_jsx(Button, { variant: 'primary', actionInProgress: this.state.inProgress, onClick: this.executeInProgressOperation, children: "Primary" }), _jsx(Button, { variant: 'secondary', actionInProgress: this.state.inProgress, onClick: this.executeInProgressOperation, children: "Secondary" }), _jsx(Button, { variant: 'tertiary', actionInProgress: this.state.inProgress, onClick: this.executeInProgressOperation, children: "Tertiary" }), _jsx(Button, { variant: 'text', actionInProgress: this.state.inProgress, onClick: this.executeInProgressOperation, children: "Text" }), _jsx(Button, { variant: 'dangerous', actionInProgress: this.state.inProgress, onClick: this.executeInProgressOperation, children: "Dangerous" })] }) });
+    };
+    render_RandomTests = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Random Tests', children: _jsxs(LL_H_C, { className: 'ats__button__buttons', children: [_jsx(Button, { variant: 'primary', onClick: this.executeAsyncOperation, children: "K" }), _jsx(Button, { variant: 'primary', onClick: this.executeAsyncOperation, children: "Long Text Test 123123123" })] }) });
+    };
+}

package/components/Button/ATS_Button.scss

@@ -0,0 +1,19 @@
+#ats__button {
+  height: 100%;
+  width: 100%;
+  gap: 20px;
+  padding: 20px;
+
+  .app-tools-page__page__header {
+    margin: 0;
+    padding: 0;
+  }
+
+  .ats__button__button-board {
+    gap: 20px;
+  }
+
+  .ats__button__buttons {
+    gap: 20px;
+  }
+}

package/components/Button/Button.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+import './Button.scss';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous' | (string & {});
+type ButtonProps = Omit<React.HTMLProps<HTMLButtonElement>, 'type' | 'ref'>;
+type Props = ButtonProps & {
+    loader?: ResolvableContent<React.ReactNode>;
+    variant?: ButtonVariant;
+    innerRef?: React.RefObject<HTMLButtonElement>;
+    actionInProgress?: boolean;
+    onDisabledClick?: (e: React.MouseEvent<HTMLButtonElement>) => any;
+};
+type State = {
+    actionInProgress: boolean;
+    disabled: boolean;
+};
+/**
+ * Thunderstorm Button component, this component is the de-facto button in our system.</br>
+ * This button handles both sync and async actions, and can be autonomous or controlled.</br>
+ *
+ * @property variant - the variant of the button, will be added to the button element as a "data-variant" attribute.
+ * this component comes with 5 default variants ('primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous'), but will accept any string, just make sure to add your own design for it!
+ *
+ * @property loader - When an async action is fired, the button renders a loader. this property is an overwrite for the loader renderer.
+ *
+ * @property actionInProgress - If given, the button becomes controlled and will only show a loader if true is passed from the outside.
+ */
+export declare class Button extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    shouldComponentUpdate(): boolean;
+    private getClassName;
+    private getProps;
+    private handleAction;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderContent;
+    private renderLoader;
+}
+export declare const TS_Button: typeof Button;
+export {};

package/components/Button/Button.js

@@ -0,0 +1,94 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { exists, isPromise, resolveContent } from '@nu-art/ts-common';
+import './Button.scss';
+import { _className } from '../../utils/tools.js';
+import { LL_H_C } from '../Layouts/index.js';
+/**
+ * Thunderstorm Button component, this component is the de-facto button in our system.</br>
+ * This button handles both sync and async actions, and can be autonomous or controlled.</br>
+ *
+ * @property variant - the variant of the button, will be added to the button element as a "data-variant" attribute.
+ * this component comes with 5 default variants ('primary' | 'secondary' | 'tertiary' | 'text' | 'dangerous'), but will accept any string, just make sure to add your own design for it!
+ *
+ * @property loader - When an async action is fired, the button renders a loader. this property is an overwrite for the loader renderer.
+ *
+ * @property actionInProgress - If given, the button becomes controlled and will only show a loader if true is passed from the outside.
+ */
+export class Button extends ComponentSync {
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.actionInProgress ??= false;
+        state.disabled = !!nextProps.disabled;
+        if (exists(nextProps.actionInProgress))
+            state.actionInProgress = nextProps.actionInProgress;
+        return state;
+    }
+    shouldComponentUpdate() {
+        return true;
+    }
+    //######################### Logic #########################
+    getClassName = () => {
+        return _className('ts-button', this.props.className, this.state.actionInProgress && 'action-in-progress');
+    };
+    getProps = () => {
+        //Clean out non-html properties from the props
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { loader, variant, innerRef, onDisabledClick, actionInProgress, ...rest } = this.props;
+        const props = rest;
+        //Align props from other sources
+        props.className = this.getClassName();
+        props.disabled = this.state.disabled;
+        props.ref = innerRef;
+        props['data-variant'] = variant ?? 'tertiary';
+        return props;
+    };
+    handleAction = async (e) => {
+        // skip action if needed
+        if (this.state.actionInProgress)
+            return;
+        if (this.state.disabled)
+            return this.props.onDisabledClick?.(e);
+        // call the action, the response can be both promise or sync void
+        const result = this.props.onClick?.(e);
+        // if result is not a promise return
+        if (!isPromise(result))
+            return;
+        const controlledInProgress = exists(this.props.actionInProgress);
+        // in case the result is from type promise and needs to be awaited, await and handle errors
+        if (!controlledInProgress) {
+            // @ts-ignore - prevents race conditions
+            // noinspection JSConstantReassignment
+            this.state.actionInProgress = true;
+            this.forceUpdate();
+        }
+        try {
+            await result;
+        }
+        catch (error) {
+            this.logError(error);
+            throw error;
+        }
+        finally {
+            if (!controlledInProgress) {
+                // @ts-ignore - prevents race conditions
+                // noinspection JSConstantReassignment
+                this.state.actionInProgress = false;
+                this.forceUpdate();
+            }
+        }
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs("button", { ...this.getProps(), type: 'button', onClick: this.handleAction, children: [this.renderContent(), this.renderLoader()] });
+    }
+    renderContent = () => {
+        return _jsx(LL_H_C, { className: 'ts-button__content', children: this.props.children });
+    };
+    renderLoader = () => {
+        if (this.props.loader)
+            return resolveContent(this.props.loader);
+        return _jsx("div", { className: 'ts-button__loader' });
+    };
+}
+export const TS_Button = Button;