@hazelcast/ui 1.3.3-next.9 → 2.0.1-canary.0

package/lib/components/Toggle.module.scss

@@ -0,0 +1,175 @@
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+@use 'sass:math';
+
+$height: c.$grid * 6;
+$width: c.$grid * 15;
+$labelMargin: c.$grid * 2.5;
+/* doiuse-disable calc */
+$trackBr: calc(#{$height} - #{c.$borderWidth * 2});
+/* doiuse-enable calc */
+$trackBgOn: c.$colorSuccess;
+$trackBgOff: c.$colorNeutral;
+$knobBgOn: c.$colorNeutralWhite;
+$knobBgOff: c.$colorNeutralLighter;
+$knobRadius: c.$grid * 5;
+/* stylelint-disable  length-zero-no-unit */
+$knobHorizontalOffset: math.max(c.$outlineWidth - c.$borderWidth, 0px);
+/* stylelint-enable */
+
+@keyframes switchOn {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+@keyframes switchOff {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(-50%);
+  }
+}
+
+.wrapper {
+  position: relative;
+
+  input {
+    @include h.visuallyHidden;
+  }
+
+  // faux wrapping label
+  label {
+    cursor: pointer;
+    display: inline-flex; // for aligning with the .labelText
+    align-items: center;
+    color: c.$colorText;
+    vertical-align: middle;
+
+    @include c.typographyBodySmall;
+
+    &.disabled {
+      cursor: not-allowed;
+      color: c.$colorNeutralLight;
+    }
+  }
+
+  // actual text label
+  .labelText {
+    margin-right: $labelMargin;
+  }
+
+  .helperText {
+    margin-left: c.$grid * 1.5;
+  }
+
+  // the `track` (default off state)
+  .toggleTrack {
+    display: inline-block;
+    height: $height;
+    width: $width;
+    background: $trackBgOff;
+    border-radius: $trackBr;
+    position: relative;
+    border: c.$borderWidth solid transparent;
+    box-sizing: border-box;
+    color: c.$colorNeutralWhite;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      height: $knobRadius;
+      width: $knobRadius;
+      background: $knobBgOff;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      /* doiuse-disable calc */
+      right: calc(#{$width} - #{c.$borderWidth * 2} - #{$knobRadius} - #{$knobHorizontalOffset});
+      /* doiuse-enable calc */
+      transition: right c.$transitionTimeMedium ease-in;
+    }
+  }
+
+  // track states
+  label.hover .toggleTrack,
+  label:hover .toggleTrack {
+    border-color: c.$colorPrimary;
+  }
+
+  label.error .toggleTrack {
+    border-color: c.$colorError;
+  }
+
+  label.disabled .toggleTrack {
+    background-color: c.$colorNeutralLight;
+    border-color: c.$colorNeutralLight;
+    box-shadow: none;
+    color: c.$colorNeutral;
+
+    &::before {
+      background: c.$colorNeutral;
+    }
+  }
+
+  label.focus .toggleTrack,
+  input:focus + label .toggleTrack {
+    @include h.outlineFormField;
+  }
+
+  // track ON state
+  input:checked + label .toggleTrack {
+    background: $trackBgOn;
+
+    &::before {
+      background: $knobBgOn;
+      right: $knobHorizontalOffset;
+    }
+  }
+
+  input:checked + label.disabled .toggleTrack {
+    background-color: c.$colorSuccessDark;
+    border-color: c.$colorNeutralLight;
+    box-shadow: none;
+    color: c.$colorNeutral;
+
+    &::before {
+      background-color: c.$colorNeutral;
+    }
+  }
+
+  .toggleTrackText {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  // the "OFF" text
+  input:not(:checked) + label .toggleTrackText {
+    animation: switchOff c.$transitionTimeMedium ease-in;
+    right: c.$grid * 2;
+    left: auto;
+    color: c.$colorTextSecondary;
+  }
+
+  // the "ON" text
+  input:checked + label .toggleTrackText {
+    animation: switchOn c.$transitionTimeMedium ease-in;
+    right: auto;
+    left: c.$grid * 1.5;
+    color: c.$colorNeutralWhite;
+  }
+}
+
+@include h.withError;

package/lib/components/ToggleFormik.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { FieldValidatorGeneric } from '../utils/formik';
+import { ExtractKeysOfValueType } from '../utils/types';
+import { ToggleExtraProps } from './Toggle';
+export type ToggleFormikProps<V extends object> = ToggleExtraProps & {
+    name: ExtractKeysOfValueType<V, boolean>;
+    validate?: FieldValidatorGeneric<boolean>;
+};
+export declare const ToggleFormik: <V extends object>({ name, validate, ...props }: ToggleFormikProps<V>) => ReactElement;

package/lib/components/ToggleFormik.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useField } from 'formik';
+import { getFieldError } from '../utils/formik';
+import { Toggle } from './Toggle';
+export const ToggleFormik = ({ name, validate, ...props }) => {
+    const [field, meta] = useField({
+        name,
+        validate,
+    });
+    return React.createElement(Toggle, { ...props, name: name, checked: field.value, onChange: field.onChange, onBlur: field.onBlur, error: getFieldError(meta) });
+};
+//# sourceMappingURL=ToggleFormik.js.map

package/lib/components/ToggleFormik.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleFormik.js","sourceRoot":"","sources":["../../src/components/ToggleFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAOnD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAmB,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAwB,EAAgB,EAAE;IACjH,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAU;QACtC,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AAC5I,CAAC,CAAA"}

package/lib/components/Tooltip.d.ts

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode, MutableRefObject, ReactText, MouseEventHandler, CSSProperties } from 'react';
+import { Placement } from '@popperjs/core';
+import { usePopper } from 'react-popper';
+import { PortalContainer } from '../utils/portal';
+export type PopperRef = ReturnType<typeof usePopper>;
+export type TooltipProps = {
+    content: ReactNode;
+    id?: string;
+    hideTimeoutDuration?: number;
+    offset?: number;
+    arrow?: boolean;
+    color?: 'dark' | 'secondary';
+    padding?: number;
+    placement?: Placement;
+    visible?: boolean;
+    className?: string;
+    hoverAbleTooltip?: boolean;
+    children: (ref: React.Dispatch<React.SetStateAction<HTMLElement | null>>, onMouseEnter?: MouseEventHandler, onMouseLeave?: MouseEventHandler) => ReactNode;
+    popperRef?: MutableRefObject<PopperRef | undefined>;
+    updateToken?: ReactText | boolean;
+    tooltipContainer?: PortalContainer;
+    wordBreak?: CSSProperties['wordBreak'];
+    disabled?: boolean;
+    zIndex?: number;
+};
+/**
+ * ### Purpose
+ * Useful when you need to display additional information/actionable content.
+ * A tooltip with this content is displayed when user hovers over a target element.
+ *
+ * ### General info
+ * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
+ * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
+ * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
+ * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
+ * - Use `updateToken` prop to update the tooltip position.
+ * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
+ *
+ * ### Usage
+ * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
+ */
+export declare const Tooltip: FC<TooltipProps>;

package/lib/components/Tooltip.js

@@ -0,0 +1,139 @@
+import React, { useCallback, useState, useImperativeHandle, useLayoutEffect, createContext, useContext, useMemo, useRef, useEffect, } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
+import cn from 'classnames';
+import { containsElement } from '../hooks';
+import { getPortalContainer } from '../utils/portal';
+import styles from './Tooltip.module.scss';
+const TooltipContext = createContext(null);
+/**
+ * ### Purpose
+ * Useful when you need to display additional information/actionable content.
+ * A tooltip with this content is displayed when user hovers over a target element.
+ *
+ * ### General info
+ * - Tooltip automatically detects viewport overflow and changes placement to prevent it.
+ * - Offset (space between a target and tooltip elements) can be also configured via "offset" property.
+ * - If "content" property is undefined, tooltip element will be removed from DOM entirely.
+ * - It's required to set the "id" property which will be assigned to the tooltip. This id parameter can be then used as a value of "aria-labelledby" attribute.
+ * - Use `updateToken` prop to update the tooltip position.
+ * - Use `tooltipContainer` prop to change the tooltip portal container. Defaults to `body`.
+ *
+ * ### Usage
+ * Wrap the target element with Tooltip component and use the "content" property to define what should be displayed inside the tooltip.
+ */
+export const Tooltip = ({ id, content, hideTimeoutDuration = 100, offset = 10, padding = 10, placement = 'top', visible: visibilityOverride, children, popperRef, wordBreak, updateToken, tooltipContainer = 'body', hoverAbleTooltip = true, disabled = false, zIndex = 20, arrow = true, color, className, }) => {
+    const [isShown, setShown] = useState(false);
+    const timeoutRef = useRef(null);
+    const context = useContext(TooltipContext);
+    const clearHideTimeout = useCallback(() => {
+        const timeoutId = timeoutRef.current;
+        context === null || context === void 0 ? void 0 : context.clearHideTimeout();
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+        }
+    }, [context]);
+    /*
+     * We're using useState instead of useRef because react-popper package has some issues with useRef:
+     * https://github.com/popperjs/react-popper/issues/241#issuecomment-591411605
+     */
+    const [referenceElement, setReferenceElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const modifiers = useMemo(() => {
+        const result = [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, offset],
+                },
+            },
+        ];
+        if (arrow) {
+            result.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding,
+                },
+            });
+        }
+        return result;
+    }, [arrow, padding, offset, arrowElement]);
+    const popper = usePopper(referenceElement, popperElement, {
+        placement,
+        modifiers,
+    });
+    useImperativeHandle(popperRef, () => popper, [popper]);
+    const onMouseEnter = useCallback(() => {
+        clearHideTimeout();
+        setShown(true);
+    }, [clearHideTimeout]);
+    const onMouseLeave = useCallback((event) => {
+        const e = event;
+        const { relatedTarget } = e !== null && e !== void 0 ? e : {};
+        timeoutRef.current = setTimeout(() => {
+            if (relatedTarget) {
+                if (!containsElement(context === null || context === void 0 ? void 0 : context.referenceElement, relatedTarget) &&
+                    !containsElement(context === null || context === void 0 ? void 0 : context.popperElement, relatedTarget)) {
+                    context === null || context === void 0 ? void 0 : context.hide();
+                }
+            }
+            setShown(false);
+        }, hideTimeoutDuration);
+    }, [hideTimeoutDuration, context]);
+    const contextValue = useMemo(() => ({
+        popperElement,
+        referenceElement,
+        hide: onMouseLeave,
+        clearHideTimeout,
+    }), [onMouseLeave, clearHideTimeout, popperElement, referenceElement]);
+    // Makes sure "visible" prop can override local "isShown" state
+    const isTooltipVisible = typeof visibilityOverride === 'boolean' ? visibilityOverride : !disabled && isShown;
+    // Update the tooltip's position (useful when resizing table columns)
+    useLayoutEffect(() => {
+        var _a;
+        if (content) {
+            void ((_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isTooltipVisible, updateToken]);
+    useEffect(() => {
+        return () => {
+            clearHideTimeout();
+        };
+    }, [clearHideTimeout]);
+    useEffect(() => {
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseenter', onMouseEnter, false);
+        referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.addEventListener('mouseleave', onMouseLeave, false);
+        return () => {
+            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseenter', onMouseEnter);
+            referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [referenceElement, onMouseEnter, onMouseLeave]);
+    useEffect(() => {
+        if (hoverAbleTooltip) {
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseenter', onMouseEnter, false);
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.addEventListener('mouseleave', onMouseLeave, false);
+        }
+        return () => {
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseenter', onMouseEnter);
+            popperElement === null || popperElement === void 0 ? void 0 : popperElement.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [popperElement, onMouseEnter, onMouseLeave, hoverAbleTooltip]);
+    const tooltipPortalContainer = getPortalContainer(tooltipContainer, referenceElement);
+    return (React.createElement(TooltipContext.Provider, { value: contextValue },
+        children(setReferenceElement, onMouseEnter, (e) => {
+            onMouseLeave(e);
+        }),
+        content !== undefined && (React.createElement(React.Fragment, null,
+            React.createElement("span", { ...(id && { id }), className: cn(styles.tooltipSr, className), role: "tooltip", "data-test": "tooltip-sr" }, content),
+            tooltipPortalContainer &&
+                ReactDOM.createPortal(React.createElement(React.Fragment, null,
+                    React.createElement("span", { ref: setPopperElement, className: cn(styles.overlay, {
+                            [styles.hidden]: !isTooltipVisible,
+                        }, color && [styles[color]], className), style: { ...popper.styles.popper, ...{ zIndex: context ? zIndex + 1 : zIndex }, wordBreak }, "data-test": "tooltip-overlay", "aria-hidden": true, ...popper.attributes.popper },
+                        content,
+                        arrow && (React.createElement("span", { ref: setArrowElement, className: styles.arrow, style: popper.styles.arrow, "data-test": "tooltip-arrow", ...popper.attributes.arrow })))), tooltipPortalContainer)))));
+};
+//# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"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"}

package/lib/components/Tooltip.module.scss

@@ -0,0 +1,175 @@
+@use 'sass:math';
+@use '../../styles/constants' as c;
+@use '../../styles/helpers' as h;
+
+.tooltipSr {
+  @include h.visuallyHidden;
+}
+
+$tooltipArrowSize1-3: math.div(c.$tooltipArrowSize, 3);
+$tooltipArrowSize2-3: math.div(c.$tooltipArrowSize, 3) * 2;
+
+@mixin arrow($position, $color, $borderColor) {
+  @if $position == bottom {
+    > .arrow {
+      top: 0;
+
+      &::before,
+      &::after {
+        border-left: c.$tooltipArrowSize solid transparent;
+        border-right: c.$tooltipArrowSize solid transparent;
+        top: 0;
+        left: 50%;
+        margin-left: -(c.$tooltipArrowSize);
+      }
+
+      &::before {
+        border-bottom: c.$tooltipArrowSize solid $color;
+        margin-top: -(c.$tooltipArrowSize);
+      }
+
+      &::after {
+        border-bottom: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize2-3));
+      }
+    }
+  } @else if $position == right {
+    > .arrow {
+      left: 0;
+
+      &::before,
+      &::after {
+        border-top: c.$tooltipArrowSize solid transparent;
+        border-bottom: c.$tooltipArrowSize solid transparent;
+        top: 50%;
+        left: 0;
+        margin-top: -(c.$tooltipArrowSize);
+      }
+
+      &::before {
+        border-right: c.$tooltipArrowSize solid $color;
+        margin-left: -(c.$tooltipArrowSize);
+      }
+
+      &::after {
+        border-right: c.$tooltipArrowSize solid $borderColor;
+        transform: translateX(-($tooltipArrowSize2-3));
+      }
+    }
+  } @else if $position == left {
+    > .arrow {
+      right: 0;
+
+      &::before,
+      &::after {
+        border-top: c.$tooltipArrowSize solid transparent;
+        border-bottom: c.$tooltipArrowSize solid transparent;
+        top: 50%;
+        left: 100%;
+        margin-top: -(c.$tooltipArrowSize);
+      }
+
+      &::before {
+        border-left: c.$tooltipArrowSize solid $color;
+      }
+
+      &::after {
+        border-left: c.$tooltipArrowSize solid $borderColor;
+        transform: translateX(-($tooltipArrowSize1-3));
+      }
+    }
+  } @else {
+    > .arrow {
+      bottom: 0;
+
+      &::before,
+      &::after {
+        border-left: c.$tooltipArrowSize solid transparent;
+        border-right: c.$tooltipArrowSize solid transparent;
+        top: 100%;
+        left: 50%;
+        margin-left: -(c.$tooltipArrowSize);
+      }
+
+      &::before {
+        border-top: c.$tooltipArrowSize solid $color;
+      }
+
+      &::after {
+        border-top: c.$tooltipArrowSize solid $borderColor;
+        transform: translateY(-($tooltipArrowSize1-3));
+      }
+    }
+  }
+}
+
+@mixin arrowPlacements($color: c.$colorNeutralLight, $borderColor: c.$colorNeutralLighter) {
+  &[data-popper-placement^='top'] {
+    @include arrow(top, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='right'] {
+    @include arrow(right, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='bottom'] {
+    @include arrow(bottom, $color, $borderColor);
+  }
+
+  &[data-popper-placement^='left'] {
+    @include arrow(left, $color, $borderColor);
+  }
+}
+
+.overlay {
+  @include c.typographyBodySmall;
+
+  position: relative;
+  max-width: c.$tooltipMaxWidth;
+  padding: c.$grid * 3;
+  background: c.$colorNeutralLighter;
+  border: c.$borderWidth solid c.$colorNeutralLight;
+  border-radius: c.$borderRadius;
+  color: c.$colorText;
+  word-break: break-all;
+
+  &.hidden {
+    visibility: hidden;
+
+    // important is needed to override inline style
+    top: -99999px !important;
+    left: -99999px !important;
+  }
+
+  &.secondary {
+    border: none;
+    color: c.$colorNeutralWhite;
+    background-color: c.$colorTextSubdued;
+
+    @include arrowPlacements(c.$colorTextSubdued, transparent);
+  }
+
+  &.dark {
+    border: none;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
+
+    @include arrowPlacements(c.$colorBrandAccent, transparent);
+  }
+
+  > .arrow {
+    position: absolute;
+    z-index: c.$zIndex100;
+    display: block;
+    width: c.$tooltipArrowSize;
+    height: c.$tooltipArrowSize;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+  }
+
+  @include arrowPlacements;
+}

package/lib/components/TruncatedText.d.ts

@@ -0,0 +1,15 @@
+import { FC, ReactNode } from 'react';
+import { DataTestProp } from '../../src';
+import { TooltipProps } from './Tooltip';
+interface TruncatedTextProps extends DataTestProp {
+    text: ReactNode;
+    forceUpdateToken?: string | number | boolean;
+    className?: string;
+    multiline?: boolean;
+    tooltipVisible?: boolean;
+    tooltipClassName?: string;
+    hoverAbleTooltip?: boolean;
+    tooltipPlacement?: TooltipProps['placement'];
+}
+export declare const TruncatedText: FC<TruncatedTextProps>;
+export {};

package/lib/components/TruncatedText.js

@@ -0,0 +1,23 @@
+import React, { useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
+import { useUID } from 'react-uid';
+import { Tooltip } from './Tooltip';
+import styles from './TruncatedText.module.scss';
+export const TruncatedText = ({ text, forceUpdateToken, className, tooltipVisible, tooltipPlacement = 'top', hoverAbleTooltip, multiline, tooltipClassName, 'data-test': dataTest, }) => {
+    const textRef = useRef(null);
+    const [tooltip, setTooltip] = useState();
+    const idTooltip = useUID();
+    useIsomorphicLayoutEffect(() => {
+        const span = textRef.current;
+        if (span === null) {
+            return;
+        }
+        // https://codepen.io/triple-j/pen/wadKQB
+        setTooltip(span.offsetWidth < span.scrollWidth || span.offsetHeight < span.scrollHeight ? text : undefined);
+    }, [text, forceUpdateToken]);
+    return (React.createElement(Tooltip, { id: idTooltip, content: tooltip, visible: tooltipVisible, className: tooltipClassName, placement: tooltipPlacement, updateToken: forceUpdateToken, hoverAbleTooltip: hoverAbleTooltip }, (ref) => (React.createElement("div", { ref: mergeRefs([textRef, ref]), className: cn(styles.truncatedText, { [styles.multiline]: multiline }, className) },
+        React.createElement("span", { "data-test": dataTest, "aria-labelledby": tooltip ? idTooltip : undefined }, text)))));
+};
+//# sourceMappingURL=TruncatedText.js.map

package/lib/components/TruncatedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedText.js","sourceRoot":"","sources":["../../src/components/TruncatedText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,MAAM,EAAE,QAAQ,EAAa,MAAM,OAAO,CAAA;AAC9D,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAGlC,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAchD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,WAAW,EAAE,QAAQ,GACtB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAyB,CAAA;IAC/D,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAE1B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,yCAAyC;QACzC,UAAU,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAE5B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,EAC3B,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,gBAAgB,EAAE,gBAAgB,IAEjC,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC;QACpH,2CAAiB,QAAQ,qBAAmB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACxE,IAAI,CACA,CACH,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/TruncatedText.module.scss

@@ -0,0 +1,9 @@
+@use '../../styles/helpers' as h;
+
+.truncatedText {
+  @include h.overflowEllipsis;
+}
+
+.multiline {
+  @include h.multilineOverflowEllipsis;
+}

package/lib/helpers/array.d.ts

@@ -0,0 +1,5 @@
+export declare const sum: (numbers: number[]) => number;
+export declare const average: (numbers: number[]) => number | null;
+export declare const flatten: <T>(arrays: T[][]) => T[];
+export declare const difference: <T>(array1: T[], array2: T[]) => T[];
+export declare const range: (from: number, to: number, step?: number) => number[];

package/lib/helpers/array.js

@@ -0,0 +1,19 @@
+import { safeDivision } from './math';
+export const sum = (numbers) => numbers.reduce((a, b) => a + b, 0);
+export const average = (numbers) => safeDivision(sum(numbers), numbers.length);
+export const flatten = (arrays) => arrays.reduce((a, b) => [...a, ...b], []);
+export const difference = (array1, array2) => {
+    const set1 = new Set(array1);
+    const set2 = new Set(array2);
+    return [...set1].filter((x) => !set2.has(x));
+};
+export const range = (from, to, step = 1) => {
+    let nextElement = from;
+    const result = [];
+    while (nextElement <= to) {
+        result.push(nextElement);
+        nextElement += step;
+    }
+    return result;
+};
+//# sourceMappingURL=array.js.map

package/lib/helpers/array.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"array.js","sourceRoot":"","sources":["../../src/helpers/array.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,OAAiB,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AAE5E,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,OAAiB,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;AAExF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAI,MAAa,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;AAEtF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,MAAW,EAAE,MAAW,EAAE,EAAE;IACxD,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;AAC9C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAU,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE;IAC1D,IAAI,WAAW,GAAG,IAAI,CAAA;IACtB,MAAM,MAAM,GAAG,EAAE,CAAA;IAEjB,OAAO,WAAW,IAAI,EAAE,EAAE,CAAC;QACzB,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QACxB,WAAW,IAAI,IAAI,CAAA;IACrB,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/lib/helpers/escapeHtml.d.ts

@@ -0,0 +1 @@
+export declare const escapeHtml: (html: string) => string;

package/lib/helpers/escapeHtml.js

@@ -0,0 +1,7 @@
+export const escapeHtml = (html) => {
+    const text = document.createTextNode(html);
+    const p = document.createElement('p');
+    p.appendChild(text);
+    return p.innerHTML;
+};
+//# sourceMappingURL=escapeHtml.js.map

package/lib/helpers/escapeHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"escapeHtml.js","sourceRoot":"","sources":["../../src/helpers/escapeHtml.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,EAAE;IACzC,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;IAC1C,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACrC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IACnB,OAAO,CAAC,CAAC,SAAS,CAAA;AACpB,CAAC,CAAA"}