cx 25.11.1 → 26.0.1

package/src/util/expandFatArrows.ts

@@ -0,0 +1,118 @@
+//http://stackoverflow.com/questions/36428283/arrow-function-eval-preprocessor
+
+export function expandFatArrows(code: string): string {
+   var arrowHeadRegex = RegExp(/(\((?:\w+,)*\w+\)|\(\)|\w+)[\r\t ]*=>\s*/);
+   var arrowHeadMatch = arrowHeadRegex.exec(code);
+
+   if (arrowHeadMatch) {//if no match return as it is
+      var params = arrowHeadMatch[1];
+      if (params.charAt(0) !== "(") {
+         params = "(" + params + ")";
+      }
+      var index = arrowHeadMatch.index;
+      var startCode = code.substring(0, index);
+
+      var bodyAndNext = code.substring(index + arrowHeadMatch[0].length);
+
+      var curlyCount = 0;
+      var curlyPresent = false;
+      var singleLineBodyEnd = 0;
+      var bodyEnd = 0;
+
+      for (var i = 0; i < bodyAndNext.length; i++) {
+         var ch = bodyAndNext[i];
+         if (ch === '{') {
+            curlyPresent = true;
+            curlyCount++;
+         } else if (ch === '}') {
+            curlyCount--;
+         } else if (!curlyPresent) {
+            //any character other than { or }
+            singleLineBodyEnd = getSingeLineBodyEnd(bodyAndNext, i);
+            break;
+         }
+         if (curlyPresent && curlyCount === 0) {
+            bodyEnd = i;
+            break;
+         }
+      }
+
+      var body;
+
+      if (curlyPresent) {
+         if (curlyCount !== 0) {
+            throw Error("Could not match curly braces for function at : " + index);
+         }
+         body = bodyAndNext.substring(0, bodyEnd + 1);
+
+         var restCode = bodyAndNext.substring(bodyEnd + 1);
+         var expandedFun = "(function " + params + body + ").bind(this)";
+         code = startCode + expandedFun + restCode;
+      } else {
+         if (singleLineBodyEnd <= 0) {
+            throw Error("could not get function body at : " + index);
+         }
+
+         body = bodyAndNext.substring(0, singleLineBodyEnd + 1);
+
+         restCode = bodyAndNext.substring(singleLineBodyEnd + 1);
+         expandedFun = "(function " + params + "{return " + body + "}).bind(this)";
+         code = startCode + expandedFun + restCode;
+      }
+
+      return expandFatArrows(code);//recursive call
+   }
+   return code;
+}
+
+function getSingeLineBodyEnd(bodyCode: string, startI: number): number {
+   var braceCount = 0;
+   var openingQuote = null;
+
+   for (var i = startI; i < bodyCode.length; i++) {
+      var ch = bodyCode[i];
+      var lastCh = null;
+      if (ch === '"' || ch === "'") {
+         openingQuote = ch;
+         i = skipQuotedString(bodyCode, openingQuote, i);
+         ch = bodyCode[i];
+      }
+
+      if (i !== 0 && !bodyCode[i - 1].match(/[\t\r ]/)) {
+         lastCh = bodyCode[i - 1];
+      }
+
+      if (ch === '{' || ch === '(') {
+         braceCount++;
+      } else if (ch === '}' || ch === ')') {
+         braceCount--;
+      }
+
+      if (braceCount < 0 || (lastCh !== '.' && ch === '\n')) {
+         return i - 1;
+      }
+   }
+
+   return bodyCode.length;
+}
+
+function skipQuotedString(bodyAndNext: string, openingQuote: string, i: number): number {
+   var matchFound = false;//matching quote
+   var openingQuoteI = i;
+   i++;
+   for (; i < bodyAndNext.length; i++) {
+      var ch = bodyAndNext[i];
+      var lastCh = (i !== 0) ? bodyAndNext[i - 1] : null;
+
+      if (ch !== openingQuote || (ch === openingQuote && lastCh === '\\' )) {
+         continue;//skip quoted string
+      } else if (ch === openingQuote) {//matched closing quote
+         matchFound = false;
+         break;
+      }
+   }
+   if (matchFound) {
+      throw new Error("Could not find closing quote for quote at : " + openingQuoteI);
+   }
+   return i;
+}

package/src/util/findScrollableParent.ts

@@ -0,0 +1,15 @@
+import { closest } from "./DOM";
+
+export function findScrollableParent(sourceEl: Element, horizontal: boolean = false): HTMLElement | null {
+   if (!sourceEl) return null;
+   let scrollParent = closest(sourceEl, (el) => {
+      if (el.nodeType != Node.ELEMENT_NODE) return false;
+      if (!horizontal && el.clientHeight >= el.scrollHeight) return false;
+      if (horizontal && el.clientWidth >= el.scrollWidth) return false;
+      let overflow = getComputedStyle(el).getPropertyValue(horizontal ? "overflow-x" : "overflow-y");
+      return overflow == "auto" || overflow == "scroll";
+   }) as HTMLElement;
+   return (
+      scrollParent || (sourceEl.ownerDocument.scrollingElement as HTMLElement) || sourceEl.ownerDocument.documentElement
+   );
+}

package/src/util/getActiveElement.ts

@@ -0,0 +1,4 @@
+//IE sometimes returns null while other browsers always return document.body.
+export function getActiveElement(): Element {
+   return document.activeElement ?? document.body;
+}

package/src/util/getParentFrameBoundingClientRect.ts

@@ -0,0 +1,13 @@
+export function getParentFrameBoundingClientRect(el: Element): DOMRect {
+   // if the ownerDocument is null, the element itself is the document
+   let ownerDocument = el.ownerDocument || el;
+   if (ownerDocument != document) {
+      let frames = document.getElementsByTagName("iframe");
+      for (let i = 0; i < frames.length; i++) {
+         if (frames[i].contentDocument == ownerDocument) {
+            return frames[i].getBoundingClientRect();
+         }
+      }
+   }
+   return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+}

package/src/util/getScrollerBoundingClientRect.ts

@@ -0,0 +1,12 @@
+import { getParentFrameBoundingClientRect } from "./getParentFrameBoundingClientRect";
+import { getTopLevelBoundingClientRect } from "./getTopLevelBoundingClientRect";
+
+export function getScrollerBoundingClientRect(scrollEl: Element, topLevel: boolean = false): DOMRect {
+   if (scrollEl == scrollEl.ownerDocument.body || scrollEl == scrollEl.ownerDocument.documentElement) {
+      if (topLevel) return getParentFrameBoundingClientRect(scrollEl.ownerDocument.body);
+
+      return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+   }
+
+   return topLevel ? getTopLevelBoundingClientRect(scrollEl) : scrollEl.getBoundingClientRect();
+}

package/src/util/getSearchQueryPredicate.ts

@@ -0,0 +1,58 @@
+import { escapeSpecialRegexCharacters } from "./escapeSpecialRegexCharacters";
+
+function getTermsAndRegularExpressions(query: string): [string[], RegExp[]] {
+   if (!query) return [[], []];
+   let terms = query.split(" ").filter(Boolean);
+   let regexes = terms.map((word) => new RegExp(escapeSpecialRegexCharacters(word), "gi"));
+   return [terms, regexes];
+}
+
+export function getSearchQueryPredicate(query: string, options?: any): (text: string) => boolean {
+   let [terms, regexes] = getTermsAndRegularExpressions(query);
+   if (terms.length == 0) return () => true;
+   if (regexes.length == 1) {
+      let regex = regexes[0];
+      return (text: string) => !!text && text.match(regex) != null;
+   }
+   return (text: string) => !!text && regexes.every((re) => text.match(re));
+}
+
+var highlighterCache: { [key: string]: (query: string) => string[] } = {};
+
+export function getSearchQueryHighlighter(query: string, options?: any): (query: string) => string[] {
+   let [terms, regexes] = getTermsAndRegularExpressions(query);
+   if (terms.length == 0) return (text) => [text];
+
+   if (highlighterCache[query]) return highlighterCache[query];
+
+   let result = (query: string) => {
+      let chunks = [query];
+      for (let i = 0; i < regexes.length; i++) {
+         let newChunks = [];
+         for (let j = 0; j < chunks.length; j++) {
+            let at = 0;
+            let chunk = chunks[j];
+            let parts = chunk.split(regexes[i]);
+            for (let k = 0; k < parts.length; k++) {
+               newChunks.push(parts[k]);
+               at += parts[k].length;
+               if (k < parts.length - 1) {
+                  newChunks.push(chunk.substr(at, terms[i].length));
+                  at += terms[i].length;
+               }
+            }
+         }
+         chunks = newChunks;
+      }
+      return chunks;
+   };
+
+   if (options?.cache) {
+      highlighterCache[query] = result;
+      setTimeout(() => {
+         delete highlighterCache[query];
+      }, options?.cachePeriod || 5000);
+   }
+
+   return result;
+}

package/src/util/getTopLevelBoundingClientRect.ts

@@ -0,0 +1,7 @@
+import { getParentFrameBoundingClientRect } from "./getParentFrameBoundingClientRect";
+
+export function getTopLevelBoundingClientRect(el: Element): DOMRect {
+   let bounds = el.getBoundingClientRect();
+   let offset = getParentFrameBoundingClientRect(el);
+   return new DOMRect(bounds.left + offset.left, bounds.top + offset.top, bounds.width, bounds.height);
+}

package/src/util/getVendorPrefix.ts

@@ -0,0 +1,33 @@
+//shamelessly taken from https://davidwalsh.name/vendor-prefix
+
+interface Prefixes {
+   dom: string;
+   lowercase: string;
+   css: string;
+   js: string;
+}
+
+var getPrefixes = function (): Prefixes {
+   var styles = window.getComputedStyle(document.documentElement, '') as any;
+   var match = Array.prototype.slice
+      .call(styles)
+      .join('')
+      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']);
+   var pre = (match as string[])[1];
+   var dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))![1];
+   return {
+      dom: dom,
+      lowercase: pre,
+      css: '-' + pre + '-',
+      js: pre[0].toUpperCase() + pre.substr(1)
+   };
+}
+
+var prefixes: Prefixes | undefined;
+
+export function getVendorPrefix(type: 'dom' | 'lowercase' | 'css' | 'js'): string {
+   if (!prefixes)
+      prefixes = getPrefixes();
+
+   return prefixes[type];
+}

package/src/util/hasKey.ts

@@ -0,0 +1,18 @@
+import { isFunction } from "./isFunction";
+import { isString } from "./isString";
+
+export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
+   return key in obj;
+}
+
+export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
+   return hasKey(obj, key) && isString(obj[key]);
+}
+
+export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
+   return hasKey(obj, key) && obj[key] === value;
+}
+
+export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
+   return hasKey(obj, key) && isFunction(obj[key]);
+}

package/src/util/index.ts

@@ -0,0 +1,55 @@
+export * from "./Console";
+export * from "./Debug";
+export * from "./DOM";
+export * from "./Format";
+export * from "./expandFatArrows";
+export * from "./GlobalCacheIdentifier";
+export * from "./innerTextTrim";
+export * from "./isDigit";
+export * from "./isPromise";
+export * from "./isTouchDevice";
+export * from "./KeyCode";
+export * from "./parseStyle";
+export * from "./quote";
+export * from "./scrollElementIntoView";
+export * from "./shallowEquals";
+export * from "./Timing";
+export * from "./date/index";
+export * from "./color/index";
+export * from "./getVendorPrefix";
+export * from "./eventCallbacks";
+export * from "./getSearchQueryPredicate";
+export * from "./escapeSpecialRegexCharacters";
+export * from "./browserSupportsPassiveEventHandlers";
+export * from "./isTouchEvent";
+export * from "./debounce";
+export * from "./throttle";
+export * from "./SubscriberList";
+export * from "./findScrollableParent";
+export * from "./getScrollerBoundingClientRect";
+export * from "./isNonEmptyArray";
+export * from "./isArray";
+export * from "./isObject";
+export * from "./isNumber";
+export * from "./isFunction";
+export * from "./isString";
+export * from "./isUndefined";
+export * from "./isDefined";
+export * from "./routeAppend";
+export * from "./reverseSlice";
+export * from "./getTopLevelBoundingClientRect";
+export * from "./getParentFrameBoundingClientRect";
+export * from "./getActiveElement";
+export * from "./Component";
+export * from "./onIdleCallback";
+export * from "./validatedDebounce";
+export * from "./addEventListenerWithOptions";
+export * from "./coalesce";
+export * from "./dummyCallback";
+export * from "./calculateNaturalElementHeight";
+export * from "./isTextInputElement";
+export * from "./capitalize";
+export * from "./isValidIdentifierName";
+export * from "./isDataRecord";
+export * from "./TraversalStack";
+export * from "./hasKey"

package/src/util/innerTextTrim.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param str
+ * @return {string}
+ */
+export function innerTextTrim(str: string): string {
+   str = str.replace(/\t/g, "");
+   str = str.replace(/(\s*[\r\n]\s*)/g, " ");
+   return str;
+}

package/src/util/isArray.ts

@@ -0,0 +1,3 @@
+export function isArray<T = unknown>(x: unknown): x is T[] {
+   return Array.isArray(x);
+}

package/src/util/isDataRecord.ts

@@ -0,0 +1,5 @@
+import { isObject } from "./isObject";
+
+export function isDataRecord(v: unknown): v is Record<string, any> {
+   return isObject(v);
+}

package/src/util/isDefined.ts

@@ -0,0 +1,3 @@
+export function isDefined<T>(x: T | undefined): x is T {
+   return x !== undefined;
+}

package/src/util/isDigit.ts

@@ -0,0 +1,8 @@
+/**
+ *
+ * @param x
+ * @returns {boolean}
+ */
+export function isDigit(x: any): boolean {
+   return x >= '0' && x <= '9';
+}

package/src/util/isFunction.ts

@@ -0,0 +1,3 @@
+export function isFunction(f: any): f is Function {
+   return typeof f === 'function';
+}

package/src/util/isNonEmptyArray.ts

@@ -0,0 +1,3 @@
+export function isNonEmptyArray(x: any): x is [any, ...any] {
+   return Array.isArray(x) && x.length > 0;
+}

package/src/util/isNumber.ts

@@ -0,0 +1,3 @@
+export function isNumber(x: any): x is number {
+   return typeof x === 'number';
+}

package/src/util/isObject.ts

@@ -0,0 +1,3 @@
+export function isObject(o: unknown): o is object {
+   return o !== null && typeof o === 'object';
+}

package/src/util/isPromise.ts

@@ -0,0 +1,6 @@
+import { isFunction } from "./isFunction";
+import { isObject } from "./isObject";
+
+export function isPromise(x: unknown): x is Promise<any> {
+   return isObject(x) && isFunction((x as any)["then"]);
+}

package/src/util/isString.ts

@@ -0,0 +1,3 @@
+export function isString(x: unknown): x is string {
+   return typeof x === "string";
+}

package/src/util/isTextInputElement.ts

@@ -0,0 +1,3 @@
+export function isTextInputElement(el: Element): boolean {
+   return el.tagName == 'INPUT' || el.tagName == 'TEXTAREA';
+}

package/src/util/isTouchDevice.ts

@@ -0,0 +1,7 @@
+let isTouch: boolean | null = null;
+
+export function isTouchDevice(): boolean {
+   if (isTouch == null)
+      isTouch = typeof window != 'undefined' && 'ontouchstart' in window;
+   return isTouch;
+}

package/src/util/isTouchEvent.ts

@@ -0,0 +1,64 @@
+import { browserSupportsPassiveEventHandlers } from "./browserSupportsPassiveEventHandlers";
+import { isTouchDevice } from "./isTouchDevice";
+
+// This is primarily used for tooltips which behave differently on touch.
+// For example, tooltips are commonly toggled on touch or disabled completely.
+// To detect if mousemove is actually caused by a touch event, we check
+// if device supports touch events and when the last touch event happened.
+// Touch detection might cause bad scroll performance on devices which do not
+// support passive event listeners, and in that case detection relies only on
+// presence of touch events, without inspection of each event.
+
+let insideTouchEvent = 0;
+let lastTouchEvent = 0;
+let isTouchDetectionEnabled = false;
+
+export function enableTouchEventDetection(): void {
+   if (isTouchDevice() && !isTouchDetectionEnabled) {
+      let options: boolean | AddEventListenerOptions = true; //capture
+
+      if (browserSupportsPassiveEventHandlers())
+         options = {
+            passive: true,
+            capture: true,
+         };
+
+      document.addEventListener(
+         "touchstart",
+         () => {
+            insideTouchEvent++;
+            //console.log('TOUCHSTART');
+            lastTouchEvent = Date.now();
+         },
+         options,
+      );
+
+      document.addEventListener(
+         "touchmove",
+         () => {
+            //console.log('TOUCHMOVE');
+            lastTouchEvent = Date.now();
+         },
+         options,
+      );
+
+      document.addEventListener(
+         "touchend",
+         () => {
+            insideTouchEvent--;
+            lastTouchEvent = Date.now();
+            //console.log('TOUCHEND');
+         },
+         options,
+      );
+
+      isTouchDetectionEnabled = true;
+   }
+}
+
+export function isTouchEvent(): boolean {
+   return isTouchDevice() && (!isTouchDetectionEnabled || Date.now() - lastTouchEvent < 1000);
+}
+
+//enable touch event detection if there is no performance penalty on scrolling
+if (isTouchDevice() && browserSupportsPassiveEventHandlers()) enableTouchEventDetection();

package/src/util/isUndefined.ts

@@ -0,0 +1,3 @@
+export function isUndefined(x: any): x is undefined {
+   return x === undefined;
+}

package/src/util/isValidIdentifierName.ts

@@ -0,0 +1,5 @@
+const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+
+export function isValidIdentifierName(name: string): boolean {
+   return regex.test(name);
+}

package/src/util/onIdleCallback.ts

@@ -0,0 +1,10 @@
+export function onIdleCallback(callback: (idleDeadline: any) => any, options?: any): () => void {
+   let token: any = null;
+   if (typeof requestIdleCallback == "function") token = requestIdleCallback(callback, options);
+   else token = setTimeout(callback, 1);
+
+   return () => {
+      if (typeof cancelIdleCallback == "function") cancelIdleCallback(token);
+      else clearTimeout(token);
+   };
+}

package/src/util/parseStyle.ts

@@ -0,0 +1,29 @@
+export function parseStyle(str: string): Record<string, string>;
+export function parseStyle(str: any): any;
+export function parseStyle(str: any): any {
+   if (typeof str != "string") return str;
+
+   var style: Record<string, string> = {},
+      parts = str.split(";");
+
+   for (var i = 0; i < parts.length; i++) {
+      let part = parts[i];
+
+      let colonIndex = part.indexOf(":");
+      if (colonIndex == -1) continue;
+
+      let name = part.substring(0, colonIndex).trim();
+      let value = part.substring(colonIndex + 1).trim();
+
+      //avoid css variables
+      if (!name.startsWith("--")) {
+         name = name
+            .split("-")
+            .map((p, i) => (i == 0 ? p : p[0].toUpperCase() + p.substring(1)))
+            .join("");
+      }
+      style[name] = value;
+   }
+
+   return style;
+}

package/src/util/quote.ts

@@ -0,0 +1,6 @@
+export function quoteStr(str: string): string;
+export function quoteStr(str: null): null;
+export function quoteStr(str: string | null): string | null {
+   if (str == null) return str;
+   return JSON.stringify(str);
+}

package/src/util/reverseSlice.ts

@@ -0,0 +1,10 @@
+export function reverseSlice(array: any[], start: number): void {
+   let last = array.length - 1;
+   while (start < last) {
+      let x = array[start];
+      array[start] = array[last];
+      array[last] = x;
+      start++;
+      last--;
+   }
+}

package/src/util/routeAppend.ts

@@ -0,0 +1,16 @@
+export function routeAppend(base: string, path: string): string {
+   let result = base;
+   if (path) {
+      if (path[0] == '/') {
+         if (result[result.length - 1] == '/')
+            result += path.substring(1);
+         else
+            result += path;
+      }
+      else if (result[result.length - 1] == '/')
+         result += path;
+      else
+         result += '/' + path;
+   }
+   return result;
+}

package/src/util/scrollElementIntoView.ts

@@ -0,0 +1,40 @@
+import { findScrollableParent } from "./findScrollableParent";
+import { getScrollerBoundingClientRect } from "./getScrollerBoundingClientRect";
+
+export function scrollElementIntoView(
+   el: Element,
+   vertical: boolean = true,
+   horizontal: boolean = false,
+   inflate: number = 0,
+   scrollContainer: HTMLElement | null = null
+): void {
+   if (horizontal) {
+      let parentEl = scrollContainer || findScrollableParent(el, true);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarWidth = parentEl.offsetWidth - parentEl.clientWidth;
+
+         if (er.right + inflate > pr.right - scrollbarWidth)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.right + inflate - pr.right + scrollbarWidth);
+
+         if (er.left - inflate < pr.left)
+            parentEl.scrollLeft = Math.max(0, parentEl.scrollLeft + er.left - inflate - pr.left);
+      }
+   }
+
+   if (vertical) {
+      let parentEl = scrollContainer || findScrollableParent(el);
+      if (parentEl) {
+         let pr = getScrollerBoundingClientRect(parentEl);
+         let er = el.getBoundingClientRect();
+         let scrollbarHeight = parentEl.offsetHeight - parentEl.clientHeight;
+
+         if (er.bottom + inflate > pr.bottom - scrollbarHeight)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.bottom + inflate - pr.bottom + scrollbarHeight);
+
+         if (er.top - inflate < pr.top)
+            parentEl.scrollTop = Math.max(0, parentEl.scrollTop + er.top - inflate - pr.top);
+      }
+   }
+}

package/src/util/scss/add-rules.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 @mixin cx-add-rules($styles) {
    @each $rule, $value in $styles {
       #{$rule}: $value;
@@ -5,7 +7,7 @@
 }
 
 @mixin cx-add-state-rules($state-style-map, $key) {
-   @include cx-add-rules(map-get($state-style-map, $key));
+   @include cx-add-rules(map.get($state-style-map, $key));
 }
 
 @function cx-merge-state-style-maps($state-style-map, $override-style-map) {
@@ -13,11 +15,11 @@
 
    @if ($override-style-map != null) {
       @each $key, $new-value in $override-style-map {
-         $old-value: map-get($state-style-map, $key);
+         $old-value: map.get($state-style-map, $key);
          @if ($old-value != null) {
-            $new-value: map-merge($old-value, $new-value);
+            $new-value: map.merge($old-value, $new-value);
          }
-         $result: map-merge(
+         $result: map.merge(
             $result,
             (
                $key: $new-value,
@@ -30,7 +32,7 @@
 }
 
 @function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
-   $result: map-get(map-get($state-style-map, $key), $rule);
+   $result: map.get(map.get($state-style-map, $key), $rule);
    @if ($result != null) {
       @return $result;
    }