@nu-art/thunderstorm-frontend 0.400.5

package/components/Button/Button.scss

@@ -0,0 +1,151 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-button {
+  ///Reset css attributes
+  all: unset;
+
+  //Dimension attributes
+  min-height: 35px;
+  min-width: 90px;
+  padding: 5px 10px;
+  position: relative;
+
+  //General appearance attributes
+  transition: color 300ms ease-out,
+  background 300ms ease-out,
+  border 300ms ease-out;
+  cursor: pointer;
+  border-radius: 10px;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  //Inner Content
+  .ts-button__loader {
+    $mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+
+    width: 25px;
+    padding: 6px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% 100%;
+    background: var(--ts-button--content-color);
+    -webkit-mask: $mask;
+    mask: $mask;
+    -webkit-mask-composite: source-out;
+    mask-composite: subtract;
+    animation: l3 1s infinite linear;
+    opacity: 0;
+    transition: opacity 300ms ease-out, translate 300ms ease-out;
+
+    @keyframes l3 {
+      to {
+        transform: rotate(1turn)
+      }
+    }
+  }
+
+  .ts-button__content {
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: var(--ts-button--content-color);
+    opacity: 1;
+    font: {
+      size: 14px;
+      weight: bold;
+      family: inherit;
+    }
+    transition: opacity 300ms ease-out;
+    pointer-events: none;
+  }
+
+  ///Status Overwrites
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+
+  &.action-in-progress {
+    .ts-button__loader {
+      opacity: 1;
+      translate: -50% -50%;
+    }
+
+    .ts-button__content {
+      opacity: 0;
+    }
+  }
+
+  ///Variant Overwrites
+  &[data-variant='primary'] {
+    --ts-button--content-color: #fff;
+
+    &:enabled {
+      @include styles.mouse-interactive-background(styles.dark-blue(2), styles.dark-blue(1));
+      @include styles.mouse-interactive-border-color(styles.dark-blue(2), styles.dark-blue(1));
+    }
+
+    &:disabled {
+      @include styles.mouse-interactive-background(styles.dark-blue(2));
+      @include styles.mouse-interactive-border-color(styles.dark-blue(2));
+    }
+  }
+
+  &[data-variant='secondary'] {
+    --ts-button--content-color: #{styles.black(2)};
+
+    &:enabled {
+      @include styles.mouse-interactive-background(styles.gray(7), styles.gray(6));
+      @include styles.mouse-interactive-border-color(styles.gray(7), styles.gray(6));
+    }
+
+    &:disabled {
+      @include styles.mouse-interactive-background(styles.gray(7));
+      @include styles.mouse-interactive-border-color(styles.gray(7));
+    }
+  }
+
+  &[data-variant='tertiary'] {
+    --ts-button--content-color: #{styles.black(2)};
+
+    &:enabled {
+      @include styles.mouse-interactive-background(transparent, styles.gray(6));
+      @include styles.mouse-interactive-border-color(styles.gray(7), styles.gray(6));
+    }
+
+    &:disabled {
+      @include styles.mouse-interactive-background(transparent);
+      @include styles.mouse-interactive-border-color(styles.gray(7));
+    }
+  }
+
+  &[data-variant='text'] {
+    --ts-button--content-color: #{styles.black(2)};
+
+    &:enabled {
+      @include styles.mouse-interactive-background(transparent, styles.gray(7));
+    }
+
+    &:disabled {
+      @include styles.mouse-interactive-background(transparent);
+    }
+  }
+
+  &[data-variant='dangerous'] {
+    --ts-button--content-color: #fff;
+
+    &:enabled {
+      @include styles.mouse-interactive-background(styles.red(2), styles.red(1));
+      @include styles.mouse-interactive-border-color(styles.red(2), styles.red(1));
+    }
+
+    &:disabled {
+      @include styles.mouse-interactive-background(styles.red(2));
+      @include styles.mouse-interactive-border-color(styles.red(2));
+    }
+  }
+}

package/components/FrameLayout/FrameLayout.d.ts

@@ -0,0 +1,7 @@
+import { Component, HTMLProps, ReactNode } from 'react';
+import './FrameLayout.scss';
+export declare class FrameLayout extends Component<HTMLProps<HTMLDivElement> & {
+    children: ReactNode;
+}, any> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/FrameLayout/FrameLayout.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+import './FrameLayout.scss';
+import { _className } from '../../utils/tools.js';
+export class FrameLayout extends Component {
+    render() {
+        const { children, ...props } = this.props;
+        return _jsx("div", { ...props, className: _className(props.className, 'frame-layout'), children: children });
+    }
+}

package/components/FrameLayout/FrameLayout.scss

@@ -0,0 +1,5 @@
+.frame-layout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

package/components/FrameLayout/index.d.ts

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

package/components/FrameLayout/index.js

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

package/components/GenericDropDown/GenericDropDownV3.d.ts

@@ -0,0 +1,108 @@
+import { DB_Object, DBPointer, DBProto, Filter, ResolvableContent } from '@nu-art/ts-common';
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { TS_DropDown } from '../TS_Dropdown/index.js';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { Adapter } from '../adapter/Adapter.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { ComponentProps_Error } from '../types.js';
+import { UIProps_EditableItem } from '../../utils/EditableItem.js';
+type Props_CanUnselect<T> = ({
+    canUnselect: true;
+    onSelected: (selected?: T) => void;
+} | {
+    canUnselect?: false;
+    onSelected: (selected: T) => void;
+});
+type BaseInfraProps_TS_GenericDropDownV3<T> = ComponentProps_Error & {
+    dropdownRef?: React.RefObject<any>;
+    className?: string;
+    style?: CSSProperties;
+    placeholder?: string;
+    mapper?: (item: T) => (string | undefined)[];
+    noOptionsRenderer?: React.ReactNode | ((filter?: string) => React.ReactNode);
+    renderer?: (item: T) => React.ReactElement;
+    ifNoneShowAll?: boolean;
+    caret?: {
+        open: React.ReactNode;
+        close: React.ReactNode;
+    };
+    onNoMatchingSelectionForString?: (filterText: string, matchingItems: T[], e: React.KeyboardEvent) => any;
+    limitItems?: number;
+    hidePlaceholderOnOpen?: boolean;
+    itemResolver?: () => T[];
+    innerRef?: React.RefObject<any>;
+    tabIndex?: number;
+    unselectLabel?: string;
+    id?: string;
+    queryFilter?: (item: T) => boolean;
+    sortBy?: ((keyof T) | ((item: T) => string | number))[];
+};
+type BaseAppLevelProps_TS_GenericDropDownV3<T> = BaseInfraProps_TS_GenericDropDownV3<T> & {
+    inputValue?: string;
+    boundingParentSelector?: string;
+    renderSearch?: (dropDown: TS_DropDown<T>) => React.ReactNode;
+    limitItems?: number;
+    disabled?: boolean;
+};
+export type AppLevelProps_TS_GenericDropDownV3<T> = Props_CanUnselect<T> & BaseAppLevelProps_TS_GenericDropDownV3<T> & {
+    selected?: T | string | (() => T | undefined);
+};
+type EditableItemProps_GenericDropDownV3<T> = BaseAppLevelProps_TS_GenericDropDownV3<T> & UIProps_EditableItem<any, any, string> & {
+    onSelected?: (selected: T | undefined, superOnSelected: (selected?: T) => Promise<void>) => void;
+    canUnselect?: boolean;
+} & ComponentProps_Error;
+export type TemplatingProps_TS_GenericDropDown<Proto extends DBProto<any>, T extends Proto['dbType'] = Proto['dbType']> = BaseInfraProps_TS_GenericDropDownV3<T> & {
+    placeholder: string;
+    module: ModuleFE_BaseApi<Proto>;
+    modules: ModuleFE_BaseApi<Proto>[];
+    mapper: (item: T) => (string | undefined)[];
+    renderer: (item: T) => React.ReactElement;
+    selectedItemRenderer?: (selected: T) => React.ReactNode;
+};
+export type GenericDropDown_DBPointer_Item<Proto extends DBProto<any>> = {
+    dbKey: Proto['dbKey'];
+    item: Proto['dbType'];
+};
+export type TemplatingProps_TS_GenericDropDown_DBPointer<Proto extends DBProto<any>, T extends GenericDropDown_DBPointer_Item<Proto> = GenericDropDown_DBPointer_Item<Proto>> = Omit<BaseInfraProps_TS_GenericDropDownV3<T>, 'mapper'> & {
+    placeholder: string;
+    selectedItemRenderer?: (selected: T) => React.ReactNode;
+    pointerProps: {
+        [P in Proto as P['dbKey']]: {
+            module: ModuleFE_BaseApi<P>;
+            mapper: (item: GenericDropDown_DBPointer_Item<P>) => string[];
+            renderer: (item: GenericDropDown_DBPointer_Item<P>) => React.ReactElement;
+        };
+    };
+};
+type EditableItemProps_GenericDropDownV3_DBPointer<T> = BaseAppLevelProps_TS_GenericDropDownV3<T> & UIProps_EditableItem<any, any, DBPointer> & {
+    onSelected?: (selected: T | undefined, superOnSelected: (selected?: T) => Promise<void>) => void;
+    canUnselect?: boolean;
+} & ComponentProps_Error;
+type Props_TS_GenericDropDownV3<Proto extends DBProto<any>, T extends Proto['dbType'] = Proto['dbType']> = TemplatingProps_TS_GenericDropDown<T> & BaseAppLevelProps_TS_GenericDropDownV3<T> & Props_CanUnselect<T> & {
+    selected?: Proto['dbType'] | string | (() => Proto['dbType'] | undefined);
+};
+type State<T extends DB_Object> = ComponentProps_Error & {
+    items: T[];
+    selected?: T;
+    filter: Filter<T>;
+    adapter: Adapter<T>;
+};
+export declare class GenericDropDownV3<Proto extends DBProto<any>, T extends Proto['dbType'] = Proto['dbType']> extends ComponentSync<Props_TS_GenericDropDownV3<Proto>, State<T>> {
+    static readonly prepareEditable: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown<Proto_>>) => (props: EditableItemProps_GenericDropDownV3<Proto_["dbType"]>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepareSelectable: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown<Proto_>>) => (props: AppLevelProps_TS_GenericDropDownV3<Proto_["dbType"]>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepare: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown<Proto_>>) => {
+        editable: (props: EditableItemProps_GenericDropDownV3<Proto_["dbType"]>) => import("react/jsx-runtime").JSX.Element;
+        selectable: (props: AppLevelProps_TS_GenericDropDownV3<Proto_["dbType"]>) => import("react/jsx-runtime").JSX.Element;
+    };
+    static readonly prepareSelectable_DBPointers: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown_DBPointer<Proto_>>) => (props: AppLevelProps_TS_GenericDropDownV3<GenericDropDown_DBPointer_Item<Proto_>>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepareEditable_DBPointers: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown_DBPointer<Proto_>>) => (props: EditableItemProps_GenericDropDownV3_DBPointer<GenericDropDown_DBPointer_Item<Proto_>>) => import("react/jsx-runtime").JSX.Element;
+    static readonly prepare_DBPointers: <Proto_ extends DBProto<any>>(mandatoryProps: ResolvableContent<TemplatingProps_TS_GenericDropDown_DBPointer<Proto_>>) => {
+        editable: (props: EditableItemProps_GenericDropDownV3_DBPointer<GenericDropDown_DBPointer_Item<Proto_>>) => import("react/jsx-runtime").JSX.Element;
+        selectable: (props: AppLevelProps_TS_GenericDropDownV3<GenericDropDown_DBPointer_Item<Proto_>>) => import("react/jsx-runtime").JSX.Element;
+    };
+    protected deriveStateFromProps(nextProps: Props_TS_GenericDropDownV3<Proto>): State<T>;
+    private getSelected;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/GenericDropDown/GenericDropDownV3.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { _values, Filter, resolveContent, sortArray } from '@nu-art/ts-common';
+import { TS_DropDown } from '../TS_Dropdown/index.js';
+import { SimpleListAdapter } from '../adapter/Adapter.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { resolveEditableError } from '../types.js';
+// const defaultQueryFilter = () => true;
+export class GenericDropDownV3 extends ComponentSync {
+    static prepareEditable = (mandatoryProps) => {
+        return (props) => {
+            const { editable, prop, ...restProps } = props;
+            const onSelected = async (item) => {
+                await editable.updateObj({ [prop]: item?._id });
+            };
+            return _jsx(GenericDropDownV3, { error: resolveEditableError(props), ...resolveContent(mandatoryProps), ...restProps, onSelected: async (item) => {
+                    if (props.onSelected)
+                        return props.onSelected(item, onSelected);
+                    return onSelected(item);
+                }, selected: editable.item[prop] });
+        };
+    };
+    static prepareSelectable = (mandatoryProps) => {
+        return (props) => _jsx(GenericDropDownV3, { ...resolveContent(mandatoryProps), ...props });
+    };
+    static prepare = (mandatoryProps) => {
+        return {
+            editable: this.prepareEditable(mandatoryProps),
+            selectable: this.prepareSelectable(mandatoryProps),
+        };
+    };
+    static prepareSelectable_DBPointers = (mandatoryProps) => {
+        const _mandatoryProps = resolveContent(mandatoryProps);
+        return (props) => _jsx(GenericDropDownV3, { ..._mandatoryProps, ...props, itemResolver: () => {
+                const modules = _values(_mandatoryProps.pointerProps).map(val => val.module);
+                return modules.map(module => module.cache.all().map(dbItem => ({ dbKey: module.dbDef.dbKey, item: dbItem }))).flat();
+            }, renderer: (item) => _mandatoryProps.pointerProps[item.dbKey].renderer(item), mapper: (item) => _mandatoryProps.pointerProps[item.dbKey].mapper(item), 
+            // @ts-ignore
+            module: undefined });
+    };
+    static prepareEditable_DBPointers = (mandatoryProps) => {
+        return (props) => {
+            const _mandatoryProps = resolveContent(mandatoryProps);
+            const { editable, prop, ...restProps } = props;
+            const onSelected = async (item) => {
+                await editable.updateObj({ [prop]: item._id });
+            };
+            return _jsx(GenericDropDownV3, { error: resolveEditableError(props), ..._mandatoryProps, ...restProps, onSelected: async (item) => {
+                    if (props.onSelected)
+                        return props.onSelected(item, onSelected);
+                    return onSelected(item);
+                }, selected: editable.item[prop], 
+                // @ts-ignore
+                module: undefined });
+        };
+    };
+    static prepare_DBPointers = (mandatoryProps) => {
+        return {
+            editable: this.prepareEditable_DBPointers(mandatoryProps),
+            selectable: this.prepareSelectable_DBPointers(mandatoryProps),
+        };
+    };
+    deriveStateFromProps(nextProps) {
+        const state = {};
+        const items = this.props.itemResolver?.() || nextProps.module.cache.allMutable();
+        if (!nextProps.queryFilter)
+            state.items = items;
+        else {
+            state.items = items.filter(nextProps.queryFilter);
+            if (state.items.length === 0 && nextProps.ifNoneShowAll === true)
+                state.items = items;
+        }
+        //Sort Items by sort function or object keys
+        state.items = nextProps.sortBy?.reduce((toRet, sortBy) => {
+            return sortArray(state.items, typeof sortBy === 'function' ? sortBy : item => item[sortBy]);
+        }, state.items) || state.items;
+        state.error = nextProps.error;
+        //Set selected item
+        state.selected = this.getSelected(nextProps.module, nextProps.selected);
+        state.filter = new Filter(nextProps.mapper);
+        state.adapter = SimpleListAdapter(state.items, props => nextProps.renderer(props.item));
+        return state;
+    }
+    getSelected(module, selectMethod) {
+        switch (typeof selectMethod) {
+            case 'string':
+                return module.cache.unique(selectMethod);
+            case 'function':
+                return selectMethod();
+            case 'object':
+                if (!Array.isArray(selectMethod))
+                    return selectMethod;
+        }
+        return undefined;
+    }
+    render() {
+        return _jsx(TS_DropDown, { ref: this.props.dropdownRef, id: this.props.id, innerRef: this.props.innerRef, tabIndex: this.props.tabIndex, error: this.state.error, className: this.props.className, placeholder: this.props.placeholder || 'Choose one', inputValue: this.props.inputValue, adapter: this.state.adapter, filter: this.state.filter, selected: this.state.selected, onNoMatchingSelectionForString: this.props.onNoMatchingSelectionForString, onSelected: this.props.onSelected, noOptionsRenderer: this.props.noOptionsRenderer, caret: this.props.caret, selectedItemRenderer: this.props.selectedItemRenderer, boundingParentSelector: this.props.boundingParentSelector, renderSearch: this.props.renderSearch, limitItems: this.props.limitItems, hidePlaceholderOnOpen: this.props.hidePlaceholderOnOpen, unselectLabel: this.props.unselectLabel, canUnselect: this.props.canUnselect, disabled: this.props.disabled });
+    }
+}

package/components/GenericDropDown/index.d.ts

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

package/components/GenericDropDown/index.js

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

package/components/GenericRenderer/Component_GenericRenderer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ModuleFE_Utils } from '../../modules/ModuleFE_Utils/ModuleFE_Utils.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type Props = {
+    rendererKey: keyof typeof ModuleFE_Utils.renderers;
+    props: any;
+};
+type State = {
+    currentRenderer: React.ComponentType;
+};
+export declare class Component_GenericRenderer extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/GenericRenderer/Component_GenericRenderer.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ModuleFE_Utils } from '../../modules/ModuleFE_Utils/ModuleFE_Utils.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+export class Component_GenericRenderer extends ComponentSync {
+    deriveStateFromProps(nextProps, state) {
+        state.currentRenderer = ModuleFE_Utils.getRenderer(nextProps.rendererKey, nextProps.props);
+        return state;
+    }
+    render() {
+        const Renderer = this.state.currentRenderer;
+        return _jsx(Renderer, { ...this.props.props });
+    }
+}

package/components/HeightBounder.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { ComponentSync } from '../core/ComponentSync.js';
+import { OnWindowResized } from '../modules/ModuleFE_Window.js';
+type BounderProps = HTMLAttributes<HTMLDivElement>;
+export declare class HeightBounder extends ComponentSync<BounderProps> implements OnWindowResized {
+    private ref?;
+    __onWindowResized(): void;
+    protected deriveStateFromProps(nextProps: BounderProps): any;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/HeightBounder.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ComponentSync } from '../core/ComponentSync.js';
+export class HeightBounder extends ComponentSync {
+    ref;
+    __onWindowResized() {
+        this.forceUpdate();
+    }
+    deriveStateFromProps(nextProps) {
+        return {};
+    }
+    render() {
+        const ref = this.ref;
+        let height = undefined;
+        if (ref)
+            height = `${window.innerHeight - ref.offsetTop - 3}px`;
+        const tempProps = { ...this.props };
+        delete tempProps.style;
+        return _jsx("div", { ...tempProps, style: { ...this.props.style, height }, ref: ((_ref) => {
+                if (this.ref)
+                    return;
+                this.ref = _ref;
+                this.forceUpdate();
+            }), children: this.props.children });
+    }
+}

package/components/Label/ATS_Label.d.ts

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

package/components/Label/ATS_Label.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } 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_Label.scss';
+import { Label } from './Label.js';
+export class ATS_Label extends ComponentSync {
+    static Screen = {
+        key: 'ats-ts-label',
+        name: 'Label',
+        group: thunderstormATSGroups,
+        renderer: this,
+    };
+    //######################### Life Cycle #########################
+    deriveStateFromProps(nextProps, state) {
+        return state;
+    }
+    //######################### Logic #########################
+    getTests = () => {
+        return [
+            { label: 'Short Title - With tooltip', tooltip: 'Tooltip for short title' },
+            { label: 'Short Title - Without tooltip ' },
+            { label: 'Long Title - With tooltip - asdasdasdasdasdasd', tooltip: 'Tooltip for Long title' },
+            { label: 'Long Title - Without tooltip - asdasdasdasdasdasd' },
+            { label: 'Long Title - With long tooltip - asdasdasdasdasdasd', tooltip: 'Tooltip for Long title - asdasdasdasdasdasd' },
+        ];
+    };
+    //######################### Render #########################
+    render() {
+        const tests = this.getTests();
+        return _jsxs(LL_V_L, { id: 'ats__label', children: [TS_AppTools.renderPageHeader('Label'), _jsx(LL_V_L, { className: 'ats__label__labels', children: tests.map((test, i) => _jsx(Label, { tooltip: test.tooltip, children: test.label }, i)) })] });
+    }
+}

package/components/Label/ATS_Label.scss

@@ -0,0 +1,24 @@
+#ats__label {
+  height: 100%;
+  width: 100%;
+  gap: 20px;
+  padding: 20px;
+
+  .app-tools-page__page__header {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  .ats__label__labels {
+    background: white;
+    padding: 20px;
+    gap: 20px;
+    width: 300px;
+    border-radius: 6px;
+
+    .ts-label {
+      width: 100%;
+    }
+  }
+}

package/components/Label/Label.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './Label.scss';
+import { OnWindowResized } from '../../modules/ModuleFE_Window.js';
+type Props = React.PropsWithChildren<{
+    tooltip?: React.ReactNode;
+    className?: string;
+    containerSelector?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}>;
+type State = {
+    tooltip: React.ReactNode;
+    className?: string;
+    containerSelector?: string;
+};
+export declare class Label extends ComponentSync<Props, State> implements OnWindowResized {
+    private readonly labelRef;
+    private readonly activeTruncationClass;
+    private readonly activeTooltipClass;
+    private readonly invertTooltipClass;
+    __onWindowResized(): void;
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    private checkOverflow;
+    private checkTooltipDir;
+    private getProps;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/Label/Label.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import './Label.scss';
+export class Label extends ComponentSync {
+    labelRef = React.createRef();
+    activeTruncationClass = 'truncate-active';
+    activeTooltipClass = 'tooltip-active';
+    invertTooltipClass = 'invert-tooltip';
+    // ######################## Life Cycle ########################
+    __onWindowResized() {
+        this.checkOverflow();
+    }
+    deriveStateFromProps(nextProps, state) {
+        state.tooltip = nextProps.tooltip ?? '';
+        state.className = nextProps.className;
+        state.containerSelector = nextProps.containerSelector;
+        return state;
+    }
+    componentDidMount() {
+        this.checkOverflow();
+    }
+    componentDidUpdate() {
+        this.checkOverflow();
+    }
+    // ######################## Logic ########################
+    checkOverflow = () => {
+        const el = this.labelRef.current;
+        if (!el)
+            return;
+        const overflowing = el.scrollWidth > el.clientWidth;
+        //Not overflowing - make sure truncation and tooltip classes aren't applied
+        if (!overflowing) {
+            if (el.classList.contains(this.activeTruncationClass))
+                el.classList.remove(this.activeTruncationClass);
+            if (el.classList.contains(this.activeTooltipClass))
+                el.classList.remove(this.activeTooltipClass);
+            return;
+        }
+        //Overflowing
+        //Always apply truncation
+        if (!el.classList.contains(this.activeTruncationClass))
+            el.classList.add(this.activeTruncationClass);
+        //Apply tooltip if one is provided
+        if (!el.classList.contains(this.activeTooltipClass) && this.state.tooltip)
+            el.classList.add(this.activeTooltipClass);
+    };
+    checkTooltipDir = () => {
+        const el = this.labelRef.current;
+        if (!el || !this.state.containerSelector)
+            return;
+        const container = el.closest(this.state.containerSelector);
+        if (!container)
+            return;
+        const containerTop = container.getBoundingClientRect().top;
+        const labelRect = el.getBoundingClientRect();
+        const distance = labelRect.top - containerTop;
+        //Should be inverted
+        if (distance <= labelRect.height * 2.5) {
+            if (!el.classList.contains(this.invertTooltipClass))
+                el.classList.add(this.invertTooltipClass);
+        }
+        else { //Should not be inverted
+            if (el.classList.contains(this.invertTooltipClass))
+                el.classList.remove(this.invertTooltipClass);
+        }
+    };
+    getProps = () => {
+        const { tooltip, className, containerSelector, onClick, ...rest } = this.props;
+        return {
+            ...rest,
+            className: _className('ts-label', className),
+            'data-tooltip': this.state.tooltip,
+            onMouseEnter: this.checkTooltipDir,
+            onClick,
+            ref: this.labelRef,
+        };
+    };
+    // ######################## Render ########################
+    render() {
+        return _jsx("div", { ...this.getProps(), children: _jsx("div", { className: 'ts-label__content', children: this.props.children }) });
+    }
+}