@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_CollapsableContainerV2/TS_CollapsableContainerV2.scss

@@ -0,0 +1,66 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-collapsable-container-v2 {
+  width: 100%;
+  background: styles.gray-blue(7);
+
+  .ts-collapsable-container-v2__header {
+    width: 100%;
+    height: 32px;
+    cursor: pointer;
+    background: styles.gray-blue(5);
+
+    .ts-collapsable-container-v2__header-content {
+      color: #fff;
+      font: {
+        size: 14px;
+        weight: bold;
+      }
+    }
+
+    & > .icon--wrapper {
+      flex-shrink: 0;
+      height: 100%;
+      width: unset;
+      aspect-ratio: 1;
+      padding: 6px;
+      rotate: 90deg;
+      @include styles.mouse-interactive-icon(#fff);
+    }
+  }
+
+  .ts-collapsable-container-v2__content {
+    width: 100%;
+    display: grid;
+    grid-template-rows: 1fr;
+
+    .ts-collapsable-container-v2__content-inner {
+      width: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &.animated {
+    .ts-collapsable-container-v2__header {
+      .icon--wrapper {
+        transition: rotate 0.3s ease;
+      }
+    }
+
+    .ts-collapsable-container-v2__content {
+      transition: grid-template-rows 0.3s ease;
+    }
+  }
+
+  &.collapsed {
+    .ts-collapsable-container-v2__header {
+      & > .icon--wrapper {
+        rotate: 0deg;
+      }
+    }
+
+    .ts-collapsable-container-v2__content {
+      grid-template-rows: 0fr;
+    }
+  }
+}

package/components/TS_CollapsableContainerV2/ats.d.ts

@@ -0,0 +1,3 @@
+import { AppToolsScreen } from '../TS_AppTools/index.js';
+import './ats.scss';
+export declare const ATS_CollapsableContainerV2: AppToolsScreen;

package/components/TS_CollapsableContainerV2/ats.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { TS_AppTools } from '../TS_AppTools/index.js';
+import { thunderstormATSGroups } from '../../consts.js';
+import { LL_H_C, LL_V_L } from '../Layouts/index.js';
+import './ats.scss';
+import { TS_PropRenderer } from '../TS_PropRenderer/index.js';
+import { TS_CollapsableContainerV2 } from './TS_CollapsableContainerV2.js';
+const lorem = () => _jsx("p", { className: 'lorem', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis mauris quis elit tristique tempor. Sed in pellentesque nisi, eu luctus purus. Nam id mi libero. Morbi non auctor elit, eu sodales ex. Aliquam eget diam porttitor, vestibulum orci non, eleifend tortor. Curabitur finibus orci eu odio pretium, at fringilla ex scelerisque. Praesent eu ante velit. Fusce in ligula eu mi efficitur cursus at et quam. Phasellus nec accumsan velit, sed interdum arcu. In quis mauris tincidunt, convallis erat at, lobortis ex. Cras urna sapien, sagittis nec sodales sit amet, pretium eget felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos." });
+class Component extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state.collapsed ??= true;
+        return state;
+    }
+    test_Singular = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Singular Collapsable - Uncontrolled', children: _jsx(TS_CollapsableContainerV2, { headerRenderer: 'I\'m a single container!', containerRenderer: lorem }) });
+    };
+    test_Controlled = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Singular Collapsable - Controlled', children: _jsx(TS_CollapsableContainerV2, { headerRenderer: 'I\'m a single container!', containerRenderer: lorem, collapsed: this.state.collapsed, onCollapseToggle: collapsed => this.setState({ collapsed: !collapsed }) }) });
+    };
+    test_Animated = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Singular Collapsable - Animated', children: _jsx(TS_CollapsableContainerV2, { headerRenderer: 'I\'m an animated container!', containerRenderer: lorem, animated: true }) });
+    };
+    test_Multiple = () => {
+        return _jsxs(TS_PropRenderer.Vertical, { label: 'Multiple Collapsable', children: [_jsx(TS_CollapsableContainerV2, { headerRenderer: 'Multiple 1', containerRenderer: lorem }), _jsx(TS_CollapsableContainerV2, { headerRenderer: 'Multiple 2', containerRenderer: lorem })] });
+    };
+    test_Nesting = () => {
+        return _jsx(TS_PropRenderer.Vertical, { label: 'Nested Collapsable', children: _jsx(TS_CollapsableContainerV2, { headerRenderer: 'Parent', containerRenderer: () => _jsxs(_Fragment, { children: [_jsx(TS_CollapsableContainerV2, { headerRenderer: 'Child 1', containerRenderer: lorem }), _jsx(TS_CollapsableContainerV2, { headerRenderer: 'Child 2', containerRenderer: lorem })] }) }) });
+    };
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__collapsable-container', children: [TS_AppTools.renderPageHeader('Collapsable Container'), _jsxs(LL_H_C, { className: 'ats__tests', children: [this.test_Singular(), this.test_Controlled(), this.test_Animated(), this.test_Multiple(), this.test_Nesting()] })] });
+    }
+}
+export const ATS_CollapsableContainerV2 = {
+    key: 'collapsable-container-v2',
+    name: 'Collapsable Container',
+    group: thunderstormATSGroups,
+    renderer: Component,
+};

package/components/TS_CollapsableContainerV2/ats.scss

@@ -0,0 +1,35 @@
+#ats__collapsable-container {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  gap: 20px;
+
+  .app-tools-page__page__header {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ats__tests {
+    width: 100%;
+    height: 0;
+    flex-grow: 1;
+    align-items: flex-start;
+    gap: 8px;
+
+    .ts-prop-renderer {
+      width: 240px;
+
+      .ts-prop-renderer__label {
+        white-space: pre-wrap;
+      }
+    }
+
+    .lorem {
+      width: 100%;
+      padding: 8px;
+      margin: 0;
+      white-space: pre-wrap;
+    }
+  }
+}

package/components/TS_CollapsableContainerV2/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TS_CollapsableContainerV2.js';
+export * from './ats.js';

package/components/TS_CollapsableContainerV2/index.js

@@ -0,0 +1,2 @@
+export * from './TS_CollapsableContainerV2.js';
+export * from './ats.js';

package/components/TS_ComponentTransition/TS_ComponentTransition.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type TransitionPhase = 'mount' | 'enter' | 'enter-done' | 'exit' | 'exit-done' | 'unmount';
+type Props = React.PropsWithChildren<{
+    trigger: boolean;
+    mountTimeout?: number;
+    unmountTimeout?: number;
+    transitionTimeout: number;
+    transitionPrefix?: string;
+    onEnterDone?: () => void;
+    onExitDone?: () => void;
+    skipAnimationOnMount?: boolean;
+}>;
+type State = {
+    transitionPhase: TransitionPhase;
+};
+export declare class TS_ComponentTransition extends ComponentSync<Props, State> {
+    static defaultProps: Partial<Props>;
+    shouldReDeriveState(nextProps: Readonly<Props>): boolean;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private triggerNextTimeout;
+    render(): "" | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_ComponentTransition/TS_ComponentTransition.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { BadImplementationException } from '@nu-art/ts-common';
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+export class TS_ComponentTransition extends ComponentSync {
+    static defaultProps = {
+        unmountTimeout: 0,
+        mountTimeout: 0,
+    };
+    shouldReDeriveState(nextProps) {
+        return this.props?.trigger !== nextProps.trigger;
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        return true;
+    }
+    deriveStateFromProps(nextProps, state) {
+        //First load
+        if (!state.transitionPhase)
+            state.transitionPhase = nextProps.trigger
+                ? nextProps.skipAnimationOnMount ? 'enter-done' : 'mount'
+                : 'unmount';
+        //Triggered change
+        else
+            state.transitionPhase = nextProps.trigger ? 'mount' : 'exit';
+        return state;
+    }
+    triggerNextTimeout = () => {
+        switch (this.state.transitionPhase) {
+            case 'mount':
+                setTimeout(() => {
+                    this.setState({ transitionPhase: 'enter' });
+                }, this.props.mountTimeout);
+                break;
+            case 'enter':
+                setTimeout(() => {
+                    this.setState({ transitionPhase: 'enter-done' });
+                    this.props.onEnterDone?.();
+                }, this.props.transitionTimeout);
+                break;
+            case 'exit':
+                setTimeout(() => {
+                    this.setState({ transitionPhase: 'exit-done' });
+                }, this.props.transitionTimeout);
+                break;
+            case 'exit-done':
+                setTimeout(() => {
+                    this.setState({ transitionPhase: 'unmount' });
+                }, this.props.unmountTimeout);
+        }
+    };
+    render() {
+        this.triggerNextTimeout();
+        if (this.state.transitionPhase === 'unmount')
+            return '';
+        if (!this.props.children)
+            throw new BadImplementationException('Component Expects at least one child');
+        return _jsx(_Fragment, { children: React.Children.map(this.props.children, child => {
+                return React.cloneElement(child, {
+                    className: _className(child.props.className, this.props.transitionPrefix ? `${this.props.transitionPrefix}-${this.state.transitionPhase}` : this.state.transitionPhase),
+                    style: { transitionDuration: `${this.props.transitionTimeout}ms` }
+                });
+            }) });
+    }
+}

package/components/TS_ComponentTransition/index.d.ts

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

package/components/TS_ComponentTransition/index.js

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

package/components/TS_CopyToClipboard/TS_CopyToClipboard.d.ts

@@ -0,0 +1,4 @@
+import { HTMLProps } from 'react';
+export declare const TS_CopyToClipboard: (_props: HTMLProps<HTMLDivElement> & {
+    textToCopy: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/components/TS_CopyToClipboard/TS_CopyToClipboard.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { stopPropagation } from '../../utils/tools.js';
+import { ModuleFE_Thunderstorm } from '../../modules/ModuleFE_Thunderstorm.js';
+export const TS_CopyToClipboard = (_props) => {
+    const { textToCopy, ...props } = _props;
+    return (_jsx("div", { ...props, onClick: async (e) => {
+            stopPropagation(e);
+            await ModuleFE_Thunderstorm.copyToClipboard(textToCopy);
+            props.onClick?.(e);
+        }, children: props.children || textToCopy }));
+};

package/components/TS_CopyToClipboard/index.d.ts

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

package/components/TS_CopyToClipboard/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 * from './TS_CopyToClipboard.js';

package/components/TS_Dialog/TS_Dialog.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import './TS_Dialog.scss';
+import { DialogKey } from '../../component-modules/ModuleFE_Dialog.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { InferState } from '../../utils/types.js';
+/**
+ * ###DialogButton
+ *
+ * Type defining the properties for a dialog button passed on to TS_Dialog.
+ */
+export type DialogButton = {
+    content: React.ReactNode;
+    onClick?: (e: React.KeyboardEvent | React.MouseEvent) => void | Promise<void>;
+    onDisabledClick?: (e: React.MouseEvent) => any;
+    className?: string;
+    associatedKeys?: string[];
+    disabled?: boolean;
+    renderer?: (button: DialogButton, index: number, ref?: React.RefObject<any>) => React.ReactNode;
+    variant?: string;
+};
+export type DialogButtons = {
+    left?: DialogButton[];
+    center?: DialogButton[];
+    right?: DialogButton[];
+};
+/**
+ * Base state for TS_Dialog
+ */
+export type State_TSDialog = {
+    dialogIsBusy?: boolean;
+    error?: Error;
+};
+/**
+ * Base Props for TS_Dialog
+ */
+export type Props_TSDialog = {
+    dialogKey?: string;
+    dialogId: string;
+    className?: string;
+};
+/**
+ * ##TS_Dialog
+ *
+ * This class defines the logic and render behavior for dialogs in the system.
+ * Any dialog class in the system is meant to inherit this class to utilize its features.
+ */
+export declare abstract class TS_Dialog<P extends {} = {}, S extends {} = {}> extends ComponentSync<P & Props_TSDialog, S & State_TSDialog> {
+    __consumeDialogCloseEvent(dialogKey: DialogKey): boolean;
+    componentDidMount(): void;
+    /**
+     * A map held per instance connecting a (keyboard)key to a dialog button.
+     * This map is filled in by calling _keyActionMapCreator with buttons.
+     * @protected
+     */
+    private readonly keyActionMap;
+    /**
+     * A function to fill in keyActionMap.
+     *
+     * This function receives an array of buttons and for each button will connect any associated
+     * keys to the button, to be used by dialogKeyEventHandler.
+     *
+     * Keep in mind:
+     *
+     * 1. If an associated key is found in more than one button, an error will be thrown.
+     *
+     * 2. This function must be called in the constructor of the inheriting class.
+     *
+     * @param buttons - an array of buttons of type DialogButton
+     */
+    private _keyActionMapCreator;
+    protected deriveStateFromProps(nextProps: P, state: InferState<this>): InferState<this>;
+    private dialogKeyEventHandler;
+    protected _buttonsCreator: (buttons?: DialogButton[]) => import("react/jsx-runtime").JSX.Element | undefined;
+    protected closeDialog: (force?: boolean) => void;
+    private dialogHeader;
+    protected renderHeader: () => React.ReactNode | undefined;
+    private dialogBody;
+    protected renderBody: () => React.ReactNode | undefined;
+    private dialogButtons;
+    protected buttons: () => DialogButtons;
+    protected performAction: (action: () => Promise<void>) => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+    static button: (button: DialogButton, index: number, ref?: React.RefObject<any>) => import("react/jsx-runtime").JSX.Element;
+    static Button_Cancel: {
+        content: string;
+        onClick: () => void;
+        associatedKeys: string[];
+    };
+}

package/components/TS_Dialog/TS_Dialog.js

@@ -0,0 +1,140 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import './TS_Dialog.scss';
+import { _values, BadImplementationException, filterInstances, flatArray } from '@nu-art/ts-common';
+import { ModuleFE_Dialog } from '../../component-modules/ModuleFE_Dialog.js';
+import { TS_ErrorBoundary } from '../TS_ErrorBoundary/index.js';
+import { Button } from '../Button/Button.js';
+import { LL_V_L } from '../Layouts/index.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className, stopPropagation } from '../../utils/tools.js';
+/**
+ * ##TS_Dialog
+ *
+ * This class defines the logic and render behavior for dialogs in the system.
+ * Any dialog class in the system is meant to inherit this class to utilize its features.
+ */
+export class TS_Dialog extends ComponentSync {
+    // ######################## Life Cycle ########################
+    __consumeDialogCloseEvent(dialogKey) {
+        return false;
+    }
+    componentDidMount() {
+        this._keyActionMapCreator();
+        const dialog = document.getElementById(this.props.dialogId);
+        dialog?.focus();
+        this.forceUpdate();
+    }
+    // ######################## KeyMap ########################
+    /**
+     * A map held per instance connecting a (keyboard)key to a dialog button.
+     * This map is filled in by calling _keyActionMapCreator with buttons.
+     * @protected
+     */
+    keyActionMap = {};
+    /**
+     * A function to fill in keyActionMap.
+     *
+     * This function receives an array of buttons and for each button will connect any associated
+     * keys to the button, to be used by dialogKeyEventHandler.
+     *
+     * Keep in mind:
+     *
+     * 1. If an associated key is found in more than one button, an error will be thrown.
+     *
+     * 2. This function must be called in the constructor of the inheriting class.
+     *
+     * @param buttons - an array of buttons of type DialogButton
+     */
+    _keyActionMapCreator = () => {
+        flatArray(filterInstances(_values(this.buttons()))).forEach(button => {
+            if (!button.associatedKeys?.length)
+                return;
+            const ref = React.createRef();
+            button.associatedKeys.forEach(key => {
+                if (this.keyActionMap[key])
+                    throw new BadImplementationException(`Trying to assign action to key ${key} more than once`);
+                this.keyActionMap[key] = ref;
+            });
+        });
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.dialogIsBusy ??= false;
+        return state;
+    }
+    dialogKeyEventHandler = (e) => {
+        e.persist();
+        if (e.key === 'Escape' && !this.state.dialogIsBusy)
+            this.closeDialog();
+        this.keyActionMap[e.key]?.current?.click(e);
+    };
+    // ######################## Utils ########################
+    _buttonsCreator = (buttons) => {
+        if (!buttons?.length)
+            return undefined;
+        return _jsx(_Fragment, { children: buttons.map((button, i) => {
+                const ref = button.associatedKeys ? this.keyActionMap[button.associatedKeys[0]] : undefined;
+                return (button.renderer ?? TS_Dialog.button)(button, i, ref);
+            }) });
+    };
+    closeDialog = (force = false) => {
+        if (this.state.error)
+            this.logError(this.state.error);
+        ModuleFE_Dialog.close(force, this.props.dialogKey);
+    };
+    // ######################## Render - Header ########################
+    dialogHeader = (headerContent) => {
+        return headerContent && _jsx("div", { className: 'ts-dialog__header', children: headerContent });
+    };
+    renderHeader = () => {
+        return undefined;
+    };
+    // ######################## Render - Main ########################
+    dialogBody = (mainContent) => {
+        return mainContent && _jsx("div", { className: 'ts-dialog__main', children: mainContent });
+    };
+    renderBody = () => {
+        return undefined;
+    };
+    // ######################## Render - Buttons ########################
+    dialogButtons = (buttons) => {
+        if (_values(buttons).every(arr => !arr || !arr.length))
+            return undefined;
+        return _jsxs("div", { className: 'ts-dialog__buttons', children: [buttons.left && _jsx("div", { className: 'ts-dialog__buttons__left', children: this._buttonsCreator(buttons.left) }), buttons.center &&
+                    _jsx("div", { className: 'ts-dialog__buttons__center', children: this._buttonsCreator(buttons.center) }), buttons.right && _jsx("div", { className: 'ts-dialog__buttons__right', children: this._buttonsCreator(buttons.right) })] });
+    };
+    buttons = () => {
+        return {};
+    };
+    performAction = (action) => {
+        this.setState({ dialogIsBusy: true }, async () => {
+            await action();
+            if (this.mounted)
+                this.setState({ dialogIsBusy: false });
+        });
+    };
+    // ######################## Render ########################
+    render() {
+        let buttons = {};
+        let mainContent;
+        let headerContent;
+        try {
+            buttons = this.buttons();
+            mainContent = this.renderBody();
+            headerContent = this.renderHeader();
+        }
+        catch (err) {
+            if (!this.state.error)
+                this.setState({ error: err });
+        }
+        return _jsx(TS_ErrorBoundary, { error: this.state.error, onClick: () => this.closeDialog(true), children: _jsxs(LL_V_L, { className: _className('ts-dialog', this.props.className), id: this.props.dialogId, tabIndex: -1, onKeyDown: this.dialogKeyEventHandler, onClick: stopPropagation, onContextMenu: stopPropagation, children: [this.dialogHeader(headerContent), this.dialogBody(mainContent), this.dialogButtons(buttons)] }) });
+    }
+    static button = (button, index, ref) => {
+        return _jsx(Button, { className: button.className, variant: button.variant, innerRef: ref, onClick: button.onClick, disabled: button.disabled, onDisabledClick: button.onDisabledClick, children: button.content }, `button-${index}`);
+    };
+    static Button_Cancel = {
+        content: 'Cancel',
+        onClick: () => ModuleFE_Dialog.close(true),
+        associatedKeys: ['Escape']
+    };
+}

package/components/TS_Dialog/TS_Dialog.scss

@@ -0,0 +1,116 @@
+/*!
+ * 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.
+ */
+
+.ts-dialog {
+  //Dimensions
+  width: 600px;
+  min-height: 200px;
+  padding: 0;
+  margin: 0;
+
+  //Positioning
+  justify-content: space-between;
+
+  //Design
+  background: white;
+  overflow: hidden;
+  border-radius: 8px;
+  outline: none !important;
+
+  .ts-dialog__header {
+    //Dimensions
+    width: 100%;
+    height: 50px;
+    padding: 0 16px;
+
+    //Positioning
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    //Color
+    background: #808080;
+
+    //Font
+    font: {
+      size: 20px;
+      weight: bold;
+    }
+
+    .header__title {
+      font: {
+        size: inherit;
+        weight: inherit;
+      }
+      color: white;
+    }
+  }
+
+  .ts-dialog__main {
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .ts-dialog__buttons {
+    //Dimensions
+    width: 100%;
+    height: 50px;
+    flex-shrink: 0;
+    padding: 0 16px;
+    margin: 0;
+
+    //Positioning
+    display: grid;
+    column-gap: 8px;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-areas: "left center right";
+
+    .ts-dialog__buttons__left,
+    .ts-dialog__buttons__center,
+    .ts-dialog__buttons__right {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .ts-dialog__buttons__left {
+      justify-content: flex-start;
+      grid-area: left
+    }
+
+    .ts-dialog__buttons__center {
+      justify-content: center;
+      grid-area: center;
+    }
+
+    .ts-dialog__buttons__right {
+      justify-content: flex-end;
+      grid-area: right;
+    }
+
+    .ts-button,
+    .ts-busy-button {
+      margin: 0;
+    }
+  }
+}

package/components/TS_Dialog/TS_DialogOverlay.d.ts

@@ -0,0 +1,15 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Dialog_Model, DialogKey, DialogListener } from '../../component-modules/ModuleFE_Dialog.js';
+import './TS_DialogOverlay.scss';
+type Props = {};
+type State = {
+    models: Dialog_Model[];
+};
+export declare class TS_DialogOverlay extends ComponentSync<Props, State> implements DialogListener {
+    protected deriveStateFromProps(nextProps: Props): State;
+    __showDialog: (model: Dialog_Model) => void;
+    __closeDialog: (dialogModel?: DialogKey) => void;
+    render(): "" | import("react/jsx-runtime").JSX.Element;
+    private onOverlayClicked;
+}
+export {};