@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_ButtonGroup/TS_ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import './TS_ButtonGroup.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { InferProps, InferState } from '../../utils/types.js';
+import { ButtonGroup_Props, ButtonGroup_State } from './types.js';
+export declare class TS_ButtonGroup<ButtonKey extends string = string> extends ComponentSync<ButtonGroup_Props<ButtonKey>, ButtonGroup_State<ButtonKey>> {
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    private handleClick;
+    private handleClick_Controlled;
+    private handleClick_NonControlled;
+    private renderButton;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_ButtonGroup/TS_ButtonGroup.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ThisShouldNotHappenException } from '@nu-art/ts-common';
+import './TS_ButtonGroup.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { Button } from '../Button/Button.js';
+export class TS_ButtonGroup extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        if (nextProps.controlled) { //Logic for controlled group
+            state.selectedKey = nextProps.selectedKey;
+        }
+        else { //Logic for non-controlled group
+            state.selectedKey ??= nextProps.defaultButtonKey;
+        }
+        state.buttons = nextProps.buttons;
+        state.className = nextProps.className;
+        return state;
+    }
+    //################################### Logic ###################################
+    handleClick = async (e, buttonKey) => {
+        if (this.state.actionInProgress || this.state.selectedKey === buttonKey)
+            return;
+        if (this.props.controlled)
+            return this.handleClick_Controlled(e, buttonKey);
+        return this.handleClick_NonControlled(e, buttonKey);
+    };
+    handleClick_Controlled = async (e, buttonKey) => {
+        const result = this.props.clickCallback(buttonKey);
+        //Sync operation - just return
+        if (!(result instanceof Promise))
+            return;
+        //Async operation - Return a promise to trigger button loader
+        return new Promise((resolve) => {
+            //Set in progress for this component
+            this.setState({ actionInProgress: true }, async () => {
+                try {
+                    //Await the result
+                    await result;
+                }
+                catch (err) {
+                    this.logError(err);
+                }
+                finally {
+                    //Set not in progress, resolve the promise
+                    // @ts-ignore - prevents race conditions
+                    this.state.actionInProgress = false;
+                    this.forceUpdate();
+                    resolve();
+                    // this.setState({actionInProgress: false}, () => resolve());
+                }
+            });
+        });
+    };
+    handleClick_NonControlled = async (e, buttonKey) => {
+        const button = this.state.buttons.find(button => button.key === buttonKey);
+        if (!button)
+            throw new ThisShouldNotHappenException(`Got to handle click with button key ${buttonKey}, but no button with this key exists in the state`);
+        const result = button.onClick(e);
+        //Sync operation - just return
+        if (!(result instanceof Promise))
+            return;
+        //Async operation - Return a promise to trigger button loader
+        return new Promise((resolve) => {
+            //Set in progress for this component
+            this.setState({ actionInProgress: true }, async () => {
+                try {
+                    //Await the result
+                    await result;
+                    //Set not in progress, switch the selected button key, resolve the promise
+                    this.setState({ actionInProgress: false, selectedKey: buttonKey }, () => resolve());
+                }
+                catch (err) {
+                    this.logError(e);
+                    //Set not in progress, resolve the promise
+                    this.setState({ actionInProgress: false }, () => resolve());
+                }
+            });
+        });
+    };
+    //################################### Render ###################################
+    renderButton = (button, index) => {
+        const selectedButton = button.key === this.state.selectedKey;
+        // when async operation is ongoing all should be disabled
+        const disableButtons = button.disabled || this.state.actionInProgress;
+        const buttonClassName = _className(selectedButton && 'selected', button.className);
+        const separatorClassName = _className('separator', selectedButton && 'invisible');
+        return _jsxs(React.Fragment, { children: [(index !== 0) && _jsx("div", { className: separatorClassName }), _jsx(Button, { variant: 'button-group-button', className: buttonClassName, id: `button-${button.key}`, onClick: e => this.handleClick(e, button.key), disabled: disableButtons, children: button.label })] }, button.key);
+    };
+    render() {
+        const className = _className('ts-button-group', this.props.direction, this.state.className);
+        return _jsx("div", { className: className, children: this.props.buttons.map((button, index) => this.renderButton(button, index)) });
+    }
+}

package/components/TS_ButtonGroup/TS_ButtonGroup.scss

@@ -0,0 +1,58 @@
+@mixin ButtonGroupElement($direction, $selectedBorderRadius) {
+  .ts-button {
+    --ts-button--content-color: white;
+    background: transparent;
+    border-radius: 0;
+    height: 100%;
+    min-height: unset;
+
+    &.selected {
+      border-radius: $selectedBorderRadius;
+      background: gray;
+
+      &:not(.disabled) + .separator {
+        opacity: 0;
+      }
+    }
+
+    &:disabled {
+      --ts-button--content-color: #c2c2c2;
+      background: #cdcdcd;
+      cursor: not-allowed;
+    }
+  }
+
+  .separator {
+    flex-shrink: 0;
+    background: black;
+    transition: 300ms opacity ease-out;
+
+    @if ($direction == 'horizontal') {
+      height: 100%;
+      width: 2px;
+    }
+
+    @if ($direction == 'vertical') {
+      width: 100%;
+      height: 2px;
+    }
+
+    &.invisible {
+      opacity: 0;
+    }
+  }
+}
+
+.ts-button-group {
+  display: flex;
+
+  &.horizontal {
+    height: 32px;
+    @include ButtonGroupElement('horizontal', 2px);
+  }
+
+  &.vertical {
+    flex-direction: column;
+    @include ButtonGroupElement('vertical', 2px);
+  }
+}

package/components/TS_ButtonGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './TS_ButtonGroup.js';

package/components/TS_ButtonGroup/index.js

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './TS_ButtonGroup.js';

package/components/TS_ButtonGroup/types.d.ts

@@ -0,0 +1,38 @@
+import { ResolvableContent } from '@nu-art/ts-common';
+import * as React from 'react';
+export type ButtonGroupItem_Controlled<K extends string> = {
+    key: K;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type ButtonGroupItem_NonControlled<K extends string> = ButtonGroupItem_Controlled<K> & {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => (Promise<void> | void);
+};
+export type ButtonGroupItem<K extends string, Controlled extends boolean> = Controlled extends true ? ButtonGroupItem_Controlled<K> : ButtonGroupItem_NonControlled<K>;
+export type ButtonGroupItems<ButtonKeys extends string, Controlled extends boolean> = {
+    [K in ButtonKeys]: ButtonGroupItem<K, Controlled>;
+}[ButtonKeys][];
+export type ButtonGroup_Props_Controlled<ButtonKey extends string> = {
+    controlled: true;
+    buttons: ButtonGroupItems<ButtonKey, true>;
+    clickCallback: (key: ButtonKey) => Promise<void> | void;
+    selectedKey?: ButtonKey;
+};
+type ButtonGroup_Props_NonControlled<ButtonKey extends string> = {
+    controlled: false | undefined;
+    buttons: ButtonGroupItems<ButtonKey, false>;
+    defaultButtonKey?: ButtonKey;
+};
+export type ButtonGroup_Props<ButtonKey extends string> = {
+    direction: 'horizontal' | 'vertical';
+    className?: string;
+    loaderRenderer?: ResolvableContent<React.ReactNode>;
+} & (ButtonGroup_Props_NonControlled<ButtonKey> | ButtonGroup_Props_Controlled<ButtonKey>);
+export type ButtonGroup_State<ButtonKey extends string> = {
+    selectedKey?: ButtonKey;
+    className?: string;
+    actionInProgress?: boolean;
+    buttons: ButtonGroupItems<ButtonKey, boolean>;
+};
+export {};

package/components/TS_ButtonGroup/types.js

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

package/components/TS_ButtonLoader/TS_ButtonLoader.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import './TS_ButtonLoader.scss';
+export declare class TS_ButtonLoader extends React.Component {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_ButtonLoader/TS_ButtonLoader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import './TS_ButtonLoader.scss';
+export class TS_ButtonLoader extends React.Component {
+    render() {
+        return _jsxs("div", { className: "ts-button-loader", children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] });
+    }
+}

package/components/TS_ButtonLoader/TS_ButtonLoader.scss

@@ -0,0 +1,63 @@
+.ts-button-loader {
+  display: inline-block;
+  position: relative;
+  width: 52px;
+  height: 14px;
+}
+
+.ts-button-loader div {
+  position: absolute;
+  top: 2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.ts-button-loader div:nth-child(1) {
+  left: -2px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.ts-button-loader div:nth-child(2) {
+  left: -2px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.ts-button-loader div:nth-child(3) {
+  left: 22px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.ts-button-loader div:nth-child(4) {
+  left: 46px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}

package/components/TS_ButtonLoader/index.d.ts

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

package/components/TS_ButtonLoader/index.js

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

package/components/TS_Card/TS_Card.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import './TS_Card.scss';
+import { LinearLayoutProps } from '../Layouts/index.js';
+export declare class TS_Card extends React.Component<LinearLayoutProps> {
+    shouldComponentUpdate(): boolean;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_Card/TS_Card.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { _className } from '../../utils/tools.js';
+import './TS_Card.scss';
+import { TS_ErrorBoundary } from '../TS_ErrorBoundary/index.js';
+export class TS_Card extends React.Component {
+    shouldComponentUpdate() {
+        return true;
+    }
+    render() {
+        const { children, className, innerRef, ...rest } = this.props;
+        return _jsx("div", { ...rest, className: _className('ts-card', className), children: _jsx(TS_ErrorBoundary, { children: children }) });
+    }
+}

package/components/TS_Card/TS_Card.scss

@@ -0,0 +1,7 @@
+.ts-card {
+  border-radius: 5px;
+  border: 1px solid #4f4f4f;
+  padding: 10px;
+  height: 100%;
+  width: 100%;
+}

package/components/TS_Card/index.d.ts

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

package/components/TS_Card/index.js

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

package/components/TS_Checkbox/ATS_CheckboxV2.d.ts

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

package/components/TS_Checkbox/ATS_CheckboxV2.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { thunderstormATSGroups } from '../../consts.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { Grid } from '../Layouts/index.js';
+import './ATS_CheckboxV2.scss';
+import { TS_CheckboxV2 } from './TS_CheckboxV2.js';
+import { voidFunction } from '@nu-art/ts-common';
+class ATS_CheckboxV2_Class extends ComponentSync {
+    render() {
+        return _jsxs(Grid, { id: 'ats-checkbox-v2', onClick: () => console.log('Grid Click'), children: [this.render_Headers(), this.render_Enabled(), this.render_Disabled(), this.render_Free()] });
+    }
+    render_Headers = () => {
+        return _jsxs(_Fragment, { children: [_jsx("div", { children: "State" }), _jsx("div", { children: "Checked" }), _jsx("div", { children: "Unchecked" }), _jsx("div", { children: "indeterminate" })] });
+    };
+    render_Enabled = () => {
+        return _jsxs(_Fragment, { children: [_jsx("div", { children: "Enabled" }), _jsx(TS_CheckboxV2, { checked: true, label: 'text', onCheck: voidFunction }), _jsx(TS_CheckboxV2, { checked: false, label: 'text', onCheck: voidFunction }), _jsx(TS_CheckboxV2, { checked: undefined, label: 'text', onCheck: voidFunction })] });
+    };
+    render_Disabled = () => {
+        return _jsxs(_Fragment, { children: [_jsx("div", { children: "Disabled" }), _jsx(TS_CheckboxV2, { checked: true, label: 'text', onCheck: voidFunction, disabled: true }), _jsx(TS_CheckboxV2, { checked: false, label: 'text', onCheck: voidFunction, disabled: true }), _jsx(TS_CheckboxV2, { checked: undefined, label: 'text', onCheck: voidFunction, disabled: true })] });
+    };
+    render_Free = () => {
+        return _jsxs(_Fragment, { children: [_jsx("div", { children: "Test" }), _jsx(TS_CheckboxV2, { checked: this.state.checked, onCheck: checked => this.setState({ checked }), label: 'Text' })] });
+    };
+}
+export const ATS_CheckboxV2 = {
+    key: 'checkbox-v2',
+    name: 'Checkbox V2',
+    group: thunderstormATSGroups,
+    renderer: ATS_CheckboxV2_Class,
+};

package/components/TS_Checkbox/ATS_CheckboxV2.scss

@@ -0,0 +1,4 @@
+#ats-checkbox-v2 {
+  grid-template-columns: repeat(4, 1fr);
+  row-gap: 10px;
+}

package/components/TS_Checkbox/TS_Checkbox.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_Checkbox.scss';
+import { ComponentProps_Error } from '../types.js';
+import { SubsetKeys, TS_Object } from '@nu-art/ts-common';
+import { UIProps_EditableItem } from '../../utils/EditableItem.js';
+type TemplatingProps_TS_Checkbox = ComponentProps_Error & Omit<HTMLProps<HTMLDivElement>, 'ref'> & {
+    disabled?: boolean;
+    rounded?: boolean;
+    checked?: boolean;
+    icon?: React.ReactNode;
+};
+export type Props_Checkbox = TemplatingProps_TS_Checkbox & React.PropsWithChildren<{
+    id?: string;
+    onCheck?: (checked: boolean, e: React.MouseEvent<HTMLDivElement>) => void;
+}>;
+export type EditableItemProps_TS_Checkbox<T extends TS_Object & {
+    [k in K]?: any;
+}, K extends SubsetKeys<keyof T, T, boolean | undefined>> = Omit<Props_Checkbox, 'checked'> & UIProps_EditableItem<T, K, boolean | undefined> & {
+    checked?: boolean;
+    onCheck?: (value: boolean, e: React.MouseEvent<HTMLDivElement>) => void;
+};
+type State_Checkbox = {
+    checked: boolean;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Checkbox made simple..
+ *
+ * <b>SCSS:</b>
+ * ```scss
+ * .ts-checkbox ts-checkbox__checked/ts-checkbox__unchecked ts-checkbox__disabled ts-checkbox__rounded {
+ * 	 .ts-checkbox__inner ts-checkbox__checked/ts-checkbox__unchecked ts-checkbox__disabled ts-checkbox__rounded {
+ *
+ * 	 }
+ * }
+ * ```
+ */
+export declare class TS_Checkbox extends ComponentSync<Props_Checkbox, State_Checkbox> {
+    static readonly editable: (templateProps: TemplatingProps_TS_Checkbox) => <T extends TS_Object & { [k in K]?: any; }, K extends SubsetKeys<keyof T, T, boolean | undefined>>(props: EditableItemProps_TS_Checkbox<T, K>) => import("react/jsx-runtime").JSX.Element;
+    constructor(p: Props_Checkbox);
+    protected deriveStateFromProps(nextProps: Props_Checkbox, state: State_Checkbox): State_Checkbox;
+    private onCheckboxClick;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Checkbox/TS_Checkbox.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import './TS_Checkbox.scss';
+/**
+ * Checkbox made simple..
+ *
+ * <b>SCSS:</b>
+ * ```scss
+ * .ts-checkbox ts-checkbox__checked/ts-checkbox__unchecked ts-checkbox__disabled ts-checkbox__rounded {
+ * 	 .ts-checkbox__inner ts-checkbox__checked/ts-checkbox__unchecked ts-checkbox__disabled ts-checkbox__rounded {
+ *
+ * 	 }
+ * }
+ * ```
+ */
+export class TS_Checkbox extends ComponentSync {
+    static editable = (templateProps) => {
+        return (props) => {
+            const checked = props.editable.get(props.prop);
+            return _jsx(TS_Checkbox, { ...templateProps, ...props, checked: checked, onCheck: checked => props.editable.updateObj({ [props.prop]: checked }) });
+        };
+    };
+    constructor(p) {
+        super(p);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.checked = nextProps.checked ?? false;
+        state.disabled = nextProps.disabled;
+        state.className = nextProps.className;
+        return state;
+    }
+    onCheckboxClick = (e) => {
+        if (this.state.disabled)
+            return;
+        this.props.onCheck?.(!this.state.checked, e);
+    };
+    render() {
+        const checkedClass = this.state.checked && 'ts-checkbox__button__checked' || 'ts-checkbox__button__unchecked';
+        const disabledClass = this.state.disabled && 'ts-checkbox__button__disabled';
+        const roundedClass = this.props.rounded && 'ts-checkbox__button__rounded';
+        const className = _className('ts-checkbox__button', disabledClass, checkedClass, roundedClass);
+        const innerClassName = _className('ts-checkbox__button__inner', disabledClass, checkedClass, roundedClass);
+        return _jsxs("div", { className: _className('ts-checkbox', this.state.className, this.state.disabled && 'ts-checkbox__disabled'), onClick: this.onCheckboxClick, children: [_jsx("div", { id: this.props.id, className: className, children: this.props.icon ? this.props.icon : _jsx("div", { className: innerClassName }) }), this.props.children && _jsx("div", { className: "ts-checkbox__content", children: this.props.children })] });
+    }
+}

package/components/TS_Checkbox/TS_Checkbox.scss

@@ -0,0 +1,62 @@
+/*!
+ * 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-checkbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+
+  .ts-checkbox__content {
+    margin-inline-start: 8px;
+  }
+
+  .ts-checkbox__button {
+    border: 1px solid #68678d50;
+    box-shadow: 0 0 1px 0 #867979;
+    padding: 1px;
+
+    &.ts-checkbox__button__rounded {
+      border-radius: 50%;
+    }
+
+    & .ts-checkbox__button__disabled {
+      // ...
+    }
+
+    .ts-checkbox__button__inner {
+      width: 18px;
+      height: 18px;
+
+      &.ts-checkbox__button__rounded {
+        border-radius: 50%;
+      }
+
+      &.ts-checkbox__button__checked {
+        background: #4fa7ff;
+        border: .5px white solid;
+      }
+
+      &.ts-checkbox__button__unchecked {
+      }
+    }
+  }
+}

package/components/TS_Checkbox/TS_CheckboxV2.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ResolvableContent } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_CheckboxV2.scss';
+type IconSpec = {
+    checked: ResolvableContent<React.ReactNode>;
+    unChecked: ResolvableContent<React.ReactNode>;
+    indeterminate: ResolvableContent<React.ReactNode>;
+};
+type Props = {
+    checked: boolean | undefined;
+    onCheck: (nextCheckState: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    customIcons?: Partial<IconSpec>;
+};
+type State = {
+    checked: boolean | undefined;
+    label: string;
+    disabled: boolean;
+    id: string;
+    className?: string;
+    customIcons?: Partial<IconSpec>;
+};
+export declare class TS_CheckboxV2 extends ComponentSync<Props, State> {
+    private defaultIconSpec;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private onChange;
+    private resolveIconNode;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Input;
+    private render_Icon;
+    private render_Label;
+}
+export {};

package/components/TS_Checkbox/TS_CheckboxV2.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { exists, generateHex, resolveContent } from '@nu-art/ts-common';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import './TS_CheckboxV2.scss';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class TS_CheckboxV2 extends ComponentSync {
+    defaultIconSpec = {
+        checked: () => _jsx(TS_Icons.v.component, {}),
+        unChecked: () => _jsx(TS_Icons.x.component, {}),
+        indeterminate: () => _jsx(TS_Icons.dash.component, {}),
+    };
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.checked = nextProps.checked;
+        state.disabled = !!nextProps.disabled;
+        state.label = nextProps.label;
+        state.id ??= nextProps.id ?? generateHex(8);
+        state.className = nextProps.className;
+        state.customIcons = nextProps.customIcons;
+        return state;
+    }
+    //######################### Logic #########################
+    onChange = (e) => {
+        const next = e.target.checked;
+        e.stopPropagation();
+        this.props.onCheck(next);
+    };
+    resolveIconNode = () => {
+        const spec = this.state.customIcons ?? this.defaultIconSpec;
+        return exists(this.state.checked)
+            ? (this.state.checked
+                ? spec.checked
+                : spec.unChecked) : spec.indeterminate;
+    };
+    //######################### Render #########################
+    render() {
+        const className = _className('ts-checkbox-v2', this.state.className);
+        return _jsxs("label", { className: className, onClick: e => e.stopPropagation(), children: [this.render_Input(), this.render_Icon(), this.render_Label()] });
+    }
+    render_Input = () => {
+        const checked = this.state.checked;
+        const ariaChecked = exists(checked) ? (checked ? 'true' : 'false') : 'mixed';
+        return _jsx("input", { type: 'checkbox', id: this.state.id, disabled: this.state.disabled, onChange: this.onChange, checked: !!this.state.checked, "aria-checked": ariaChecked });
+    };
+    render_Icon = () => {
+        const iconNode = resolveContent(this.resolveIconNode());
+        return _jsx("span", { className: 'ts-checkbox-v2__icon', children: iconNode });
+    };
+    render_Label = () => {
+        return _jsx("span", { className: 'ts-checkbox-v2__label', children: this.state.label });
+    };
+}