@itwin/itwinui-react 1.24.0 → 1.27.0

package/esm/core/Table/hooks/useResizeColumns.js

@@ -0,0 +1,267 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { actions, makePropGetter, useGetLatest, } from 'react-table';
+export var useResizeColumns = function (ownerDocument) { return function (hooks) {
+    hooks.getResizerProps = [defaultGetResizerProps(ownerDocument)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstanceBeforeDimensions.push(useInstanceBeforeDimensions);
+}; };
+var isTouchEvent = function (event) {
+    return event.type === 'touchstart';
+};
+var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
+    var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
+    if (!ownerDocument) {
+        return props;
+    }
+    var dispatch = instance.dispatch, flatHeaders = instance.flatHeaders;
+    var onResizeStart = function (e, header) {
+        // lets not respond to multiple touches (e.g. 2 or 3 fingers)
+        if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
+            return;
+        }
+        // Setting `width` here because it might take several rerenders until actual column width is set.
+        flatHeaders.forEach(function (h) {
+            if (!h.width) {
+                h.width = h.resizeWidth;
+            }
+        });
+        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [d.id, d.width]; });
+        var nextHeaderIdWidths = nextHeader
+            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, d.width]; })
+            : [];
+        var clientX = isTouchEvent(e)
+            ? Math.round(e.touches[0].clientX)
+            : e.clientX;
+        var dispatchMove = function (clientXPos) {
+            return dispatch({ type: actions.columnResizing, clientX: clientXPos });
+        };
+        var dispatchEnd = function () {
+            return dispatch({
+                type: actions.columnDoneResizing,
+            });
+        };
+        var handlersAndEvents = {
+            mouse: {
+                moveEvent: 'mousemove',
+                moveHandler: function (e) { return dispatchMove(e.clientX); },
+                upEvent: 'mouseup',
+                upHandler: function () {
+                    ownerDocument.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    ownerDocument.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    dispatchEnd();
+                },
+            },
+            touch: {
+                moveEvent: 'touchmove',
+                moveHandler: function (e) {
+                    if (e.cancelable) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                    dispatchMove(e.touches[0].clientX);
+                },
+                upEvent: 'touchend',
+                upHandler: function () {
+                    ownerDocument.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    ownerDocument.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    dispatchEnd();
+                },
+            },
+        };
+        var events = isTouchEvent(e)
+            ? handlersAndEvents.touch
+            : handlersAndEvents.mouse;
+        var passiveIfSupported = passiveEventSupported()
+            ? { passive: false }
+            : false;
+        ownerDocument.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        ownerDocument.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        dispatch({
+            type: actions.columnStartResizing,
+            columnId: header.id,
+            columnWidth: header.width,
+            nextColumnWidth: nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.width,
+            headerIdWidths: headerIdWidths,
+            nextHeaderIdWidths: nextHeaderIdWidths,
+            clientX: clientX,
+        });
+    };
+    return [
+        props,
+        {
+            onMouseDown: function (e) {
+                e.persist();
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            onTouchStart: function (e) {
+                e.persist();
+                e.stopPropagation();
+                onResizeStart(e, header);
+            },
+            style: {
+                cursor: 'col-resize',
+            },
+            draggable: false,
+            role: 'separator',
+        },
+    ];
+}; };
+useResizeColumns.pluginName = 'useResizeColumns';
+var reducer = function (newState, action, previousState, instance) {
+    if (action.type === actions.init) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === actions.resetResize) {
+        return __assign(__assign({}, newState), { columnResizing: {
+                columnWidths: {},
+            } });
+    }
+    if (action.type === actions.columnStartResizing) {
+        var clientX = action.clientX, columnId = action.columnId, columnWidth = action.columnWidth, nextColumnWidth = action.nextColumnWidth, headerIdWidths = action.headerIdWidths, nextHeaderIdWidths = action.nextHeaderIdWidths;
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { startX: clientX, columnWidth: columnWidth, nextColumnWidth: nextColumnWidth, headerIdWidths: headerIdWidths, nextHeaderIdWidths: nextHeaderIdWidths, isResizingColumn: columnId }) });
+    }
+    if (action.type === actions.columnResizing) {
+        var clientX = action.clientX;
+        var _a = newState.columnResizing, _b = _a.startX, startX = _b === void 0 ? 0 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? 1 : _c, _d = _a.nextColumnWidth, nextColumnWidth = _d === void 0 ? 1 : _d, _e = _a.headerIdWidths, headerIdWidths = _e === void 0 ? [] : _e, _f = _a.nextHeaderIdWidths, nextHeaderIdWidths = _f === void 0 ? [] : _f;
+        var deltaX = clientX - startX;
+        var newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
+        var newNextColumnWidths = getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth);
+        if (!isNewColumnWidthsValid(newColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders) ||
+            !isNewColumnWidthsValid(newNextColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders)) {
+            return newState;
+        }
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { columnWidths: __assign(__assign(__assign({}, newState.columnResizing.columnWidths), newColumnWidths), newNextColumnWidths) }) });
+    }
+    if (action.type === actions.columnDoneResizing) {
+        return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { startX: undefined, isResizingColumn: undefined }) });
+    }
+    return newState;
+};
+var getColumnWidths = function (headerIdWidths, deltaPercentage) {
+    var columnWidths = {};
+    headerIdWidths.forEach(function (_a) {
+        var headerId = _a[0], headerWidth = _a[1];
+        columnWidths[headerId] = Math.max(headerWidth + headerWidth * deltaPercentage, 0);
+    });
+    return columnWidths;
+};
+var isNewColumnWidthsValid = function (columnWidths, headers) {
+    // Prevents from going outside the column bounds
+    if (Object.values(columnWidths).some(function (width) { return width <= 1; })) {
+        return false;
+    }
+    var _loop_1 = function (headerId, width) {
+        var header = headers === null || headers === void 0 ? void 0 : headers.find(function (h) { return h.id === headerId; });
+        if (!header) {
+            return "continue";
+        }
+        var minWidth = header.minWidth || 0;
+        var maxWidth = header.maxWidth || Infinity;
+        if (width < minWidth || width > maxWidth) {
+            return { value: false };
+        }
+    };
+    for (var _i = 0, _a = Object.entries(columnWidths); _i < _a.length; _i++) {
+        var _b = _a[_i], headerId = _b[0], width = _b[1];
+        var state_1 = _loop_1(headerId, width);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    return true;
+};
+var useInstanceBeforeDimensions = function (instance) {
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing;
+    var getInstance = useGetLatest(instance);
+    flatHeaders.forEach(function (header, index) {
+        var _a;
+        var resizeWidth = columnResizing.columnWidths[header.id];
+        header.width = resizeWidth || header.width || header.originalWidth;
+        header.isResizing = columnResizing.isResizingColumn === header.id;
+        var headerToResize = header.disableResizing
+            ? getPreviousResizableHeader(header, instance)
+            : header;
+        var nextResizableHeader = getNextResizableHeader(header, instance);
+        header.canResize =
+            header.disableResizing != null ? !header.disableResizing : true;
+        // Show resizer when header is resizable or when next header is resizable
+        // and there is resizable columns on the left side of the resizer.
+        header.isResizerVisible =
+            (header.canResize && !!nextResizableHeader) ||
+                (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+        header.getResizerProps = makePropGetter(getHooks().getResizerProps, {
+            instance: getInstance(),
+            header: headerToResize,
+            nextHeader: nextResizableHeader,
+        });
+    });
+};
+var getPreviousResizableHeader = function (headerColumn, instance) {
+    var _a;
+    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
+    return __spreadArray([], headersList, true).slice(0, headerIndex)
+        .reverse()
+        .find(function (h) { return !h.disableResizing; });
+};
+var getNextResizableHeader = function (headerColumn, instance) {
+    var _a;
+    var headersList = ((_a = headerColumn.parent) === null || _a === void 0 ? void 0 : _a.columns) || instance.flatHeaders;
+    var headerIndex = headersList.findIndex(function (h) { return h.id === headerColumn.id; });
+    return __spreadArray([], headersList, true).slice(headerIndex + 1)
+        .find(function (h) { return !h.disableResizing; });
+};
+function getLeafHeaders(header) {
+    var leafHeaders = [];
+    var recurseHeader = function (header) {
+        if (header.columns && header.columns.length) {
+            header.columns.map(recurseHeader);
+        }
+        leafHeaders.push(header);
+    };
+    recurseHeader(header);
+    return leafHeaders;
+}
+// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
+var passiveSupported = null;
+var passiveEventSupported = function () {
+    // memoize support to avoid adding multiple test events
+    if (passiveSupported != null) {
+        return passiveSupported;
+    }
+    try {
+        var options = {
+            once: true,
+            get passive() {
+                passiveSupported = true;
+                return false;
+            },
+        };
+        window.addEventListener('test', function () { }, options);
+    }
+    catch (_a) {
+        passiveSupported = false;
+    }
+    return passiveSupported;
+};

package/esm/core/Table/utils.d.ts

@@ -1,2 +1,2 @@
 import { ColumnInstance } from 'react-table';
-export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>) => React.CSSProperties | undefined;
+export declare const getCellStyle: <T extends Record<string, unknown>>(column: ColumnInstance<T>, isTableResizing: boolean) => React.CSSProperties | undefined;

package/esm/core/Table/utils.js

@@ -1,10 +1,16 @@
-export var getCellStyle = function (column) {
+export var getCellStyle = function (column, isTableResizing) {
     var style = {};
     style.flex = "1 1 145px";
     if (column.width) {
         var width = typeof column.width === 'string' ? column.width : column.width + "px";
         style.width = width;
-        style.flex = "0 0 " + width;
+        // This allows flexbox to handle the width of the column on table resize
+        if (isTableResizing && column.canResize) {
+            style.flex = Number(column.width) + " 1 " + width;
+        }
+        else {
+            style.flex = "0 0 " + width;
+        }
     }
     if (column.maxWidth) {
         style.maxWidth = column.maxWidth + "px";

package/esm/core/Tabs/Tabs.d.ts

@@ -43,6 +43,10 @@ export declare type TabsProps = {
      * Custom CSS class name for tab panel.
      */
     contentClassName?: string;
+    /**
+     * Custom CSS class name for the tabs wrapper.
+     */
+    wrapperClassName?: string;
     /**
      * Content inside the tab panel.
      */

package/esm/core/Tabs/Tabs.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import React from 'react';
-import { useTheme, useResizeObserver, useMergedRefs, getBoundedValue, } from '../utils';
+import { useTheme, useMergedRefs, getBoundedValue, getWindow, useContainerWidth, } from '../utils';
 import '@itwin/itwinui-css/css/tabs.css';
 import { Tab } from './Tab';
 /**
@@ -54,45 +54,38 @@ import { Tab } from './Tab';
  * <Tabs labels={tabsWithIcons} type='pill' />
  */
 export var Tabs = function (props) {
-    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _a = props.focusActivationMode, focusActivationMode = _a === void 0 ? 'auto' : _a, _b = props.type, type = _b === void 0 ? 'default' : _b, _c = props.color, color = _c === void 0 ? 'blue' : _c, _d = props.orientation, orientation = _d === void 0 ? 'horizontal' : _d, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "children"]);
+    var _a, _b, _c;
+    var labels = props.labels, activeIndex = props.activeIndex, onTabSelected = props.onTabSelected, _d = props.focusActivationMode, focusActivationMode = _d === void 0 ? 'auto' : _d, _e = props.type, type = _e === void 0 ? 'default' : _e, _f = props.color, color = _f === void 0 ? 'blue' : _f, _g = props.orientation, orientation = _g === void 0 ? 'horizontal' : _g, tabsClassName = props.tabsClassName, contentClassName = props.contentClassName, wrapperClassName = props.wrapperClassName, children = props.children, rest = __rest(props, ["labels", "activeIndex", "onTabSelected", "focusActivationMode", "type", "color", "orientation", "tabsClassName", "contentClassName", "wrapperClassName", "children"]);
     useTheme();
     var tablistRef = React.useRef(null);
-    var _e = React.useState(function () { var _a; return (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width; }), tabsWidth = _e[0], setTabsWidth = _e[1];
-    var updateTabsWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setTabsWidth(width);
-    }, []);
-    var tablistSizeRef = useResizeObserver(updateTabsWidth)[0];
+    var _h = useContainerWidth(type !== 'default'), tablistSizeRef = _h[0], tabsWidth = _h[1];
     var refs = useMergedRefs(tablistRef, tablistSizeRef);
-    var _f = React.useState(function () {
+    var _j = React.useState(function () {
         return activeIndex != null
             ? getBoundedValue(activeIndex, 0, labels.length - 1)
             : 0;
-    }), currentActiveIndex = _f[0], setCurrentActiveIndex = _f[1];
+    }), currentActiveIndex = _j[0], setCurrentActiveIndex = _j[1];
     React.useLayoutEffect(function () {
         if (activeIndex != null && currentActiveIndex !== activeIndex) {
             setCurrentActiveIndex(getBoundedValue(activeIndex, 0, labels.length - 1));
         }
     }, [activeIndex, currentActiveIndex, labels.length]);
-    var _g = React.useState({}), stripeStyle = _g[0], setStripeStyle = _g[1];
+    // CSS custom properties to place the active stripe
+    var _k = React.useState({}), stripeProperties = _k[0], setStripeProperties = _k[1];
     React.useLayoutEffect(function () {
-        var _a;
-        if (type !== 'default') {
-            var activeTab = (_a = tablistRef.current) === null || _a === void 0 ? void 0 : _a.children[currentActiveIndex];
-            var activeTabRect = activeTab === null || activeTab === void 0 ? void 0 : activeTab.getBoundingClientRect();
-            setStripeStyle({
-                width: orientation === 'horizontal' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width : undefined,
-                height: orientation === 'vertical' ? activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height : undefined,
-                left: orientation === 'horizontal'
-                    ? activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetLeft
-                    : (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.width) - 2,
-                top: orientation === 'horizontal'
-                    ? (activeTabRect === null || activeTabRect === void 0 ? void 0 : activeTabRect.height) - 2
-                    : activeTab === null || activeTab === void 0 ? void 0 : activeTab.offsetTop,
-            });
+        if (type !== 'default' && tablistRef.current != undefined) {
+            var activeTab = tablistRef.current.children[currentActiveIndex];
+            var activeTabRect = activeTab.getBoundingClientRect();
+            setStripeProperties(__assign(__assign({}, (orientation === 'horizontal' && {
+                '--stripe-width': activeTabRect.width + "px",
+                '--stripe-left': activeTab.offsetLeft + "px",
+            })), (orientation === 'vertical' && {
+                '--stripe-height': activeTabRect.height + "px",
+                '--stripe-top': activeTab.offsetTop + "px",
+            })));
         }
     }, [currentActiveIndex, type, orientation, tabsWidth]);
-    var _h = React.useState(), focusedIndex = _h[0], setFocusedIndex = _h[1];
+    var _l = React.useState(), focusedIndex = _l[0], setFocusedIndex = _l[1];
     React.useEffect(function () {
         var _a;
         if (tablistRef.current && focusedIndex !== undefined) {
@@ -100,7 +93,7 @@ export var Tabs = function (props) {
             (_a = tab) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [focusedIndex]);
-    var _j = React.useState(false), hasSublabel = _j[0], setHasSublabel = _j[1]; // used for setting size
+    var _m = React.useState(false), hasSublabel = _m[0], setHasSublabel = _m[1]; // used for setting size
     React.useLayoutEffect(function () {
         var _a;
         setHasSublabel(type !== 'pill' && // pill tabs should never have sublabels
@@ -173,10 +166,12 @@ export var Tabs = function (props) {
                 break;
         }
     };
-    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation) },
+    var isIE = !((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, '--stripe-width', '100px'));
+    return (React.createElement("div", { className: cx('iui-tabs-wrapper', "iui-" + orientation, wrapperClassName), style: stripeProperties },
         React.createElement("ul", __assign({ className: cx('iui-tabs', "iui-" + type, {
                 'iui-green': color === 'green',
-                'iui-animated': type !== 'default',
+                'iui-animated': type !== 'default' && !isIE,
+                'iui-not-animated': isIE,
                 'iui-large': hasSublabel,
             }, tabsClassName), role: 'tablist', ref: refs, onKeyDown: onKeyDown }, rest), labels.map(function (label, index) {
             var onClick = function () {
@@ -198,7 +193,6 @@ export var Tabs = function (props) {
                 },
             }))));
         })),
-        type !== 'default' && (React.createElement("div", { className: 'iui-tab-stripe', style: stripeStyle })),
         children && (React.createElement("div", { className: cx('iui-tabs-content', contentClassName), role: 'tabpanel' }, children))));
 };
 /**

package/esm/core/index.d.ts

@@ -32,10 +32,12 @@ export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export type { HeaderProps, HeaderBreadcrumbsProps, HeaderButtonProps, HeaderLogoProps, } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
 export type { VerticalTabsProps, TabProps, HorizontalTabsProps, HorizontalTabProps, } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
-export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
+export type { InformationPanelProps, InformationPanelWrapperProps, InformationPanelHeaderProps, InformationPanelBodyProps, InformationPanelContentProps, } from './InformationPanel';
 export { Input } from './Input';
 export type { InputProps } from './Input';
+export { Label } from './Label';
+export type { LabelProps } from './Label';
 export { LabeledInput } from './LabeledInput';
 export type { LabeledInputProps } from './LabeledInput';
 export { InputGroup } from './InputGroup';
@@ -86,5 +88,5 @@ export { UserIconGroup } from './UserIconGroup';
 export type { UserIconGroupProps } from './UserIconGroup';
 export { Wizard } from './Wizard';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
-export type { ThemeType } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps } from './utils';

package/esm/core/index.js

@@ -19,8 +19,9 @@ export { FileUpload, FileUploadTemplate } from './FileUpload';
 export { Footer } from './Footer';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo } from './Header';
 export { VerticalTabs, Tab, HorizontalTabs, HorizontalTab } from './Tabs';
-export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, } from './InformationPanel';
+export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel';
 export { Input } from './Input';
+export { Label } from './Label';
 export { LabeledInput } from './LabeledInput';
 export { InputGroup } from './InputGroup';
 export { LabeledSelect } from './LabeledSelect';
@@ -46,4 +47,4 @@ export { Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kb
 export { UserIcon } from './UserIcon';
 export { UserIconGroup } from './UserIconGroup';
 export { Wizard } from './Wizard';
-export { getUserColor, useTheme, ColorValue } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, } from './utils';

package/esm/core/utils/color/ColorValue.d.ts

@@ -170,6 +170,7 @@ export declare class ColorValue {
     private static toHsv;
     /** True if the value of this ColorValue is the same as another ColorValue. */
     equals(other: ColorValue): boolean;
+    static getFormattedColorNumber(value: number, precision?: number): string;
     /** Convert the 0xTTBBGGRR color to a string of the form "rgba(r,g,b,a)" where the color components are specified in decimal and the alpha component is a fraction. */
     toRgbString(includeAlpha?: boolean): string;
     /** Convert this ColorValue to a string in the form "hsl(h,s,l) or hsla(h,s,l,a)" - i.e hsl(120,50%,50%). */