overlayscrollbars
Version:
A javascript scrollbar plugin that hides the native scrollbars, provides custom styleable overlay scrollbars, and preserves the native functionality and feel.
1,793 lines • 77.3 kB
JavaScript
/*!
* OverlayScrollbars
* Version: 2.11.3
*
* Copyright (c) Rene Haas | KingSora.
* https://github.com/KingSora
*
* Released under the MIT license.
*/
var OverlayScrollbarsGlobal = function(t) {
"use strict";
const createCache = (t, n) => {
const {o: o, i: s, u: e} = t;
let c = o;
let r;
const cacheUpdateContextual = (t, n) => {
const o = c;
const i = t;
const l = n || (s ? !s(o, i) : o !== i);
if (l || e) {
c = i;
r = o;
}
return [ c, l, r ];
};
const cacheUpdateIsolated = t => cacheUpdateContextual(n(c, r), t);
const getCurrentCache = t => [ c, !!t, r ];
return [ n ? cacheUpdateIsolated : cacheUpdateContextual, getCurrentCache ];
};
const n = typeof window !== "undefined" && typeof HTMLElement !== "undefined" && !!window.document;
const o = n ? window : {};
const s = Math.max;
const e = Math.min;
const c = Math.round;
const r = Math.abs;
const i = Math.sign;
const l = o.cancelAnimationFrame;
const a = o.requestAnimationFrame;
const u = o.setTimeout;
const f = o.clearTimeout;
const getApi = t => typeof o[t] !== "undefined" ? o[t] : void 0;
const d = getApi("MutationObserver");
const _ = getApi("IntersectionObserver");
const v = getApi("ResizeObserver");
const p = getApi("ScrollTimeline");
const isUndefined = t => t === void 0;
const isNull = t => t === null;
const isNumber = t => typeof t === "number";
const isString = t => typeof t === "string";
const isBoolean = t => typeof t === "boolean";
const isFunction = t => typeof t === "function";
const isArray = t => Array.isArray(t);
const isObject = t => typeof t === "object" && !isArray(t) && !isNull(t);
const isArrayLike = t => {
const n = !!t && t.length;
const o = isNumber(n) && n > -1 && n % 1 == 0;
return isArray(t) || !isFunction(t) && o ? n > 0 && isObject(t) ? n - 1 in t : true : false;
};
const isPlainObject = t => !!t && t.constructor === Object;
const isHTMLElement = t => t instanceof HTMLElement;
const isElement = t => t instanceof Element;
const animationCurrentTime = () => performance.now();
const animateNumber = (t, n, o, e, c) => {
let r = 0;
const i = animationCurrentTime();
const u = s(0, o);
const frame = o => {
const l = animationCurrentTime();
const f = l - i;
const d = f >= u;
const _ = o ? 1 : 1 - (s(0, i + u - l) / u || 0);
const v = (n - t) * (isFunction(c) ? c(_, _ * u, 0, 1, u) : _) + t;
const p = d || _ === 1;
if (e) {
e(v, _, p);
}
r = p ? 0 : a((() => frame()));
};
frame();
return t => {
l(r);
if (t) {
frame(t);
}
};
};
function each(t, n) {
if (isArrayLike(t)) {
for (let o = 0; o < t.length; o++) {
if (n(t[o], o, t) === false) {
break;
}
}
} else if (t) {
each(Object.keys(t), (o => n(t[o], o, t)));
}
return t;
}
const inArray = (t, n) => t.indexOf(n) >= 0;
const concat = (t, n) => t.concat(n);
const push = (t, n, o) => {
if (!isString(n) && isArrayLike(n)) {
Array.prototype.push.apply(t, n);
} else {
t.push(n);
}
return t;
};
const from = t => Array.from(t || []);
const createOrKeepArray = t => {
if (isArray(t)) {
return t;
}
return !isString(t) && isArrayLike(t) ? from(t) : [ t ];
};
const isEmptyArray = t => !!t && !t.length;
const deduplicateArray = t => from(new Set(t));
const runEachAndClear = (t, n, o) => {
const runFn = t => t ? t.apply(void 0, n || []) : true;
each(t, runFn);
if (!o) {
t.length = 0;
}
};
const g = "paddingTop";
const h = "paddingRight";
const b = "paddingLeft";
const w = "paddingBottom";
const y = "marginLeft";
const S = "marginRight";
const m = "marginBottom";
const O = "overflowX";
const $ = "overflowY";
const C = "width";
const x = "height";
const H = "visible";
const E = "hidden";
const z = "scroll";
const capitalizeFirstLetter = t => {
const n = String(t || "");
return n ? n[0].toUpperCase() + n.slice(1) : "";
};
const equal = (t, n, o, s) => {
if (t && n) {
let s = true;
each(o, (o => {
const e = t[o];
const c = n[o];
if (e !== c) {
s = false;
}
}));
return s;
}
return false;
};
const equalWH = (t, n) => equal(t, n, [ "w", "h" ]);
const equalXY = (t, n) => equal(t, n, [ "x", "y" ]);
const equalTRBL = (t, n) => equal(t, n, [ "t", "r", "b", "l" ]);
const bind = (t, ...n) => t.bind(0, ...n);
const selfClearTimeout = t => {
let n;
const o = t ? u : a;
const s = t ? f : l;
return [ e => {
s(n);
n = o((() => e()), isFunction(t) ? t() : t);
}, () => s(n) ];
};
const getDebouncer = t => {
const n = isFunction(t) ? t() : t;
if (isNumber(n)) {
const t = n ? u : a;
const o = n ? f : l;
return s => {
const e = t((() => s()), n);
return () => {
o(e);
};
};
}
return n && n._;
};
const debounce = (t, n) => {
const {v: o, p: s, S: e, m: c} = n || {};
let r;
let i;
let l;
let a;
let u;
const f = function invokeFunctionToDebounce(n) {
if (i) {
i();
}
if (r) {
r();
}
u = i = r = l = void 0;
t.apply(this, n);
};
const mergeParms = t => c && l ? c(l, t) : t;
const flush = () => {
if (i) {
f(mergeParms(a) || a);
}
};
const d = function debouncedFn() {
const t = from(arguments);
const n = getDebouncer(o);
if (n) {
const o = getDebouncer(s);
const c = mergeParms(t);
const d = c || t;
const _ = f.bind(0, d);
if (i) {
i();
}
if (e && !u) {
_();
u = true;
i = n((() => u = void 0));
} else {
i = n(_);
if (o && !r) {
r = o(flush);
}
}
l = a = d;
} else {
f(t);
}
};
d.O = flush;
return d;
};
const hasOwnProperty = (t, n) => Object.prototype.hasOwnProperty.call(t, n);
const keys = t => t ? Object.keys(t) : [];
const assignDeep = (t, n, o, s, e, c, r) => {
const i = [ n, o, s, e, c, r ];
if ((typeof t !== "object" || isNull(t)) && !isFunction(t)) {
t = {};
}
each(i, (n => {
each(n, ((o, s) => {
const e = n[s];
if (t === e) {
return true;
}
const c = isArray(e);
if (e && isPlainObject(e)) {
const n = t[s];
let o = n;
if (c && !isArray(n)) {
o = [];
} else if (!c && !isPlainObject(n)) {
o = {};
}
t[s] = assignDeep(o, e);
} else {
t[s] = c ? e.slice() : e;
}
}));
}));
return t;
};
const removeUndefinedProperties = (t, n) => each(assignDeep({}, t), ((t, n, o) => {
if (t === void 0) {
delete o[n];
} else if (t && isPlainObject(t)) {
o[n] = removeUndefinedProperties(t);
}
}));
const isEmptyObject = t => !keys(t).length;
const noop = () => {};
const capNumber = (t, n, o) => s(t, e(n, o));
const getDomTokensArray = t => deduplicateArray((isArray(t) ? t : (t || "").split(" ")).filter((t => t)));
const getAttr = (t, n) => t && t.getAttribute(n);
const hasAttr = (t, n) => t && t.hasAttribute(n);
const setAttrs = (t, n, o) => {
each(getDomTokensArray(n), (n => {
if (t) {
t.setAttribute(n, String(o || ""));
}
}));
};
const removeAttrs = (t, n) => {
each(getDomTokensArray(n), (n => t && t.removeAttribute(n)));
};
const domTokenListAttr = (t, n) => {
const o = getDomTokensArray(getAttr(t, n));
const s = bind(setAttrs, t, n);
const domTokenListOperation = (t, n) => {
const s = new Set(o);
each(getDomTokensArray(t), (t => {
s[n](t);
}));
return from(s).join(" ");
};
return {
$: t => s(domTokenListOperation(t, "delete")),
C: t => s(domTokenListOperation(t, "add")),
H: t => {
const n = getDomTokensArray(t);
return n.reduce(((t, n) => t && o.includes(n)), n.length > 0);
}
};
};
const removeAttrClass = (t, n, o) => {
domTokenListAttr(t, n).$(o);
return bind(addAttrClass, t, n, o);
};
const addAttrClass = (t, n, o) => {
domTokenListAttr(t, n).C(o);
return bind(removeAttrClass, t, n, o);
};
const addRemoveAttrClass = (t, n, o, s) => (s ? addAttrClass : removeAttrClass)(t, n, o);
const hasAttrClass = (t, n, o) => domTokenListAttr(t, n).H(o);
const createDomTokenListClass = t => domTokenListAttr(t, "class");
const removeClass = (t, n) => {
createDomTokenListClass(t).$(n);
};
const addClass = (t, n) => {
createDomTokenListClass(t).C(n);
return bind(removeClass, t, n);
};
const find = (t, n) => {
const o = n ? isElement(n) && n : document;
return o ? from(o.querySelectorAll(t)) : [];
};
const findFirst = (t, n) => {
const o = n ? isElement(n) && n : document;
return o && o.querySelector(t);
};
const is = (t, n) => isElement(t) && t.matches(n);
const isBodyElement = t => is(t, "body");
const contents = t => t ? from(t.childNodes) : [];
const parent = t => t && t.parentElement;
const closest = (t, n) => isElement(t) && t.closest(n);
const getFocusedElement = t => document.activeElement;
const liesBetween = (t, n, o) => {
const s = closest(t, n);
const e = t && findFirst(o, s);
const c = closest(e, n) === s;
return s && e ? s === t || e === t || c && closest(closest(t, o), n) !== s : false;
};
const removeElements = t => {
each(createOrKeepArray(t), (t => {
const n = parent(t);
if (t && n) {
n.removeChild(t);
}
}));
};
const appendChildren = (t, n) => bind(removeElements, t && n && each(createOrKeepArray(n), (n => {
if (n) {
t.appendChild(n);
}
})));
let I;
const getTrustedTypePolicy = () => I;
const setTrustedTypePolicy = t => {
I = t;
};
const createDiv = t => {
const n = document.createElement("div");
setAttrs(n, "class", t);
return n;
};
const createDOM = t => {
const n = createDiv();
const o = getTrustedTypePolicy();
const s = t.trim();
n.innerHTML = o ? o.createHTML(s) : s;
return each(contents(n), (t => removeElements(t)));
};
const getCSSVal = (t, n) => t.getPropertyValue(n) || t[n] || "";
const validFiniteNumber = t => {
const n = t || 0;
return isFinite(n) ? n : 0;
};
const parseToZeroOrNumber = t => validFiniteNumber(parseFloat(t || ""));
const roundCssNumber = t => Math.round(t * 1e4) / 1e4;
const numberToCssPx = t => `${roundCssNumber(validFiniteNumber(t))}px`;
function setStyles(t, n) {
t && n && each(n, ((n, o) => {
try {
const s = t.style;
const e = isNull(n) || isBoolean(n) ? "" : isNumber(n) ? numberToCssPx(n) : n;
if (o.indexOf("--") === 0) {
s.setProperty(o, e);
} else {
s[o] = e;
}
} catch (s) {}
}));
}
function getStyles(t, n, s) {
const e = isString(n);
let c = e ? "" : {};
if (t) {
const r = o.getComputedStyle(t, s) || t.style;
c = e ? getCSSVal(r, n) : from(n).reduce(((t, n) => {
t[n] = getCSSVal(r, n);
return t;
}), c);
}
return c;
}
const topRightBottomLeft = (t, n, o) => {
const s = n ? `${n}-` : "";
const e = o ? `-${o}` : "";
const c = `${s}top${e}`;
const r = `${s}right${e}`;
const i = `${s}bottom${e}`;
const l = `${s}left${e}`;
const a = getStyles(t, [ c, r, i, l ]);
return {
t: parseToZeroOrNumber(a[c]),
r: parseToZeroOrNumber(a[r]),
b: parseToZeroOrNumber(a[i]),
l: parseToZeroOrNumber(a[l])
};
};
const getTrasformTranslateValue = (t, n) => `translate${isObject(t) ? `(${t.x},${t.y})` : `${n ? "X" : "Y"}(${t})`}`;
const elementHasDimensions = t => !!(t.offsetWidth || t.offsetHeight || t.getClientRects().length);
const T = {
w: 0,
h: 0
};
const getElmWidthHeightProperty = (t, n) => n ? {
w: n[`${t}Width`],
h: n[`${t}Height`]
} : T;
const getWindowSize = t => getElmWidthHeightProperty("inner", t || o);
const A = bind(getElmWidthHeightProperty, "offset");
const D = bind(getElmWidthHeightProperty, "client");
const M = bind(getElmWidthHeightProperty, "scroll");
const getFractionalSize = t => {
const n = parseFloat(getStyles(t, C)) || 0;
const o = parseFloat(getStyles(t, x)) || 0;
return {
w: n - c(n),
h: o - c(o)
};
};
const getBoundingClientRect = t => t.getBoundingClientRect();
const hasDimensions = t => !!t && elementHasDimensions(t);
const domRectHasDimensions = t => !!(t && (t[x] || t[C]));
const domRectAppeared = (t, n) => {
const o = domRectHasDimensions(t);
const s = domRectHasDimensions(n);
return !s && o;
};
const removeEventListener = (t, n, o, s) => {
each(getDomTokensArray(n), (n => {
if (t) {
t.removeEventListener(n, o, s);
}
}));
};
const addEventListener = (t, n, o, s) => {
var e;
const c = (e = s && s.I) != null ? e : true;
const r = s && s.T || false;
const i = s && s.A || false;
const l = {
passive: c,
capture: r
};
return bind(runEachAndClear, getDomTokensArray(n).map((n => {
const s = i ? e => {
removeEventListener(t, n, s, r);
if (o) {
o(e);
}
} : o;
if (t) {
t.addEventListener(n, s, l);
}
return bind(removeEventListener, t, n, s, r);
})));
};
const stopPropagation = t => t.stopPropagation();
const preventDefault = t => t.preventDefault();
const stopAndPrevent = t => stopPropagation(t) || preventDefault(t);
const scrollElementTo = (t, n) => {
const {x: o, y: s} = isNumber(n) ? {
x: n,
y: n
} : n || {};
isNumber(o) && (t.scrollLeft = o);
isNumber(s) && (t.scrollTop = s);
};
const getElementScroll = t => ({
x: t.scrollLeft,
y: t.scrollTop
});
const getZeroScrollCoordinates = () => ({
D: {
x: 0,
y: 0
},
M: {
x: 0,
y: 0
}
});
const sanitizeScrollCoordinates = (t, n) => {
const {D: o, M: s} = t;
const {w: e, h: c} = n;
const sanitizeAxis = (t, n, o) => {
let s = i(t) * o;
let e = i(n) * o;
if (s === e) {
const o = r(t);
const c = r(n);
e = o > c ? 0 : e;
s = o < c ? 0 : s;
}
s = s === e ? 0 : s;
return [ s + 0, e + 0 ];
};
const [l, a] = sanitizeAxis(o.x, s.x, e);
const [u, f] = sanitizeAxis(o.y, s.y, c);
return {
D: {
x: l,
y: u
},
M: {
x: a,
y: f
}
};
};
const isDefaultDirectionScrollCoordinates = ({D: t, M: n}) => {
const getAxis = (t, n) => t === 0 && t <= n;
return {
x: getAxis(t.x, n.x),
y: getAxis(t.y, n.y)
};
};
const getScrollCoordinatesPercent = ({D: t, M: n}, o) => {
const getAxis = (t, n, o) => capNumber(0, 1, (t - o) / (t - n) || 0);
return {
x: getAxis(t.x, n.x, o.x),
y: getAxis(t.y, n.y, o.y)
};
};
const focusElement = t => {
if (t && t.focus) {
t.focus({
preventScroll: true
});
}
};
const manageListener = (t, n) => {
each(createOrKeepArray(n), t);
};
const createEventListenerHub = t => {
const n = new Map;
const removeEvent = (t, o) => {
if (t) {
const s = n.get(t);
manageListener((t => {
if (s) {
s[t ? "delete" : "clear"](t);
}
}), o);
} else {
n.forEach((t => {
t.clear();
}));
n.clear();
}
};
const addEvent = (t, o) => {
if (isString(t)) {
const s = n.get(t) || new Set;
n.set(t, s);
manageListener((t => {
if (isFunction(t)) {
s.add(t);
}
}), o);
return bind(removeEvent, t, o);
}
if (isBoolean(o) && o) {
removeEvent();
}
const s = keys(t);
const e = [];
each(s, (n => {
const o = t[n];
if (o) {
push(e, addEvent(n, o));
}
}));
return bind(runEachAndClear, e);
};
const triggerEvent = (t, o) => {
each(from(n.get(t)), (t => {
if (o && !isEmptyArray(o)) {
t.apply(0, o);
} else {
t();
}
}));
};
addEvent(t || {});
return [ addEvent, removeEvent, triggerEvent ];
};
const k = {};
const R = {};
const addPlugins = t => {
each(t, (t => each(t, ((n, o) => {
k[o] = t[o];
}))));
};
const registerPluginModuleInstances = (t, n, o) => keys(t).map((s => {
const {static: e, instance: c} = t[s];
const [r, i, l] = o || [];
const a = o ? c : e;
if (a) {
const t = o ? a(r, i, n) : a(n);
return (l || R)[s] = t;
}
}));
const getStaticPluginModuleInstance = t => R[t];
const V = "__osOptionsValidationPlugin";
const L = `data-overlayscrollbars`;
const U = "os-environment";
const P = `${U}-scrollbar-hidden`;
const N = `${L}-initialize`;
const q = "noClipping";
const j = `${L}-body`;
const B = L;
const F = "host";
const X = `${L}-viewport`;
const Y = O;
const W = $;
const G = "arrange";
const J = "measuring";
const K = "scrolling";
const Q = "scrollbarHidden";
const Z = "noContent";
const tt = `${L}-padding`;
const nt = `${L}-content`;
const ot = "os-size-observer";
const st = `${ot}-appear`;
const et = `${ot}-listener`;
const ct = `${et}-scroll`;
const rt = `${et}-item`;
const it = `${rt}-final`;
const lt = "os-trinsic-observer";
const at = "os-theme-none";
const ut = "os-scrollbar";
const ft = `${ut}-rtl`;
const dt = `${ut}-horizontal`;
const _t = `${ut}-vertical`;
const vt = `${ut}-track`;
const pt = `${ut}-handle`;
const gt = `${ut}-visible`;
const ht = `${ut}-cornerless`;
const bt = `${ut}-interaction`;
const wt = `${ut}-unusable`;
const yt = `${ut}-auto-hide`;
const St = `${yt}-hidden`;
const mt = `${ut}-wheel`;
const Ot = `${vt}-interactive`;
const $t = `${pt}-interactive`;
const Ct = "__osSizeObserverPlugin";
const xt = /* @__PURE__ */ (() => ({
[Ct]: {
static: () => (t, n, o) => {
const s = 3333333;
const e = "scroll";
const c = createDOM(`<div class="${rt}" dir="ltr"><div class="${rt}"><div class="${it}"></div></div><div class="${rt}"><div class="${it}" style="width: 200%; height: 200%"></div></div></div>`);
const r = c[0];
const i = r.lastChild;
const u = r.firstChild;
const f = u == null ? void 0 : u.firstChild;
let d = A(r);
let _ = d;
let v = false;
let p;
const reset = () => {
scrollElementTo(u, s);
scrollElementTo(i, s);
};
const onResized = t => {
p = 0;
if (v) {
d = _;
n(t === true);
}
};
const onScroll = t => {
_ = A(r);
v = !t || !equalWH(_, d);
if (t) {
stopPropagation(t);
if (v && !p) {
l(p);
p = a(onResized);
}
} else {
onResized(t === false);
}
reset();
};
const g = [ appendChildren(t, c), addEventListener(u, e, onScroll), addEventListener(i, e, onScroll) ];
addClass(t, ct);
setStyles(f, {
[C]: s,
[x]: s
});
a(reset);
return [ o ? bind(onScroll, false) : reset, g ];
}
}
}))();
const getShowNativeOverlaidScrollbars = (t, n) => {
const {k: o} = n;
const [s, e] = t("showNativeOverlaidScrollbars");
return [ s && o.x && o.y, e ];
};
const overflowIsVisible = t => t.indexOf(H) === 0;
const overflowBehaviorToOverflowStyle = t => t.replace(`${H}-`, "");
const overflowCssValueToOverflowStyle = (t, n) => {
if (t === "auto") {
return n ? z : E;
}
const o = t || E;
return [ E, z, H ].includes(o) ? o : E;
};
const getElementOverflowStyle = (t, n) => {
const {overflowX: o, overflowY: s} = getStyles(t, [ O, $ ]);
return {
x: overflowCssValueToOverflowStyle(o, n.x),
y: overflowCssValueToOverflowStyle(s, n.y)
};
};
const Ht = "__osScrollbarsHidingPlugin";
const Et = /* @__PURE__ */ (() => ({
[Ht]: {
static: () => ({
R: (t, n, o, s, e) => {
const {V: c, L: r} = t;
const {U: i, k: l, P: a} = s;
const u = !c && !i && (l.x || l.y);
const [f] = getShowNativeOverlaidScrollbars(e, s);
const _getViewportOverflowHideOffset = t => {
const n = i || f ? 0 : 42;
const getHideOffsetPerAxis = (t, o, s) => {
const e = t ? n : s;
const c = o && !i ? e : 0;
const r = t && !!n;
return [ c, r ];
};
const [o, s] = getHideOffsetPerAxis(l.x, t.x === z, a.x);
const [e, c] = getHideOffsetPerAxis(l.y, t.y === z, a.y);
return {
N: {
x: o,
y: e
},
q: {
x: s,
y: c
}
};
};
const _hideNativeScrollbars = t => {
if (!c) {
const {j: s} = o;
const e = assignDeep({}, {
[S]: 0,
[m]: 0,
[y]: 0
});
const {N: c, q: r} = _getViewportOverflowHideOffset(t);
const {x: i, y: l} = r;
const {x: a, y: f} = c;
const {B: d} = n;
const _ = s ? y : S;
const v = s ? b : h;
const p = d[_];
const g = d[m];
const O = d[v];
const $ = d[w];
e[C] = `calc(100% + ${f + p * -1}px)`;
e[_] = -f + p;
e[m] = -a + g;
if (u) {
e[v] = O + (l ? f : 0);
e[w] = $ + (i ? a : 0);
}
return e;
}
};
const _arrangeViewport = (t, s, e) => {
if (u) {
const {B: c} = n;
const {N: i, q: l} = _getViewportOverflowHideOffset(t);
const {x: a, y: u} = l;
const {x: f, y: d} = i;
const {j: _} = o;
const v = _ ? h : b;
const p = c[v];
const g = c.paddingTop;
const w = s.w + e.w;
const y = s.h + e.h;
const S = {
w: d && u ? `${d + w - p}px` : "",
h: f && a ? `${f + y - g}px` : ""
};
setStyles(r, {
"--os-vaw": S.w,
"--os-vah": S.h
});
}
return u;
};
const _undoViewportArrange = () => {
if (u) {
const {F: t, B: o} = n;
const s = getElementOverflowStyle(r, t);
const {q: e} = _getViewportOverflowHideOffset(s);
const {x: c, y: i} = e;
const l = {};
const assignProps = t => each(t, (t => {
l[t] = o[t];
}));
if (c) {
assignProps([ m, g, w ]);
}
if (i) {
assignProps([ y, S, b, h ]);
}
const a = getStyles(r, keys(l));
const u = removeAttrClass(r, X, G);
setStyles(r, l);
return () => {
setStyles(r, assignDeep({}, a, _hideNativeScrollbars(s)));
u();
};
}
return noop;
};
return {
X: _arrangeViewport,
Y: _undoViewportArrange,
W: _hideNativeScrollbars
};
}
})
}
}))();
const zt = "__osClickScrollPlugin";
const It = /* @__PURE__ */ (() => ({
[zt]: {
static: () => (t, n, o, s) => {
let e = false;
let c = noop;
const r = 133;
const i = 222;
const [l, a] = selfClearTimeout(r);
const u = Math.sign(n);
const f = o * u;
const d = f / 2;
const easing = t => 1 - (1 - t) * (1 - t);
const easedEndPressAnimation = (n, o) => animateNumber(n, o, i, t, easing);
const linearPressAnimation = (o, s) => animateNumber(o, n - f, r * s, ((o, s, e) => {
t(o);
if (e) {
c = easedEndPressAnimation(o, n);
}
}));
const _ = animateNumber(0, f, i, ((r, i, a) => {
t(r);
if (a) {
s(e);
if (!e) {
const t = n - r;
const s = Math.sign(t - d) === u;
if (s) {
l((() => {
const s = t - f;
const e = Math.sign(s) === u;
c = e ? linearPressAnimation(r, Math.abs(s) / o) : easedEndPressAnimation(r, n);
}));
}
}
}
}), easing);
return t => {
e = true;
if (t) {
_();
}
a();
c();
};
}
}
}))();
const opsStringify = t => JSON.stringify(t, ((t, n) => {
if (isFunction(n)) {
throw 0;
}
return n;
}));
const getPropByPath = (t, n) => t ? `${n}`.split(".").reduce(((t, n) => t && hasOwnProperty(t, n) ? t[n] : void 0), t) : void 0;
const Tt = {
paddingAbsolute: false,
showNativeOverlaidScrollbars: false,
update: {
elementEvents: [ [ "img", "load" ] ],
debounce: [ 0, 33 ],
attributes: null,
ignoreMutation: null
},
overflow: {
x: "scroll",
y: "scroll"
},
scrollbars: {
theme: "os-theme-dark",
visibility: "auto",
autoHide: "never",
autoHideDelay: 1300,
autoHideSuspend: false,
dragScroll: true,
clickScroll: false,
pointers: [ "mouse", "touch", "pen" ]
}
};
const getOptionsDiff = (t, n) => {
const o = {};
const s = concat(keys(n), keys(t));
each(s, (s => {
const e = t[s];
const c = n[s];
if (isObject(e) && isObject(c)) {
assignDeep(o[s] = {}, getOptionsDiff(e, c));
if (isEmptyObject(o[s])) {
delete o[s];
}
} else if (hasOwnProperty(n, s) && c !== e) {
let t = true;
if (isArray(e) || isArray(c)) {
try {
if (opsStringify(e) === opsStringify(c)) {
t = false;
}
} catch (r) {}
}
if (t) {
o[s] = c;
}
}
}));
return o;
};
const createOptionCheck = (t, n, o) => s => [ getPropByPath(t, s), o || getPropByPath(n, s) !== void 0 ];
let At;
const getNonce = () => At;
const setNonce = t => {
At = t;
};
let Dt;
const createEnvironment = () => {
const getNativeScrollbarSize = (t, n, o) => {
appendChildren(document.body, t);
appendChildren(document.body, t);
const s = D(t);
const e = A(t);
const c = getFractionalSize(n);
if (o) {
removeElements(t);
}
return {
x: e.h - s.h + c.h,
y: e.w - s.w + c.w
};
};
const getNativeScrollbarsHiding = t => {
let n = false;
const o = addClass(t, P);
try {
n = getStyles(t, "scrollbar-width") === "none" || getStyles(t, "display", "::-webkit-scrollbar") === "none";
} catch (s) {}
o();
return n;
};
const t = `.${U}{scroll-behavior:auto!important;position:fixed;opacity:0;visibility:hidden;overflow:scroll;height:200px;width:200px;z-index:-1}.${U} div{width:200%;height:200%;margin:10px 0}.${P}{scrollbar-width:none!important}.${P}::-webkit-scrollbar,.${P}::-webkit-scrollbar-corner{appearance:none!important;display:none!important;width:0!important;height:0!important}`;
const n = createDOM(`<div class="${U}"><div></div><style>${t}</style></div>`);
const s = n[0];
const e = s.firstChild;
const c = s.lastChild;
const r = getNonce();
if (r) {
c.nonce = r;
}
const [i, , l] = createEventListenerHub();
const [a, u] = createCache({
o: getNativeScrollbarSize(s, e),
i: equalXY
}, bind(getNativeScrollbarSize, s, e, true));
const [f] = u();
const d = getNativeScrollbarsHiding(s);
const _ = {
x: f.x === 0,
y: f.y === 0
};
const v = {
elements: {
host: null,
padding: !d,
viewport: t => d && isBodyElement(t) && t,
content: false
},
scrollbars: {
slot: true
},
cancel: {
nativeScrollbarsOverlaid: false,
body: null
}
};
const g = assignDeep({}, Tt);
const h = bind(assignDeep, {}, g);
const b = bind(assignDeep, {}, v);
const w = {
P: f,
k: _,
U: d,
G: !!p,
J: bind(i, "r"),
K: b,
Z: t => assignDeep(v, t) && b(),
tt: h,
nt: t => assignDeep(g, t) && h(),
ot: assignDeep({}, v),
st: assignDeep({}, g)
};
removeAttrs(s, "style");
removeElements(s);
addEventListener(o, "resize", (() => {
l("r", []);
}));
if (isFunction(o.matchMedia) && !d && (!_.x || !_.y)) {
const addZoomListener = t => {
const n = o.matchMedia(`(resolution: ${o.devicePixelRatio}dppx)`);
addEventListener(n, "change", (() => {
t();
addZoomListener(t);
}), {
A: true
});
};
addZoomListener((() => {
const [t, n] = a();
assignDeep(w.P, t);
l("r", [ n ]);
}));
}
return w;
};
const getEnvironment = () => {
if (!Dt) {
Dt = createEnvironment();
}
return Dt;
};
const createEventContentChange = (t, n, o) => {
let s = false;
const e = o ? new WeakMap : false;
const destroy = () => {
s = true;
};
const updateElements = c => {
if (e && o) {
const r = o.map((n => {
const [o, s] = n || [];
const e = s && o ? (c || find)(o, t) : [];
return [ e, s ];
}));
each(r, (o => each(o[0], (c => {
const r = o[1];
const i = e.get(c) || [];
const l = t.contains(c);
if (l && r) {
const t = addEventListener(c, r, (o => {
if (s) {
t();
e.delete(c);
} else {
n(o);
}
}));
e.set(c, push(i, t));
} else {
runEachAndClear(i);
e.delete(c);
}
}))));
}
};
updateElements();
return [ destroy, updateElements ];
};
const createDOMObserver = (t, n, o, s) => {
let e = false;
const {et: c, ct: r, rt: i, it: l, lt: a, ut: u} = s || {};
const f = debounce((() => e && o(true)), {
v: 33,
p: 99
});
const [_, v] = createEventContentChange(t, f, i);
const p = c || [];
const g = r || [];
const h = concat(p, g);
const observerCallback = (e, c) => {
if (!isEmptyArray(c)) {
const r = a || noop;
const i = u || noop;
const f = [];
const d = [];
let _ = false;
let p = false;
each(c, (o => {
const {attributeName: e, target: c, type: a, oldValue: u, addedNodes: v, removedNodes: h} = o;
const b = a === "attributes";
const w = a === "childList";
const y = t === c;
const S = b && e;
const m = S && getAttr(c, e || "");
const O = isString(m) ? m : null;
const $ = S && u !== O;
const C = inArray(g, e) && $;
if (n && (w || !y)) {
const n = b && $;
const a = n && l && is(c, l);
const d = a ? !r(c, e, u, O) : !b || n;
const _ = d && !i(o, !!a, t, s);
each(v, (t => push(f, t)));
each(h, (t => push(f, t)));
p = p || _;
}
if (!n && y && $ && !r(c, e, u, O)) {
push(d, e);
_ = _ || C;
}
}));
v((t => deduplicateArray(f).reduce(((n, o) => {
push(n, find(t, o));
return is(o, t) ? push(n, o) : n;
}), [])));
if (n) {
if (!e && p) {
o(false);
}
return [ false ];
}
if (!isEmptyArray(d) || _) {
const t = [ deduplicateArray(d), _ ];
if (!e) {
o.apply(0, t);
}
return t;
}
}
};
const b = new d(bind(observerCallback, false));
return [ () => {
b.observe(t, {
attributes: true,
attributeOldValue: true,
attributeFilter: h,
subtree: n,
childList: n,
characterData: n
});
e = true;
return () => {
if (e) {
_();
b.disconnect();
e = false;
}
};
}, () => {
if (e) {
f.O();
return observerCallback(true, b.takeRecords());
}
} ];
};
let Mt = null;
const createSizeObserver = (t, n, o) => {
const {ft: s} = o || {};
const e = getStaticPluginModuleInstance(Ct);
const [c] = createCache({
o: false,
u: true
});
return () => {
const o = [];
const r = createDOM(`<div class="${ot}"><div class="${et}"></div></div>`);
const i = r[0];
const l = i.firstChild;
const onSizeChangedCallbackProxy = t => {
const o = isArray(t) && !isEmptyArray(t);
let s = false;
let e = false;
if (o) {
const n = t[0];
const [o, , r] = c(n.contentRect);
const i = domRectHasDimensions(o);
e = domRectAppeared(o, r);
s = !e && !i;
} else {
e = t === true;
}
if (!s) {
n({
dt: true,
ft: e
});
}
};
if (v) {
if (!isBoolean(Mt)) {
const n = new v(noop);
n.observe(t, {
get box() {
Mt = true;
}
});
Mt = Mt || false;
n.disconnect();
}
const n = debounce(onSizeChangedCallbackProxy, {
v: 0,
p: 0
});
const resizeObserverCallback = t => n(t);
const s = new v(resizeObserverCallback);
s.observe(Mt ? t : l);
push(o, [ () => {
s.disconnect();
}, !Mt && appendChildren(t, i) ]);
if (Mt) {
const n = new v(resizeObserverCallback);
n.observe(t, {
box: "border-box"
});
push(o, (() => n.disconnect()));
}
} else if (e) {
const [n, c] = e(l, onSizeChangedCallbackProxy, s);
push(o, concat([ addClass(i, st), addEventListener(i, "animationstart", n), appendChildren(t, i) ], c));
} else {
return noop;
}
return bind(runEachAndClear, o);
};
};
const createTrinsicObserver = (t, n) => {
let o;
const isHeightIntrinsic = t => t.h === 0 || t.isIntersecting || t.intersectionRatio > 0;
const s = createDiv(lt);
const [e] = createCache({
o: false
});
const triggerOnTrinsicChangedCallback = (t, o) => {
if (t) {
const s = e(isHeightIntrinsic(t));
const [, c] = s;
return c && !o && n(s) && [ s ];
}
};
const intersectionObserverCallback = (t, n) => triggerOnTrinsicChangedCallback(n.pop(), t);
return [ () => {
const n = [];
if (_) {
o = new _(bind(intersectionObserverCallback, false), {
root: t
});
o.observe(s);
push(n, (() => {
o.disconnect();
}));
} else {
const onSizeChanged = () => {
const t = A(s);
triggerOnTrinsicChangedCallback(t);
};
push(n, createSizeObserver(s, onSizeChanged)());
onSizeChanged();
}
return bind(runEachAndClear, push(n, appendChildren(t, s)));
}, () => o && intersectionObserverCallback(true, o.takeRecords()) ];
};
const createObserversSetup = (t, n, o, s) => {
let e;
let c;
let r;
let i;
let l;
let a;
const u = `[${B}]`;
const f = `[${X}]`;
const d = [ "id", "class", "style", "open", "wrap", "cols", "rows" ];
const {_t: _, vt: p, L: g, gt: h, ht: b, V: w, bt: y, wt: S, yt: m, St: O} = t;
const getDirectionIsRTL = t => getStyles(t, "direction") === "rtl";
const $ = {
Ot: false,
j: getDirectionIsRTL(_)
};
const C = getEnvironment();
const x = getStaticPluginModuleInstance(Ht);
const [H] = createCache({
i: equalWH,
o: {
w: 0,
h: 0
}
}, (() => {
const s = x && x.R(t, n, $, C, o).Y;
const e = y && w;
const c = !e && hasAttrClass(p, B, q);
const r = !w && S(G);
const i = r && getElementScroll(h);
const l = i && O();
const a = m(J, c);
const u = r && s && s();
const f = M(g);
const d = getFractionalSize(g);
if (u) {
u();
}
scrollElementTo(h, i);
if (l) {
l();
}
if (c) {
a();
}
return {
w: f.w + d.w,
h: f.h + d.h
};
}));
const E = debounce(s, {
v: () => e,
p: () => c,
m(t, n) {
const [o] = t;
const [s] = n;
return [ concat(keys(o), keys(s)).reduce(((t, n) => {
t[n] = o[n] || s[n];
return t;
}), {}) ];
}
});
const setDirection = t => {
const n = getDirectionIsRTL(_);
assignDeep(t, {
$t: a !== n
});
assignDeep($, {
j: n
});
a = n;
};
const onTrinsicChanged = (t, n) => {
const [o, e] = t;
const c = {
Ct: e
};
assignDeep($, {
Ot: o
});
if (!n) {
s(c);
}
return c;
};
const onSizeChanged = ({dt: t, ft: n}) => {
const o = t && !n;
const e = !o && C.U ? E : s;
const c = {
dt: t || n,
ft: n
};
setDirection(c);
e(c);
};
const onContentMutation = (t, n) => {
const [, o] = H();
const e = {
xt: o
};
setDirection(e);
const c = t ? s : E;
if (o && !n) {
c(e);
}
return e;
};
const onHostMutation = (t, n, o) => {
const s = {
Ht: n
};
setDirection(s);
if (n && !o) {
E(s);
}
return s;
};
const [z, I] = b ? createTrinsicObserver(p, onTrinsicChanged) : [];
const T = !w && createSizeObserver(p, onSizeChanged, {
ft: true
});
const [A, D] = createDOMObserver(p, false, onHostMutation, {
ct: d,
et: d
});
const k = w && v && new v((t => {
const n = t[t.length - 1].contentRect;
onSizeChanged({
dt: true,
ft: domRectAppeared(n, l)
});
l = n;
}));
const R = debounce((() => {
const [, t] = H();
s({
xt: t
});
}), {
v: 222,
S: true
});
return [ () => {
if (k) {
k.observe(p);
}
const t = T && T();
const n = z && z();
const o = A();
const s = C.J((t => {
if (t) {
E({
Et: t
});
} else {
R();
}
}));
return () => {
if (k) {
k.disconnect();
}
if (t) {
t();
}
if (n) {
n();
}
if (i) {
i();
}
o();
s();
};
}, ({zt: t, It: n, Tt: o}) => {
const s = {};
const [l] = t("update.ignoreMutation");
const [a, _] = t("update.attributes");
const [v, p] = t("update.elementEvents");
const [h, y] = t("update.debounce");
const S = p || _;
const m = n || o;
const ignoreMutationFromOptions = t => isFunction(l) && l(t);
if (S) {
if (r) {
r();
}
if (i) {
i();
}
const [t, n] = createDOMObserver(b || g, true, onContentMutation, {
et: concat(d, a || []),
rt: v,
it: u,
ut: (t, n) => {
const {target: o, attributeName: s} = t;
const e = !n && s && !w ? liesBetween(o, u, f) : false;
return e || !!closest(o, `.${ut}`) || !!ignoreMutationFromOptions(t);
}
});
i = t();
r = n;
}
if (y) {
E.O();
if (isArray(h)) {
const t = h[0];
const n = h[1];
e = isNumber(t) && t;
c = isNumber(n) && n;
} else if (isNumber(h)) {
e = h;
c = false;
} else {
e = false;
c = false;
}
}
if (m) {
const t = D();
const n = I && I();
const o = r && r();
if (t) {
assignDeep(s, onHostMutation(t[0], t[1], m));
}
if (n) {
assignDeep(s, onTrinsicChanged(n[0], m));
}
if (o) {
assignDeep(s, onContentMutation(o[0], m));
}
}
setDirection(s);
return s;
}, $ ];
};
const resolveInitialization = (t, n) => isFunction(n) ? n.apply(0, t) : n;
const staticInitializationElement = (t, n, o, s) => {
const e = isUndefined(s) ? o : s;
const c = resolveInitialization(t, e);
return c || n.apply(0, t);
};
const dynamicInitializationElement = (t, n, o, s) => {
const e = isUndefined(s) ? o : s;
const c = resolveInitialization(t, e);
return !!c && (isHTMLElement(c) ? c : n.apply(0, t));
};
const cancelInitialization = (t, n) => {
const {nativeScrollbarsOverlaid: o, body: s} = n || {};
const {k: e, U: c, K: r} = getEnvironment();
const {nativeScrollbarsOverlaid: i, body: l} = r().cancel;
const a = o != null ? o : i;
const u = isUndefined(s) ? l : s;
const f = (e.x || e.y) && a;
const d = t && (isNull(u) ? !c : u);
return !!f || !!d;
};
const createScrollbarsSetupElements = (t, n, o, s) => {
const e = "--os-viewport-percent";
const c = "--os-scroll-percent";
const r = "--os-scroll-direction";
const {K: i} = getEnvironment();
const {scrollbars: l} = i();
const {slot: a} = l;
const {_t: u, vt: f, L: d, At: _, gt: v, bt: g, V: h} = n;
const {scrollbars: b} = _ ? {} : t;
const {slot: w} = b || {};
const y = [];
const S = [];
const m = [];
const O = dynamicInitializationElement([ u, f, d ], (() => h && g ? u : f), a, w);
const initScrollTimeline = t => {
if (p) {
let n = null;
let s = [];
const e = new p({
source: v,
axis: t
});
const cancelAnimation = () => {
if (n) {
n.cancel();
}
n = null;
};
const _setScrollPercentAnimation = c => {
const {Dt: r} = o;
const i = isDefaultDirectionScrollCoordinates(r)[t];
const l = t === "x";
const a = [ getTrasformTranslateValue(0, l), getTrasformTranslateValue(`calc(100cq${l ? "w" : "h"} + -100%)`, l) ];
const u = i ? a : a.reverse();
if (s[0] === u[0] && s[1] === u[1]) {
return cancelAnimation;
}
cancelAnimation();
s = u;
n = c.Mt.animate({
clear: [ "left" ],
transform: u
}, {
timeline: e
});
return cancelAnimation;
};
return {
kt: _setScrollPercentAnimation
};
}
};
const $ = {
x: initScrollTimeline("x"),
y: initScrollTimeline("y")
};
const getViewportPercent = () => {
const {Rt: t, Vt: n} = o;
const getAxisValue = (t, n) => capNumber(0, 1, t / (t + n) || 0);
return {
x: getAxisValue(n.x, t.x),
y: getAxisValue(n.y, t.y)
};
};
const scrollbarStructureAddRemoveClass = (t, n, o) => {
const s = o ? addClass : removeClass;
each(t, (t => {
s(t.Lt, n);
}));
};
const scrollbarStyle = (t, n) => {
each(t, (t => {
const [o, s] = n(t);
setStyles(o, s);
}));
};
const scrollbarsAddRemoveClass = (t, n, o) => {
const s = isBoolean(o);
const e = s ? o : true;
const c = s ? !o : true;
if (e) {
scrollbarStructureAddRemoveClass(S, t, n);
}
if (c) {
scrollbarStructureAddRemoveClass(m, t, n);
}
};
const refreshScrollbarsHandleLength = () => {
const t = getViewportPercent();
const createScrollbarStyleFn = t => n => [ n.Lt, {
[e]: roundCssNumber(t) + ""
} ];
scrollbarStyle(S, createScrollbarStyleFn(t.x));
scrollbarStyle(m, createScrollbarStyleFn(t.y));
};
const refreshScrollbarsHandleOffset = () => {
if (!p) {
const {Dt: t} = o;
const n = getScrollCoordinatesPercent(t, getElementScroll(v));
const createScrollbarStyleFn = t => n => [ n.Lt, {
[c]: roundCssNumber(t) + ""
} ];
scrollbarStyle(S, createScrollbarStyleFn(n.x));
scrollbarStyle(m, createScrollbarStyleFn(n.y));
}
};
const refreshScrollbarsScrollCoordinates = () => {
const {Dt: t} = o;
const n = isDefaultDirectionScrollCoordinates(t);
const createScrollbarStyleFn = t => n => [ n.Lt, {
[r]: t ? "0" : "1"
} ];
scrollbarStyle(S, createScrollbarStyleFn(n.x));
scrollbarStyle(m, createScrollbarStyleFn(n.y));
if (p) {
S.forEach($.x.kt);
m.forEach($.y.kt);
}
};
const refreshScrollbarsScrollbarOffset = () => {
if (h && !g) {
const {Rt: t, Dt: n} = o;
const s = isDefaultDirectionScrollCoordinates(n);
const e = getScrollCoordinatesPercent(n, getElementScroll(v));
const styleScrollbarPosition = n => {
const {Lt: o} = n;
const c = parent(o) === d && o;
const getTranslateValue = (t, n, o) => {
const s = n * t;
return numberToCssPx(o ? s : -s);
};
return [ c, c && {
transform: getTrasformTranslateValue({
x: getTranslateValue(e.x, t.x, s.x),
y: getTranslateValue(e.y, t.y, s.y)
})
} ];
};
scrollbarStyle(S, styleScrollbarPosition);
scrollbarStyle(m, styleScrollbarPosition);
}
};
const generateScrollbarDOM = t => {
const n = t ? "x" : "y";
const o = t ? dt : _t;
const e = createDiv(`${ut} ${o}`);
const c = createDiv(vt);
const r = createDiv(pt);
const i = {
Lt: e,
Ut: c,
Mt: r
};
const l = $[n];
push(t ? S : m, i);
push(y, [ appendChildren(e, c), appendChildren(c, r), bind(removeElements, e), l && l.kt(i), s(i, scrollbarsAddRemoveClass, t) ]);
return i;
};
const C = bind(generateScrollbarDOM, true);
const x = bind(generateScrollbarDOM, false);
const appendElements = () => {
appendChildren(O, S[0].Lt);
appendChildren(O, m[0].Lt);
return bind(runEachAndClear, y);
};
C();
x();
return [ {
Pt: refreshScrollbarsHandleLength,
Nt: refreshScrollbarsHandleOffset,
qt: refreshScrollbarsScrollCoordinates,
jt: refreshScrollbarsScrollbarOffset,
Bt: scrollbarsAddRemoveClass,
Ft: {
Xt: S,
Yt: C,
Wt: bind(scrollbarStyle, S)
},
Gt: {
Xt: m,
Yt: x,
Wt: bind(scrollbarStyle, m)
}
}, appendElements ];
};
const createScrollbarsSetupEvents = (t, n, o, s) => (e, i, l) => {
const {vt: a, L: f, V: d, gt: _, Jt: v, St: p} = n;
const {Lt: g, Ut: h, Mt: b} = e;
const [w, y] = selfClearTimeout(333);
const [S, m] = selfClearTimeout(444);
const scrollOffsetElementScrollBy = t => {
if (isFunction(_.scrollBy)) {
_.scrollBy({
behavior: "smooth",
left: t.x,
top: t.y
});
}
};
const createInteractiveScrollEvents = () => {
const n = "pointerup pointercancel lostpointercapture";
const s = `client${l ? "X" : "Y"}`;
const e = l ? C : x;
const i = l ? "left" : "top";
const a = l ? "w" : "h";
const u = l ? "x" : "y";
const createRelativeHandleMove = (t, n) => s => {
const {Rt: e} = o;
const c = A(h)[a] - A(b)[a];
const r = n * s / c;
const i = r * e[u];
scrollElementTo(_, {
[u]: t + i
});
};
const f = [];
return addEventListener(h, "pointerdown", (o => {
const l = closest(o.target, `.${pt}`) === b;
const d = l ? b : h;
const g = t.scrollbars;
const w = g[l ? "dragScroll" : "clickScroll"];
const {button: y, isPrimary: O, pointerType: $} = o;
const {pointers: C} = g;
const x = y === 0 && O && w && (C || []).includes($);
if (x) {
runEachAndClear(f);
m();
const t = !l && (o.shiftKey || w === "instant");
const g = bind(getBoundingClientRect, b);
const y = bind(getBo