@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_Checkbox/TS_CheckboxV2.scss

@@ -0,0 +1,97 @@
+@use '@nu-art/ts-styles' as S;
+
+.ts-checkbox-v2 {
+  flex-shrink: 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  position: relative;
+
+  //Initial design for the custom icon
+  .ts-checkbox-v2__icon {
+    width: 16px;
+    height: 16px;
+    padding: 2px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+    transition: background 150ms, transform 100ms;
+    outline-offset: -1px;
+
+    .icon--wrapper {
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+  }
+
+  //Design for the text label
+  .ts-checkbox-v2__label {
+    color: #333;
+    font: {
+      size: 14px;
+      weight: 500;
+    }
+  }
+
+  //Keep the input focusable and accessible, but hidden on screen
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    border: 0;
+    white-space: nowrap;
+
+    //Enabled specific design
+    &:enabled {
+      //Allow hover and active transformations on icon
+      & + .ts-checkbox-v2__icon {
+        background: S.dark-blue(3);
+        @include S.color-svg(#fff);
+
+        &:hover {
+          background: S.dark-blue(2);
+        }
+
+        &:active {
+          transform: scale(0.9);
+          outline: 2px solid #fff;
+        }
+      }
+
+      //Design when also checked
+      &:checked {
+        //Give the icon a blue BG
+        & + .ts-checkbox-v2__icon {
+
+        }
+      }
+    }
+
+    //Disabled specific design
+    &:disabled {
+      & + .ts-checkbox-v2__icon {
+        cursor: not-allowed;
+        background: S.gray(4);
+        @include S.color-svg(#fff);
+      }
+
+      & + .ts-checkbox-v2__label {
+        color: S.light-gray(6);
+      }
+    }
+
+    &:focus {
+      & + .ts-checkbox-v2__icon {
+        outline: 2px solid #fff;
+      }
+    }
+  }
+}

package/components/TS_Checkbox/index.d.ts

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

package/components/TS_Checkbox/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_Checkbox.js';

package/components/TS_CheckboxGroup/ATS_CheckboxGroup.d.ts

@@ -0,0 +1,19 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { AppToolsScreen } from '../TS_AppTools/index.js';
+import './ATS_CheckboxGroup.scss';
+type Props = {};
+type State = {
+    selectedIdsGroup: string[];
+    selectedIdsSomeDisabled: string[];
+};
+export declare class ATS_CheckboxGroup extends ComponentSync<Props, State> {
+    static Screen: AppToolsScreen;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    private onChangeGroup;
+    private onChangeSomeDisabledGroup;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_CheckboxGroup;
+    private render_PartialDisabledCheckboxGroup;
+    private render_DisabledParent;
+}
+export {};

package/components/TS_CheckboxGroup/ATS_CheckboxGroup.js

@@ -0,0 +1,89 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { thunderstormATSGroups } from '../../consts.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { LL_V_L } from '../Layouts/index.js';
+import { TS_AppTools } from '../TS_AppTools/index.js';
+import './ATS_CheckboxGroup.scss';
+import { TS_CheckboxGroup } from "./TS_CheckboxGroup.js";
+import { voidFunction } from "@nu-art/ts-common";
+export class ATS_CheckboxGroup extends ComponentSync {
+    static Screen = {
+        key: 'ats-ts-checkbox-group',
+        name: 'CheckboxGroup',
+        group: thunderstormATSGroups,
+        renderer: this,
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.selectedIdsGroup ??= [];
+        state.selectedIdsSomeDisabled ??= [];
+        return state;
+    }
+    //######################### Logic #########################
+    onChangeGroup = (selectedIds) => {
+        this.setState({ selectedIdsGroup: selectedIds });
+    };
+    onChangeSomeDisabledGroup = (selectedIds) => {
+        this.setState({ selectedIdsSomeDisabled: selectedIds });
+    };
+    //######################### Render #########################
+    render() {
+        return _jsxs(LL_V_L, { id: 'ats__checkboxGroup', children: [TS_AppTools.renderPageHeader('Checkbox Group'), this.render_CheckboxGroup(), this.render_PartialDisabledCheckboxGroup(), this.render_DisabledParent()] });
+    }
+    render_CheckboxGroup = () => {
+        const options = [
+            {
+                id: '1',
+                label: 'first',
+            },
+            {
+                id: '2',
+                label: 'second',
+            },
+            {
+                id: '3',
+                label: 'third',
+            }
+        ];
+        return _jsx(TS_CheckboxGroup, { parent: { id: 'father', label: 'all' }, options: options, onChange: this.onChangeGroup, selectedIds: this.state.selectedIdsGroup });
+    };
+    render_PartialDisabledCheckboxGroup = () => {
+        const options = [
+            {
+                id: '1',
+                label: 'Disabled',
+                disabled: true,
+            },
+            {
+                id: '2',
+                label: 'Not Disabled',
+            },
+            {
+                id: '3',
+                label: 'Disabled 2',
+                disabled: true,
+            },
+            {
+                id: '4',
+                label: 'Not Disabled 2',
+            }
+        ];
+        return _jsx(TS_CheckboxGroup, { parent: { id: 'father', label: 'All' }, options: options, onChange: this.onChangeSomeDisabledGroup, selectedIds: this.state.selectedIdsSomeDisabled });
+    };
+    render_DisabledParent = () => {
+        const options = [
+            {
+                id: '1',
+                label: 'Not Disabled 1',
+            },
+            {
+                id: '2',
+                label: 'Not Disabled 2',
+            },
+            {
+                id: '3',
+                label: 'Not Disabled 3',
+            }
+        ];
+        return _jsx(TS_CheckboxGroup, { parent: { id: 'father', label: 'Disabled Father', disabled: true }, options: options, onChange: voidFunction, selectedIds: [] });
+    };
+}

package/components/TS_CheckboxGroup/ATS_CheckboxGroup.scss

@@ -0,0 +1,6 @@
+#ats__checkboxGroup {
+  height: 100%;
+  width: 100%;
+  gap: 20px;
+  padding: 20px;
+}

package/components/TS_CheckboxGroup/TS_CheckboxGroup.d.ts

@@ -0,0 +1,35 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_CheckboxGroup.scss';
+type CheckboxOption = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+export type Props_CheckboxGroup = {
+    parent: CheckboxOption;
+    options: CheckboxOption[];
+    selectedIds: string[];
+    onChange: (selectedIds: string[]) => void;
+    id?: string;
+    className?: string;
+};
+type State_CheckboxGroup = {
+    selectedIds: string[];
+    parent: CheckboxOption;
+    options: CheckboxOption[];
+    allSelected: boolean;
+    someSelected: boolean;
+    className?: string;
+};
+/**
+ * Checkbox Group Component
+ * Handles grouped selection logic for checkboxes.
+ */
+export declare class TS_CheckboxGroup extends ComponentSync<Props_CheckboxGroup, State_CheckboxGroup> {
+    constructor(p: Props_CheckboxGroup);
+    protected deriveStateFromProps(nextProps: Props_CheckboxGroup, state: State_CheckboxGroup): State_CheckboxGroup;
+    private onClickFather;
+    private onClickCheckbox;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_CheckboxGroup/TS_CheckboxGroup.js

@@ -0,0 +1,47 @@
+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_CheckboxGroup.scss';
+import { TS_Checkbox } from '../TS_Checkbox/index.js';
+import { LL_V_L } from '../Layouts/index.js';
+import { BadImplementationException } from '@nu-art/ts-common';
+/**
+ * Checkbox Group Component
+ * Handles grouped selection logic for checkboxes.
+ */
+export class TS_CheckboxGroup extends ComponentSync {
+    constructor(p) {
+        super(p);
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.selectedIds = nextProps.selectedIds;
+        state.options = nextProps.options;
+        if (!state.options.length)
+            throw new BadImplementationException('cannot have checkbox group without options');
+        state.allSelected = (state.selectedIds.length === state.options.length);
+        state.someSelected = !state.allSelected && state.selectedIds.length > 0;
+        state.parent = nextProps.parent;
+        state.className = nextProps.className;
+        return state;
+    }
+    onClickFather = () => {
+        const { options, allSelected, selectedIds } = this.state;
+        const selectableOptions = options.filter(option => !option.disabled);
+        const newSelectedIds = allSelected || selectableOptions.length === selectedIds.length
+            ? new Set()
+            : new Set(selectableOptions.map(option => option.id));
+        this.props.onChange([...newSelectedIds]);
+    };
+    onClickCheckbox = (id) => {
+        const newSelectedIds = new Set(this.state.selectedIds);
+        if (newSelectedIds.has(id))
+            newSelectedIds.delete(id);
+        else
+            newSelectedIds.add(id);
+        this.props.onChange([...newSelectedIds]);
+    };
+    render() {
+        const { selectedIds, someSelected, allSelected, options, parent, className } = this.state;
+        return (_jsxs(LL_V_L, { className: _className('ts-checkbox-group', className), id: this.props.id, children: [_jsx(TS_Checkbox, { checked: allSelected, className: _className('ts-checkbox-group__parent', someSelected && 'ts-checkbox-group__partial'), disabled: parent.disabled, onCheck: this.onClickFather, children: parent.label }), _jsx(LL_V_L, { className: 'ts-checkbox-group__children', children: options.map(option => (_jsx(TS_Checkbox, { checked: selectedIds.includes(option.id), disabled: option.disabled || parent.disabled, onCheck: () => this.onClickCheckbox(option.id), children: option.label }, option.id))) })] }));
+    }
+}

package/components/TS_CheckboxGroup/TS_CheckboxGroup.scss

@@ -0,0 +1,32 @@
+.ts-checkbox-group {
+  gap: 6px;
+
+  .ts-checkbox-group__parent {
+    align-items: center;
+    padding-left: 10px;
+
+    &.ts-checkbox-group__partial {
+      .ts-checkbox__button {
+        border: 1px solid #0054F7;
+        position: relative;
+      }
+
+      .ts-checkbox__button::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 70%;
+        height: 2px;
+        background-color: #0054F7;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  .ts-checkbox-group__children {
+    padding-left: 20px;
+    gap: 4px;
+  }
+}
+

package/components/TS_CheckboxGroup/index.d.ts

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

package/components/TS_CheckboxGroup/index.js

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

package/components/TS_CollapsableContainer/TS_CollapsableContainer.d.ts

@@ -0,0 +1,44 @@
+import { TypedMap } from '@nu-art/ts-common';
+import * as React from 'react';
+import './TS_CollapsableContainer.scss';
+import { ReactNode } from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type Props = {
+    headerRenderer: ReactNode | (() => ReactNode);
+    containerRenderer: ReactNode | (() => ReactNode);
+    collapsed?: boolean;
+    showCaret?: boolean;
+    onCollapseToggle?: (collapseState: boolean, e: React.MouseEvent) => void;
+    maxHeight?: number | string;
+    style?: TypedMap<string>;
+    className?: string;
+    id?: string;
+    customCaret?: ReactNode | (() => ReactNode);
+    flipHeaderOrder?: boolean;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    initialCollapsed?: boolean;
+    onMouseOver?: (e: React.MouseEvent) => void;
+    onHeaderRightClick?: (e: React.MouseEvent) => void;
+    innerRef?: React.RefObject<HTMLDivElement>;
+};
+type State = {
+    collapsed: boolean;
+    contentRef: React.RefObject<any>;
+    containerRef: React.RefObject<HTMLDivElement>;
+};
+export declare class TS_CollapsableContainer extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props): State;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void;
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    private setContainerHeight;
+    private toggleCollapse;
+    private isCollapsed;
+    refreshContainerHeight: () => void;
+    private renderCaret;
+    renderHeader(): import("react/jsx-runtime").JSX.Element;
+    renderContainer(): import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_CollapsableContainer/TS_CollapsableContainer.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import './TS_CollapsableContainer.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { LL_V_L } from '../Layouts/index.js';
+export class TS_CollapsableContainer extends ComponentSync {
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps) {
+        const state = this.state ? { ...this.state } : {};
+        state.collapsed = nextProps.collapsed ?? this.state?.collapsed ?? (nextProps.initialCollapsed ?? true);
+        state.contentRef ??= React.createRef();
+        state.containerRef ??= React.createRef();
+        return state;
+    }
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        this.setContainerHeight();
+    }
+    componentDidMount() {
+        if (this.state.collapsed)
+            this.setContainerHeight();
+        else
+            setTimeout(() => this.setContainerHeight(), 10);
+    }
+    //TODO: check if this is still supposed to be here
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        // let res = super.shouldComponentUpdate(nextProps, nextState, nextContext);
+        // if (!res)
+        // 	res = !compare(this.props.collapsed, nextProps.collapsed);
+        // return res;
+        return true;
+    }
+    //######################### Logic #########################
+    setContainerHeight = () => {
+        if (!this.state.containerRef.current)
+            return;
+        const currentContent = this.state.contentRef.current;
+        const maxHeight = this.state.collapsed
+            ? 0
+            : this.props.maxHeight ? this.props.maxHeight : currentContent.getBoundingClientRect().height;
+        this.state.containerRef.current.style.maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
+    };
+    toggleCollapse = (e) => {
+        //If shared-components is controlled, return
+        this.props.onCollapseToggle?.(this.isCollapsed(), e);
+        if (this.props.collapsed !== undefined)
+            return;
+        this.setState({ collapsed: !this.state.collapsed });
+    };
+    isCollapsed() {
+        //Return the collapse from props if controlled, otherwise state
+        return this.props.collapsed !== undefined ? this.props.collapsed : this.state.collapsed;
+    }
+    refreshContainerHeight = () => {
+        if (!this.state.collapsed)
+            this.setContainerHeight();
+    };
+    //######################### Render #########################
+    renderCaret() {
+        if (this.props.showCaret === false)
+            return '';
+        const collapsed = this.isCollapsed();
+        const className = _className('ts-collapsable-container__header__caret', collapsed ? 'collapsed' : undefined);
+        if (this.props.customCaret)
+            return _jsx("span", { className: className, children: typeof this.props.customCaret === 'function' ? this.props.customCaret() : this.props.customCaret });
+        return _jsx("span", { className: className, children: this.isCollapsed() ? '+' : '-' });
+    }
+    renderHeader() {
+        const className = _className('ts-collapsable-container__header', this.isCollapsed() ? 'collapsed' : undefined, this.props.flipHeaderOrder ? 'flip' : undefined);
+        return _jsxs("div", { className: className, onClick: this.toggleCollapse, onContextMenu: this.props.onHeaderRightClick, children: [this.renderCaret(), typeof this.props.headerRenderer === 'function' ? this.props.headerRenderer() : this.props.headerRenderer] });
+    }
+    renderContainer() {
+        const className = _className('ts-collapsable-container__container', this.isCollapsed() ? 'collapsed' : undefined);
+        return _jsx("div", { className: className, ref: this.state.containerRef, children: _jsx("div", { ref: this.state.contentRef, className: 'ts-collapsable-container__container-wrapper', style: { width: '100%' }, children: (typeof this.props.containerRenderer === 'function' ? this.props.containerRenderer() : this.props.containerRenderer) }) });
+    }
+    render() {
+        const className = _className('ts-collapsable-container', this.props.className);
+        return _jsxs(LL_V_L, { className: className, style: this.props.style, id: this.props.id, onMouseOver: this.props.onMouseOver, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave, innerRef: this.props.innerRef, children: [this.renderHeader(), this.renderContainer()] });
+    }
+}

package/components/TS_CollapsableContainer/TS_CollapsableContainer.scss

@@ -0,0 +1,47 @@
+// ******* How This Works *******
+//The transition property smooths out the change in value over a period of time,
+//but only if the start value and end value are known.
+//Therefore, to make the container grow in size gradually, we will set the max-height, instead of the height,
+//since we can't know for certain what the height is going to be.
+//Make sure when overwriting to set the max-height to something bigger than the content will ever actually be.
+
+.ts-collapsable-container {
+  .ts-collapsable-container__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    border-bottom: 1px solid black;
+    background: #d0d0d0;
+    box-shadow: inset 0px 0px 25px 10px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+
+    &.flip {
+      flex-direction: row-reverse;
+    }
+
+    .ts-collapsable-container__header__caret {
+      flex-shrink: 0;
+      width: 20px;
+      margin: 0 5px 0 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font: {
+        size: 16px;
+        weight: bold;
+      }
+    }
+  }
+
+  .ts-collapsable-container__container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: max-height 100ms linear;
+    background: #e5e5e5;
+    overflow: hidden;
+  }
+}

package/components/TS_CollapsableContainer/index.d.ts

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

package/components/TS_CollapsableContainer/index.js

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

package/components/TS_CollapsableContainerV2/TS_CollapsableContainerV2.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import './TS_CollapsableContainerV2.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+type Props = {
+    headerRenderer: ResolvableContent<React.ReactNode>;
+    containerRenderer: ResolvableContent<React.ReactNode>;
+    customCaret?: ResolvableContent<React.ReactNode>;
+    onCollapseToggle?: (collapseState: boolean, e: React.MouseEvent) => void;
+    collapsed?: boolean;
+    initialCollapsed?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    onHeaderRightClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    forceUpdate?: boolean;
+    animated?: boolean;
+    innerRef?: React.RefObject<HTMLDivElement>;
+};
+type State = {
+    collapsed: boolean;
+    animated: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+};
+export declare class TS_CollapsableContainerV2 extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    private toggleCollapse;
+    render(): import("react/jsx-runtime").JSX.Element;
+    private render_Header;
+    private render_Header_Caret;
+    private render_Content;
+}
+export {};

package/components/TS_CollapsableContainerV2/TS_CollapsableContainerV2.js

@@ -0,0 +1,46 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import './TS_CollapsableContainerV2.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { LL_H_C, LL_V_L } from '../Layouts/index.js';
+import { exists, resolveContent } from '@nu-art/ts-common';
+import { TS_Icons } from '@nu-art/ts-styles';
+export class TS_CollapsableContainerV2 extends ComponentSync {
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        state.collapsed = nextProps.collapsed ?? this.state?.collapsed ?? (nextProps.initialCollapsed ?? true);
+        state.animated = !!nextProps.animated;
+        state.className = nextProps.className;
+        state.style = nextProps.style;
+        state.id = nextProps.id;
+        return state;
+    }
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        if (nextProps.forceUpdate)
+            return true;
+        return super.shouldComponentUpdate(nextProps, nextState, nextContext);
+    }
+    //######################### Logic #########################
+    toggleCollapse = (e) => {
+        const currentCollapsed = this.state.collapsed;
+        if (exists(this.props.onCollapseToggle))
+            return this.props.onCollapseToggle(currentCollapsed, e);
+        this.setState({ collapsed: !currentCollapsed });
+    };
+    //######################### Render #########################
+    render() {
+        const className = _className('ts-collapsable-container-v2', this.state.collapsed && 'collapsed', this.state.animated && 'animated', this.state.className);
+        return _jsxs(LL_V_L, { id: this.state.id, className: className, style: this.state.style, innerRef: this.props.innerRef, children: [this.render_Header(), this.render_Content()] });
+    }
+    render_Header() {
+        return _jsxs(LL_H_C, { className: 'ts-collapsable-container-v2__header', onClick: this.toggleCollapse, onContextMenu: this.props.onHeaderRightClick, children: [this.render_Header_Caret(), _jsx("div", { className: 'ts-collapsable-container-v2__header-content', children: resolveContent(this.props.headerRenderer) })] });
+    }
+    render_Header_Caret = () => {
+        if (!exists(this.props.customCaret))
+            return _jsx(TS_Icons.treeCollapse.component, {});
+        return resolveContent(this.props.customCaret);
+    };
+    render_Content() {
+        return _jsx("div", { className: 'ts-collapsable-container-v2__content', children: _jsx("div", { className: 'ts-collapsable-container-v2__content-inner', children: resolveContent(this.props.containerRenderer) }) });
+    }
+}