@cube-dev/ui-kit 0.8.5 → 0.9.0

package/dist/cjs/utils/ResizeSensor.js

@@ -0,0 +1,324 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+// @ts-nocheck
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizeSensor = void 0;
+/**
+ * Iterate over each of the provided element(s).
+ *
+ * @param {HTMLElement|HTMLElement[]} elements
+ * @param {Function}                  callback
+ */
+function forEachElement(elements, callback) {
+    let elementsType = Object.prototype.toString.call(elements);
+    let isCollectionTyped = '[object Array]' === elementsType
+        || '[object NodeList]' === elementsType
+        || '[object HTMLCollection]' === elementsType
+        || '[object Object]' === elementsType
+        || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
+        || ('undefined' !== typeof Elements && elements instanceof Elements); //mootools
+    let i = 0, j = elements.length;
+    if (isCollectionTyped) {
+        for (; i < j; i++) {
+            callback(elements[i]);
+        }
+    }
+    else {
+        callback(elements);
+    }
+}
+/**
+ * Get element size
+ * @param {HTMLElement} element
+ * @returns {Object} {width, height}
+ */
+function getElementSize(element) {
+    if (!element.getBoundingClientRect) {
+        return {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+        };
+    }
+    let rect = element.getBoundingClientRect();
+    return {
+        width: Math.round(rect.width),
+        height: Math.round(rect.height),
+    };
+}
+/**
+ * Apply CSS styles to element.
+ *
+ * @param {HTMLElement} element
+ * @param {Object} style
+ */
+function setStyle(element, style) {
+    Object.keys(style).forEach(function (key) {
+        element.style[key] = style[key];
+    });
+}
+/**
+ * Class for dimension change detection.
+ *
+ * @param {Element|Element[]|Elements} element
+ * @param {Function} callback
+ *
+ * @constructor
+ */
+let ResizeSensor = function (element, callback) {
+    // https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
+    // https://github.com/Semantic-Org/Semantic-UI/issues/3855
+    // https://github.com/marcj/css-element-queries/issues/257
+    let globalWindow = window;
+    // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
+    // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
+    // would generate too many unnecessary events.
+    let requestAnimationFrame = globalWindow.requestAnimationFrame
+        || globalWindow.mozRequestAnimationFrame
+        || globalWindow.webkitRequestAnimationFrame
+        || function (fn) {
+            return globalWindow.setTimeout(fn, 20);
+        };
+    let cancelAnimationFrame = globalWindow.cancelAnimationFrame
+        || globalWindow.mozCancelAnimationFrame
+        || globalWindow.webkitCancelAnimationFrame
+        || function (timer) {
+            globalWindow.clearTimeout(timer);
+        };
+    //Is used when checking in reset() only for invisible elements
+    let lastAnimationFrameForInvisibleCheck = 0;
+    /**
+     *
+     * @constructor
+     */
+    function EventQueue() {
+        let q = [];
+        this.add = function (ev) {
+            q.push(ev);
+        };
+        let i, j;
+        this.call = function (sizeInfo) {
+            for (i = 0, j = q.length; i < j; i++) {
+                q[i].call(this, sizeInfo);
+            }
+        };
+        this.remove = function (ev) {
+            let newQueue = [];
+            for (i = 0, j = q.length; i < j; i++) {
+                if (q[i] !== ev)
+                    newQueue.push(q[i]);
+            }
+            q = newQueue;
+        };
+        this.length = function () {
+            return q.length;
+        };
+    }
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Function}    resized
+     */
+    function attachResizeEvent(element, resized) {
+        if (!element)
+            return;
+        if (element.resizedAttached) {
+            element.resizedAttached.add(resized);
+            return;
+        }
+        element.resizedAttached = new EventQueue();
+        element.resizedAttached.add(resized);
+        element.resizeSensor = document.createElement('div');
+        element.resizeSensor.dir = 'ltr';
+        element.resizeSensor.className = 'resize-sensor';
+        let style = {
+            pointerEvents: 'none',
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            right: '0px',
+            bottom: '0px',
+            overflow: 'hidden',
+            zIndex: '-1',
+            visibility: 'hidden',
+            maxWidth: '100%',
+        };
+        let styleChild = {
+            position: 'absolute',
+            left: '0px',
+            top: '0px',
+            transition: '0s',
+        };
+        setStyle(element.resizeSensor, style);
+        let expand = document.createElement('div');
+        expand.className = 'resize-sensor-expand';
+        setStyle(expand, style);
+        let expandChild = document.createElement('div');
+        setStyle(expandChild, styleChild);
+        expand.appendChild(expandChild);
+        let shrink = document.createElement('div');
+        shrink.className = 'resize-sensor-shrink';
+        setStyle(shrink, style);
+        let shrinkChild = document.createElement('div');
+        setStyle(shrinkChild, styleChild);
+        setStyle(shrinkChild, { width: '200%', height: '200%' });
+        shrink.appendChild(shrinkChild);
+        element.resizeSensor.appendChild(expand);
+        element.resizeSensor.appendChild(shrink);
+        element.appendChild(element.resizeSensor);
+        let computedStyle = window.getComputedStyle(element);
+        let position = computedStyle
+            ? computedStyle.getPropertyValue('position')
+            : null;
+        if ('absolute' !== position
+            && 'relative' !== position
+            && 'fixed' !== position
+            && 'sticky' !== position) {
+            element.style.position = 'relative';
+        }
+        let dirty = false;
+        //last request animation frame id used in onscroll event
+        let rafId = 0;
+        let size = getElementSize(element);
+        let lastWidth = 0;
+        let lastHeight = 0;
+        let initialHiddenCheck = true;
+        lastAnimationFrameForInvisibleCheck = 0;
+        let resetExpandShrink = function () {
+            let width = element.offsetWidth;
+            let height = element.offsetHeight;
+            expandChild.style.width = width + 10 + 'px';
+            expandChild.style.height = height + 10 + 'px';
+            expand.scrollLeft = width + 10;
+            expand.scrollTop = height + 10;
+            shrink.scrollLeft = width + 10;
+            shrink.scrollTop = height + 10;
+        };
+        let reset = function () {
+            // Check if element is hidden
+            if (initialHiddenCheck) {
+                let invisible = element.offsetWidth === 0 && element.offsetHeight === 0;
+                if (invisible) {
+                    // Check in next frame
+                    if (!lastAnimationFrameForInvisibleCheck) {
+                        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
+                            lastAnimationFrameForInvisibleCheck = 0;
+                            reset();
+                        });
+                    }
+                    return;
+                }
+                else {
+                    // Stop checking
+                    initialHiddenCheck = false;
+                }
+            }
+            resetExpandShrink();
+        };
+        element.resizeSensor.resetSensor = reset;
+        let onResized = function () {
+            rafId = 0;
+            if (!dirty)
+                return;
+            lastWidth = size.width;
+            lastHeight = size.height;
+            if (element.resizedAttached) {
+                element.resizedAttached.call(size);
+            }
+        };
+        let onScroll = function () {
+            size = getElementSize(element);
+            dirty = size.width !== lastWidth || size.height !== lastHeight;
+            if (dirty && !rafId) {
+                rafId = requestAnimationFrame(onResized);
+            }
+            reset();
+        };
+        let addEvent = function (el, name, cb) {
+            if (el.attachEvent) {
+                el.attachEvent('on' + name, cb);
+            }
+            else {
+                el.addEventListener(name, cb);
+            }
+        };
+        addEvent(expand, 'scroll', onScroll);
+        addEvent(shrink, 'scroll', onScroll);
+        // Fix for custom Elements and invisible elements
+        lastAnimationFrameForInvisibleCheck = requestAnimationFrame(function () {
+            lastAnimationFrameForInvisibleCheck = 0;
+            reset();
+        });
+    }
+    forEachElement(element, function (elem) {
+        attachResizeEvent(elem, callback);
+    });
+    this.detach = function (ev) {
+        // clean up the unfinished animation frame to prevent a potential endless requestAnimationFrame of reset
+        if (lastAnimationFrameForInvisibleCheck) {
+            cancelAnimationFrame(lastAnimationFrameForInvisibleCheck);
+            lastAnimationFrameForInvisibleCheck = 0;
+        }
+        exports.ResizeSensor.detach(element, ev);
+    };
+    this.reset = function () {
+        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
+        if (element.resizeSensor.resetSensor) {
+            element.resizeSensor.resetSensor();
+        }
+    };
+};
+exports.ResizeSensor = ResizeSensor;
+exports.ResizeSensor.reset = function (element) {
+    forEachElement(element, function (elem) {
+        //To prevent invoking element.resizeSensor.resetSensor if it's undefined
+        if (element.resizeSensor.resetSensor) {
+            elem.resizeSensor.resetSensor();
+        }
+    });
+};
+exports.ResizeSensor.detach = function (element, ev) {
+    forEachElement(element, function (elem) {
+        if (!elem)
+            return;
+        if (elem.resizedAttached && typeof ev === 'function') {
+            elem.resizedAttached.remove(ev);
+            if (elem.resizedAttached.length())
+                return;
+        }
+        if (elem.resizeSensor) {
+            if (elem.contains(elem.resizeSensor)) {
+                elem.removeChild(elem.resizeSensor);
+            }
+            delete elem.resizeSensor;
+            delete elem.resizedAttached;
+        }
+    });
+};
+if (typeof MutationObserver !== 'undefined') {
+    let observer = new MutationObserver(function (mutations) {
+        for (let i in mutations) {
+            if (mutations.hasOwnProperty(i)) {
+                let items = mutations[i].addedNodes;
+                for (let j = 0; j < items.length; j++) {
+                    if (items[j].resizeSensor) {
+                        exports.ResizeSensor.reset(items[j]);
+                    }
+                }
+            }
+        }
+    });
+    document.addEventListener('DOMContentLoaded', function (event) {
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
+
+        

package/dist/cjs/utils/colors.js

@@ -0,0 +1,19 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.color = void 0;
+function color(name, opacity = 1) {
+    if (opacity !== 1) {
+        return `rgba(var(--${name}-color-rgb), ${opacity})`;
+    }
+    return `var(--${name}-color)`;
+}
+exports.color = color;
+
+        

package/dist/cjs/utils/dotize.js

@@ -0,0 +1,194 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+/* eslint-disable */
+// @ts-nocheck
+// Convert complex js object to dot notation js object
+// url: https://github.com/vardars/dotize
+// author: vardars
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dotize = void 0;
+exports.dotize = {
+    valTypes: {
+        none: 'NONE',
+        primitive: 'PRIM',
+        object: 'OBJECT',
+        array: 'ARRAY',
+    },
+    getValType: function (val) {
+        if (!val || typeof val != 'object' || Array.isArray(val))
+            return exports.dotize.valTypes.primitive;
+        if (typeof val == 'object')
+            return exports.dotize.valTypes.object;
+    },
+    getPathType: function (arrPath) {
+        let arrPathTypes = [];
+        for (let path in arrPath) {
+            let pathVal = arrPath[path];
+            if (!pathVal)
+                arrPathTypes.push(exports.dotize.valTypes.none);
+            else if (exports.dotize.isNumber(pathVal))
+                arrPathTypes.push(exports.dotize.valTypes.array);
+            else
+                arrPathTypes.push(exports.dotize.valTypes.object);
+        }
+        return arrPathTypes;
+    },
+    isUndefined: function (obj) {
+        return typeof obj == 'undefined';
+    },
+    isNumber: function (f) {
+        return !isNaN(parseInt(f));
+    },
+    isEmptyObj: function (obj) {
+        for (let prop in obj) {
+            if (Object.hasOwnProperty.call(obj, prop))
+                return false;
+        }
+        return JSON.stringify(obj) === JSON.stringify({});
+    },
+    isNotObject: function (obj) {
+        return !obj || typeof obj != 'object';
+    },
+    isEmptyArray: function (arr) {
+        return Array.isArray(arr) && arr.length == 0;
+    },
+    isNotArray: function (arr) {
+        return Array.isArray(arr) == false;
+    },
+    removeEmptyArrayItem: function (arr) {
+        return arr.filter(function (el) {
+            return el != null && el != '';
+        });
+    },
+    getFieldName: function (field, prefix, isRoot, isArrayItem, isArray) {
+        if (isArray)
+            return ((prefix ? prefix : '') +
+                (exports.dotize.isNumber(field)
+                    ? '[' + field + ']'
+                    : (isRoot && !prefix ? '' : '.') + field));
+        else if (isArrayItem)
+            return (prefix ? prefix : '') + '[' + field + ']';
+        else
+            return (prefix ? prefix + '.' : '') + field;
+    },
+    startsWith: function (val, valToSearch) {
+        return val.indexOf(valToSearch) == 0;
+    },
+    convert: function (obj, prefix = '') {
+        let newObj = {};
+        // primitives
+        if (exports.dotize.isNotObject(obj)) {
+            if (prefix) {
+                newObj[prefix] = obj;
+                return newObj;
+            }
+            else {
+                return obj;
+            }
+        }
+        return (function recurse(o, p, isRoot) {
+            let isArrayItem = Array.isArray(o);
+            for (let f in o) {
+                let currentProp = o[f];
+                if (currentProp &&
+                    typeof currentProp === 'object' &&
+                    !Array.isArray(currentProp)) {
+                    if (isArrayItem && exports.dotize.isEmptyObj(currentProp) == false) {
+                        newObj = recurse(currentProp, exports.dotize.getFieldName(f, p, isRoot, true)); // array item object
+                    }
+                    else if (exports.dotize.isEmptyObj(currentProp) == false) {
+                        newObj = recurse(currentProp, exports.dotize.getFieldName(f, p, isRoot)); // object
+                    }
+                    else if (exports.dotize.isEmptyObj(currentProp)) {
+                        newObj[exports.dotize.getFieldName(f, p, isRoot, isArrayItem)] =
+                            currentProp;
+                    }
+                }
+                else {
+                    if (isArrayItem || exports.dotize.isNumber(f)) {
+                        newObj[exports.dotize.getFieldName(f, p, isRoot, true)] = currentProp; // array item primitive
+                    }
+                    else {
+                        newObj[exports.dotize.getFieldName(f, p, isRoot)] = currentProp; // primitive
+                    }
+                }
+            }
+            return newObj;
+        })(obj, prefix, true);
+    },
+    backward: function (obj, prefix) {
+        let newObj = {};
+        let arStartRegex = /\[(\d+)\]/g;
+        // primitives
+        if (exports.dotize.isNotObject(obj) && exports.dotize.isNotArray(obj)) {
+            if (prefix) {
+                return obj[prefix];
+            }
+            else {
+                return obj;
+            }
+        }
+        for (let tProp in obj) {
+            let tPropVal = obj[tProp];
+            if (prefix) {
+                let prefixRegex = new RegExp('^' + prefix);
+                tProp = tProp.replace(prefixRegex, '');
+            }
+            tProp = tProp.replace(arStartRegex, '.$1');
+            if (exports.dotize.startsWith(tProp, '.'))
+                tProp = tProp.replace(/^\./, '');
+            var arrPath = tProp.split('.');
+            var arrPathTypes = exports.dotize.getPathType(arrPath);
+            // has array on root
+            if (!exports.dotize.isUndefined(arrPathTypes) &&
+                arrPathTypes[0] == exports.dotize.valTypes.array &&
+                Array.isArray(newObj) == false) {
+                newObj = [];
+            }
+            (function recurse(rPropVal, rObj, rPropValPrev, rObjPrev) {
+                let currentPath = arrPath.shift();
+                let currentPathType = arrPathTypes.shift();
+                if (typeof currentPath == 'undefined' || currentPath == '') {
+                    newObj = rPropVal;
+                    return;
+                }
+                let isArray = currentPathType == exports.dotize.valTypes.array;
+                if (exports.dotize.isNumber(currentPath))
+                    currentPath = parseInt(currentPath);
+                // has multiple levels
+                if (arrPath.length > 0) {
+                    // is not assigned before
+                    if (typeof rObj[currentPath] == 'undefined') {
+                        if (isArray) {
+                            rObj[currentPath] = [];
+                        }
+                        else {
+                            rObj[currentPath] = {};
+                        }
+                    }
+                    recurse(rPropVal, rObj[currentPath], currentPath, rObj);
+                    return;
+                }
+                if (currentPathType == exports.dotize.valTypes.array &&
+                    rPropValPrev &&
+                    rObjPrev) {
+                    if (Array.isArray(rObjPrev[rPropValPrev]) == false)
+                        rObjPrev[rPropValPrev] = [];
+                    rObjPrev[rPropValPrev].push(rPropVal);
+                }
+                else {
+                    rObj[currentPath] = rPropVal;
+                }
+            })(tPropVal, newObj);
+        }
+        return newObj;
+    },
+};
+
+        

package/dist/cjs/utils/escape-string.js

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// https://github.com/sindresorhus/escape-string-regexp/blob/main/index.js
+function escapeStringRegexp(string) {
+    if (typeof string !== 'string') {
+        throw new TypeError('Expected a string');
+    }
+    // Escape characters with special meaning either inside or outside character sets.
+    // Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+    return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}
+exports.default = escapeStringRegexp;
+
+        

package/dist/cjs/utils/filterBaseProps.js

@@ -0,0 +1,69 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterBaseProps = void 0;
+const DOMPropNames = new Set(['id']);
+const labelablePropNames = new Set([
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-details',
+]);
+const BasePropNames = new Set([
+    'role',
+    'as',
+    'css',
+    'qa',
+    'mods',
+    'qaVal',
+    'hidden',
+    'isHidden',
+    'disabled',
+    'isDisabled',
+    'children',
+    'style',
+    'className',
+    'href',
+    'target',
+]);
+const ignoreEventPropsNames = new Set([
+    'onPress',
+    'onHoverStart',
+    'onHoverEnd',
+    'onPressStart',
+    'onPressEnd',
+]);
+const propRe = /^((data-).*)$/;
+const eventRe = /^on[A-Z].+$/;
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+function filterBaseProps(props, opts = {}) {
+    let { labelable, propNames, eventProps } = opts;
+    let filteredProps = {};
+    for (const prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop)
+            && (DOMPropNames.has(prop)
+                || BasePropNames.has(prop)
+                || (labelable && labelablePropNames.has(prop))
+                || (eventProps
+                    && eventRe.test(prop)
+                    && !ignoreEventPropsNames.has(prop))
+                || propNames?.has(prop)
+                || propRe.test(prop))) {
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+}
+exports.filterBaseProps = filterBaseProps;
+
+        

package/dist/cjs/utils/index.js

@@ -0,0 +1,46 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModCombinations = void 0;
+function filterCombinations(combinations) {
+    return combinations.filter((combination) => {
+        const list = [];
+        return !combination.find((mod) => {
+            const match = mod.match(/\[(.+?)[=\]]/);
+            if (match) {
+                if (list.includes(match[1])) {
+                    return true;
+                }
+                list.push(match[1]);
+                return false;
+            }
+            return false;
+        });
+    });
+}
+function getModCombinations(array, allowEmpty) {
+    const result = allowEmpty ? [[]] : [];
+    if (array.length === 0) {
+        return [array];
+    }
+    if (array.length < 2) {
+        return result.concat([array]);
+    }
+    const f = function (prefix = [], array) {
+        for (let i = 0; i < array.length; i++) {
+            result.push([...prefix, array[i]]);
+            f([...prefix, array[i]], array.slice(i + 1));
+        }
+    };
+    f([], array);
+    return filterCombinations(result);
+}
+exports.getModCombinations = getModCombinations;
+
+