@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_PropRenderer/TS_PropRenderer.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import './TS_PropRenderer.scss';
+import { LL_H_B, LL_H_C, LL_H_T, LL_V_L } from '../Layouts/index.js';
+import { _className } from '../../utils/tools.js';
+import { resolveContent } from '@nu-art/ts-common';
+const TS_PropRenderer_Horizontal = (props) => {
+    const className = _className('ts-prop-renderer horizontal', props.disabled && 'disabled', props.className);
+    const { label, error, ..._props } = props;
+    let _LinearComponent;
+    switch (props.verticalAlignment) {
+        case 'top':
+            _LinearComponent = LL_H_T;
+            break;
+        case 'bottom':
+            _LinearComponent = LL_H_B;
+            break;
+        default:
+            _LinearComponent = LL_H_C;
+            break;
+    }
+    return _jsxs(_LinearComponent, { ..._props, className: className, children: [_jsxs("div", { className: 'ts-prop-renderer__label', children: [resolveContent(label), props.error && _jsx("div", { className: 'ts-prop-renderer__error', children: props.error })] }), props.children] });
+};
+const TS_PropRenderer_Vertical = (props) => {
+    const className = _className('ts-prop-renderer vertical', props.disabled && 'disabled', props.className);
+    const { label, error, ..._props } = props;
+    return _jsxs(LL_V_L, { ..._props, className: className, children: [_jsxs("div", { className: 'ts-prop-renderer__label', children: [resolveContent(label), props.error && _jsx("div", { className: 'ts-prop-renderer__error', children: props.error })] }), props.children] });
+};
+const TS_PropRenderer_Flat = (props) => {
+    const labelClass = _className('ts-prop-renderer__label', props.disabled && 'disabled', props.className);
+    return _jsxs(_Fragment, { children: [_jsxs("div", { className: labelClass, children: [resolveContent(props.label), props.error && _jsx("div", { className: 'ts-prop-renderer__error', children: props.error })] }), props.children] });
+};
+export const TS_PropRenderer = {
+    Vertical: TS_PropRenderer_Vertical,
+    Horizontal: TS_PropRenderer_Horizontal,
+    Flat: TS_PropRenderer_Flat,
+};

package/components/TS_PropRenderer/TS_PropRenderer.scss

@@ -0,0 +1,19 @@
+.ts-prop-renderer {
+  width: 100%;
+
+  &.disabled {
+    .ts-prop-renderer__label {
+      color: #929292;
+    }
+  }
+
+  &.vertical {
+    row-gap: 4px;
+
+    .ts-prop-renderer__label {
+      width: 100%;
+    }
+  }
+}
+
+

package/components/TS_PropRenderer/index.d.ts

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

package/components/TS_PropRenderer/index.js

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

package/components/TS_Radio/TS_Radio.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import './TS_Radio.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type Props<ItemType> = {
+    values: ItemType[];
+    groupName: string;
+    checked?: ItemType;
+    disabled?: boolean;
+    className?: string;
+    innerRef?: React.RefObject<HTMLDivElement>;
+    labelRenderer?: (value: ItemType) => React.ReactNode;
+    labelTooltipContainerSelector?: string;
+} & ({
+    canUnselect: true;
+    onCheck?: (value?: ItemType, prevValue?: ItemType) => void;
+} | {
+    canUnselect?: false;
+    onCheck?: (value: ItemType, prevValue?: ItemType) => void;
+});
+type State<ItemType> = {
+    checked?: ItemType;
+    disabled?: boolean;
+    values: ItemType[];
+    labelTooltipContainerSelector?: string;
+};
+export declare class TS_Radio<ItemType> extends ComponentSync<Props<ItemType>, State<ItemType>> {
+    protected deriveStateFromProps(nextProps: Props<ItemType>): State<ItemType>;
+    private handleOptionClick;
+    private renderRadioOption;
+    private renderRadioLabel;
+    private renderRadioButton;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Radio/TS_Radio.js

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import './TS_Radio.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className, stopPropagation } from '../../utils/tools.js';
+import { Label } from '../Label/Label.js';
+export class TS_Radio extends ComponentSync {
+    // ######################### Life Cycle #########################
+    deriveStateFromProps(nextProps) {
+        return {
+            values: nextProps.values,
+            checked: nextProps.checked,
+            disabled: nextProps.disabled,
+            labelTooltipContainerSelector: nextProps.labelTooltipContainerSelector
+        };
+    }
+    // ######################### Logic #########################
+    handleOptionClick = (e, value) => {
+        stopPropagation(e);
+        if (this.state.disabled)
+            return;
+        const prevValue = this.state.checked;
+        const nextValue = (this.props.canUnselect && value === prevValue)
+            ? undefined
+            : value;
+        this.setState({ checked: nextValue }, () => {
+            this.props.onCheck?.(nextValue, prevValue);
+            this.forceUpdate();
+        });
+    };
+    // ######################### Render #########################
+    renderRadioOption = (value) => {
+        const className = _className('ts-radio__container', (value === this.state.checked ? 'checked' : ''));
+        return _jsxs("label", { htmlFor: `${this.props.groupName}-${value}`, className: className, onClick: (e) => this.handleOptionClick(e, value), children: [this.renderRadioButton(value), this.renderRadioLabel(value)] }, String(value));
+    };
+    renderRadioLabel = (value) => {
+        const renderer = this.props.labelRenderer ?? ((value) => String(value));
+        const label = renderer(value);
+        return _jsx(Label, { className: 'ts-radio__label', tooltip: label, containerSelector: this.state.labelTooltipContainerSelector, children: label });
+    };
+    renderRadioButton = (value) => {
+        return _jsx("span", { className: 'ts-radio__button' });
+    };
+    render() {
+        const className = _className('ts-radio', this.state?.disabled ? 'disabled' : undefined, this.props.className);
+        return _jsx("div", { className: className, ref: this.props.innerRef, children: this.props.values.map(value => {
+                return this.renderRadioOption(value);
+            }) });
+    }
+}

package/components/TS_Radio/TS_Radio.scss

@@ -0,0 +1,68 @@
+.ts-radio {
+  display: flex;
+  height: 40px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+
+  .ts-radio__container {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+
+    //HTML Input
+    .ts-radio__input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    //Custom Button
+    .ts-radio__button {
+      //Dimensions
+      width: 20px;
+      height: 20px;
+
+      //Border
+      border-radius: 50%;
+
+      //Colors
+      background: #f0f0f0;
+    }
+
+    //Label
+    .ts-radio__label {
+      margin-left: 5px;
+      display: flex;
+      align-items: center;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+
+    }
+
+    &:hover {
+      .ts-radio__button {
+        background: #e0e0e0;
+      }
+    }
+
+    &.checked {
+      .ts-radio__button {
+        background: white;
+        border: 7px solid var(--color__dialog-header-background);
+      }
+    }
+  }
+
+  &.disabled {
+    .ts-radio__button {
+      background: #DBDBDB;
+    }
+
+    .ts-radio__label {
+      color: #DBDBDB;
+    }
+  }
+}

package/components/TS_Radio/index.d.ts

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

package/components/TS_Radio/index.js

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

package/components/TS_ReadMore/TS_ReadMore.d.ts

@@ -0,0 +1,26 @@
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_ReadMore.scss';
+type Props = {
+    text: string;
+    collapsedHeight: number;
+    readMoreText: (showingMore: boolean) => string;
+};
+type State = {
+    text: string;
+    showMore: boolean;
+    width?: number;
+};
+export declare class TS_ReadMore extends ComponentSync<Props, State> {
+    private ref;
+    private textRef;
+    static defaultProps: {
+        readMoreText: (showingMore: boolean) => "Read Less" | "Read More";
+    };
+    protected deriveStateFromProps(nextProps: Props, state: State): State;
+    componentDidMount(): void;
+    private getCollapsedText;
+    private renderButton;
+    private renderText;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_ReadMore/TS_ReadMore.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_ReadMore.scss';
+import { _className } from '../../utils/tools.js';
+export class TS_ReadMore extends ComponentSync {
+    ref = React.createRef();
+    textRef = React.createRef();
+    static defaultProps = {
+        readMoreText: (showingMore) => showingMore ? 'Read Less' : 'Read More',
+    };
+    deriveStateFromProps(nextProps, state) {
+        state.text = nextProps.text;
+        state.showMore ??= false;
+        return state;
+    }
+    componentDidMount() {
+        new ResizeObserver(() => this.setState({ width: this.ref.current?.scrollWidth })).observe(this.ref.current);
+        this.forceUpdate();
+    }
+    getCollapsedText = () => {
+        if (this.state.showMore)
+            return this.state.text;
+        const container = this.ref.current;
+        const textContainer = this.textRef.current;
+        if (!container || !textContainer)
+            return this.state.text;
+        const computedStyle = getComputedStyle(container);
+        const width = container.clientWidth - parseFloat(computedStyle.paddingInline);
+        const collapsedNumLines = this.props.collapsedHeight / parseInt(computedStyle.lineHeight);
+        const charsPerLine = Math.floor(width / parseInt(computedStyle.fontSize));
+        //Count text lines
+        const textLines = this.state.text.split('\n').reduce((lines, curr, i) => {
+            const innerLines = Math.ceil((curr.length) / charsPerLine);
+            //Always push the first line
+            if (i === 0) {
+                lines.push({ text: curr, lines: innerLines });
+                return lines;
+            }
+            //Don't push empty strings
+            if (!curr.length)
+                return lines;
+            //Don't push if collapsed line threshold has passed
+            if (lines.reduce((total, curr) => total + curr.lines, 0) >= collapsedNumLines)
+                return lines;
+            //Push the text
+            lines.push({ text: curr, lines: innerLines });
+            return lines;
+        }, []);
+        let text = '';
+        const readMoreTextLength = (this.props.readMoreText(this.state.showMore).length) + 3;
+        let remainingLines = collapsedNumLines;
+        //Concat all lines with logic
+        textLines.forEach((textLine, i) => {
+            //If not last textLine, append to text with a new line char
+            if (i !== textLines.length - 1) {
+                text += textLine.text + '\n';
+                remainingLines -= textLine.lines;
+                return;
+            }
+            //Is last text line
+            //Collect data
+            const lastLineAllowedChars = charsPerLine * remainingLines * 1.75; // Actual chars allowed for this textLine  (1.75 factor to account for letters that are smaller than the font size + kerning)
+            const lastLineTotalChars = textLine.text.length + readMoreTextLength + 15; // Total chars that will be in this line + the button chars + some margin for safety
+            const overflowingChars = lastLineTotalChars - lastLineAllowedChars;
+            //If there are overflowing chars, deduct from text
+            if (overflowingChars > 0)
+                text += textLine.text.substring(0, textLine.text.length - overflowingChars);
+            else
+                text += textLine.text;
+        });
+        return text;
+    };
+    renderButton = () => {
+        return _jsxs(_Fragment, { children: [this.state.showMore ? ' ' : '... ', _jsx("span", { className: 'ts-read-more__button', onClick: () => this.setState({ showMore: !this.state.showMore }), children: this.props.readMoreText(this.state.showMore) })] });
+    };
+    renderText = () => {
+        return _jsx("span", { className: 'ts-read-more__text', ref: this.textRef, children: this.getCollapsedText() });
+    };
+    render() {
+        const style = {
+            '--collapsed-height': `${this.props.collapsedHeight}px`,
+        };
+        return _jsxs("p", { className: _className('ts-read-more', this.state.showMore ? 'expand' : undefined), style: style, ref: this.ref, children: [this.renderText(), this.renderButton()] });
+    }
+}

package/components/TS_ReadMore/TS_ReadMore.scss

@@ -0,0 +1,36 @@
+@use '@nu-art/ts-styles' as styles;
+
+.ts-read-more {
+  width: 100%;
+  height: var(--collapsed-height);
+  white-space: break-spaces;
+  margin: 0;
+  line-height: 20px;
+  font: {
+    size: 14px;
+    weight: normal;
+  }
+
+
+  .ts-read-more__text {
+    white-space: break-spaces;
+    font: {
+      size: inherit;
+      weight: inherit;
+    }
+  }
+
+  .ts-read-more__button {
+    color: #0067FF;
+    font: {
+      size: inherit;
+      weight: inherit;
+    }
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  &.expand {
+    height: unset;
+  }
+}

package/components/TS_ReadMore/index.d.ts

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

package/components/TS_ReadMore/index.js

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

package/components/TS_Slider/TS_Slider.d.ts

@@ -0,0 +1,26 @@
+import './TS_Slider.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+type Props = {
+    min: number;
+    max: number;
+    value?: number;
+    startValue?: number;
+    onValueChanged?: (value: number) => void | Promise<void>;
+    onValueSet?: (value: number) => void | Promise<void>;
+    disabled?: boolean;
+    className?: string;
+};
+type State = {
+    value: number | undefined;
+};
+export declare class TS_Slider extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props): State;
+    private getValue;
+    private onValueChange;
+    private onMouseUp;
+    private calculateBGSize;
+    private renderCurrentValue;
+    private renderSliderInput;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_Slider/TS_Slider.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TS_Slider.scss';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import { _className } from '../../utils/tools.js';
+import { LL_H_C } from '../Layouts/index.js';
+export class TS_Slider extends ComponentSync {
+    // ######################### Life Cycle #########################
+    deriveStateFromProps(nextProps) {
+        return {
+            value: nextProps.value === undefined ? this.getValue() : nextProps.value
+        };
+    }
+    // ######################### Logic #########################
+    getValue() {
+        return this.state?.value ?? this.props.startValue ?? (this.props.min + this.props.max) / 2;
+    }
+    onValueChange = (e) => {
+        let value = e.target.valueAsNumber;
+        if (isNaN(value))
+            value = undefined;
+        this.setState({ value }, () => {
+            this.props.onValueChanged?.(value ?? this.props.min);
+        });
+    };
+    onMouseUp = (e) => {
+        this.props.onValueSet?.(this.state.value ?? this.props.min);
+    };
+    calculateBGSize = () => {
+        return (((this.state.value ?? this.props.min) - this.props.min) * 100) / (this.props.max - this.props.min);
+    };
+    // ######################### Render #########################
+    renderCurrentValue() {
+        return _jsx("input", { className: 'ts-slider__current-value', type: 'number', value: this.state.value, onChange: this.onValueChange });
+    }
+    renderSliderInput() {
+        return _jsx("input", { type: 'range', value: this.state.value ?? this.props.min, min: this.props.min, max: this.props.max, onChange: this.onValueChange, onMouseUp: this.onMouseUp, style: { backgroundSize: `${this.calculateBGSize()}% 100%` } });
+    }
+    render() {
+        const className = _className('ts-slider', this.props.className);
+        return _jsxs(LL_H_C, { className: className, children: [this.renderSliderInput(), this.renderCurrentValue()] });
+    }
+}

package/components/TS_Slider/TS_Slider.scss

@@ -0,0 +1,68 @@
+.ts-slider {
+  gap: 8px;
+
+  .ts-slider__current-value {
+
+  }
+
+
+  .ts-slider__input {
+    //Reset default appearance
+    -webkit-appearance: none;
+
+    //Dimensions
+    height: 8px;
+    min-width: 100px;
+
+    //Border
+    border-radius: 4px;
+
+    //Background before thumb
+    background-image: linear-gradient(to right, #296EB4, #1789FC);
+    background-repeat: no-repeat;
+
+    //Background after thumb
+    background-color: grey;
+
+    //More
+    cursor: pointer;
+
+
+    ////Thumb
+    //&::-webkit-slider-thumb,
+    //&::-moz-range-thumb,
+    //&::-ms-thumb {
+    //  //Reset default appearance
+    //  -webkit-appearance: none;
+    //
+    //  width: 10px;
+    //  aspect-ratio: 1/1;
+    //
+    //  border-radius: 50%;
+    //  background: red;
+    //}
+
+    //Track
+    //&::-webkit-slider-runnable-track,
+    //&::-moz-range-track,
+    //&::-ms-track {
+    //
+    //}
+  }
+
+  input[type='range'] {
+
+    &::-webkit-slider-thumb {
+      //Reset default appearance
+      -webkit-appearance: none;
+
+      width: 10px;
+      aspect-ratio: 1/1;
+
+      border-radius: 50%;
+      background: red;
+    }
+
+  }
+
+}

package/components/TS_Slider/index.d.ts

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

package/components/TS_Slider/index.js

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

package/components/TS_Space/TS_Space.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare class TS_Space extends React.Component<{
+    className?: string;
+    height?: number | string;
+    width?: number | string;
+}> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_Space/TS_Space.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { _className } from '../../utils/tools.js';
+export class TS_Space extends React.Component {
+    render() {
+        return _jsx("div", { className: _className('ts-space', this.props.className), style: { height: this.props.height || '100%', width: this.props.width || '100%' } });
+    }
+}

package/components/TS_Space/index.d.ts

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

package/components/TS_Space/index.js

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

package/components/TS_Space/ts-space.scss

@@ -0,0 +1,3 @@
+.ts-space {
+
+}

package/components/TS_Table/TS_Table.d.ts

@@ -0,0 +1,42 @@
+import { TS_Object } from '@nu-art/ts-common';
+import React, { HTMLProps } from 'react';
+import './TS_Table.scss';
+export type Header<T extends TableHeaders<any>> = T extends TableHeaders<infer R, infer A, infer P> ? P | {
+    header: P;
+    className?: string;
+    widthPx?: number | string;
+} : never;
+export type TableHeaders<R extends TS_Object, A extends string = never, P extends ((keyof R) | A) = ((keyof R) | A)> = (P | {
+    header: P;
+    className?: string;
+    widthPx?: number | string;
+})[];
+export type HeaderRenderer<R extends TS_Object, A extends string = never, P extends ((keyof R) | A) = ((keyof R) | A)> = {
+    [C in P]?: (columnKey: C) => React.ReactNode;
+};
+export type CellRenderer<R extends TS_Object, A extends string = never, P extends keyof R | A = ((keyof R) | A)> = (prop: P, item: R, index: number) => React.ReactNode;
+export type RowRenderer<R extends TS_Object, A extends string = never, P extends ((keyof R) | A) = ((keyof R) | A)> = {
+    [C in P]?: CellRenderer<R, A, C>;
+};
+export type Props_Table<R extends TS_Object, A extends string = never, P extends ((keyof R) | A) = ((keyof R) | A)> = {
+    id?: string;
+    header: TableHeaders<R, A, P>;
+    rows: R[];
+    headerRenderer?: ((columnKey: P) => React.ReactNode) | HeaderRenderer<R, A, P>;
+    cellRenderer: CellRenderer<R, A, P> | RowRenderer<R, A, P>;
+    table?: HTMLProps<HTMLTableElement> | (() => HTMLProps<HTMLTableElement>);
+    head?: HTMLProps<HTMLTableSectionElement> | (() => HTMLProps<HTMLTableSectionElement>);
+    body?: HTMLProps<HTMLTableSectionElement> | (() => HTMLProps<HTMLTableSectionElement>);
+    tr?: HTMLProps<HTMLTableRowElement> | ((row: R | undefined, rowIndex: number) => HTMLProps<HTMLTableRowElement>);
+    td?: HTMLProps<HTMLTableDataCellElement> | ((row: R, rowIndex: number, columnKey: P) => HTMLProps<HTMLTableDataCellElement>);
+    th?: HTMLProps<HTMLTableHeaderCellElement> | ((columnKey: P) => HTMLProps<HTMLTableHeaderCellElement>);
+};
+export declare class TS_Table<R extends TS_Object, A extends string = never> extends React.Component<Props_Table<R, A>, any> {
+    static defaultProps: {
+        actionHeaderRenderer: (action: any) => import("react/jsx-runtime").JSX.Element;
+    };
+    constructor(p: Props_Table<R, A>);
+    render(): import("react/jsx-runtime").JSX.Element;
+    private renderTableHeader;
+    private renderTableBody;
+}