diff --git a/packages/overlayscrollbars/dist/overlayscrollbars.esm.js b/packages/overlayscrollbars/dist/overlayscrollbars.esm.js
index a4bcfc2..acc7757 100644
--- a/packages/overlayscrollbars/dist/overlayscrollbars.esm.js
+++ b/packages/overlayscrollbars/dist/overlayscrollbars.esm.js
@@ -536,17 +536,17 @@ const absoluteCoordinates = (elm) => {
};
const createCache = (update, options) => {
- const { _equal, _initialValue } = options || {};
+ const { _equal, _initialValue, _alwaysUpdateValues } = options || {};
let _value = _initialValue;
let _previous;
- return (force, context) => {
+ const cacheUpdate = (force, context) => {
const curr = _value;
- const newVal = update(context, _value, _previous);
+ const newVal = update ? update(context, _value, _previous) : context;
const changed = force || (_equal ? !_equal(curr, newVal) : curr !== newVal);
- if (changed) {
+ if (changed || _alwaysUpdateValues) {
_value = newVal;
_previous = curr;
}
@@ -557,6 +557,8 @@ const createCache = (update, options) => {
_changed: changed,
};
};
+
+ return cacheUpdate;
};
function createCommonjsModule(fn) {
@@ -1009,27 +1011,47 @@ const scrollAmount = 3333333;
const getDirection = (elm) => style(elm, 'direction');
+const domRectHasDimensions = (rect) => rect && (rect.height > 0 || rect.width > 0);
+
const createSizeObserver = (target, onSizeChangedCallback, options) => {
- const { _direction: direction = false, _appear: appear = false } = options || {};
+ const { _direction: observeDirectionChange = false, _appear: observeAppearChange = false } = options || {};
const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;
const baseElements = createDOM(``);
const sizeObserver = baseElements[0];
const listenerElement = sizeObserver.firstChild;
+ const updateResizeObserverContentRectCache = createCache(0, {
+ _alwaysUpdateValues: true,
+ _equal: (currVal, newVal) => !(!currVal || (!domRectHasDimensions(currVal) && domRectHasDimensions(newVal))),
+ });
- const onSizeChangedCallbackProxy = (directionCache) => {
- if (direction) {
- const rtl = getDirection(sizeObserver) === 'rtl';
+ const onSizeChangedCallbackProxy = (sizeChangedContext) => {
+ const directionCacheValue = sizeChangedContext && sizeChangedContext._value;
+ let skip = false;
+ let doDirectionScroll = true;
+
+ if (isArray(sizeChangedContext) && sizeChangedContext.length > 0) {
+ const { _previous, _value, _changed } = updateResizeObserverContentRectCache(0, sizeChangedContext.pop().contentRect);
+ skip = !_previous || !domRectHasDimensions(_value);
+ doDirectionScroll = !skip && _changed;
+ } else if (directionCacheValue) {
+ doDirectionScroll = sizeChangedContext._changed;
+ }
+
+ if (observeDirectionChange && doDirectionScroll) {
+ const rtl = (directionCacheValue || getDirection(sizeObserver)) === 'rtl';
scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
scrollTop(sizeObserver, scrollAmount);
}
- onSizeChangedCallback(isString((directionCache || {})._value) ? directionCache : undefined);
+ if (!skip) {
+ onSizeChangedCallback(directionCacheValue ? sizeChangedContext : undefined);
+ }
};
const offListeners = [];
- let appearCallback = appear ? onSizeChangedCallbackProxy : null;
+ let appearCallback = observeAppearChange ? onSizeChangedCallbackProxy : false;
if (ResizeObserverConstructor) {
const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
@@ -1093,10 +1115,10 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
height: scrollAmount,
});
reset();
- appearCallback = appear ? () => onScroll() : reset;
+ appearCallback = observeAppearChange ? () => onScroll() : reset;
}
- if (direction) {
+ if (observeDirectionChange) {
const updateDirectionCache = createCache(() => getDirection(sizeObserver));
push(
offListeners,
@@ -1129,7 +1151,12 @@ const createSizeObserver = (target, onSizeChangedCallback, options) => {
if (appearCallback) {
addClass(sizeObserver, classNameSizeObserverAppear);
- push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));
+ push(
+ offListeners,
+ on(sizeObserver, animationStartEventName, appearCallback, {
+ _once: !!ResizeObserverConstructor,
+ })
+ );
}
prependChildren(target, sizeObserver);
@@ -1324,7 +1351,7 @@ const createDOMObserver = (target, callback, options) => {
const baseAssertion = isNestedTarget
? !ignoreTargetChange(mutationTarget, attributeName, oldValue, attributeValue)
: notOnlyAttrChanged || contentAttrChanged;
- const contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, isNestedTarget, target, options);
+ const contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, !!isNestedTarget, target, options);
push(totalAddedNodes, addedNodes);
contentChanged = contentChanged || contentFinalChanged;
childListChanged = childListChanged || isChildListType;
diff --git a/packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map b/packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
index 0f37bf1..6f98179 100644
--- a/packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
+++ b/packages/overlayscrollbars/dist/overlayscrollbars.esm.js.map
@@ -1 +1 @@
-{"version":3,"file":"overlayscrollbars.esm.js","sources":["../src/support/utils/types.ts","../src/support/dom/attribute.ts","../src/support/utils/array.ts","../src/support/utils/object.ts","../src/support/dom/class.ts","../src/support/dom/traversal.ts","../src/support/dom/manipulation.ts","../src/support/dom/create.ts","../src/support/dom/dimensions.ts","../src/support/dom/events.ts","../src/support/utils/equal.ts","../src/support/compatibility/vendors.ts","../src/support/compatibility/apis.ts","../src/support/utils/function.ts","../src/support/dom/style.ts","../src/support/dom/offset.ts","../src/support/cache/cache.ts","../../../node_modules/@babel/runtime/helpers/extends.js","../src/support/options/validation.ts","../src/support/options/transformation.ts","../src/classnames.ts","../src/environment/environment.ts","../src/lifecycles/lifecycleBase.ts","../src/lifecycles/structureLifecycle.ts","../src/observers/sizeObserver.ts","../src/observers/trinsicObserver.ts","../src/observers/domObserver.ts","../src/overlayscrollbars/overlayscrollbars.ts","../src/index.ts"],"sourcesContent":["import { PlainObject } from 'typings';\r\n\r\nconst ElementNodeType = Node.ELEMENT_NODE;\r\nconst { toString, hasOwnProperty } = Object.prototype;\r\n\r\nexport function isUndefined(obj: any): obj is undefined {\r\n return obj === undefined;\r\n}\r\n\r\nexport function isNull(obj: any): obj is null {\r\n return obj === null;\r\n}\r\n\r\nexport const type: (obj: any) => string = (obj) => {\r\n return isUndefined(obj) || isNull(obj)\r\n ? `${obj}`\r\n : toString\r\n .call(obj)\r\n .replace(/^\\[object (.+)\\]$/, '$1')\r\n .toLowerCase();\r\n};\r\n\r\nexport function isNumber(obj: any): obj is number {\r\n return typeof obj === 'number';\r\n}\r\n\r\nexport function isString(obj: any): obj is string {\r\n return typeof obj === 'string';\r\n}\r\n\r\nexport function isBoolean(obj: any): obj is boolean {\r\n return typeof obj === 'boolean';\r\n}\r\n\r\nexport function isFunction(obj: any): obj is (...args: Array) => unknown {\r\n return typeof obj === 'function';\r\n}\r\n\r\nexport function isArray(obj: any): obj is Array {\r\n return Array.isArray(obj);\r\n}\r\n\r\nexport function isObject(obj: any): boolean {\r\n return typeof obj === 'object' && !isArray(obj) && !isNull(obj);\r\n}\r\n\r\n/**\r\n * Returns true if the given object is array like, false otherwise.\r\n * @param obj The Object\r\n */\r\nexport function isArrayLike(obj: any): obj is ArrayLike {\r\n const length = !!obj && obj.length;\r\n const lengthCorrectFormat = isNumber(length) && length > -1 && length % 1 == 0; // eslint-disable-line eqeqeq\r\n\r\n return isArray(obj) || (!isFunction(obj) && lengthCorrectFormat) ? (length > 0 && isObject(obj) ? length - 1 in obj : true) : false;\r\n}\r\n\r\n/**\r\n * Returns true if the given object is a \"plain\" (e.g. { key: value }) object, false otherwise.\r\n * @param obj The Object.\r\n */\r\nexport function isPlainObject(obj: any): obj is PlainObject {\r\n if (!obj || !isObject(obj) || type(obj) !== 'object') return false;\r\n\r\n let key;\r\n const cstr = 'constructor';\r\n const ctor = obj[cstr];\r\n const ctorProto = ctor && ctor.prototype;\r\n const hasOwnConstructor = hasOwnProperty.call(obj, cstr);\r\n const hasIsPrototypeOf = ctorProto && hasOwnProperty.call(ctorProto, 'isPrototypeOf');\r\n\r\n if (ctor && !hasOwnConstructor && !hasIsPrototypeOf) {\r\n return false;\r\n }\r\n\r\n /* eslint-disable no-restricted-syntax */\r\n for (key in obj) {\r\n /**/\r\n }\r\n /* eslint-enable */\r\n\r\n return isUndefined(key) || hasOwnProperty.call(obj, key);\r\n}\r\n\r\n/**\r\n * Checks whether the given object is a HTMLElement.\r\n * @param obj The object which shall be checked.\r\n */\r\nexport function isHTMLElement(obj: any): obj is HTMLElement {\r\n const instanceofObj = window.HTMLElement;\r\n return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;\r\n}\r\n\r\n/**\r\n * Checks whether the given object is a Element.\r\n * @param obj The object which shall be checked.\r\n */\r\nexport function isElement(obj: any): obj is Element {\r\n const instanceofObj = window.Element;\r\n return obj ? (instanceofObj ? obj instanceof instanceofObj : obj.nodeType === ElementNodeType) : false;\r\n}\r\n","import { isUndefined } from 'support/utils/types';\r\n\r\ntype GetSetPropName = 'scrollLeft' | 'scrollTop' | 'value';\r\n\r\nfunction getSetProp(\r\n topLeft: GetSetPropName,\r\n fallback: number | string,\r\n elm: HTMLElement | HTMLInputElement | null,\r\n value?: number | string\r\n): number | string | void {\r\n if (isUndefined(value)) {\r\n return elm ? elm[topLeft] : fallback;\r\n }\r\n elm && (elm[topLeft] = value);\r\n}\r\n\r\n/**\r\n * Gets or sets a attribute with the given attribute of the given element depending whether the value attribute is given.\r\n * Returns null if the element has no attribute with the given name.\r\n * @param elm The element of which the attribute shall be get or set.\r\n * @param attrName The attribute name which shall be get or set.\r\n * @param value The value of the attribute which shall be set.\r\n */\r\nexport function attr(elm: HTMLElement | null, attrName: string): string | null;\r\nexport function attr(elm: HTMLElement | null, attrName: string, value: string): void;\r\nexport function attr(elm: HTMLElement | null, attrName: string, value?: string): string | null | void {\r\n if (isUndefined(value)) {\r\n return elm ? elm.getAttribute(attrName) : null;\r\n }\r\n elm && elm.setAttribute(attrName, value);\r\n}\r\n\r\n/**\r\n * Removes the given attribute from the given element.\r\n * @param elm The element of which the attribute shall be removed.\r\n * @param attrName The attribute name.\r\n */\r\nexport const removeAttr = (elm: Element | null, attrName: string): void => {\r\n elm && elm.removeAttribute(attrName);\r\n};\r\n\r\n/**\r\n * Gets or sets the scrollLeft value of the given element depending whether the value attribute is given.\r\n * @param elm The element of which the scrollLeft value shall be get or set.\r\n * @param value The scrollLeft value which shall be set.\r\n */\r\nexport function scrollLeft(elm: HTMLElement | null): number;\r\nexport function scrollLeft(elm: HTMLElement | null, value: number): void;\r\nexport function scrollLeft(elm: HTMLElement | null, value?: number): number | void {\r\n return getSetProp('scrollLeft', 0, elm, value) as number;\r\n}\r\n\r\n/**\r\n * Gets or sets the scrollTop value of the given element depending whether the value attribute is given.\r\n * @param elm The element of which the scrollTop value shall be get or set.\r\n * @param value The scrollTop value which shall be set.\r\n */\r\nexport function scrollTop(elm: HTMLElement | null): number;\r\nexport function scrollTop(elm: HTMLElement | null, value: number): void;\r\nexport function scrollTop(elm: HTMLElement | null, value?: number): number | void {\r\n return getSetProp('scrollTop', 0, elm, value) as number;\r\n}\r\n\r\n/**\r\n * Gets or sets the value of the given input element depending whether the value attribute is given.\r\n * @param elm The input element of which the value shall be get or set.\r\n * @param value The value which shall be set.\r\n */\r\nexport function val(elm: HTMLInputElement | null): string;\r\nexport function val(elm: HTMLInputElement | null, value: string): void;\r\nexport function val(elm: HTMLInputElement | null, value?: string): string | void {\r\n return getSetProp('value', '', elm, value) as string;\r\n}\r\n","import { isArrayLike, isString } from 'support/utils/types';\r\nimport { PlainObject } from 'typings';\r\n\r\ntype RunEachItem = ((...args: any) => any | any[]) | null | undefined;\r\n\r\n/**\r\n * Iterates through a array or object\r\n * @param arrayLikeOrObject The array or object through which shall be iterated.\r\n * @param callback The function which is responsible for the iteration.\r\n * If the function returns true its treated like a \"continue\" statement.\r\n * If the function returns false its treated like a \"break\" statement.\r\n */\r\nexport function each(\r\n array: Array | ReadonlyArray,\r\n callback: (value: T, indexOrKey: number, source: Array) => boolean | void\r\n): Array | ReadonlyArray;\r\nexport function each(\r\n array: Array | ReadonlyArray | null | undefined,\r\n callback: (value: T, indexOrKey: number, source: Array) => boolean | void\r\n): Array | ReadonlyArray | null | undefined;\r\nexport function each(\r\n arrayLikeObject: ArrayLike,\r\n callback: (value: T, indexOrKey: number, source: ArrayLike) => boolean | void\r\n): ArrayLike;\r\nexport function each(\r\n arrayLikeObject: ArrayLike | null | undefined,\r\n callback: (value: T, indexOrKey: number, source: ArrayLike) => boolean | void\r\n): ArrayLike | null | undefined;\r\nexport function each(obj: PlainObject, callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void): PlainObject;\r\nexport function each(\r\n obj: PlainObject | null | undefined,\r\n callback: (value: any, indexOrKey: string, source: PlainObject) => boolean | void\r\n): PlainObject | null | undefined;\r\nexport function each(\r\n source: ArrayLike | PlainObject | null | undefined,\r\n callback: (value: T, indexOrKey: any, source: any) => boolean | void\r\n): Array | ReadonlyArray | ArrayLike | PlainObject | null | undefined {\r\n if (isArrayLike(source)) {\r\n for (let i = 0; i < source.length; i++) {\r\n if (callback(source[i], i, source) === false) {\r\n break;\r\n }\r\n }\r\n } else if (source) {\r\n each(Object.keys(source), (key) => callback(source[key], key, source));\r\n }\r\n return source;\r\n}\r\n\r\n/**\r\n * Returns the index of the given inside the given array or -1 if the given item isn't part of the given array.\r\n * @param arr The array.\r\n * @param item The item.\r\n * @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0.\r\n */\r\nexport const indexOf = (arr: Array, item: T, fromIndex?: number): number => arr.indexOf(item, fromIndex);\r\n\r\n/**\r\n * Pushesh all given items into the given array and returns it.\r\n * @param array The array the items shall be pushed into.\r\n * @param items The items which shall be pushed into the array.\r\n */\r\nexport const push = (array: Array, items: T | ArrayLike, arrayIsSingleItem?: boolean): Array => {\r\n !arrayIsSingleItem && !isString(items) && isArrayLike(items) ? Array.prototype.push.apply(array, items as Array) : array.push(items as T);\r\n return array;\r\n};\r\n\r\n/**\r\n * Creates a shallow-copied Array instance from an array-like or iterable object.\r\n * @param arr The object from which the array instance shall be created.\r\n */\r\nexport const from = (arr: ArrayLike) => {\r\n if (Array.from) {\r\n return Array.from(arr);\r\n }\r\n const result: Array = [];\r\n\r\n each(arr, (elm) => {\r\n push(result, elm);\r\n });\r\n\r\n return result;\r\n};\r\n\r\n/**\r\n * Check whether the passed array is empty.\r\n * @param array The array which shall be checked.\r\n */\r\nexport const isEmptyArray = (array: Array | null | undefined) => array && array.length === 0;\r\n\r\n/**\r\n * Calls all functions in the passed array/set of functions.\r\n * @param arr The array filled with function which shall be called.\r\n * @param p1 The first param.\r\n */\r\nexport const runEach = (arr: ArrayLike | Set, p1?: unknown): void => {\r\n const runFn = (fn: RunEachItem) => fn && fn(p1);\r\n if (arr instanceof Set) {\r\n arr.forEach(runFn);\r\n } else {\r\n each(arr, runFn);\r\n }\r\n};\r\n","import { isArray, isFunction, isPlainObject, isNull } from 'support/utils/types';\r\nimport { each } from 'support/utils/array';\r\n\r\n/**\r\n * Determines whether the passed object has a property with the passed name.\r\n * @param obj The object.\r\n * @param prop The name of the property.\r\n */\r\nexport const hasOwnProperty = (obj: any, prop: string | number | symbol): boolean => Object.prototype.hasOwnProperty.call(obj, prop);\r\n\r\n/**\r\n * Returns the names of the enumerable string properties and methods of an object.\r\n * @param obj The object of which the properties shall be returned.\r\n */\r\nexport const keys = (obj: any): Array => (obj ? Object.keys(obj) : []);\r\n\r\n// https://github.com/jquery/jquery/blob/master/src/core.js#L116\r\nexport function assignDeep(target: T, object1: U): T & U;\r\nexport function assignDeep(target: T, object1: U, object2: V): T & U & V;\r\nexport function assignDeep(target: T, object1: U, object2: V, object3: W): T & U & V & W;\r\nexport function assignDeep(target: T, object1: U, object2: V, object3: W, object4: X): T & U & V & W & X;\r\nexport function assignDeep(target: T, object1: U, object2: V, object3: W, object4: X, object5: Y): T & U & V & W & X & Y;\r\nexport function assignDeep(\r\n target: T,\r\n object1?: U,\r\n object2?: V,\r\n object3?: W,\r\n object4?: X,\r\n object5?: Y,\r\n object6?: Z\r\n): T & U & V & W & X & Y & Z {\r\n const sources: Array = [object1, object2, object3, object4, object5, object6];\r\n\r\n // Handle case when target is a string or something (possible in deep copy)\r\n if ((typeof target !== 'object' || isNull(target)) && !isFunction(target)) {\r\n target = {} as T;\r\n }\r\n\r\n each(sources, (source) => {\r\n // Extend the base object\r\n each(keys(source), (key) => {\r\n const copy: any = source[key];\r\n\r\n // Prevent Object.prototype pollution\r\n // Prevent never-ending loop\r\n if (target === copy) {\r\n return true;\r\n }\r\n\r\n const copyIsArray = isArray(copy);\r\n\r\n // Recurse if we're merging plain objects or arrays\r\n if (copy && (isPlainObject(copy) || copyIsArray)) {\r\n const src = target[key];\r\n let clone: any = src;\r\n\r\n // Ensure proper type for the source value\r\n if (copyIsArray && !isArray(src)) {\r\n clone = [];\r\n } else if (!copyIsArray && !isPlainObject(src)) {\r\n clone = {};\r\n }\r\n\r\n // Never move original objects, clone them\r\n target[key] = assignDeep(clone, copy) as any;\r\n } else {\r\n target[key] = copy;\r\n }\r\n });\r\n });\r\n\r\n // Return the modified object\r\n return target as any;\r\n}\r\n\r\n/**\r\n * Returns true if the given object is empty, false otherwise.\r\n * @param obj The Object.\r\n */\r\nexport function isEmptyObject(obj: any): boolean {\r\n /* eslint-disable no-restricted-syntax, guard-for-in */\r\n for (const name in obj) return false;\r\n return true;\r\n /* eslint-enable */\r\n}\r\n","import { isString } from 'support/utils/types';\r\nimport { each } from 'support/utils/array';\r\nimport { keys } from 'support/utils/object';\r\n\r\nconst rnothtmlwhite = /[^\\x20\\t\\r\\n\\f]+/g;\r\nconst classListAction = (elm: Element | null, className: string, action: (elmClassList: DOMTokenList, clazz: string) => boolean | void): boolean => {\r\n let clazz: string;\r\n let i = 0;\r\n let result = false;\r\n\r\n if (elm && isString(className)) {\r\n const classes: Array = className.match(rnothtmlwhite) || [];\r\n result = classes.length > 0;\r\n while ((clazz = classes[i++])) {\r\n result = !!action(elm.classList, clazz) && result;\r\n }\r\n }\r\n return result;\r\n};\r\n\r\n/**\r\n * Check whether the given element has the given class name(s).\r\n * @param elm The element.\r\n * @param className The class name(s).\r\n */\r\nexport const hasClass = (elm: Element | null, className: string): boolean =>\r\n classListAction(elm, className, (classList, clazz) => classList.contains(clazz));\r\n\r\n/**\r\n * Adds the given class name(s) to the given element.\r\n * @param elm The element.\r\n * @param className The class name(s) which shall be added. (separated by spaces)\r\n */\r\nexport const addClass = (elm: Element | null, className: string): void => {\r\n classListAction(elm, className, (classList, clazz) => classList.add(clazz));\r\n};\r\n\r\n/**\r\n * Removes the given class name(s) from the given element.\r\n * @param elm The element.\r\n * @param className The class name(s) which shall be removed. (separated by spaces)\r\n */\r\nexport const removeClass = (elm: Element | null, className: string): void => {\r\n classListAction(elm, className, (classList, clazz) => classList.remove(clazz));\r\n};\r\n\r\n/**\r\n * Takes two className strings, compares them and returns the difference as array.\r\n * @param classNameA ClassName A.\r\n * @param classNameB ClassName B.\r\n */\r\nexport const diffClass = (classNameA: string | null | undefined, classNameB: string | null | undefined) => {\r\n const classNameASplit = classNameA && classNameA.split(' ');\r\n const classNameBSplit = classNameB && classNameB.split(' ');\r\n const tempObj = {};\r\n\r\n each(classNameASplit, (className) => {\r\n tempObj[className] = 1;\r\n });\r\n each(classNameBSplit, (className) => {\r\n if (tempObj[className]) {\r\n delete tempObj[className];\r\n } else {\r\n tempObj[className] = 1;\r\n }\r\n });\r\n\r\n return keys(tempObj);\r\n};\r\n","import { isElement } from 'support/utils/types';\r\nimport { push, from } from 'support/utils/array';\r\n\r\ntype InputElementType = Element | Node | null | undefined;\r\ntype OutputElementType = Element | null;\r\n\r\nconst elmPrototype = Element.prototype;\r\n\r\n/**\r\n * Find all elements with the passed selector, outgoing (and including) the passed element or the document if no element was provided.\r\n * @param selector The selector which has to be searched by.\r\n * @param elm The element from which the search shall be outgoing.\r\n */\r\nconst find = (selector: string, elm?: InputElementType): Element[] => {\r\n const arr: Array = [];\r\n const rootElm = elm ? (isElement(elm) ? elm : null) : document;\r\n\r\n return rootElm ? push(arr, rootElm.querySelectorAll(selector)) : arr;\r\n};\r\n\r\n/**\r\n * Find the first element with the passed selector, outgoing (and including) the passed element or the document if no element was provided.\r\n * @param selector The selector which has to be searched by.\r\n * @param elm The element from which the search shall be outgoing.\r\n */\r\nconst findFirst = (selector: string, elm?: InputElementType): OutputElementType => {\r\n const rootElm = elm ? (isElement(elm) ? elm : null) : document;\r\n\r\n return rootElm ? rootElm.querySelector(selector) : null;\r\n};\r\n\r\n/**\r\n * Determines whether the passed element is matching with the passed selector.\r\n * @param elm The element which has to be compared with the passed selector.\r\n * @param selector The selector which has to be compared with the passed element. Additional selectors: ':visible' and ':hidden'.\r\n */\r\nconst is = (elm: InputElementType, selector: string): boolean => {\r\n if (isElement(elm)) {\r\n /* istanbul ignore next */\r\n // eslint-disable-next-line\r\n // @ts-ignore\r\n const fn: (...args: any) => boolean = elmPrototype.matches || elmPrototype.msMatchesSelector;\r\n return fn.call(elm, selector);\r\n }\r\n return false;\r\n};\r\n\r\n/**\r\n * Returns the children (no text-nodes or comments) of the passed element which are matching the passed selector. An empty array is returned if the passed element is null.\r\n * @param elm The element of which the children shall be returned.\r\n * @param selector The selector which must match with the children elements.\r\n */\r\nconst children = (elm: InputElementType, selector?: string): ReadonlyArray => {\r\n const childs: Array = [];\r\n\r\n return isElement(elm)\r\n ? push(\r\n childs,\r\n from(elm.children).filter((child) => (selector ? is(child, selector) : child))\r\n )\r\n : childs;\r\n};\r\n\r\n/**\r\n * Returns the childNodes (incl. text-nodes or comments etc.) of the passed element. An empty array is returned if the passed element is null.\r\n * @param elm The element of which the childNodes shall be returned.\r\n */\r\nconst contents = (elm: InputElementType): ReadonlyArray => (elm ? from(elm.childNodes) : []);\r\n\r\n/**\r\n * Returns the parent element of the passed element, or null if the passed element is null.\r\n * @param elm The element of which the parent element shall be returned.\r\n */\r\nconst parent = (elm: InputElementType): OutputElementType => (elm ? elm.parentElement : null);\r\n\r\nconst closest = (elm: InputElementType, selector: string): OutputElementType => {\r\n if (isElement(elm)) {\r\n const closestFn = elmPrototype.closest;\r\n if (closestFn) {\r\n return closestFn.call(elm, selector);\r\n }\r\n\r\n do {\r\n if (is(elm, selector)) {\r\n return elm as Element;\r\n }\r\n elm = parent(elm);\r\n } while (elm);\r\n }\r\n\r\n return null;\r\n};\r\n\r\n/**\r\n * Determines whether the given element lies between two selectors in the DOM.\r\n * @param elm The element.\r\n * @param highBoundarySelector The high boundary selector.\r\n * @param deepBoundarySelector The deep boundary selector.\r\n */\r\nconst liesBetween = (elm: InputElementType, highBoundarySelector: string, deepBoundarySelector: string): boolean => {\r\n const closestHighBoundaryElm = elm && closest(elm, highBoundarySelector);\r\n const closestDeepBoundaryElm = elm && findFirst(deepBoundarySelector, closestHighBoundaryElm);\r\n\r\n return closestHighBoundaryElm && closestDeepBoundaryElm\r\n ? closestHighBoundaryElm === elm ||\r\n closestDeepBoundaryElm === elm ||\r\n closest(closest(elm, deepBoundarySelector), highBoundarySelector) !== closestHighBoundaryElm\r\n : false;\r\n};\r\n\r\nexport { find, findFirst, is, children, contents, parent, liesBetween };\r\n","import { isArrayLike } from 'support/utils/types';\r\nimport { each, from } from 'support/utils/array';\r\nimport { parent } from 'support/dom/traversal';\r\n\r\ntype NodeCollection = ArrayLike | Node | undefined | null;\r\n\r\n/**\r\n * Inserts Nodes before the given preferredAnchor element.\r\n * @param parentElm The parent of the preferredAnchor element or the element which shall be the parent of the inserted Nodes.\r\n * @param preferredAnchor The element before which the Nodes shall be inserted or null if the elements shall be appended at the end.\r\n * @param insertedElms The Nodes which shall be inserted.\r\n */\r\nconst before = (parentElm: Node | null, preferredAnchor: Node | null, insertedElms: NodeCollection): void => {\r\n if (insertedElms) {\r\n let anchor: Node | null = preferredAnchor;\r\n let fragment: DocumentFragment | Node | undefined | null;\r\n\r\n // parent must be defined\r\n if (parentElm) {\r\n if (isArrayLike(insertedElms)) {\r\n fragment = document.createDocumentFragment();\r\n\r\n // append all insertedElms to the fragment and if one of these is the anchor, change the anchor\r\n each(insertedElms, (insertedElm) => {\r\n if (insertedElm === anchor) {\r\n anchor = insertedElm.previousSibling;\r\n }\r\n fragment!.appendChild(insertedElm);\r\n });\r\n } else {\r\n fragment = insertedElms;\r\n }\r\n\r\n // if the preferred anchor isn't null set it to a valid anchor\r\n if (preferredAnchor) {\r\n if (!anchor) {\r\n anchor = parentElm.firstChild;\r\n } else if (anchor !== preferredAnchor) {\r\n anchor = anchor.nextSibling;\r\n }\r\n }\r\n\r\n parentElm.insertBefore(fragment, anchor);\r\n }\r\n }\r\n};\r\n\r\n/**\r\n * Appends the given children at the end of the given Node.\r\n * @param node The Node to which the children shall be appended.\r\n * @param children The Nodes which shall be appended.\r\n */\r\nexport const appendChildren = (node: Node | null, children: NodeCollection): void => {\r\n before(node, null, children);\r\n};\r\n\r\n/**\r\n * Prepends the given children at the start of the given Node.\r\n * @param node The Node to which the children shall be prepended.\r\n * @param children The Nodes which shall be prepended.\r\n */\r\nexport const prependChildren = (node: Node | null, children: NodeCollection): void => {\r\n before(node, node && node.firstChild, children);\r\n};\r\n\r\n/**\r\n * Inserts the given Nodes before the given Node.\r\n * @param node The Node before which the given Nodes shall be inserted.\r\n * @param insertedNodes The Nodes which shall be inserted.\r\n */\r\nexport const insertBefore = (node: Node | null, insertedNodes: NodeCollection): void => {\r\n before(parent(node), node, insertedNodes);\r\n};\r\n\r\n/**\r\n * Inserts the given Nodes after the given Node.\r\n * @param node The Node after which the given Nodes shall be inserted.\r\n * @param insertedNodes The Nodes which shall be inserted.\r\n */\r\nexport const insertAfter = (node: Node | null, insertedNodes: NodeCollection): void => {\r\n before(parent(node), node && node.nextSibling, insertedNodes);\r\n};\r\n\r\n/**\r\n * Removes the given Nodes from their parent.\r\n * @param nodes The Nodes which shall be removed.\r\n */\r\nexport const removeElements = (nodes: NodeCollection): void => {\r\n if (isArrayLike(nodes)) {\r\n each(from(nodes), (e) => removeElements(e));\r\n } else if (nodes) {\r\n const parentElm = parent(nodes);\r\n if (parentElm) {\r\n parentElm.removeChild(nodes);\r\n }\r\n }\r\n};\r\n","import { each } from 'support/utils/array';\r\nimport { attr } from 'support/dom/attribute';\r\nimport { contents } from 'support/dom/traversal';\r\nimport { removeElements } from 'support/dom/manipulation';\r\n\r\n/**\r\n * Creates a div DOM node.\r\n */\r\nexport const createDiv = (classNames?: string): HTMLDivElement => {\r\n const div = document.createElement('div');\r\n if (classNames) {\r\n attr(div, 'class', classNames);\r\n }\r\n return div;\r\n};\r\n\r\n/**\r\n * Creates DOM nodes modeled after the passed html string and returns the root dom nodes as a array.\r\n * @param html The html string after which the DOM nodes shall be created.\r\n */\r\nexport const createDOM = (html: string): ReadonlyArray => {\r\n const createdDiv = createDiv();\r\n createdDiv.innerHTML = html.trim();\r\n\r\n return each(contents(createdDiv), (elm) => removeElements(elm));\r\n};\r\n","export interface WH {\r\n w: T;\r\n h: T;\r\n}\r\n\r\nconst elementHasDimensions = (elm: HTMLElement): boolean => !!(elm.offsetWidth || elm.offsetHeight || elm.getClientRects().length);\r\nconst zeroObj: WH = {\r\n w: 0,\r\n h: 0,\r\n};\r\n\r\n/**\r\n * Returns the window inner- width and height.\r\n */\r\nexport const windowSize = (): WH => ({\r\n w: window.innerWidth,\r\n h: window.innerHeight,\r\n});\r\n\r\n/**\r\n * Returns the scroll- width and height of the passed element. If the element is null the width and height values are 0.\r\n * @param elm The element of which the scroll- width and height shall be returned.\r\n */\r\nexport const offsetSize = (elm: HTMLElement | null): WH =>\r\n elm\r\n ? {\r\n w: elm.offsetWidth,\r\n h: elm.offsetHeight,\r\n }\r\n : zeroObj;\r\n\r\n/**\r\n * Returns the client- width and height of the passed element. If the element is null the width and height values are 0.\r\n * @param elm The element of which the client- width and height shall be returned.\r\n */\r\nexport const clientSize = (elm: HTMLElement | null): WH =>\r\n elm\r\n ? {\r\n w: elm.clientWidth,\r\n h: elm.clientHeight,\r\n }\r\n : zeroObj;\r\n\r\n/**\r\n * Returns the client- width and height of the passed element. If the element is null the width and height values are 0.\r\n * @param elm The element of which the client- width and height shall be returned.\r\n */\r\nexport const scrollSize = (elm: HTMLElement | null): WH =>\r\n elm\r\n ? {\r\n w: elm.scrollWidth,\r\n h: elm.scrollHeight,\r\n }\r\n : zeroObj;\r\n\r\n/**\r\n * Returns the BoundingClientRect of the passed element.\r\n * @param elm The element of which the BoundingClientRect shall be returned.\r\n */\r\nexport const getBoundingClientRect = (elm: HTMLElement): DOMRect => elm.getBoundingClientRect();\r\n\r\n/**\r\n * Determines whether the passed element has any dimensions.\r\n * @param elm The element.\r\n */\r\nexport const hasDimensions = (elm: HTMLElement | null): boolean => (elm ? elementHasDimensions(elm as HTMLElement) : false);\r\n","import { isUndefined } from 'support/utils/types';\r\nimport { each, push, runEach } from 'support/utils/array';\r\n\r\nlet passiveEventsSupport: boolean;\r\nconst supportPassiveEvents = (): boolean => {\r\n if (isUndefined(passiveEventsSupport)) {\r\n passiveEventsSupport = false;\r\n try {\r\n /* eslint-disable */\r\n // @ts-ignore\r\n window.addEventListener(\r\n 'test',\r\n null,\r\n Object.defineProperty({}, 'passive', {\r\n get: function () {\r\n passiveEventsSupport = true;\r\n },\r\n })\r\n );\r\n /* eslint-enable */\r\n } catch (e) {}\r\n }\r\n return passiveEventsSupport;\r\n};\r\nconst splitEventNames = (eventNames: string) => eventNames.split(' ');\r\n\r\nexport interface OnOptions {\r\n _capture?: boolean;\r\n _passive?: boolean;\r\n _once?: boolean;\r\n}\r\n\r\n/**\r\n * Removes the passed event listener for the passed events with the passed options.\r\n * @param target The element from which the listener shall be removed.\r\n * @param eventNames The eventsnames for which the listener shall be removed.\r\n * @param listener The listener which shall be removed.\r\n * @param capture The options of the removed listener.\r\n */\r\nexport const off = (target: EventTarget, eventNames: string, listener: EventListener, capture?: boolean): void => {\r\n each(splitEventNames(eventNames), (eventName) => {\r\n target.removeEventListener(eventName, listener, capture);\r\n });\r\n};\r\n\r\n/**\r\n * Adds the passed event listener for the passed eventnames with the passed options.\r\n * @param target The element to which the listener shall be added.\r\n * @param eventNames The eventsnames for which the listener shall be called.\r\n * @param listener The listener which is called on the eventnames.\r\n * @param options The options of the added listener.\r\n */\r\nexport const on = (target: EventTarget, eventNames: string, listener: EventListener, options?: OnOptions): (() => void) => {\r\n const doSupportPassiveEvents = supportPassiveEvents();\r\n const passive = (doSupportPassiveEvents && options && options._passive) || false;\r\n const capture = (options && options._capture) || false;\r\n const once = (options && options._once) || false;\r\n const offListeners: (() => void)[] = [];\r\n const nativeOptions: AddEventListenerOptions | boolean = doSupportPassiveEvents\r\n ? {\r\n passive,\r\n capture,\r\n }\r\n : capture;\r\n\r\n each(splitEventNames(eventNames), (eventName) => {\r\n const finalListener = once\r\n ? (evt: Event) => {\r\n target.removeEventListener(eventName, finalListener, capture);\r\n listener && listener(evt);\r\n }\r\n : listener;\r\n\r\n push(offListeners, off.bind(null, target, eventName, finalListener, capture));\r\n target.addEventListener(eventName, finalListener, nativeOptions);\r\n });\r\n\r\n return runEach.bind(0, offListeners);\r\n};\r\n\r\n/**\r\n * Shorthand for the stopPropagation event Method.\r\n * @param evt The event of which the stopPropagation method shall be called.\r\n */\r\nexport const stopPropagation = (evt: Event) => evt.stopPropagation();\r\n\r\n/**\r\n * Shorthand for the preventDefault event Method.\r\n * @param evt The event of which the preventDefault method shall be called.\r\n */\r\nexport const preventDefault = (evt: Event) => evt.preventDefault();\r\n","import { each } from 'support/utils/array';\r\nimport { WH, XY, TRBL } from 'support/dom';\r\nimport { PlainObject } from 'typings';\r\n\r\n/**\r\n * Compares two objects and returns true if all values of the passed prop names are identical, false otherwise or if one of the two object is falsy.\r\n * @param a Object a.\r\n * @param b Object b.\r\n * @param props The props which shall be compared.\r\n */\r\nexport const equal = (a: T | undefined, b: T | undefined, props: Array): boolean => {\r\n if (a && b) {\r\n let result = true;\r\n each(props, (prop) => {\r\n if (a[prop] !== b[prop]) {\r\n result = false;\r\n }\r\n });\r\n return result;\r\n }\r\n return false;\r\n};\r\n\r\n/**\r\n * Compares object a with object b and returns true if both have the same property values, false otherwise.\r\n * Also returns false if one of the objects is undefined or null.\r\n * @param a Object a.\r\n * @param b Object b.\r\n */\r\nexport const equalWH = (a?: WH, b?: WH) => equal(a, b, ['w', 'h']);\r\n\r\n/**\r\n * Compares object a with object b and returns true if both have the same property values, false otherwise.\r\n * Also returns false if one of the objects is undefined or null.\r\n * @param a Object a.\r\n * @param b Object b.\r\n */\r\nexport const equalXY = (a?: XY, b?: XY) => equal(a, b, ['x', 'y']);\r\n\r\n/**\r\n * Compares object a with object b and returns true if both have the same property values, false otherwise.\r\n * Also returns false if one of the objects is undefined or null.\r\n * @param a Object a.\r\n * @param b Object b.\r\n */\r\nexport const equalTRBL = (a?: TRBL, b?: TRBL) => equal(a, b, ['t', 'r', 'b', 'l']);\r\n","import { each } from 'support/utils/array';\r\nimport { hasOwnProperty } from 'support/utils/object';\r\nimport { createDiv } from 'support/dom/create';\r\n\r\nconst firstLetterToUpper = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);\r\nconst getDummyStyle = (): CSSStyleDeclaration => createDiv().style;\r\n\r\n// https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix\r\n\r\nexport const cssPrefixes: ReadonlyArray = ['-webkit-', '-moz-', '-o-', '-ms-'];\r\nexport const jsPrefixes: ReadonlyArray = ['WebKit', 'Moz', 'O', 'MS', 'webkit', 'moz', 'o', 'ms'];\r\n\r\nexport const jsCache: { [key: string]: any } = {};\r\nexport const cssCache: { [key: string]: string } = {};\r\n\r\n/**\r\n * Gets the name of the given CSS property with vendor prefix if it isn't supported without, or undefined if unsupported.\r\n * @param name The name of the CSS property which shall be get.\r\n */\r\nexport const cssProperty = (name: string): string | undefined => {\r\n let result: string | undefined = cssCache[name];\r\n\r\n if (hasOwnProperty(cssCache, name)) {\r\n return result;\r\n }\r\n\r\n const uppercasedName: string = firstLetterToUpper(name);\r\n const elmStyle: CSSStyleDeclaration = getDummyStyle();\r\n\r\n each(cssPrefixes, (prefix: string) => {\r\n const prefixWithoutDashes: string = prefix.replace(/-/g, '');\r\n const resultPossibilities: Array = [\r\n name, // transition\r\n prefix + name, // -webkit-transition\r\n prefixWithoutDashes + uppercasedName, // webkitTransition\r\n firstLetterToUpper(prefixWithoutDashes) + uppercasedName, // WebkitTransition\r\n ];\r\n result = resultPossibilities.find((resultPossibility: string) => elmStyle[resultPossibility] !== undefined);\r\n return !result;\r\n });\r\n\r\n cssCache[name] = result;\r\n return result;\r\n};\r\n\r\n/**\r\n * Get the name of the given CSS property value(s), with vendor prefix if it isn't supported wuthout, or undefined if no value is supported.\r\n * @param property The CSS property to which the CSS property value(s) belong.\r\n * @param values The value(s) separated by spaces which shall be get.\r\n * @param suffix A suffix which is added to each value in case the value is a function or something else more advanced.\r\n */\r\nexport const cssPropertyValue = (property: string, values: string, suffix?: string): string | undefined => {\r\n const name = `${property} ${values}`;\r\n let result: string | undefined = cssCache[name];\r\n\r\n if (hasOwnProperty(cssCache, name)) {\r\n return result;\r\n }\r\n\r\n const dummyStyle: CSSStyleDeclaration = getDummyStyle();\r\n const possbleValues: Array = values.split(' ');\r\n const preparedSuffix: string = suffix || '';\r\n const cssPrefixesWithFirstEmpty = [''].concat(cssPrefixes);\r\n\r\n each(possbleValues, (possibleValue: string) => {\r\n each(cssPrefixesWithFirstEmpty, (prefix: string) => {\r\n const prop = prefix + possibleValue;\r\n dummyStyle.cssText = `${property}:${prop}${preparedSuffix}`;\r\n if (dummyStyle.length) {\r\n result = prop;\r\n return false;\r\n }\r\n });\r\n return !result;\r\n });\r\n\r\n cssCache[name] = result;\r\n return result;\r\n};\r\n\r\n/**\r\n * Get the requested JS function, object or constructor with vendor prefix if it isn't supported without or undefined if unsupported.\r\n * @param name The name of the JS function, object or constructor.\r\n */\r\nexport const jsAPI = (name: string): T | undefined => {\r\n let result: any = jsCache[name] || window[name];\r\n\r\n if (hasOwnProperty(jsCache, name)) {\r\n return result;\r\n }\r\n\r\n each(jsPrefixes, (prefix: string) => {\r\n result = result || window[prefix + firstLetterToUpper(name)];\r\n return !result;\r\n });\r\n\r\n jsCache[name] = result;\r\n return result;\r\n};\r\n","import { jsAPI } from 'support/compatibility/vendors';\r\n\r\nexport const MutationObserverConstructor = jsAPI('MutationObserver');\r\nexport const IntersectionObserverConstructor = jsAPI('IntersectionObserver');\r\nexport const ResizeObserverConstructor: any | undefined = jsAPI('ResizeObserver');\r\nexport const cAF = jsAPI('cancelAnimationFrame');\r\nexport const rAF = jsAPI('requestAnimationFrame');\r\n","import { isNumber } from 'support/utils/types';\r\nimport { cAF, rAF } from 'support/compatibility/apis';\r\n\r\nexport const noop = () => {}; // eslint-disable-line\r\n\r\n/**\r\n * Debounces the given function either with a timeout or a animation frame.\r\n * @param functionToDebounce The function which shall be debounced.\r\n * @param timeout The timeout for debouncing. If 0 or lower animation frame is used for debouncing, a timeout otherwise.\r\n * @param maxWait A maximum amount of ms. before the function will be called even with debounce.\r\n */\r\nexport const debounce = (functionToDebounce: (...args: any) => any, timeout?: number, maxWait?: number) => {\r\n let timeoutId: number | void;\r\n let lastCallTime: number;\r\n const hasTimeout = isNumber(timeout) && timeout > 0;\r\n const hasMaxWait = isNumber(maxWait) && maxWait > 0;\r\n const cancel = hasTimeout ? window.clearTimeout : cAF!;\r\n const set = hasTimeout ? window.setTimeout : rAF!;\r\n const setFn = function (args: IArguments) {\r\n lastCallTime = hasMaxWait ? performance.now() : 0;\r\n timeoutId && cancel(timeoutId);\r\n // eslint-disable-next-line\r\n // @ts-ignore\r\n functionToDebounce.apply(this, args);\r\n };\r\n\r\n return function () {\r\n // eslint-disable-next-line\r\n // @ts-ignore\r\n const boundSetFn = setFn.bind(this, arguments); // eslint-disable-line\r\n const forceCall = hasMaxWait ? performance.now() - lastCallTime >= maxWait! : false;\r\n\r\n timeoutId && cancel(timeoutId);\r\n timeoutId = forceCall ? boundSetFn() : (set(boundSetFn, timeout!) as number);\r\n };\r\n};\r\n","import { each, keys } from 'support/utils';\r\nimport { isString, isNumber, isArray } from 'support/utils/types';\r\nimport { PlainObject } from 'typings';\r\n\r\nexport interface TRBL {\r\n t: number;\r\n r: number;\r\n b: number;\r\n l: number;\r\n}\r\n\r\ntype CssStyles = { [key: string]: string | number };\r\nconst cssNumber = {\r\n animationiterationcount: 1,\r\n columncount: 1,\r\n fillopacity: 1,\r\n flexgrow: 1,\r\n flexshrink: 1,\r\n fontweight: 1,\r\n lineheight: 1,\r\n opacity: 1,\r\n order: 1,\r\n orphans: 1,\r\n widows: 1,\r\n zindex: 1,\r\n zoom: 1,\r\n};\r\n\r\nconst parseToZeroOrNumber = (value: string, toFloat?: boolean): number => {\r\n /* istanbul ignore next */\r\n const num = toFloat ? parseFloat(value) : parseInt(value, 10);\r\n /* istanbul ignore next */\r\n return Number.isNaN(num) ? 0 : num;\r\n};\r\nconst adaptCSSVal = (prop: string, val: string | number): string | number => (!cssNumber[prop.toLowerCase()] && isNumber(val) ? `${val}px` : val);\r\nconst getCSSVal = (elm: HTMLElement, computedStyle: CSSStyleDeclaration, prop: string): string =>\r\n /* istanbul ignore next */\r\n computedStyle != null ? computedStyle.getPropertyValue(prop) : elm.style[prop];\r\nconst setCSSVal = (elm: HTMLElement | null, prop: string, val: string | number): void => {\r\n try {\r\n if (elm && elm.style[prop] !== undefined) {\r\n elm.style[prop] = adaptCSSVal(prop, val);\r\n }\r\n } catch (e) {}\r\n};\r\n\r\n/**\r\n * Gets or sets the passed styles to the passed element.\r\n * @param elm The element to which the styles shall be applied to / be read from.\r\n * @param styles The styles which shall be set or read.\r\n */\r\nexport function style(elm: HTMLElement | null, styles: CssStyles): void;\r\nexport function style(elm: HTMLElement | null, styles: string): string;\r\nexport function style(elm: HTMLElement | null, styles: Array | string): { [key: string]: string };\r\nexport function style(elm: HTMLElement | null, styles: CssStyles | Array | string): { [key: string]: string } | string | void {\r\n const getSingleStyle = isString(styles);\r\n const getStyles = isArray(styles) || getSingleStyle;\r\n\r\n if (getStyles) {\r\n let getStylesResult: string | PlainObject = getSingleStyle ? '' : {};\r\n if (elm) {\r\n const computedStyle: CSSStyleDeclaration = window.getComputedStyle(elm, null);\r\n getStylesResult = getSingleStyle\r\n ? getCSSVal(elm, computedStyle, styles as string)\r\n : (styles as Array).reduce((result, key) => {\r\n result[key] = getCSSVal(elm, computedStyle, key as string);\r\n return result;\r\n }, getStylesResult);\r\n }\r\n return getStylesResult;\r\n }\r\n each(keys(styles), (key) => setCSSVal(elm, key, styles[key]));\r\n}\r\n\r\n/**\r\n * Hides the passed element (display: none).\r\n * @param elm The element which shall be hidden.\r\n */\r\nexport const hide = (elm: HTMLElement | null): void => {\r\n style(elm, { display: 'none' });\r\n};\r\n\r\n/**\r\n * Shows the passed element (display: block).\r\n * @param elm The element which shall be shown.\r\n */\r\nexport const show = (elm: HTMLElement | null): void => {\r\n style(elm, { display: 'block' });\r\n};\r\n\r\n/**\r\n * Returns a top\r\n * @param elm\r\n * @param property\r\n */\r\nexport const topRightBottomLeft = (elm: HTMLElement | null, property?: string): TRBL => {\r\n const finalProp = property || '';\r\n const top = `${finalProp}-top`;\r\n const right = `${finalProp}-right`;\r\n const bottom = `${finalProp}-bottom`;\r\n const left = `${finalProp}-left`;\r\n const result = style(elm, [top, right, bottom, left]);\r\n return {\r\n t: parseToZeroOrNumber(result[top]),\r\n r: parseToZeroOrNumber(result[right]),\r\n b: parseToZeroOrNumber(result[bottom]),\r\n l: parseToZeroOrNumber(result[left]),\r\n };\r\n};\r\n","import { getBoundingClientRect } from 'support/dom/dimensions';\r\n\r\nexport interface XY {\r\n x: T;\r\n y: T;\r\n}\r\n\r\nconst zeroObj: XY = {\r\n x: 0,\r\n y: 0,\r\n};\r\n\r\n/**\r\n * Returns the offset- left and top coordinates of the passed element relative to the document. If the element is null the top and left values are 0.\r\n * @param elm The element of which the offset- top and left coordinates shall be returned.\r\n */\r\nexport const absoluteCoordinates = (elm: HTMLElement | null): XY => {\r\n const rect = elm ? getBoundingClientRect(elm) : 0;\r\n return rect\r\n ? {\r\n x: rect.left + window.pageYOffset,\r\n y: rect.top + window.pageXOffset,\r\n }\r\n : zeroObj;\r\n};\r\n\r\n/**\r\n * Returns the offset- left and top coordinates of the passed element. If the element is null the top and left values are 0.\r\n * @param elm The element of which the offset- top and left coordinates shall be returned.\r\n */\r\nexport const offsetCoordinates = (elm: HTMLElement | null): XY =>\r\n elm\r\n ? {\r\n x: elm.offsetLeft,\r\n y: elm.offsetTop,\r\n }\r\n : zeroObj;\r\n","export interface Cache {\r\n readonly _value?: T;\r\n readonly _previous?: T;\r\n readonly _changed: boolean;\r\n}\r\n\r\nexport interface CacheOptions {\r\n _equal?: EqualCachePropFunction;\r\n _initialValue?: T;\r\n}\r\n\r\nexport type CacheUpdate = (force?: boolean | 0, context?: C) => Cache;\r\n\r\nexport type UpdateCachePropFunction = (context?: C, current?: T, previous?: T) => T;\r\n\r\nexport type EqualCachePropFunction = (currentVal?: T, newVal?: T) => boolean;\r\n\r\nexport const createCache = (update: UpdateCachePropFunction, options?: CacheOptions): CacheUpdate => {\r\n const { _equal, _initialValue } = options || {};\r\n let _value: T | undefined = _initialValue;\r\n let _previous: T | undefined;\r\n return (force, context) => {\r\n const curr = _value;\r\n const newVal = update(context, _value, _previous);\r\n const changed = force || (_equal ? !_equal(curr, newVal) : curr !== newVal);\r\n\r\n if (changed) {\r\n _value = newVal;\r\n _previous = curr;\r\n }\r\n\r\n return {\r\n _value,\r\n _previous,\r\n _changed: changed,\r\n };\r\n };\r\n};\r\n","function _extends() {\n module.exports = _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nmodule.exports = _extends;","import { each, hasOwnProperty, keys, push, isEmptyObject } from 'support/utils';\r\nimport { type, isArray, isUndefined, isPlainObject, isString } from 'support/utils/types';\r\nimport { OptionsTemplate, OptionsTemplateTypes, OptionsTemplateType, Func, OptionsValidationResult, OptionsValidated } from 'support/options';\r\nimport { PlainObject } from 'typings';\r\n\r\nconst { stringify } = JSON;\r\n\r\n/**\r\n * A prefix and suffix tuple which serves as recognition pattern for template types.\r\n */\r\nconst templateTypePrefixSuffix: readonly [string, string] = ['__TPL_', '_TYPE__'];\r\n/**\r\n * A object which serves as a mapping for \"normal\" types and template types.\r\n * Key = normal type string\r\n * value = template type string\r\n */\r\nconst optionsTemplateTypes: OptionsTemplateTypesDictionary = ['boolean', 'number', 'string', 'array', 'object', 'function', 'null'].reduce(\r\n (result, item) => {\r\n result[item] = templateTypePrefixSuffix[0] + item + templateTypePrefixSuffix[1];\r\n return result;\r\n },\r\n {} as OptionsTemplateTypesDictionary\r\n);\r\n\r\n/**\r\n * Validates the given options object according to the given template object and returns a object which looks like:\r\n * {\r\n * foreign : a object which consists of properties which aren't defined inside the template. (foreign properties)\r\n * validated : a object which consists only of valid properties. (property name is inside the template and value has a correct type)\r\n * }\r\n * @param options The options object which shall be validated.\r\n * @param template The template according to which the options object shall be validated.\r\n * @param optionsDiff When provided the returned validated object will only have properties which are different to this objects properties.\r\n * Example (assume all properties are valid to the template):\r\n * Options object : { a: 'a', b: 'b', c: 'c' }\r\n * optionsDiff object : { a: 'a', b: 'b', c: undefined }\r\n * Returned validated object : { c: 'c' }\r\n * Because the value of the properties a and b didn't change, they aren't included in the returned object.\r\n * Without the optionsDiff object the returned validated object would be: { a: 'a', b: 'b', c: 'c' }\r\n * @param doWriteErrors True if errors shall be logged into the console, false otherwise.\r\n * @param propPath The propertyPath which lead to this object. (used for error logging)\r\n */\r\nconst validateRecursive = (\r\n options: T,\r\n template: OptionsTemplate>,\r\n optionsDiff: T,\r\n doWriteErrors?: boolean,\r\n propPath?: string\r\n): OptionsValidationResult => {\r\n const validatedOptions: OptionsValidated = {};\r\n const optionsCopy: T = { ...options };\r\n const props = keys(template).filter((prop) => hasOwnProperty(options, prop));\r\n\r\n each(props, (prop: Extract) => {\r\n const optionsDiffValue: any = isUndefined(optionsDiff[prop]) ? {} : optionsDiff[prop];\r\n const optionsValue: any = options[prop];\r\n const templateValue: PlainObject | string | OptionsTemplateTypes | Array = template[prop];\r\n const templateIsComplex = isPlainObject(templateValue);\r\n const propPrefix = propPath ? `${propPath}.` : '';\r\n\r\n // if the template has a object as value, it means that the options are complex (verschachtelt)\r\n if (templateIsComplex && isPlainObject(optionsValue)) {\r\n const validatedResult = validateRecursive(optionsValue, templateValue as PlainObject, optionsDiffValue, doWriteErrors, propPrefix + prop);\r\n validatedOptions[prop] = validatedResult._validated as any;\r\n optionsCopy[prop] = validatedResult._foreign as any;\r\n\r\n each([optionsCopy, validatedOptions], (value) => {\r\n if (isEmptyObject(value[prop])) {\r\n delete value[prop];\r\n }\r\n });\r\n } else if (!templateIsComplex) {\r\n let isValid = false;\r\n const errorEnumStrings: Array = [];\r\n const errorPossibleTypes: Array = [];\r\n const optionsValueType = type(optionsValue);\r\n const templateValueArr: Array = !isArray(templateValue)\r\n ? [templateValue as string | OptionsTemplateTypes]\r\n : (templateValue as Array);\r\n\r\n each(templateValueArr, (currTemplateType) => {\r\n // if currType value isn't inside possibleTemplateTypes we assume its a enum string value\r\n let typeString: string | undefined;\r\n each(optionsTemplateTypes, (value: string, key: string) => {\r\n if (value === currTemplateType) {\r\n typeString = key;\r\n }\r\n });\r\n const isEnumString = isUndefined(typeString);\r\n if (isEnumString && isString(optionsValue)) {\r\n // split it into a array which contains all possible values for example: [\"yes\", \"no\", \"maybe\"]\r\n const enumStringSplit = currTemplateType.split(' ');\r\n isValid = !!enumStringSplit.find((possibility) => possibility === optionsValue);\r\n\r\n // build error message\r\n push(errorEnumStrings, enumStringSplit);\r\n } else {\r\n isValid = optionsTemplateTypes[optionsValueType] === currTemplateType;\r\n }\r\n\r\n // build error message\r\n push(errorPossibleTypes, isEnumString ? optionsTemplateTypes.string : typeString!);\r\n\r\n // continue if invalid, break if valid\r\n return !isValid;\r\n });\r\n\r\n if (isValid) {\r\n const doStringifyComparison = isArray(optionsValue) || isPlainObject(optionsValue);\r\n if (doStringifyComparison ? stringify(optionsValue) !== stringify(optionsDiffValue) : optionsValue !== optionsDiffValue) {\r\n validatedOptions[prop] = optionsValue;\r\n }\r\n } else if (doWriteErrors) {\r\n console.warn(\r\n `${\r\n `The option \"${propPrefix}${prop}\" wasn't set, because it doesn't accept the type [ ${optionsValueType.toUpperCase()} ] with the value of \"${optionsValue}\".\\r\\n` +\r\n `Accepted types are: [ ${errorPossibleTypes.join(', ').toUpperCase()} ].\\r\\n`\r\n }${errorEnumStrings.length > 0 ? `\\r\\nValid strings are: [ ${errorEnumStrings.join(', ')} ].` : ''}`\r\n );\r\n }\r\n\r\n delete optionsCopy[prop];\r\n }\r\n });\r\n\r\n return {\r\n _foreign: optionsCopy,\r\n _validated: validatedOptions,\r\n };\r\n};\r\n\r\n/**\r\n * Validates the given options object according to the given template object and returns a object which looks like:\r\n * {\r\n * foreign : a object which consists of properties which aren't defined inside the template. (foreign properties)\r\n * validated : a object which consists only of valid properties. (property name is inside the template and value has a correct type)\r\n * }\r\n * @param options The options object which shall be validated.\r\n * @param template The template according to which the options object shall be validated.\r\n * @param optionsDiff When provided the returned validated object will only have properties which are different to this objects properties.\r\n * Example (assume all properties are valid to the template):\r\n * Options object : { a: 'a', b: 'b', c: 'c' }\r\n * optionsDiff object : { a: 'a', b: 'b', c: undefined }\r\n * Returned validated object : { c: 'c' }\r\n * Because the value of the properties a and b didn't change, they aren't included in the returned object.\r\n * Without the optionsDiff object the returned validated object would be: { a: 'a', b: 'b', c: 'c' }\r\n * @param doWriteErrors True if errors shall be logged into the console, false otherwise.\r\n */\r\nconst validateOptions = (\r\n options: T,\r\n template: OptionsTemplate>,\r\n optionsDiff?: T | null,\r\n doWriteErrors?: boolean\r\n): OptionsValidationResult => {\r\n /*\r\n if (!isEmptyObject(foreign) && doWriteErrors)\r\n console.warn(`The following options are discarded due to invalidity:\\r\\n ${window.JSON.stringify(foreign, null, 2)}`);\r\n\r\n //add values, which aren't specified in the template, to the finished validated object to prevent them from being discarded\r\n if (keepForeignProps) {\r\n Object.assign(result.validated, foreign);\r\n }\r\n */\r\n return validateRecursive(options, template, optionsDiff || ({} as T), doWriteErrors || false);\r\n};\r\n\r\nexport { validateOptions, optionsTemplateTypes };\r\n\r\ntype OptionsTemplateTypesDictionary = {\r\n readonly boolean: OptionsTemplateType;\r\n readonly number: OptionsTemplateType;\r\n readonly string: OptionsTemplateType;\r\n readonly array: OptionsTemplateType>;\r\n readonly object: OptionsTemplateType>;\r\n readonly function: OptionsTemplateType;\r\n readonly null: OptionsTemplateType;\r\n};\r\n","import { OptionsTemplate, OptionsWithOptionsTemplate, OptionsTemplateTypes } from 'support/options';\r\nimport { PlainObject } from 'typings';\r\nimport { isArray } from 'support/utils/types';\r\nimport { each, keys } from 'support/utils';\r\n\r\nexport interface OptionsWithOptionsTemplateTransformation> {\r\n _template: OptionsTemplate;\r\n _options: T;\r\n}\r\n\r\n/**\r\n * Transforms the given OptionsWithOptionsTemplate object to its corresponding generic (T) Object or its corresponding Template object.\r\n * @param optionsWithOptionsTemplate The OptionsWithOptionsTemplate object which shall be converted.\r\n * @param toTemplate True if the given OptionsWithOptionsTemplate shall be converted to its corresponding Template object.\r\n */\r\nexport function transformOptions>(\r\n optionsWithOptionsTemplate: OptionsWithOptionsTemplate\r\n): OptionsWithOptionsTemplateTransformation {\r\n const result: any = {\r\n _template: {},\r\n _options: {},\r\n };\r\n\r\n each(keys(optionsWithOptionsTemplate), (key: Extract) => {\r\n const val: PlainObject | OptionsTemplateTypes | Array = optionsWithOptionsTemplate[key];\r\n\r\n if (isArray(val)) {\r\n result._template[key] = val[1];\r\n result._options[key] = val[0];\r\n } else {\r\n // if (isObject(val))\r\n const tmpResult = transformOptions(val as OptionsWithOptionsTemplate);\r\n result._template[key] = tmpResult._template;\r\n result._options[key] = tmpResult._options;\r\n }\r\n });\r\n\r\n return result;\r\n}\r\n","export const classNameEnvironment = 'os-environment';\r\nexport const classNameEnvironmentFlexboxGlue = `${classNameEnvironment}-flexbox-glue`;\r\nexport const classNameEnvironmentFlexboxGlueMax = `${classNameEnvironmentFlexboxGlue}-max`;\r\n\r\nexport const classNameHost = 'os-host';\r\nexport const classNamePadding = 'os-padding';\r\nexport const classNameViewport = 'os-viewport';\r\nexport const classNameContent = 'os-content';\r\nexport const classNameViewportScrollbarStyling = `${classNameViewport}-scrollbar-styled`;\r\n\r\nexport const classNameSizeObserver = 'os-size-observer';\r\nexport const classNameSizeObserverAppear = `${classNameSizeObserver}-appear`;\r\nexport const classNameSizeObserverListener = `${classNameSizeObserver}-listener`;\r\nexport const classNameSizeObserverListenerScroll = `${classNameSizeObserverListener}-scroll`;\r\nexport const classNameSizeObserverListenerItem = `${classNameSizeObserverListener}-item`;\r\nexport const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverListenerItem}-final`;\r\n\r\nexport const classNameTrinsicObserver = 'os-trinsic-observer';\r\n","import {\r\n createDOM,\r\n addClass,\r\n style,\r\n appendChildren,\r\n clientSize,\r\n absoluteCoordinates,\r\n offsetSize,\r\n scrollLeft,\r\n XY,\r\n removeAttr,\r\n removeElements,\r\n windowSize,\r\n runEach,\r\n equalWH,\r\n} from 'support';\r\nimport {\r\n classNameEnvironment,\r\n classNameEnvironmentFlexboxGlue,\r\n classNameEnvironmentFlexboxGlueMax,\r\n classNameViewportScrollbarStyling,\r\n} from 'classnames';\r\n\r\nexport type OnEnvironmentChanged = (env: Environment) => void;\r\nexport interface Environment {\r\n _autoUpdateLoop: boolean;\r\n _nativeScrollbarSize: XY;\r\n _nativeScrollbarIsOverlaid: XY;\r\n _nativeScrollbarStyling: boolean;\r\n _rtlScrollBehavior: { n: boolean; i: boolean };\r\n _flexboxGlue: boolean;\r\n _addListener(listener: OnEnvironmentChanged): void;\r\n _removeListener(listener: OnEnvironmentChanged): void;\r\n}\r\n\r\nlet environmentInstance: Environment;\r\nconst { abs, round } = Math;\r\n\r\nconst getNativeScrollbarSize = (body: HTMLElement, measureElm: HTMLElement): XY => {\r\n appendChildren(body, measureElm);\r\n const cSize = clientSize(measureElm);\r\n const oSize = offsetSize(measureElm);\r\n\r\n return {\r\n x: oSize.h - cSize.h,\r\n y: oSize.w - cSize.w,\r\n };\r\n};\r\n\r\nconst getNativeScrollbarStyling = (testElm: HTMLElement): boolean => {\r\n let result = false;\r\n addClass(testElm, classNameViewportScrollbarStyling);\r\n try {\r\n result =\r\n style(testElm, 'scrollbar-width') === 'none' || window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';\r\n } catch (ex) {}\r\n\r\n return result;\r\n};\r\n\r\nconst getRtlScrollBehavior = (parentElm: HTMLElement, childElm: HTMLElement): { i: boolean; n: boolean } => {\r\n const strHidden = 'hidden';\r\n style(parentElm, { overflowX: strHidden, overflowY: strHidden, direction: 'rtl' });\r\n scrollLeft(parentElm, 0);\r\n\r\n const parentOffset = absoluteCoordinates(parentElm);\r\n const childOffset = absoluteCoordinates(childElm);\r\n scrollLeft(parentElm, -999); // https://github.com/KingSora/OverlayScrollbars/issues/187\r\n const childOffsetAfterScroll = absoluteCoordinates(childElm);\r\n return {\r\n /**\r\n * origin direction = determines if the zero scroll position is on the left or right side\r\n * 'i' means 'invert' (i === true means that the axis must be inverted to be correct)\r\n * true = on the left side\r\n * false = on the right side\r\n */\r\n i: parentOffset.x === childOffset.x,\r\n /**\r\n * negative = determines if the maximum scroll is positive or negative\r\n * 'n' means 'negate' (n === true means that the axis must be negated to be correct)\r\n * true = negative\r\n * false = positive\r\n */\r\n n: childOffset.x !== childOffsetAfterScroll.x,\r\n };\r\n};\r\n\r\nconst getFlexboxGlue = (parentElm: HTMLElement, childElm: HTMLElement): boolean => {\r\n addClass(parentElm, classNameEnvironmentFlexboxGlue);\r\n const minOffsetsizeParent = offsetSize(parentElm);\r\n const minOffsetsize = offsetSize(childElm);\r\n const supportsMin = equalWH(minOffsetsize, minOffsetsizeParent);\r\n\r\n addClass(parentElm, classNameEnvironmentFlexboxGlueMax);\r\n const maxOffsetsizeParent = offsetSize(parentElm);\r\n const maxOffsetsize = offsetSize(childElm);\r\n const supportsMax = equalWH(maxOffsetsize, maxOffsetsizeParent);\r\n\r\n return supportsMin && supportsMax;\r\n};\r\n\r\nconst getWindowDPR = (): number => {\r\n // eslint-disable-next-line\r\n // @ts-ignore\r\n const dDPI = window.screen.deviceXDPI || 0;\r\n // eslint-disable-next-line\r\n // @ts-ignore\r\n const sDPI = window.screen.logicalXDPI || 1;\r\n return window.devicePixelRatio || dDPI / sDPI;\r\n};\r\n\r\nconst diffBiggerThanOne = (valOne: number, valTwo: number): boolean => {\r\n const absValOne = abs(valOne);\r\n const absValTwo = abs(valTwo);\r\n return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo);\r\n};\r\n\r\nconst createEnvironment = (): Environment => {\r\n const { body } = document;\r\n const envDOM = createDOM(``);\r\n const envElm = envDOM[0] as HTMLElement;\r\n const envChildElm = envElm.firstChild as HTMLElement;\r\n\r\n const onChangedListener: Set = new Set();\r\n const nativeScrollBarSize = getNativeScrollbarSize(body, envElm);\r\n const nativeScrollbarIsOverlaid = {\r\n x: nativeScrollBarSize.x === 0,\r\n y: nativeScrollBarSize.y === 0,\r\n };\r\n\r\n const env: Environment = {\r\n _autoUpdateLoop: false,\r\n _nativeScrollbarSize: nativeScrollBarSize,\r\n _nativeScrollbarIsOverlaid: nativeScrollbarIsOverlaid,\r\n _nativeScrollbarStyling: getNativeScrollbarStyling(envElm),\r\n _rtlScrollBehavior: getRtlScrollBehavior(envElm, envChildElm),\r\n _flexboxGlue: getFlexboxGlue(envElm, envChildElm),\r\n _addListener(listener: OnEnvironmentChanged): void {\r\n onChangedListener.add(listener);\r\n },\r\n _removeListener(listener: OnEnvironmentChanged): void {\r\n onChangedListener.delete(listener);\r\n },\r\n };\r\n\r\n removeAttr(envElm, 'style');\r\n removeAttr(envElm, 'class');\r\n removeElements(envElm);\r\n\r\n if (!nativeScrollbarIsOverlaid.x || !nativeScrollbarIsOverlaid.y) {\r\n let size = windowSize();\r\n let dpr = getWindowDPR();\r\n let scrollbarSize = nativeScrollBarSize;\r\n\r\n window.addEventListener('resize', () => {\r\n if (onChangedListener.size) {\r\n const sizeNew = windowSize();\r\n const deltaSize = {\r\n w: sizeNew.w - size.w,\r\n h: sizeNew.h - size.h,\r\n };\r\n\r\n if (deltaSize.w === 0 && deltaSize.h === 0) return;\r\n\r\n const deltaAbsSize = {\r\n w: abs(deltaSize.w),\r\n h: abs(deltaSize.h),\r\n };\r\n const deltaAbsRatio = {\r\n w: abs(round(sizeNew.w / (size.w / 100.0))),\r\n h: abs(round(sizeNew.h / (size.h / 100.0))),\r\n };\r\n const dprNew = getWindowDPR();\r\n const deltaIsBigger = deltaAbsSize.w > 2 && deltaAbsSize.h > 2;\r\n const difference = !diffBiggerThanOne(deltaAbsRatio.w, deltaAbsRatio.h);\r\n const dprChanged = dprNew !== dpr && dpr > 0;\r\n const isZoom = deltaIsBigger && difference && dprChanged;\r\n\r\n if (isZoom) {\r\n const newScrollbarSize = (environmentInstance._nativeScrollbarSize = getNativeScrollbarSize(body, envElm));\r\n removeElements(envElm);\r\n\r\n if (scrollbarSize.x !== newScrollbarSize.x || scrollbarSize.y !== newScrollbarSize.y) {\r\n runEach(onChangedListener);\r\n }\r\n\r\n scrollbarSize = newScrollbarSize;\r\n }\r\n\r\n size = sizeNew;\r\n dpr = dprNew;\r\n }\r\n });\r\n }\r\n\r\n return env;\r\n};\r\n\r\nexport const getEnvironment = (): Environment => {\r\n if (!environmentInstance) {\r\n environmentInstance = createEnvironment();\r\n }\r\n return environmentInstance;\r\n};\r\n","import {\r\n Cache,\r\n OptionsValidated,\r\n OptionsWithOptionsTemplate,\r\n transformOptions,\r\n validateOptions,\r\n assignDeep,\r\n hasOwnProperty,\r\n isEmptyObject,\r\n} from 'support';\r\nimport { CSSDirection, PlainObject } from 'typings';\r\n\r\ninterface LifecycleBaseUpdateHints {\r\n _force?: boolean;\r\n _changedOptions?: OptionsValidated;\r\n}\r\n\r\nexport interface LifecycleBase {\r\n _options(newOptions?: O): O;\r\n _update(force?: boolean): void;\r\n}\r\n\r\nexport interface Lifecycle extends LifecycleBase {\r\n _destruct(): void;\r\n _onSizeChanged?(): void;\r\n _onDirectionChanged?(directionCache: Cache): void;\r\n _onTrinsicChanged?(widthIntrinsic: boolean, heightIntrinsicCache: Cache): void;\r\n}\r\n\r\nexport interface LifecycleOptionInfo {\r\n _value: T;\r\n _changed: boolean;\r\n}\r\n\r\nexport type LifecycleCheckOption = (path: string) => LifecycleOptionInfo;\r\n\r\nconst getPropByPath = (obj: any, path: string): T =>\r\n obj && path.split('.').reduce((o, prop) => (o && hasOwnProperty(o, prop) ? o[prop] : undefined), obj);\r\n\r\n/**\r\n * Creates a object which can be seen as the base of a lifecycle because it provides all the tools to manage a lifecycle and its options, cache and base functions.\r\n * @param defaultOptionsWithTemplate A object which describes the options and the default options of the lifecycle.\r\n * @param initialOptions The initialOptions for the lifecylce. (Can be undefined)\r\n * @param updateFunction The update function where cache and options updates are handled. Has two arguments which are the changedOptions and the changedCache objects.\r\n */\r\nexport const createLifecycleBase = (\r\n defaultOptionsWithTemplate: OptionsWithOptionsTemplate>,\r\n initialOptions: O | undefined,\r\n updateFunction: (force: boolean, checkOption: LifecycleCheckOption) => any\r\n): LifecycleBase => {\r\n const { _template: optionsTemplate, _options: defaultOptions } = transformOptions>(defaultOptionsWithTemplate);\r\n const options: Required = assignDeep(\r\n {},\r\n defaultOptions,\r\n validateOptions(initialOptions || ({} as O), optionsTemplate, null, true)._validated\r\n );\r\n\r\n const update = (hints: LifecycleBaseUpdateHints) => {\r\n const { _force, _changedOptions } = hints;\r\n const checkOption: LifecycleCheckOption = (path) => ({\r\n _value: getPropByPath(options, path),\r\n _changed: _force || getPropByPath(_changedOptions, path) !== undefined,\r\n });\r\n updateFunction(!!_force, checkOption);\r\n };\r\n\r\n update({ _force: true });\r\n\r\n return {\r\n _options(newOptions?: O) {\r\n if (newOptions) {\r\n const { _validated: _changedOptions } = validateOptions(newOptions, optionsTemplate, options, true);\r\n\r\n if (!isEmptyObject(_changedOptions)) {\r\n assignDeep(options, _changedOptions);\r\n update({ _changedOptions });\r\n }\r\n }\r\n return options;\r\n },\r\n _update: (_force?: boolean) => {\r\n update({ _force });\r\n },\r\n };\r\n};\r\n","import {\r\n Cache,\r\n cssProperty,\r\n runEach,\r\n createCache,\r\n topRightBottomLeft,\r\n TRBL,\r\n WH,\r\n XY,\r\n equalTRBL,\r\n equalXY,\r\n optionsTemplateTypes as oTypes,\r\n OptionsTemplateValue,\r\n style,\r\n OptionsWithOptionsTemplate,\r\n scrollSize,\r\n offsetSize,\r\n} from 'support';\r\nimport { OSTargetObject } from 'typings';\r\nimport { createLifecycleBase, Lifecycle } from 'lifecycles/lifecycleBase';\r\nimport { getEnvironment, Environment } from 'environment';\r\n\r\nexport type OverflowBehavior = 'hidden' | 'scroll' | 'visible-hidden' | 'visible-scroll';\r\nexport interface StructureLifecycleOptions {\r\n paddingAbsolute: boolean;\r\n overflowBehavior?: {\r\n x?: OverflowBehavior;\r\n y?: OverflowBehavior;\r\n };\r\n}\r\n\r\nconst overflowBehaviorAllowedValues: OptionsTemplateValue = 'visible-hidden visible-scroll scroll hidden';\r\nconst defaultOptionsWithTemplate: OptionsWithOptionsTemplate> = {\r\n paddingAbsolute: [false, oTypes.boolean],\r\n overflowBehavior: {\r\n x: ['scroll', overflowBehaviorAllowedValues],\r\n y: ['scroll', overflowBehaviorAllowedValues],\r\n },\r\n};\r\n\r\nconst cssMarginEnd = cssProperty('margin-inline-end');\r\nconst cssBorderEnd = cssProperty('border-inline-end');\r\n\r\nexport const createStructureLifecycle = (\r\n target: OSTargetObject,\r\n initialOptions?: StructureLifecycleOptions\r\n): Lifecycle => {\r\n const { host, padding: paddingElm, viewport, content } = target;\r\n const destructFns: (() => any)[] = [];\r\n const env: Environment = getEnvironment();\r\n const scrollbarsOverlaid = env._nativeScrollbarIsOverlaid;\r\n const supportsScrollbarStyling = env._nativeScrollbarStyling;\r\n const supportFlexboxGlue = env._flexboxGlue;\r\n // direction change is only needed to update scrollbar hiding, therefore its not needed if css can do it, scrollbars are invisible or overlaid on y axis\r\n const directionObserverObsolete = (cssMarginEnd && cssBorderEnd) || supportsScrollbarStyling || scrollbarsOverlaid.y;\r\n\r\n const updatePaddingCache = createCache(() => topRightBottomLeft(host, 'padding'), { _equal: equalTRBL });\r\n const updateOverflowAmountCache = createCache, { _contentScrollSize: WH; _viewportSize: WH }>(\r\n (ctx) => ({\r\n x: Math.max(0, Math.round((ctx!._contentScrollSize.w - ctx!._viewportSize.w) * 100) / 100),\r\n y: Math.max(0, Math.round((ctx!._contentScrollSize.h - ctx!._viewportSize.h) * 100) / 100),\r\n }),\r\n { _equal: equalXY }\r\n );\r\n\r\n const { _options, _update } = createLifecycleBase(defaultOptionsWithTemplate, initialOptions, (force, checkOption) => {\r\n const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = checkOption('paddingAbsolute');\r\n const { _value: padding, _changed: paddingChanged } = updatePaddingCache(force);\r\n\r\n if (paddingAbsoluteChanged || paddingChanged) {\r\n const paddingStyle: TRBL = {\r\n t: 0,\r\n r: 0,\r\n b: 0,\r\n l: 0,\r\n };\r\n\r\n if (!paddingAbsolute) {\r\n paddingStyle.t = -padding!.t;\r\n paddingStyle.r = -(padding!.r + padding!.l);\r\n paddingStyle.b = -(padding!.b + padding!.t);\r\n paddingStyle.l = -padding!.l;\r\n }\r\n\r\n style(paddingElm, {\r\n top: paddingStyle.t,\r\n left: paddingStyle.l,\r\n 'margin-right': paddingStyle.r,\r\n 'margin-bottom': paddingStyle.b,\r\n 'max-width': `calc(100% + ${paddingStyle.r * -1}px)`,\r\n });\r\n }\r\n\r\n const viewportOffsetSize = offsetSize(paddingElm);\r\n const contentClientSize = offsetSize(content);\r\n const contentScrollSize = scrollSize(content);\r\n const overflowAmuntCache = updateOverflowAmountCache(force, {\r\n _contentScrollSize: contentScrollSize,\r\n _viewportSize: {\r\n w: viewportOffsetSize.w + Math.max(0, contentClientSize.w - contentScrollSize.w),\r\n h: viewportOffsetSize.h + Math.max(0, contentClientSize.h - contentScrollSize.h),\r\n },\r\n });\r\n const { _value: overflowAmount, _changed: overflowAmountChanged } = overflowAmuntCache;\r\n\r\n console.log('overflowAmount', overflowAmount);\r\n console.log('overflowAmountChanged', overflowAmountChanged);\r\n\r\n /*\r\n var setOverflowVariables = function (horizontal) {\r\n var scrollbarVars = getScrollbarVars(horizontal);\r\n var scrollbarVarsInverted = getScrollbarVars(!horizontal);\r\n var xyI = scrollbarVarsInverted._x_y;\r\n var xy = scrollbarVars._x_y;\r\n var wh = scrollbarVars._w_h;\r\n var widthHeight = scrollbarVars._width_height;\r\n var scrollMax = _strScroll + scrollbarVars._Left_Top + 'Max';\r\n var fractionalOverflowAmount = viewportRect[widthHeight] ? MATH.abs(viewportRect[widthHeight] - _viewportSize[wh]) : 0;\r\n var checkFractionalOverflowAmount = previousOverflowAmount && previousOverflowAmount[xy] > 0 && _viewportElementNative[scrollMax] === 0;\r\n overflowBehaviorIsVS[xy] = overflowBehavior[xy] === 'v-s';\r\n overflowBehaviorIsVH[xy] = overflowBehavior[xy] === 'v-h';\r\n overflowBehaviorIsS[xy] = overflowBehavior[xy] === 's';\r\n overflowAmount[xy] = MATH.max(0, MATH.round((contentScrollSize[wh] - _viewportSize[wh]) * 100) / 100);\r\n overflowAmount[xy] *=\r\n hideOverflowForceTextarea || (checkFractionalOverflowAmount && fractionalOverflowAmount > 0 && fractionalOverflowAmount < 1) ? 0 : 1;\r\n hasOverflow[xy] = overflowAmount[xy] > 0;\r\n\r\n //hideOverflow:\r\n //x || y : true === overflow is hidden by \"overflow: scroll\" OR \"overflow: hidden\"\r\n //xs || ys : true === overflow is hidden by \"overflow: scroll\"\r\n hideOverflow[xy] =\r\n overflowBehaviorIsVS[xy] || overflowBehaviorIsVH[xy]\r\n ? hasOverflow[xyI] && !overflowBehaviorIsVS[xyI] && !overflowBehaviorIsVH[xyI]\r\n : hasOverflow[xy];\r\n hideOverflow[xy + 's'] = hideOverflow[xy] ? overflowBehaviorIsS[xy] || overflowBehaviorIsVS[xy] : false;\r\n\r\n canScroll[xy] = hasOverflow[xy] && hideOverflow[xy + 's'];\r\n };\r\n*/\r\n /*\r\n if (!supportsScrollbarStyling) {\r\n paddingStyle.r -= env._nativeScrollbarSize.y;\r\n paddingStyle.b -= env._nativeScrollbarSize.x;\r\n }\r\n */\r\n });\r\n\r\n const onSizeChanged = () => {\r\n _update();\r\n };\r\n const onTrinsicChanged = (widthIntrinsic: boolean, heightIntrinsicCache: Cache) => {\r\n const { _changed, _value } = heightIntrinsicCache;\r\n if (_changed) {\r\n style(content, { height: _value ? 'auto' : '100%' });\r\n }\r\n };\r\n\r\n return {\r\n _options,\r\n _update,\r\n _onSizeChanged: onSizeChanged,\r\n _onTrinsicChanged: onTrinsicChanged,\r\n _destruct() {\r\n runEach(destructFns);\r\n },\r\n };\r\n};\r\n","import {\r\n Cache,\r\n createCache,\r\n createDOM,\r\n style,\r\n appendChildren,\r\n offsetSize,\r\n scrollLeft,\r\n scrollTop,\r\n runEach,\r\n prependChildren,\r\n removeElements,\r\n on,\r\n preventDefault,\r\n stopPropagation,\r\n addClass,\r\n isString,\r\n equalWH,\r\n push,\r\n cAF,\r\n rAF,\r\n ResizeObserverConstructor,\r\n} from 'support';\r\nimport { CSSDirection } from 'typings';\r\nimport { getEnvironment } from 'environment';\r\nimport {\r\n classNameSizeObserver,\r\n classNameSizeObserverAppear,\r\n classNameSizeObserverListener,\r\n classNameSizeObserverListenerScroll,\r\n classNameSizeObserverListenerItem,\r\n classNameSizeObserverListenerItemFinal,\r\n} from 'classnames';\r\n\r\nconst animationStartEventName = 'animationstart';\r\nconst scrollEventName = 'scroll';\r\nconst scrollAmount = 3333333;\r\nconst getDirection = (elm: HTMLElement): CSSDirection => style(elm, 'direction') as CSSDirection;\r\n\r\nexport type SizeObserverOptions = { _direction?: boolean; _appear?: boolean };\r\nexport const createSizeObserver = (\r\n target: HTMLElement,\r\n onSizeChangedCallback: (directionCache?: Cache) => any,\r\n options?: SizeObserverOptions\r\n): (() => void) => {\r\n const { _direction: direction = false, _appear: appear = false } = options || {};\r\n const rtlScrollBehavior = getEnvironment()._rtlScrollBehavior;\r\n const baseElements = createDOM(``);\r\n const sizeObserver = baseElements[0] as HTMLElement;\r\n const listenerElement = sizeObserver.firstChild as HTMLElement;\r\n const onSizeChangedCallbackProxy = (directionCache?: Cache) => {\r\n if (direction) {\r\n const rtl = getDirection(sizeObserver) === 'rtl';\r\n scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);\r\n scrollTop(sizeObserver, scrollAmount);\r\n }\r\n onSizeChangedCallback(isString((directionCache || {})._value) ? directionCache : undefined);\r\n };\r\n const offListeners: (() => void)[] = [];\r\n let appearCallback: ((...args: any) => any) | null = appear ? onSizeChangedCallbackProxy : null;\r\n\r\n if (ResizeObserverConstructor) {\r\n const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);\r\n resizeObserverInstance.observe(listenerElement);\r\n push(offListeners, () => resizeObserverInstance.disconnect());\r\n } else {\r\n const observerElementChildren = createDOM(\r\n ``\r\n );\r\n appendChildren(listenerElement, observerElementChildren);\r\n addClass(listenerElement, classNameSizeObserverListenerScroll);\r\n const observerElementChildrenRoot = observerElementChildren[0] as HTMLElement;\r\n const shrinkElement = observerElementChildrenRoot.lastChild as HTMLElement;\r\n const expandElement = observerElementChildrenRoot.firstChild as HTMLElement;\r\n const expandElementChild = expandElement?.firstChild as HTMLElement;\r\n\r\n let cacheSize = offsetSize(listenerElement);\r\n let currSize = cacheSize;\r\n let isDirty = false;\r\n let rAFId: number;\r\n\r\n const reset = () => {\r\n scrollLeft(expandElement, scrollAmount);\r\n scrollTop(expandElement, scrollAmount);\r\n scrollLeft(shrinkElement, scrollAmount);\r\n scrollTop(shrinkElement, scrollAmount);\r\n };\r\n const onResized = () => {\r\n rAFId = 0;\r\n if (isDirty) {\r\n cacheSize = currSize;\r\n onSizeChangedCallbackProxy();\r\n }\r\n };\r\n const onScroll = (scrollEvent?: Event) => {\r\n currSize = offsetSize(listenerElement);\r\n isDirty = !scrollEvent || !equalWH(currSize, cacheSize);\r\n\r\n if (scrollEvent && isDirty && !rAFId) {\r\n cAF!(rAFId);\r\n rAFId = rAF!(onResized);\r\n } else if (!scrollEvent) {\r\n onResized();\r\n }\r\n\r\n reset();\r\n\r\n if (scrollEvent) {\r\n preventDefault(scrollEvent);\r\n stopPropagation(scrollEvent);\r\n }\r\n return false;\r\n };\r\n\r\n push(offListeners, [on(expandElement, scrollEventName, onScroll), on(shrinkElement, scrollEventName, onScroll)]);\r\n\r\n // lets assume that the divs will never be that large and a constant value is enough\r\n style(expandElementChild, {\r\n width: scrollAmount,\r\n height: scrollAmount,\r\n });\r\n reset();\r\n appearCallback = appear ? () => onScroll() : reset;\r\n }\r\n\r\n if (direction) {\r\n const updateDirectionCache = createCache(() => getDirection(sizeObserver));\r\n push(\r\n offListeners,\r\n on(sizeObserver, scrollEventName, (event: Event) => {\r\n const directionCache = updateDirectionCache();\r\n const { _value, _changed } = directionCache;\r\n if (_changed) {\r\n if (_value === 'rtl') {\r\n style(listenerElement, { left: 'auto', right: 0 });\r\n } else {\r\n style(listenerElement, { left: 0, right: 'auto' });\r\n }\r\n onSizeChangedCallbackProxy(directionCache);\r\n }\r\n\r\n preventDefault(event);\r\n stopPropagation(event);\r\n return false;\r\n })\r\n );\r\n }\r\n\r\n // appearCallback is always needed on scroll-observer strategy to reset it\r\n if (appearCallback) {\r\n addClass(sizeObserver, classNameSizeObserverAppear);\r\n push(offListeners, on(sizeObserver, animationStartEventName, appearCallback));\r\n }\r\n\r\n prependChildren(target, sizeObserver);\r\n\r\n return () => {\r\n runEach(offListeners);\r\n removeElements(sizeObserver);\r\n };\r\n};\r\n","import {\r\n WH,\r\n Cache,\r\n createDOM,\r\n offsetSize,\r\n runEach,\r\n prependChildren,\r\n removeElements,\r\n createCache,\r\n push,\r\n IntersectionObserverConstructor,\r\n} from 'support';\r\nimport { createSizeObserver } from 'observers/sizeObserver';\r\nimport { classNameTrinsicObserver } from 'classnames';\r\n\r\nexport const createTrinsicObserver = (\r\n target: HTMLElement,\r\n onTrinsicChangedCallback: (widthIntrinsic: boolean, heightIntrinsicCache: Cache) => any\r\n): (() => void) => {\r\n const trinsicObserver = createDOM(``)[0] as HTMLElement;\r\n const offListeners: (() => void)[] = [];\r\n const updateHeightIntrinsicCache = createCache>(\r\n (ioEntryOrSize) =>\r\n (ioEntryOrSize! as WH).h === 0 ||\r\n (ioEntryOrSize! as IntersectionObserverEntry).isIntersecting ||\r\n (ioEntryOrSize! as IntersectionObserverEntry).intersectionRatio > 0,\r\n {\r\n _initialValue: false,\r\n }\r\n );\r\n\r\n if (IntersectionObserverConstructor) {\r\n const intersectionObserverInstance: IntersectionObserver = new IntersectionObserverConstructor(\r\n (entries: IntersectionObserverEntry[]) => {\r\n if (entries && entries.length > 0) {\r\n const last = entries.pop();\r\n if (last) {\r\n const heightIntrinsicCache = updateHeightIntrinsicCache(0, last);\r\n\r\n if (heightIntrinsicCache._changed) {\r\n onTrinsicChangedCallback(false, heightIntrinsicCache);\r\n }\r\n }\r\n }\r\n },\r\n { root: target }\r\n );\r\n intersectionObserverInstance.observe(trinsicObserver);\r\n push(offListeners, () => intersectionObserverInstance.disconnect());\r\n } else {\r\n push(\r\n offListeners,\r\n createSizeObserver(trinsicObserver, () => {\r\n const newSize = offsetSize(trinsicObserver);\r\n const heightIntrinsicCache = updateHeightIntrinsicCache(0, newSize);\r\n\r\n if (heightIntrinsicCache._changed) {\r\n onTrinsicChangedCallback(false, heightIntrinsicCache);\r\n }\r\n })\r\n );\r\n }\r\n\r\n prependChildren(target, trinsicObserver);\r\n\r\n return () => {\r\n runEach(offListeners);\r\n removeElements(trinsicObserver);\r\n };\r\n};\r\n","import {\r\n each,\r\n noop,\r\n debounce,\r\n indexOf,\r\n isString,\r\n MutationObserverConstructor,\r\n isEmptyArray,\r\n on,\r\n off,\r\n attr,\r\n is,\r\n find,\r\n push,\r\n isUndefined,\r\n isFunction,\r\n} from 'support';\r\n\r\ntype TruthyOrFalsy = boolean | '' | 0 | null | undefined;\r\ntype StringNullUndefined = string | null | undefined;\r\nexport type DOMObserverEventContentChange =\r\n | Array<[StringNullUndefined, ((elms: Node[]) => string) | StringNullUndefined] | null | undefined>\r\n | false\r\n | ''\r\n | null\r\n | undefined;\r\nexport type DOMObserverIgnoreContentChange = (\r\n mutation: MutationRecord,\r\n isNestedTarget: TruthyOrFalsy,\r\n domObserverTarget: HTMLElement,\r\n domObserverOptions: DOMObserverOptions | undefined\r\n) => TruthyOrFalsy;\r\nexport type DOMObserverIgnoreTargetAttrChange = (\r\n target: Node,\r\n attributeName: string,\r\n oldAttributeValue: string | null,\r\n newAttributeValue: string | null\r\n) => TruthyOrFalsy;\r\nexport interface DOMObserverOptions {\r\n _observeContent?: boolean; // do observe children and trigger content change\r\n _attributes?: string[]; // observed attributes\r\n _styleChangingAttributes?: string[]; // list of attributes that trigger a contentChange or a targetStyleChange if changed\r\n _eventContentChange?: DOMObserverEventContentChange; // [selector, eventname]\r\n _nestedTargetSelector?: string;\r\n _ignoreTargetAttrChange?: DOMObserverIgnoreTargetAttrChange;\r\n _ignoreContentChange?: DOMObserverIgnoreContentChange;\r\n}\r\nexport interface DOMObserver {\r\n _disconnect: () => void;\r\n _updateEventContentChange: (newEventContentChange?: DOMObserverEventContentChange) => void;\r\n _update: () => void;\r\n}\r\n\r\n// const styleChangingAttributes = ['id', 'class', 'style', 'open'];\r\n// const mutationObserverAttrsTextarea = ['wrap', 'cols', 'rows'];\r\n\r\nconst createEventContentChange = (\r\n target: Element,\r\n eventContentChange: DOMObserverEventContentChange,\r\n map: Map,\r\n callback: (...args: any) => any\r\n) => {\r\n let eventContentChangeRef: DOMObserverEventContentChange;\r\n const addEvent = (elm: Node, eventName: string) => {\r\n const entry = map.get(elm);\r\n const newEntry = isUndefined(entry);\r\n const registerEvent = () => {\r\n map.set(elm, eventName);\r\n on(elm, eventName, callback);\r\n };\r\n\r\n if (!newEntry && eventName !== entry) {\r\n off(elm, entry!, callback);\r\n registerEvent();\r\n } else if (newEntry) {\r\n registerEvent();\r\n }\r\n };\r\n const _destroy = () => {\r\n map.forEach((eventName: string, elm: Node) => {\r\n off(elm, eventName, callback);\r\n });\r\n map.clear();\r\n };\r\n const _updateElements = (getElements?: (selector: string) => Node[]) => {\r\n if (eventContentChangeRef) {\r\n const eventElmList = eventContentChangeRef.reduce>((arr, item) => {\r\n if (item) {\r\n const selector = item[0];\r\n const eventName = item[1];\r\n const elements = eventName && selector && (getElements ? getElements(selector) : find(selector, target));\r\n\r\n if (elements) {\r\n push(arr, [elements, isFunction(eventName) ? eventName(elements) : eventName!], true);\r\n }\r\n }\r\n return arr;\r\n }, []);\r\n\r\n each(eventElmList, (item) => {\r\n const elements = item[0];\r\n const eventName = item[1];\r\n\r\n each(elements, (elm) => {\r\n addEvent(elm, eventName);\r\n });\r\n });\r\n }\r\n };\r\n const _update = (newEventContentChange: DOMObserverEventContentChange) => {\r\n eventContentChangeRef = newEventContentChange;\r\n _destroy();\r\n _updateElements();\r\n };\r\n\r\n if (eventContentChange) {\r\n _update(eventContentChange);\r\n }\r\n\r\n return {\r\n _destroy,\r\n _updateElements,\r\n _update,\r\n };\r\n};\r\n\r\nexport const createDOMObserver = (\r\n target: HTMLElement,\r\n callback: (targetChangedAttrs: string[], targetStyleChanged: boolean, contentChanged: boolean) => any,\r\n options?: DOMObserverOptions\r\n): DOMObserver => {\r\n let isConnected = false;\r\n const {\r\n _observeContent,\r\n _attributes,\r\n _styleChangingAttributes,\r\n _eventContentChange,\r\n _nestedTargetSelector,\r\n _ignoreTargetAttrChange: _ignoreTargetChange,\r\n _ignoreContentChange,\r\n } = options || {};\r\n const {\r\n _updateElements: updateEventContentChangeElements,\r\n _destroy: destroyEventContentChange,\r\n _update: updateEventContentChange,\r\n } = createEventContentChange(\r\n target,\r\n _observeContent && _eventContentChange,\r\n new Map(),\r\n debounce(() => {\r\n if (isConnected) {\r\n callback([], false, true);\r\n }\r\n }, 80)\r\n );\r\n\r\n // MutationObserver\r\n const finalAttributes = _attributes || [];\r\n const finalStyleChangingAttributes = _styleChangingAttributes || [];\r\n const observedAttributes = finalAttributes.concat(finalStyleChangingAttributes); // TODO: observer textarea attrs if textarea\r\n const observerCallback = (mutations: MutationRecord[]) => {\r\n const ignoreTargetChange = _ignoreTargetChange || noop;\r\n const ignoreContentChange = _ignoreContentChange || noop;\r\n const targetChangedAttrs: string[] = [];\r\n const totalAddedNodes: Node[] = [];\r\n let targetStyleChanged = false;\r\n let contentChanged = false;\r\n let childListChanged = false;\r\n each(mutations, (mutation) => {\r\n const { attributeName, target: mutationTarget, type, oldValue, addedNodes } = mutation;\r\n const isAttributesType = type === 'attributes';\r\n const isChildListType = type === 'childList';\r\n const targetIsMutationTarget = target === mutationTarget;\r\n const attributeValue = isAttributesType && isString(attributeName) ? attr(mutationTarget as HTMLElement, attributeName!) : 0;\r\n const attributeChanged = attributeValue !== 0 && oldValue !== attributeValue;\r\n const targetAttrChanged =\r\n attributeChanged &&\r\n targetIsMutationTarget &&\r\n !_observeContent &&\r\n !ignoreTargetChange(mutationTarget, attributeName!, oldValue, attributeValue as string | null);\r\n const styleChangingAttrChanged = indexOf(finalStyleChangingAttributes, attributeName) > -1 && attributeChanged;\r\n\r\n if (targetAttrChanged) {\r\n push(targetChangedAttrs, attributeName!);\r\n }\r\n if (_observeContent) {\r\n const notOnlyAttrChanged = !isAttributesType;\r\n const contentAttrChanged = isAttributesType && styleChangingAttrChanged && !targetIsMutationTarget;\r\n const isNestedTarget = contentAttrChanged && _nestedTargetSelector && is(mutationTarget, _nestedTargetSelector);\r\n const baseAssertion = isNestedTarget\r\n ? !ignoreTargetChange(mutationTarget, attributeName!, oldValue, attributeValue as string | null)\r\n : notOnlyAttrChanged || contentAttrChanged;\r\n const contentFinalChanged = baseAssertion && !ignoreContentChange(mutation, isNestedTarget, target, options);\r\n\r\n push(totalAddedNodes, addedNodes);\r\n\r\n contentChanged = contentChanged || contentFinalChanged;\r\n childListChanged = childListChanged || isChildListType;\r\n }\r\n targetStyleChanged = targetStyleChanged || (targetAttrChanged && styleChangingAttrChanged);\r\n });\r\n\r\n if (childListChanged && !isEmptyArray(totalAddedNodes)) {\r\n updateEventContentChangeElements((selector) =>\r\n totalAddedNodes.reduce((arr, node) => {\r\n push(arr, find(selector, node));\r\n return is(node, selector) ? push(arr, node) : arr;\r\n }, [])\r\n );\r\n }\r\n if (!isEmptyArray(targetChangedAttrs) || targetStyleChanged || contentChanged) {\r\n callback(targetChangedAttrs, targetStyleChanged, contentChanged);\r\n }\r\n };\r\n const mutationObserver: MutationObserver = new MutationObserverConstructor!(observerCallback);\r\n\r\n // Connect\r\n mutationObserver.observe(target, {\r\n attributes: true,\r\n attributeOldValue: true,\r\n attributeFilter: observedAttributes,\r\n subtree: _observeContent,\r\n childList: _observeContent,\r\n characterData: _observeContent,\r\n });\r\n isConnected = true;\r\n\r\n return {\r\n _disconnect: () => {\r\n if (isConnected) {\r\n destroyEventContentChange();\r\n mutationObserver.disconnect();\r\n isConnected = false;\r\n }\r\n },\r\n _updateEventContentChange: (newEventContentChange?: DOMObserverEventContentChange) => {\r\n updateEventContentChange(isConnected && _observeContent && newEventContentChange);\r\n },\r\n _update: () => {\r\n if (isConnected) {\r\n observerCallback(mutationObserver.takeRecords());\r\n }\r\n },\r\n };\r\n};\r\n","import { OSTarget, OSTargetObject, CSSDirection } from 'typings';\r\nimport { createStructureLifecycle } from 'lifecycles/structureLifecycle';\r\nimport { Cache, appendChildren, addClass, contents, is, isHTMLElement, createDiv, each, push } from 'support';\r\nimport { createSizeObserver } from 'observers/sizeObserver';\r\nimport { createTrinsicObserver } from 'observers/trinsicObserver';\r\nimport { createDOMObserver } from 'observers/domObserver';\r\nimport { Lifecycle } from 'lifecycles/lifecycleBase';\r\nimport { classNameHost, classNamePadding, classNameViewport, classNameContent } from 'classnames';\r\n\r\nconst normalizeTarget = (target: OSTarget): OSTargetObject => {\r\n if (isHTMLElement(target)) {\r\n const isTextarea = is(target, 'textarea');\r\n const host = (isTextarea ? createDiv() : target) as HTMLElement;\r\n const padding = createDiv(classNamePadding);\r\n const viewport = createDiv(classNameViewport);\r\n const content = createDiv(classNameContent);\r\n\r\n appendChildren(padding, viewport);\r\n appendChildren(viewport, content);\r\n appendChildren(content, contents(target));\r\n appendChildren(target, padding);\r\n addClass(host, classNameHost);\r\n\r\n return {\r\n target,\r\n host,\r\n padding,\r\n viewport,\r\n content,\r\n };\r\n }\r\n\r\n const { host, padding, viewport, content } = target;\r\n\r\n addClass(host, classNameHost);\r\n addClass(padding, classNamePadding);\r\n addClass(viewport, classNameViewport);\r\n addClass(content, classNameContent);\r\n\r\n return target;\r\n};\r\n\r\nconst OverlayScrollbars = (target: OSTarget, options?: any, extensions?: any): void => {\r\n const osTarget: OSTargetObject = normalizeTarget(target);\r\n const lifecycles: Lifecycle[] = [];\r\n const { host, content } = osTarget;\r\n\r\n push(lifecycles, createStructureLifecycle(osTarget));\r\n\r\n // eslint-disable-next-line\r\n const onSizeChanged = (directionCache?: Cache) => {\r\n if (directionCache) {\r\n each(lifecycles, (lifecycle) => {\r\n lifecycle._onDirectionChanged && lifecycle._onDirectionChanged(directionCache);\r\n });\r\n } else {\r\n each(lifecycles, (lifecycle) => {\r\n lifecycle._onSizeChanged && lifecycle._onSizeChanged();\r\n });\r\n }\r\n };\r\n const onTrinsicChanged = (widthIntrinsic: boolean, heightIntrinsicCache: Cache) => {\r\n each(lifecycles, (lifecycle) => {\r\n lifecycle._onTrinsicChanged && lifecycle._onTrinsicChanged(widthIntrinsic, heightIntrinsicCache);\r\n });\r\n };\r\n\r\n createSizeObserver(host, onSizeChanged, { _appear: true, _direction: true });\r\n createTrinsicObserver(host, onTrinsicChanged);\r\n createDOMObserver(host, () => {\r\n return null;\r\n });\r\n createDOMObserver(\r\n content,\r\n () => {\r\n return null;\r\n },\r\n { _observeContent: true }\r\n );\r\n};\r\n\r\nexport { OverlayScrollbars };\r\n","import { createDOM } from 'support/dom';\r\nimport { getEnvironment } from 'environment';\r\nimport { OverlayScrollbars } from 'overlayscrollbars/overlayscrollbars';\r\n\r\nconst abc = {\r\n a: 1,\r\n b: 1,\r\n c: 1,\r\n};\r\n\r\nexport default () => {\r\n return [\r\n getEnvironment(),\r\n OverlayScrollbars(document.body),\r\n createDOM(\r\n '\\\r\n \\\r\n
\\\r\n
\\\r\n
\\\r\n
\\\r\n fdfhdfgh\\\r\n
\\\r\n
\\\r\n
\\\r\n
\\\r\n
\\\r\n
\\\r\n