@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/utils/RefComponent.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+/**
+ * Helper type to reduce boilerplate in components that use `forwardRef`.
+ */
+export type RefComponent<Props, RefType = HTMLDivElement> = ForwardRefExoticComponent<Props & RefAttributes<RefType>>;

package/lib/es/src/utils/RefComponent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/es/src/utils/SortUtils.d.ts

@@ -0,0 +1,9 @@
+import type { ObjectValues } from './ObjectValues';
+export declare const SortDirection: {
+    readonly ASCENDING: "asc";
+    readonly DESCENDING: "desc";
+};
+export type SortDirectionType = ObjectValues<typeof SortDirection>;
+export default SortDirection;
+export declare const sortByProperty: <T>(array: T[], property: keyof T, sortDirection?: SortDirectionType, isCaseSensitive?: boolean) => T[];
+export declare const naturalSortByProperty: <T>(array: T[], property: keyof T, sortDirection?: SortDirectionType, isCaseSensitive?: boolean) => T[];

package/lib/es/src/utils/SortUtils.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.naturalSortByProperty = exports.sortByProperty = exports.SortDirection = void 0;
+const tslib_1 = require("tslib");
+const orderBy_1 = tslib_1.__importDefault(require("lodash/fp/orderBy"));
+const natural_orderby_1 = require("natural-orderby");
+exports.SortDirection = {
+    ASCENDING: 'asc',
+    DESCENDING: 'desc',
+};
+exports.default = exports.SortDirection;
+const toLowerCaseProp = (element, prop) => {
+    if (typeof element[prop] === 'string') {
+        return element[prop].toLowerCase();
+    }
+    return element[prop];
+};
+const sortByProperty = (array, property, sortDirection = exports.SortDirection.ASCENDING, isCaseSensitive) => {
+    if (!isCaseSensitive) {
+        return (0, orderBy_1.default)((element) => toLowerCaseProp(element, property), sortDirection, array);
+    }
+    return (0, orderBy_1.default)([property], sortDirection, array);
+};
+exports.sortByProperty = sortByProperty;
+const naturalSortByProperty = (array, property, sortDirection = exports.SortDirection.ASCENDING, isCaseSensitive) => {
+    if (!isCaseSensitive) {
+        return (0, natural_orderby_1.orderBy)(array, (element) => toLowerCaseProp(element, property), sortDirection);
+    }
+    return (0, natural_orderby_1.orderBy)(array, property, [sortDirection]);
+};
+exports.naturalSortByProperty = naturalSortByProperty;

package/lib/es/src/utils/arrayMove.d.ts

@@ -0,0 +1,2 @@
+declare const arrayMove: <T>(array: T[], from: number, to: number) => T[];
+export default arrayMove;

package/lib/es/src/utils/arrayMove.js

@@ -0,0 +1,15 @@
+"use strict";
+// taken from https://github.com/sindresorhus/array-move
+// but added here so it will be compiled to es5 as the original library was not and failed in IE11
+Object.defineProperty(exports, "__esModule", { value: true });
+const arrayMoveMutate = (array, from, to) => {
+    const startIndex = to < 0 ? array.length + to : to;
+    const item = array.splice(from, 1)[0];
+    array.splice(startIndex, 0, item);
+};
+const arrayMove = (array, from, to) => {
+    const newArray = [...array];
+    arrayMoveMutate(newArray, from, to);
+    return newArray;
+};
+exports.default = arrayMove;

package/lib/es/src/utils/buttonEffect.d.ts

@@ -0,0 +1 @@
+export declare const createButtonRipple: (event: MouseEvent | TouchEvent, target?: HTMLElement | null) => void;

package/lib/es/src/utils/buttonEffect.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createButtonRipple = void 0;
+const createButtonRipple = (event, target = null) => {
+    const button = target || event.currentTarget;
+    const buttonRect = button.getBoundingClientRect();
+    const circle = document.createElement('span');
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+    circle.style.width = circle.style.height = `${diameter}px`;
+    if (event instanceof MouseEvent) {
+        circle.style.left = `${event.clientX - buttonRect.left - radius}px`;
+        circle.style.top = `${event.clientY - buttonRect.top - radius}px`;
+    }
+    // The TouchEvent does not contain clientX/clientY by definition. Most browsers will emulate/add it, though.
+    // Nevertheless, we read the client values from the first touch object to be compliant.
+    // Note: some browsers don't provide the global "TouchEvent" constructor!
+    if (!!window.TouchEvent && event instanceof window.TouchEvent) {
+        const firstTouch = event.touches[0];
+        circle.style.left = `${firstTouch.clientX - buttonRect.left - radius}px`;
+        circle.style.top = `${firstTouch.clientY - buttonRect.top - radius}px`;
+    }
+    circle.classList.add('btn-ripple');
+    const rippleElement = button.getElementsByClassName('btn-ripple')[0];
+    // Cleanup previous ripple element from current button in case there
+    // are multiple clicks on the button itself
+    if (rippleElement) {
+        rippleElement.remove();
+    }
+    button.appendChild(circle);
+    // Cleanup ripple element after some time
+    setTimeout(() => circle.remove(), 1000);
+};
+exports.createButtonRipple = createButtonRipple;
+const isTargetEligibleForEffect = (target) => {
+    if (!target || !target.className) {
+        return false;
+    }
+    const { className = '' } = target;
+    // In case the target is not a button but an SVG or anything else
+    if (typeof className !== 'string') {
+        return false;
+    }
+    const isButton = className.includes('btn ');
+    const isNotButtonComponent = !className.includes('btn-component');
+    const isNotLinkButton = !className.includes('btn-link');
+    const isNotCloseButton = !className.includes('close');
+    const isNotActionButton = !className.includes('btn-action');
+    const isNotDisabled = !className.includes('disabled');
+    return (isButton && isNotButtonComponent && isNotDisabled && isNotLinkButton && isNotCloseButton && isNotActionButton);
+};
+const enableButtonRipple = (event) => {
+    const target = event.target;
+    if (target) {
+        const isButton = isTargetEligibleForEffect(target);
+        const isChildOfButton = !isButton && isTargetEligibleForEffect(target.parentElement);
+        if (isButton || isChildOfButton) {
+            (0, exports.createButtonRipple)(event, isChildOfButton ? target.parentElement : target);
+        }
+    }
+};
+// Register button effect automatically (especially for non-React environments loading the UIKIT from CDN)
+(document => {
+    if (!document) {
+        return;
+    }
+    document.addEventListener('mousedown', enableButtonRipple, false);
+    document.addEventListener('touchstart', enableButtonRipple, false);
+})(document);

package/lib/es/src/utils/colorScheme.d.ts

@@ -0,0 +1,26 @@
+export declare const THEME_DATA_ATTRIBUTE = "data-theme";
+export declare const THEME_CHANGE_EVENT = "themechange";
+export declare const THEME_DEFAULT: "default";
+export declare const THEME_SYSTEM: "system";
+export declare const THEME_LIGHT: "light";
+export declare const THEME_DARK: "dark";
+export type ColorScheme = typeof THEME_DEFAULT | typeof THEME_SYSTEM | typeof THEME_LIGHT | typeof THEME_DARK;
+/**
+ * Returns the desired color scheme based on the user's cookie.
+ *
+ * This might be `undefined`, too, when no cookie value is set!
+ */
+export declare const getColorScheme: () => ColorScheme | undefined;
+/**
+ * Stores the given preferred color scheme in the browser's cookies.
+ *
+ * This should be done by a RIO service like User Profile SPA using a theme switcher component from the UIKIT where this
+ * function is referenced.
+ *
+ * @param scheme The color scheme to save.
+ */
+export declare const setColorScheme: (scheme: ColorScheme) => void;
+/**
+ * Initiates listening for theme change events.
+ */
+export declare const listenForSchemeChange: () => void;

package/lib/es/src/utils/colorScheme.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listenForSchemeChange = exports.setColorScheme = exports.getColorScheme = exports.THEME_DARK = exports.THEME_LIGHT = exports.THEME_SYSTEM = exports.THEME_DEFAULT = exports.THEME_CHANGE_EVENT = exports.THEME_DATA_ATTRIBUTE = void 0;
+const COOKIE_NAME = 'uikit-color-scheme';
+const PATH = '/';
+const DOMAIN = '.rio.cloud';
+const EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+exports.THEME_DATA_ATTRIBUTE = 'data-theme';
+exports.THEME_CHANGE_EVENT = 'themechange';
+exports.THEME_DEFAULT = 'default';
+exports.THEME_SYSTEM = 'system';
+exports.THEME_LIGHT = 'light';
+exports.THEME_DARK = 'dark';
+const updateHtmlScheme = (scheme) => {
+    if (scheme) {
+        document.documentElement.setAttribute(exports.THEME_DATA_ATTRIBUTE, scheme);
+    }
+    else {
+        document.documentElement.removeAttribute(exports.THEME_DATA_ATTRIBUTE);
+    }
+};
+const getSchemeFromCookie = () => {
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const find = decodedCookie.split(';').find(entry => entry.includes(COOKIE_NAME));
+    return find?.split('=')[1];
+};
+/**
+ * Returns the desired color scheme based on the user's cookie.
+ *
+ * This might be `undefined`, too, when no cookie value is set!
+ */
+const getColorScheme = () => {
+    const colorScheme = getSchemeFromCookie();
+    switch (colorScheme) {
+        case exports.THEME_DEFAULT:
+            updateHtmlScheme();
+            break;
+        case exports.THEME_SYSTEM:
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                updateHtmlScheme(exports.THEME_DARK);
+            }
+            else {
+                updateHtmlScheme(exports.THEME_LIGHT);
+            }
+            break;
+        case exports.THEME_LIGHT:
+        case exports.THEME_DARK:
+            updateHtmlScheme(colorScheme);
+            break;
+    }
+    return colorScheme;
+};
+exports.getColorScheme = getColorScheme;
+/**
+ * Stores the given preferred color scheme in the browser's cookies.
+ *
+ * This should be done by a RIO service like User Profile SPA using a theme switcher component from the UIKIT where this
+ * function is referenced.
+ *
+ * @param scheme The color scheme to save.
+ */
+const setColorScheme = (scheme) => {
+    const isDevEnv = window.location.host.startsWith('localhost') || window.location.host.startsWith('127.0.0.1');
+    const newCookieValues = encodeURIComponent(scheme);
+    const domain = isDevEnv ? 'localhost' : DOMAIN;
+    document.cookie = `${COOKIE_NAME}=${newCookieValues};domain=${domain};expires=${EXPIRATION_DATE};path=${PATH}`;
+};
+exports.setColorScheme = setColorScheme;
+/**
+ * Initiates listening for theme change events.
+ */
+const listenForSchemeChange = () => {
+    window.addEventListener('message', ({ data }) => {
+        if (data === exports.THEME_CHANGE_EVENT) {
+            (0, exports.getColorScheme)();
+            // Re-send the event to all iframes that might not be notified yet
+            for (const iframe of document.getElementsByTagName('iframe')) {
+                iframe.contentWindow?.postMessage(exports.THEME_CHANGE_EVENT, '*');
+            }
+        }
+    }, false);
+};
+exports.listenForSchemeChange = listenForSchemeChange;

package/lib/es/src/utils/cssuseragent.d.ts

@@ -0,0 +1 @@
+export function cssua(html: Object, userAgent: string, sa: any): Object;

package/lib/es/src/utils/cssuseragent.js

@@ -0,0 +1,325 @@
+"use strict";
+/* eslint-disable */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cssua = void 0;
+/**
+ * CssUserAgent (cssua.js) v2.1.31
+ * http://cssuseragent.org
+ *
+ * Copyright (c)2006-2015 Stephen M. McKamey.
+ * Licensed under The MIT License.
+ */
+/*jshint smarttabs:true, regexp:false, browser:true */
+/**
+ * @param html {Object} root DOM element
+ * @param userAgent {string} browser userAgent string
+ * @return {Object}
+ */
+const cssua = (html, userAgent, sa) => {
+    'use strict';
+    /**
+     * @const
+     * @type {string}
+     */
+    var PREFIX = ' ua-';
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_Platform = /\s*([\-\w ]+)[\s\/\:]([\d_]+\b(?:[\-\._\/]\w+)*)/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_Version = /([\w\-\.]+[\s\/][v]?[\d_]+\b(?:[\-\._\/]\w+)*)/g;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_BlackBerry = /\b(?:(blackberry\w*|bb10)|(rim tablet os))(?:\/(\d+\.\d+(?:\.\w+)*))?/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_Silk = /\bsilk-accelerated=true\b/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_FluidApp = /\bfluidapp\b/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_desktop = /(\bwindows\b|\bmacintosh\b|\blinux\b|\bunix\b)/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_mobile = /(\bandroid\b|\bipad\b|\bipod\b|\bwindows phone\b|\bwpdesktop\b|\bxblwp7\b|\bzunewp7\b|\bwindows ce\b|\bblackberry\w*|\bbb10\b|\brim tablet os\b|\bmeego|\bwebos\b|\bpalm|\bsymbian|\bj2me\b|\bdocomo\b|\bpda\b|\bchtml\b|\bmidp\b|\bcldc\b|\w*?mobile\w*?|\w*?phone\w*?)/;
+    /**
+     * @const
+     * @type {RegExp}
+     */
+    var R_game = /(\bxbox\b|\bplaystation\b|\bnintendo\s+\w+)/;
+    /**
+     * The root CssUserAgent
+     * @type {Object}
+     */
+    var cssua = {
+        parse: 
+        /**
+         * @param uaStr {string}
+         * @return {Object}
+         */
+        function (uaStr, sa) {
+            /**
+             * @type {Object}
+             */
+            var ua = {};
+            if (sa) {
+                ua.standalone = sa;
+            }
+            uaStr = ('' + uaStr).toLowerCase();
+            if (!uaStr) {
+                return ua;
+            }
+            var i, count, raw = uaStr.split(/[()]/);
+            for (var j = 0, rawCount = raw.length; j < rawCount; j++) {
+                if (j % 2) {
+                    // inside parens covers platform identifiers
+                    var platforms = raw[j].split(';');
+                    for (i = 0, count = platforms.length; i < count; i++) {
+                        if (R_Platform.exec(platforms[i])) {
+                            var key = RegExp.$1.split(' ').join('_'), val = RegExp.$2;
+                            // if duplicate entries favor highest version
+                            if (!ua[key] || parseFloat(ua[key]) < parseFloat(val)) {
+                                ua[key] = val;
+                            }
+                        }
+                    }
+                }
+                else {
+                    // outside parens covers most version identifiers
+                    var uas = raw[j].match(R_Version);
+                    if (uas) {
+                        for (i = 0, count = uas.length; i < count; i++) {
+                            var parts = uas[i].split(/[\/\s]+/);
+                            if (parts.length && parts[0] !== 'mozilla') {
+                                ua[parts[0].split(' ').join('_')] = parts.slice(1).join('-');
+                            }
+                        }
+                    }
+                }
+            }
+            if (R_mobile.exec(uaStr)) {
+                // mobile device indicators
+                ua.mobile = RegExp.$1;
+                if (R_BlackBerry.exec(uaStr)) {
+                    delete ua[ua.mobile];
+                    ua.blackberry = ua.version || RegExp.$3 || RegExp.$2 || RegExp.$1;
+                    if (RegExp.$1) {
+                        // standardize non-tablet blackberry
+                        ua.mobile = 'blackberry';
+                    }
+                    else if (ua.version === '0.0.1') {
+                        // fix playbook 1.0 quirk
+                        ua.blackberry = '7.1.0.0';
+                    }
+                }
+            }
+            else if (R_game.exec(uaStr)) {
+                // game console indicators
+                ua.game = RegExp.$1;
+                var game = ua.game.split(' ').join('_');
+                if (ua.version && !ua[game]) {
+                    ua[game] = ua.version;
+                }
+            }
+            else if (R_desktop.exec(uaStr)) {
+                // desktop OS indicators
+                ua.desktop = RegExp.$1;
+            }
+            // platform naming standardizations
+            if (ua.intel_mac_os_x) {
+                ua.mac_os_x = ua.intel_mac_os_x.split('_').join('.');
+                delete ua.intel_mac_os_x;
+            }
+            else if (ua.cpu_iphone_os) {
+                ua.ios = ua.cpu_iphone_os.split('_').join('.');
+                delete ua.cpu_iphone_os;
+            }
+            else if (ua.cpu_os) {
+                ua.ios = ua.cpu_os.split('_').join('.');
+                delete ua.cpu_os;
+            }
+            else if (ua.mobile === 'iphone' && !ua.ios) {
+                ua.ios = '1';
+            }
+            // UA naming standardizations
+            if (ua.opera && ua.version) {
+                ua.opera = ua.version;
+                // version/XXX refers to opera
+                delete ua.blackberry;
+            }
+            else if (R_Silk.exec(uaStr)) {
+                ua.silk_accelerated = true;
+            }
+            else if (R_FluidApp.exec(uaStr)) {
+                ua.fluidapp = ua.version;
+            }
+            if (ua.edge) {
+                delete ua.applewebkit;
+                delete ua.safari;
+                delete ua.chrome;
+                delete ua.android;
+            }
+            if (ua.applewebkit) {
+                ua.webkit = ua.applewebkit;
+                delete ua.applewebkit;
+                if (ua.opr) {
+                    ua.opera = ua.opr;
+                    delete ua.opr;
+                    delete ua.chrome;
+                }
+                if (ua.safari) {
+                    if (ua.chrome ||
+                        ua.crios ||
+                        ua.fxios ||
+                        ua.opera ||
+                        ua.silk ||
+                        ua.fluidapp ||
+                        ua.phantomjs ||
+                        (ua.mobile && !ua.ios)) {
+                        delete ua.safari;
+                        if (ua.vivaldi) {
+                            delete ua.chrome;
+                        }
+                    }
+                    else if (ua.version && !ua.rim_tablet_os) {
+                        ua.safari = ua.version;
+                    }
+                    else {
+                        ua.safari =
+                            {
+                                419: '2.0.4',
+                                417: '2.0.3',
+                                416: '2.0.2',
+                                412: '2.0',
+                                312: '1.3',
+                                125: '1.2',
+                                85: '1.0',
+                            }[parseInt(ua.safari, 10)] || ua.safari;
+                    }
+                }
+            }
+            else if (ua.msie || ua.trident) {
+                if (!ua.opera) {
+                    // standardize Internet Explorer
+                    ua.ie = ua.msie || ua.rv;
+                }
+                delete ua.msie;
+                delete ua.android;
+                if (ua.windows_phone_os) {
+                    // standardize window phone
+                    ua.windows_phone = ua.windows_phone_os;
+                    delete ua.windows_phone_os;
+                }
+                else if (ua.mobile === 'wpdesktop' || ua.mobile === 'xblwp7' || ua.mobile === 'zunewp7') {
+                    ua.mobile = 'windows desktop';
+                    ua.windows_phone = +ua.ie < 9 ? '7.0' : +ua.ie < 10 ? '7.5' : '8.0';
+                    delete ua.windows_nt;
+                }
+            }
+            else if (ua.gecko || ua.firefox) {
+                ua.gecko = ua.rv;
+            }
+            if (ua.rv) {
+                delete ua.rv;
+            }
+            if (ua.version) {
+                delete ua.version;
+            }
+            return ua;
+        },
+        format: 
+        /**
+         * @param ua {Object}
+         * @return {string}
+         */
+        function (ua) {
+            /**
+             * @param b {string} browser key
+             * @param v {string} browser value
+             * @return {string} formatted CSS classes
+             */
+            function format(b, v) {
+                b = b.split('.').join('-');
+                /**
+                 * @type {string}
+                 */
+                var css = PREFIX + b;
+                if (typeof v === 'string') {
+                    v = v.split(' ').join('_').split('.').join('-');
+                    var i = v.indexOf('-');
+                    while (i > 0) {
+                        // loop through chopping last '-' to end off
+                        // concat result onto return string
+                        css += PREFIX + b + '-' + v.substring(0, i);
+                        i = v.indexOf('-', i + 1);
+                    }
+                    css += PREFIX + b + '-' + v;
+                }
+                return css;
+            }
+            /**
+             * @type {string}
+             */
+            var uaCss = '';
+            for (var b in ua) {
+                if (b && ua.hasOwnProperty(b)) {
+                    uaCss += format(b, ua[b]);
+                }
+            }
+            // user-agent classNames
+            return uaCss;
+        },
+        encode: 
+        /**
+         * Encodes parsed userAgent object as a compact URI-Encoded key-value collection
+         * @param ua {Object}
+         * @return {string}
+         */
+        function (ua) {
+            var query = '';
+            for (var b in ua) {
+                if (b && ua.hasOwnProperty(b)) {
+                    if (query) {
+                        query += '&';
+                    }
+                    query += encodeURIComponent(b) + '=' + encodeURIComponent(ua[b]);
+                }
+            }
+            return query;
+        },
+    };
+    /**
+     * @const
+     * @type {Object}
+     */
+    cssua.userAgent = cssua.ua = cssua.parse(userAgent, sa);
+    /**
+     * @const
+     * @type {string}
+     */
+    var ua = cssua.format(cssua.ua) + ' js';
+    // append CSS classes to HTML node
+    if (html.className) {
+        html.className = html.className.replace(/\bno-js\b/g, '') + ua;
+    }
+    else {
+        html.className = ua.substr(1);
+    }
+    return cssua;
+};
+exports.cssua = cssua;

package/lib/es/src/utils/currentColors.d.ts

@@ -0,0 +1,3 @@
+export declare const currentColorOptions: readonly ["primary", "secondary", "info", "success", "warning", "danger"];
+export type CurrentColor = (typeof currentColorOptions)[number];
+export declare const getCurrentBackgroundColor: (color: CurrentColor) => string;

package/lib/es/src/utils/currentColors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentBackgroundColor = exports.currentColorOptions = void 0;
+exports.currentColorOptions = ['primary', 'secondary', 'info', 'success', 'warning', 'danger'];
+const currentColorMapping = {
+    primary: '--brand-primary',
+    secondary: '--brand-secondary',
+    info: '--brand-info',
+    success: '--brand-success',
+    warning: '--brand-warning',
+    danger: '--brand-danger',
+};
+const getCurrentBackgroundColor = (color) => `var(${currentColorMapping[`${color}`]})`;
+exports.getCurrentBackgroundColor = getCurrentBackgroundColor;

package/lib/es/src/utils/darkModeCDN.d.ts

@@ -0,0 +1,3 @@
+declare const COOKIE_NAME: "uikit-color-scheme";
+declare function readColorSchemeFromCookie(): "default" | "dark" | "light" | "system" | undefined;
+declare function listenForCookieChange(): void;

package/lib/es/src/utils/darkModeCDN.js

@@ -0,0 +1,48 @@
+"use strict";
+const COOKIE_NAME = 'uikit-color-scheme';
+const readColorSchemeFromCookie = () => {
+    const THEME_DATA_ATTRIBUTE = 'data-theme';
+    const THEME_DEFAULT = 'default';
+    const THEME_SYSTEM = 'system';
+    const THEME_LIGHT = 'light';
+    const THEME_DARK = 'dark';
+    const decodedCookie = decodeURIComponent(document.cookie);
+    // console.debug(decodedCookie);
+    const [uikitCname] = decodedCookie.split(';').filter(entry => entry.includes(COOKIE_NAME));
+    if (!uikitCname) {
+        return;
+    }
+    const [, colorScheme] = uikitCname.split('=');
+    console.debug(`readColorSchemeFromCookie: ${colorScheme}`);
+    if (!colorScheme) {
+        return;
+    }
+    const html = document.documentElement;
+    if (colorScheme === THEME_DEFAULT) {
+        html.removeAttribute(THEME_DATA_ATTRIBUTE);
+        return colorScheme;
+    }
+    if (colorScheme === THEME_SYSTEM) {
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            html.setAttribute(THEME_DATA_ATTRIBUTE, THEME_DARK);
+        }
+        else {
+            html.setAttribute(THEME_DATA_ATTRIBUTE, THEME_LIGHT);
+        }
+        return colorScheme;
+    }
+    if (colorScheme === THEME_LIGHT || colorScheme === THEME_DARK) {
+        html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
+        return colorScheme;
+    }
+};
+const listenForCookieChange = () => {
+    const eventHandler = event => {
+        if (event.data === 'themechange') {
+            readColorSchemeFromCookie();
+        }
+    };
+    window?.addEventListener('message', eventHandler, false);
+};
+readColorSchemeFromCookie();
+listenForCookieChange();

package/lib/es/src/utils/deviceUtils.d.ts

@@ -0,0 +1,13 @@
+export declare const hasTouch: () => boolean;
+export declare const MOBILE_SCREEN = 480;
+export declare const SCREEN_SM = 768;
+export declare const SCREEN_MD = 992;
+export declare const SCREEN_LG = 1200;
+export declare const SCREEN_XL = 1700;
+export declare const isMobileScreen: () => boolean;
+export declare const isMobile: () => boolean;
+export declare const isDesktop: () => boolean;
+export declare const isMac: () => boolean;
+export declare const isRetinaDevice: () => boolean;
+export declare const inIframe: () => boolean;
+export declare const toggleZoomOnMobile: () => void;