@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Table/TS_Table.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { _className } from '../../utils/tools.js';
+import './TS_Table.scss';
+export class TS_Table extends React.Component {
+    static defaultProps = {
+        actionHeaderRenderer: (action) => _jsx("div", { children: action })
+    };
+    constructor(p) {
+        super(p);
+    }
+    render() {
+        const tableProps = typeof this.props.table === 'function' ? this.props.table() : this.props.table;
+        const tableBodyProps = typeof this.props.body === 'function' ? this.props.body() : this.props.body;
+        const tableHeadProps = typeof this.props.head === 'function' ? this.props.head() : this.props.head;
+        return (_jsxs("table", { id: this.props.id, ...tableProps, className: _className('ts-table', tableProps?.className), children: [_jsx("thead", { ...tableHeadProps, className: _className('ts-table__head', tableHeadProps?.className), children: this.renderTableHeader() }), _jsx("tbody", { ...tableBodyProps, className: _className('ts-table__body', tableBodyProps?.className), children: this.renderTableBody() })] }));
+    }
+    renderTableHeader() {
+        if (!this.props.headerRenderer)
+            return;
+        let renderers;
+        if (typeof this.props.headerRenderer === 'object')
+            renderers = this.props.headerRenderer;
+        else
+            renderers = this.props.header.reduce((toRet, headerProp) => {
+                const prop = typeof headerProp === 'object' ? headerProp.header : headerProp;
+                toRet[prop] = this.props.headerRenderer;
+                return toRet;
+            }, {});
+        const tablePropsTR = typeof this.props.tr === 'function' ? this.props.tr(undefined, -1) : this.props.tr;
+        const classNameTR = _className('ts-table__tr', tablePropsTR?.className);
+        return (_jsx("tr", { ...tablePropsTR, className: classNameTR, children: this.props.header.map((header, index) => {
+                const prop = typeof header === 'object' ? header.header : header;
+                const tablePropsTH = typeof this.props.th === 'function' ? this.props.th(prop) : this.props.th;
+                let classNameTH = _className('ts-table__th', tablePropsTH?.className);
+                const style = {};
+                if (typeof header === 'object') {
+                    const width = typeof header.widthPx === 'number' ? `${header.widthPx}px` : header.widthPx;
+                    classNameTH = _className('ts-table__th', tablePropsTH?.className, header.className);
+                    style.width = width;
+                    style.minWidth = typeof header.widthPx === 'number' ? width : '';
+                }
+                return _jsx("th", { ...tablePropsTH, className: classNameTH, style: style, children: renderers[prop]?.(prop) }, `${this.props.id}-${index}`);
+            }) }, `${this.props.id}-0`));
+    }
+    renderTableBody() {
+        let renderers;
+        if (typeof this.props.cellRenderer === 'object')
+            renderers = this.props.cellRenderer;
+        else
+            renderers = this.props.header.reduce((toRet, headerProp) => {
+                const prop = typeof headerProp === 'object' ? headerProp.header : headerProp;
+                toRet[prop] = this.props.cellRenderer;
+                return toRet;
+            }, {});
+        return this.props.rows.map((row, rowIndex) => {
+            const tablePropsTR = typeof this.props.tr === 'function' ? this.props.tr(row, rowIndex) : this.props.tr;
+            const classNameTR = _className('ts-table__tr', tablePropsTR?.className);
+            return (_jsx("tr", { ...tablePropsTR, className: classNameTR, children: this.props.header.map((header, columnIndex) => {
+                    const prop = typeof header === 'object' ? header.header : header;
+                    const tablePropsTD = typeof this.props.td === 'function' ? this.props.td(row, rowIndex, prop) : this.props.td;
+                    let classNameTD = _className('ts-table__td', tablePropsTD?.className, typeof header === 'object' && header.className);
+                    const style = {};
+                    if (!this.props.headerRenderer && typeof header === 'object' && rowIndex === 0) {
+                        const width = typeof header.widthPx === 'number' ? `${header.widthPx}px` : header.widthPx;
+                        style.width = width;
+                        classNameTD = _className('ts-table__td', tablePropsTD?.className, header.className);
+                        style.minWidth = typeof header.widthPx === 'number' ? width : '';
+                    }
+                    return _jsx("td", { ...tablePropsTD, className: classNameTD, style: style, children: renderers[prop]?.(prop, row, rowIndex) }, `${this.props.id}-${columnIndex}`);
+                }) }, `${this.props.id}-${rowIndex}`));
+        });
+    }
+}

package/components/TS_Table/TS_Table.scss

@@ -0,0 +1,51 @@
+/*!
+ * 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-table {
+  //Dimensions
+  width: 100%;
+
+  //Border
+  border: 3px solid black;
+  border-spacing: 0;
+  //Children
+  .ts-table__head {
+    background: #ccc;
+
+    .ts-table__tr {
+      border-bottom: 3px solid black;
+      .ts-table__th {
+        border: 2px solid black;
+
+      }
+    }
+  }
+
+  .ts-table__body {
+    background: #ddd;
+
+    .ts-table__tr {
+      .ts-table__td {
+        border: 2px solid black;
+      }
+    }
+  }
+}

package/components/TS_Table/index.d.ts

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

package/components/TS_Table/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_Table.js';

package/components/TS_Tabs/TS_Tabs.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_Tabs.scss';
+export type Tab = {
+    title: React.ReactNode | (() => React.ReactNode);
+    content: React.ReactNode | (() => React.ReactNode);
+    uid: string;
+    disabled?: boolean;
+};
+export type Props_Tabs = {
+    id?: string;
+    persistSelection?: boolean;
+    selectedTabId?: string;
+    tabs: Tab[];
+    className?: string;
+    tabsHeaderClass?: string;
+    tabsContentClass?: string;
+    /**
+     * Called only after clicking on a tab. Not called when a default first tab is selected during render.
+     * @param selected id of the selected tab.
+     */
+    onSelected?: (selectedTabId: string) => void;
+    scrollToSelected?: boolean;
+};
+type State = {
+    tabs: Tab[];
+    selectedTabId?: string;
+};
+/**
+ * Tabs made easy
+ *
+ *
+ * <b>SCSS:</b>
+ * ```scss
+ * .ts-tabs {
+ *   .ts-tabs__tabs-header {
+ *     .ts-tabs__tab {}
+ *     .ts-tabs__focusedTabId {}
+ *     .unselectable {}
+ *   }
+ *
+ *   .ts-tabs__content {}
+ * }
+ * ```
+ */
+export declare class TS_Tabs extends ComponentSync<Props_Tabs, State> {
+    constructor(p: Props_Tabs);
+    protected deriveStateFromProps(nextProps: Props_Tabs, state: State): State;
+    componentDidUpdate(prevProps: Readonly<Props_Tabs>, prevState: Readonly<State>, snapshot?: any): void;
+    private getStorageKey;
+    selectOnClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, tab: Tab) => void;
+    private scrollToSelectedTab;
+    render(): "" | import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Tabs/TS_Tabs.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className, stopPropagation } from '../../utils/tools.js';
+import './TS_Tabs.scss';
+import { StorageKey } from '../../modules/ModuleFE_LocalStorage.js';
+/**
+ * Tabs made easy
+ *
+ *
+ * <b>SCSS:</b>
+ * ```scss
+ * .ts-tabs {
+ *   .ts-tabs__tabs-header {
+ *     .ts-tabs__tab {}
+ *     .ts-tabs__focusedTabId {}
+ *     .unselectable {}
+ *   }
+ *
+ *   .ts-tabs__content {}
+ * }
+ * ```
+ */
+export class TS_Tabs extends ComponentSync {
+    constructor(p) {
+        super(p);
+    }
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.tabs = nextProps.tabs;
+        state.selectedTabId = (nextProps.tabs.find(t => t.uid === nextProps.selectedTabId)?.uid)
+            || this.getStorageKey()?.get('')
+            || this.state?.selectedTabId
+            || nextProps.tabs[0]?.uid;
+        //Default to first tab if provided selectedTabId is not in the tabs list
+        if (!state.tabs.find(tab => tab.uid === state.selectedTabId))
+            state.selectedTabId = state.tabs[0].uid;
+        return state;
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.scrollToSelected)
+            this.scrollToSelectedTab();
+    }
+    //######################### Logic #########################
+    getStorageKey() {
+        if (!this.props.id)
+            return;
+        return new StorageKey(`ts-tabs__${this.props.id}`, this.props.persistSelection);
+    }
+    selectOnClick = (e, tab) => {
+        stopPropagation(e);
+        if (tab.disabled)
+            return;
+        const selectedTabId = tab.uid;
+        if (!selectedTabId)
+            return;
+        this.getStorageKey()?.set(selectedTabId);
+        if (this.props.onSelected) {
+            this.props.onSelected(selectedTabId);
+            return;
+        }
+        this.setState({ selectedTabId });
+    };
+    scrollToSelectedTab = () => {
+        if (!this.props.selectedTabId)
+            return;
+        const selectedTab = document.getElementById(this.props.selectedTabId);
+        if (!selectedTab)
+            return;
+        const deltaRight = selectedTab.getBoundingClientRect().right - window.innerWidth;
+        if (deltaRight <= 1)
+            return;
+        selectedTab.parentElement?.scroll({
+            left: deltaRight,
+            behavior: 'smooth',
+        });
+    };
+    //######################### Render #########################
+    render() {
+        const tabs = this.state.tabs;
+        if (!tabs)
+            return '';
+        const getTitle = (tab) => {
+            if (typeof tab.title === 'function')
+                return tab.title();
+            return tab.title;
+        };
+        const getContent = (tab) => {
+            if (!tab)
+                return '';
+            if (typeof tab.content === 'function')
+                return tab.content();
+            return tab.content;
+        };
+        const wrapperClass = _className('ts-tabs', this.props.className);
+        const headerClass = _className('ts-tabs__tabs-header', this.props.tabsHeaderClass);
+        const contentClass = _className('ts-tabs__content', this.props.tabsContentClass);
+        return (_jsxs("div", { id: this.props.id, className: wrapperClass, children: [_jsxs("div", { className: headerClass, children: [tabs.map(tab => {
+                            const tabClasses = _className('ts-tabs__tab', 'unselectable', this.state.selectedTabId === tab.uid ? 'ts-tabs__focused' : undefined, tab.disabled ? 'disabled' : undefined);
+                            return _jsx("div", { id: tab.uid, className: tabClasses, onClick: (e) => this.selectOnClick(e, tab), children: getTitle(tab) }, tab.uid);
+                        }), _jsx("span", { className: 'ts-tabs__empty-tab' })] }), _jsx("div", { className: contentClass, children: getContent(tabs.find(tab => tab.uid === this.state.selectedTabId)) })] }));
+    }
+}

package/components/TS_Tabs/TS_Tabs.scss

@@ -0,0 +1,103 @@
+/*!
+ * 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-tabs {
+
+  //Dimensions
+  width: 100%;
+  min-height: 200px;
+  box-sizing: border-box;
+
+  //Display
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+
+  //Children
+  .ts-tabs__tabs-header {
+    //Dimensions
+    height: 40px;
+    width: 100%;
+    flex-shrink: 0;
+    overflow-x: auto;
+
+    //Display
+    display: flex;
+    justify-content: flex-start;
+    //Children
+    .ts-tabs__tab {
+      //Dimensions
+      padding-inline: 12px;
+      min-width: 100px;
+      height: 100%;
+      flex-shrink: 0;
+
+      //Display
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      cursor: pointer;
+
+      //Animations
+      transition: transform 50ms linear;
+
+      //Colors
+      background-color: #ccc;
+      color: black;
+
+      //Border
+      border: 1px solid #808080;
+
+      //Pseudos
+      &.disabled {
+        background-color: #ccc;
+      }
+
+      &.ts-tabs__focused {
+        background-color: #bbb;
+      }
+
+      &:hover {
+        background-color: #bbb;
+      }
+    }
+
+    .ts-tabs__empty-tab {
+      height: 100%;
+      width: 0;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+
+  .ts-tabs__content {
+    //Dimensions
+    width: 100%;
+    flex-grow: 1;
+
+    //Display:
+    background: #ccc;
+    border: 2px solid #808080;
+
+    overflow-y: auto;
+  }
+}

package/components/TS_Tabs/index.d.ts

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

package/components/TS_Tabs/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_Tabs.js';

package/components/TS_Toaster/TS_Toast.d.ts

@@ -0,0 +1,5 @@
+import './TS_ToastOverlay.scss';
+import * as React from 'react';
+import './TS_Toast.scss';
+export type TS_ToastType = 'info' | 'success' | 'warning' | 'error' | string;
+export declare const TS_Toast: (content: string | React.ReactNode, toastType: TS_ToastType) => import("react/jsx-runtime").JSX.Element;

package/components/TS_Toaster/TS_Toast.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_ToastOverlay.scss';
+import { _className } from '../../utils/tools.js';
+import './TS_Toast.scss';
+export const TS_Toast = (content, toastType) => {
+    if (typeof content === 'string')
+        content = _jsx("span", { className: "ts-toast__content", children: content });
+    return _jsx("div", { className: _className('ts-toast', toastType), children: content });
+};

package/components/TS_Toaster/TS_Toast.scss

@@ -0,0 +1,80 @@
+/*!
+ * 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.
+ */
+@use 'sass:color';
+
+$percentage: 30%;
+@mixin box-shadow-color($color) {
+  box-shadow: 2px 2px 19px 1px rgba($color, 0.9);
+  -webkit-box-shadow: 2px 2px 19px 1px rgba($color, 0.9);
+  -moz-box-shadow: 2px 2px 19px 1px rgba($color, 0.9);
+}
+
+// container
+.ts-toast {
+  //Dimensions
+  min-height: 40px;
+  padding-inline: 8px;
+  padding-block: 4px;
+  min-width: 400px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  //Colors
+  background: #FFFFFF;
+
+  //Font
+  font: {
+    weight: 500;
+    size: 16px;
+  }
+  word-wrap: break-word;
+  letter-spacing: unset;
+
+  //Shadow
+  @include box-shadow-color(black);
+
+  //Border
+  border: 2px solid black;
+  border-radius: 6px;
+
+  &.info {
+    border-color: #49addb;
+    @include box-shadow-color(color.scale(#49addb, $lightness: -$percentage));
+  }
+
+  &.success {
+    border-color: #14a44c;
+    @include box-shadow-color(color.scale(#14a44c, $lightness: -$percentage));
+  }
+
+  &.warning {
+    border-color: #ffad42;
+    @include box-shadow-color(color.scale(#ffad42, $lightness: -$percentage));
+  }
+
+  &.error {
+    border-color: #bd1d12;
+    @include box-shadow-color(color.scale(#bd1d12, $lightness: -$percentage));
+  }
+}
+
+

package/components/TS_Toaster/TS_ToastOverlay.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Toast_Model, ToastListener } from '../../component-modules/ModuleFE_Toaster.js';
+type State = {
+    model?: Toast_Model;
+};
+export type ToastProps = {
+    id?: string;
+};
+export declare class TS_ToastOverlay extends ComponentSync<ToastProps, State> implements ToastListener {
+    protected deriveStateFromProps(nextProps: ToastProps): State;
+    __showToast: (model?: Toast_Model) => void;
+    render(): React.ReactNode;
+    protected renderToaster(toast: Toast_Model): React.ReactNode;
+}
+export {};

package/components/TS_Toaster/TS_ToastOverlay.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ModuleFE_Toaster } from '../../component-modules/ModuleFE_Toaster.js';
+export class TS_ToastOverlay extends ComponentSync {
+    deriveStateFromProps(nextProps) {
+        return { model: this.state?.model };
+    }
+    __showToast = (model) => {
+        this.setState({ model });
+        if (!model)
+            return;
+        const duration = model.duration;
+        if (duration <= 0)
+            return;
+        setTimeout(() => ModuleFE_Toaster.hideToast(model), duration);
+    };
+    render() {
+        const toast = this.state.model;
+        if (!toast?.content)
+            return null;
+        return this.renderToaster(toast);
+    }
+    renderToaster(toast) {
+        return (_jsx("div", { className: "ts-toaster", children: toast.content }));
+    }
+}

package/components/TS_Toaster/TS_ToastOverlay.scss

@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+// container
+.ts-toaster {
+  position: fixed;
+  top: 0;
+  left: auto;
+  bottom: unset;
+  display: inline-block;
+  right: auto;
+  margin: 16px;
+  z-index: 400;
+  background-color: #e8e8e8;
+}

package/components/TS_Toaster/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TS_ToastOverlay.js';
+export * from './TS_Toast.js';

package/components/TS_Toaster/index.js

@@ -0,0 +1,22 @@
+/*
+ * 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_ToastOverlay.js';
+export * from './TS_Toast.js';

package/components/TS_Toggle/ATS_Toggle.d.ts

@@ -0,0 +1,11 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { AppToolsScreen } from '../TS_AppTools/index.js';
+type State = {
+    checked: boolean;
+};
+export declare class ATS_Toggle extends ComponentSync<{}, State> {
+    static Screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: {}, state: State): State;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Toggle/ATS_Toggle.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TS_Toggle } from './TS_Toggle.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+export class ATS_Toggle extends ComponentSync {
+    static Screen = {
+        name: 'TS Toggle',
+        key: 'ts-toggle',
+        group: 'TS Components',
+        renderer: this,
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.checked ??= false;
+        return state;
+    }
+    render() {
+        return _jsx(TS_Toggle, { id: 'test-toggle', checked: this.state.checked, onCheck: () => this.setState({ checked: !this.state.checked }) });
+    }
+}