@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/ui/player/progress/cmp.chunks-progress.svelte

@@ -16,18 +16,7 @@ export {};
   {/if}
 </div>
 
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.chunks-progress {
+<style>.chunks-progress {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

package/dist/ui/shadow-dom/cmp.shadow-root.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">import { brandColors } from '../../core/theme';
-let { theme = 'dark', backgroundDisabled, backgroundImageUrl, children } = $props();
+import { setLocale } from '@streamscloud/kit/locale';
+let { locale, theme = 'dark', backgroundDisabled, backgroundImageUrl, children } = $props();
+$effect(() => {
+    if (locale) {
+        setLocale(locale);
+    }
+});
 const appendBrandPair = (values, name, pair) => {
     if (pair.light) {
         values.push(`--sc-player--light--${name}: ${pair.light}`);
@@ -42,17 +48,6 @@ const styles = $derived.by(() => {
 </div>
 
 <style>@charset "UTF-8";
-@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 .shadow-root {
   /* Backgrounds */
   --sc-mc-color--bg-button: light-dark(#ffffff, #111827);
@@ -88,8 +83,8 @@ const styles = $derived.by(() => {
   --sc-mc-color--text-white-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
-    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
-    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),
+    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%))
   );
   --sc-player--brand: light-dark(
     var(--sc-player--light--brand, var(--sc-mc-color--border-brand)),

package/dist/ui/shadow-dom/cmp.shadow-root.svelte.d.ts

@@ -1,6 +1,8 @@
 import { type ThemeValue } from '../../core/theme';
+import { type Locale } from '@streamscloud/kit/locale';
 import type { Snippet } from 'svelte';
 type Props = {
+    locale?: Locale;
     theme?: ThemeValue;
     backgroundDisabled: boolean;
     backgroundImageUrl: string | null | 'not-applicable';

package/dist/ui/shadow-dom/colors.scss

@@ -40,8 +40,8 @@
 
   /* Player brand colors — overridable via --sc-player--{light|dark}--{name} custom properties */
   --sc-player--background: light-dark(
-    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%)),
-    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-panel) r g b / 90%))
+    var(--sc-player--light--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%)),
+    var(--sc-player--dark--background, rgb(from var(--sc-mc-color--bg-screen) r g b / 90%))
   );
   --sc-player--brand: light-dark(
     var(--sc-player--light--brand, var(--sc-mc-color--border-brand)),

package/dist/ui/shadow-dom/shadow-root-service.js

@@ -1,5 +1,5 @@
-import normalize from './normalize-shadow.css?raw';
-import reset from './reset-shadow.css?raw';
+import normalize from '@streamscloud/kit/styles/normalize.css?raw';
+import reset from '@streamscloud/kit/styles/reset.css?raw';
 export const createShadowRoot = (host) => {
     prepareShadowRootHost(host);
     const shadowRoot = host.attachShadow({ mode: 'open' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "15.1.0",
+  "version": "16.0.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -11,7 +11,7 @@
     "dev": "vite dev --port 3010 --host",
     "build": "svelte-package --tsconfig ./tsconfig.app.json  && prettier --write --plugin prettier-plugin-svelte . && eslint --fix .",
     "publish:prod": "npm run build && npm publish --access public --tag latest",
-    "version:dev": "node -e \"const fs=require('fs');const pkg=require('./package.json');const base=(pkg.version.includes('-')?pkg.version.split('-')[0]:pkg.version);pkg.version=base+'-'+Date.now();fs.writeFileSync('package.json',JSON.stringify(pkg,null,2)+'\\n');\"",
+    "version:dev": "node -e \"const p=require('./package.json');p.version=p.version.split('-')[0]+'-'+Date.now();require('fs').writeFileSync('package.json',JSON.stringify(p,null,2)+'\\n')\"",
     "publish:dev": "npm run build && npm run version:dev && npm publish --tag next && git checkout -- package.json",
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
@@ -133,20 +133,14 @@
     }
   },
   "peerDependencies": {
-    "@fluentui/svg-icons": "^1.1.318",
-    "@popperjs/core": "^2.11.8",
+    "@streamscloud/kit": "^0.1.1",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
-    "@urql/core": "^5.1.1 || ^6.0.0",
-    "dequal": "^2.0.3",
-    "dompurify": "^3.3.0",
-    "mobile-detect": "^1.4.5",
-    "svelte": "^5.50.0",
-    "wheel-gestures": "^2.2.48"
+    "svelte": "^5.51.0"
   },
   "devDependencies": {
     "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
-    "@fluentui/svg-icons": "^1.1.318",
+    "@fluentui/svg-icons": "^1.1.319",
     "@graphql-codegen/add": "^6.0.0",
     "@graphql-codegen/cli": "^6.1.1",
     "@graphql-codegen/introspection": "^5.0.0",
@@ -155,39 +149,33 @@
     "@graphql-codegen/typescript": "^5.0.7",
     "@graphql-codegen/typescript-operations": "^5.0.7",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@popperjs/core": "^2.11.8",
+    "@streamscloud/kit": "^0.1.1",
     "@streamscloud/streams-analytics-collector": "^4.0.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.7",
-    "@types/dompurify": "^3.0.5",
-    "@urql/core": "^6.0.1",
     "autoprefixer": "^10.4.24",
-    "dequal": "^2.0.3",
-    "dompurify": "^3.3.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-codeframe": "^7.32.2",
     "eslint-formatter-visualstudio": "^9.0.1",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsonc": "^2.21.0",
+    "eslint-plugin-jsonc": "^2.21.1",
     "eslint-plugin-only-warn": "^1.1.0",
     "eslint-plugin-promise": "^7.2.1",
-    "eslint-plugin-svelte": "^3.14.0",
-    "eslint-plugin-unused-imports": "^4.3.0",
+    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.3.0",
-    "mobile-detect": "^1.4.5",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
     "sass": "^1.97.3",
-    "svelte": "^5.50.0",
-    "svelte-check": "^4.3.6",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.4.0",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.55.0",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.1.0",
-    "wheel-gestures": "^2.2.48"
+    "vite-tsconfig-paths": "^6.1.1"
   }
 }

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -1,5 +0,0 @@
-import type { Action } from 'svelte/action';
-export declare const horizontalWheelScroll: Action<HTMLElement, {
-    isolateScroll: boolean;
-    speed?: number;
-} | undefined>;

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -1,20 +0,0 @@
-export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed: 1 }) => {
-    const onWheel = (event) => {
-        const canScrollX = node.scrollWidth > node.clientWidth;
-        if (!canScrollX) {
-            return;
-        }
-        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
-        node.scrollBy({ left: delta * (param.speed ?? 1), behavior: 'smooth' });
-        if (param.isolateScroll) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    node.addEventListener('wheel', onWheel, { passive: false });
-    return {
-        destroy() {
-            node.removeEventListener('wheel', onWheel);
-        }
-    };
-};

package/dist/core/actions/index.d.ts

@@ -1,2 +0,0 @@
-export { horizontalWheelScroll } from './horizontal-wheel-scroll';
-export { swallowTouch } from './swallow-touch';

package/dist/core/actions/index.js

@@ -1,2 +0,0 @@
-export { horizontalWheelScroll } from './horizontal-wheel-scroll';
-export { swallowTouch } from './swallow-touch';

package/dist/core/actions/swallow-touch.d.ts

@@ -1,2 +0,0 @@
-import type { Action } from 'svelte/action';
-export declare const swallowTouch: Action;

package/dist/core/actions/swallow-touch.js

@@ -1,17 +0,0 @@
-export const swallowTouch = (node) => {
-    const stopAll = (e) => {
-        e.stopPropagation();
-    };
-    node.addEventListener('touchstart', stopAll, { passive: false });
-    node.addEventListener('touchmove', stopAll, { passive: false });
-    node.addEventListener('touchend', stopAll, { passive: false });
-    node.addEventListener('touchcancel', stopAll, { passive: false });
-    return {
-        destroy() {
-            node.removeEventListener('touchstart', stopAll);
-            node.removeEventListener('touchmove', stopAll);
-            node.removeEventListener('touchend', stopAll);
-            node.removeEventListener('touchcancel', stopAll);
-        }
-    };
-};

package/dist/core/browser.d.ts

@@ -1 +0,0 @@
-export declare const runningInBrowser: () => boolean;

package/dist/core/browser.js

@@ -1 +0,0 @@
-export const runningInBrowser = () => typeof window !== 'undefined' && typeof document !== 'undefined';

package/dist/core/continuation-token.d.ts

@@ -1,11 +0,0 @@
-export declare class ContinuationToken {
-    canLoadMore: boolean;
-    value: string | null;
-    private constructor();
-    static init(): ContinuationToken;
-    static fromPayload(value: string | null): ContinuationToken;
-    static preventLoading(): ContinuationToken;
-    toNextChunkString(): string | null | undefined;
-    toString(): string | null;
-    toJSON(): string | null;
-}

package/dist/core/continuation-token.js

@@ -1,35 +0,0 @@
-export class ContinuationToken {
-    canLoadMore;
-    value;
-    constructor(canLoadMore, value) {
-        this.canLoadMore = canLoadMore;
-        this.value = value;
-    }
-    static init() {
-        // initial state, no data is loaded so far
-        return new ContinuationToken(true, null);
-    }
-    static fromPayload(value) {
-        if (value?.length && value.length > 1 && value.length < 5000) {
-            // initialized with server response that there is more data, and value is valid
-            return new ContinuationToken(true, value);
-        }
-        else {
-            // initialized with server response that there is no more data or value is invalid
-            return new ContinuationToken(false, null);
-        }
-    }
-    static preventLoading() {
-        // additional initilizer, to block further loading
-        return new ContinuationToken(false, null);
-    }
-    toNextChunkString() {
-        return this.canLoadMore ? this.value || undefined : this.value;
-    }
-    toString() {
-        return this.value;
-    }
-    toJSON() {
-        return this.value;
-    }
-}

package/dist/core/cursor-result.d.ts

@@ -1,9 +0,0 @@
-import type { ContinuationToken } from './continuation-token';
-export type CursorResult<T> = {
-    items: T[];
-    continuationToken: ContinuationToken;
-};
-export type CursorPayload<T> = {
-    items: T[];
-    continuationToken: string | null;
-};

package/dist/core/cursor-result.js

@@ -1 +0,0 @@
-export {};

package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts

@@ -1,14 +0,0 @@
-import { type CursorResult } from '../cursor-result';
-import { ContinuationToken } from '../continuation-token';
-import type { IDataLoader } from './data-loader';
-export declare class CursorDataLoader<T> implements IDataLoader<T> {
-    items: T[];
-    continuationToken: ContinuationToken;
-    private loadPage;
-    private deferred;
-    constructor(init: {
-        loadPage: (continuationToken: ContinuationToken) => Promise<CursorResult<T> | null>;
-    });
-    loadMore: () => Promise<T[]>;
-    reset(): Promise<void>;
-}

package/dist/core/data-loaders/cursor-data-loader.svelte.js

@@ -1,35 +0,0 @@
-import {} from '../cursor-result';
-import { Deferred } from '../deferred';
-import { ContinuationToken } from '../continuation-token';
-export class CursorDataLoader {
-    items = $state([]);
-    continuationToken = $state.raw(ContinuationToken.init());
-    loadPage;
-    deferred = null;
-    constructor(init) {
-        this.loadPage = init.loadPage;
-    }
-    loadMore = async () => {
-        if (this.deferred) {
-            return this.deferred.promise;
-        }
-        if (!this.continuationToken.canLoadMore) {
-            return [];
-        }
-        this.deferred = new Deferred();
-        let result = await this.loadPage(this.continuationToken);
-        if (!result) {
-            result = { items: [], continuationToken: ContinuationToken.preventLoading() };
-        }
-        this.continuationToken = result.continuationToken;
-        this.items = [...this.items, ...result.items];
-        this.deferred.resolve(result.items);
-        this.deferred = null;
-        return result.items;
-    };
-    async reset() {
-        this.items = [];
-        this.continuationToken = ContinuationToken.init();
-        await this.loadMore();
-    }
-}

package/dist/core/data-loaders/data-loader.d.ts

@@ -1,4 +0,0 @@
-export interface IDataLoader<T> {
-    items: T[];
-    loadMore: () => Promise<T[]>;
-}

package/dist/core/data-loaders/data-loader.js

@@ -1 +0,0 @@
-export {};

package/dist/core/data-loaders/index.d.ts

@@ -1,2 +0,0 @@
-export { CursorDataLoader } from './cursor-data-loader.svelte';
-export type { IDataLoader } from './data-loader';

package/dist/core/data-loaders/index.js

@@ -1 +0,0 @@
-export { CursorDataLoader } from './cursor-data-loader.svelte';

package/dist/core/deferred.d.ts

@@ -1,6 +0,0 @@
-export declare class Deferred<T = void> {
-    promise: Promise<T>;
-    reject: (reason?: unknown) => void;
-    resolve: (value: T) => void;
-    constructor();
-}

package/dist/core/deferred.js

@@ -1,13 +0,0 @@
-export class Deferred {
-    promise;
-    reject;
-    resolve;
-    constructor() {
-        this.resolve = () => ({});
-        this.reject = () => ({});
-        this.promise = new Promise((resolve, reject) => {
-            this.reject = reject;
-            this.resolve = resolve;
-        });
-    }
-}

package/dist/core/document.event-handlers.d.ts

@@ -1,2 +0,0 @@
-export declare const handleEsc: (event: KeyboardEvent, callback: () => void) => void;
-export declare const isTouchDevice: () => boolean;

package/dist/core/document.event-handlers.js

@@ -1,8 +0,0 @@
-export const handleEsc = (event, callback) => {
-    if (event.key === 'Escape' || event.key === 'Esc') {
-        callback();
-    }
-};
-export const isTouchDevice = () => {
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-};

package/dist/core/image-preloader.d.ts

@@ -1 +0,0 @@
-export declare const preloadImage: (src: string, throwOnError?: boolean) => Promise<void>;

package/dist/core/image-preloader.js

@@ -1,10 +0,0 @@
-export const preloadImage = (src, throwOnError = false) => {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.decoding = 'async';
-        img.loading = 'eager';
-        img.onload = () => resolve();
-        img.onerror = (e) => (throwOnError ? reject(e) : resolve());
-        img.src = src;
-    });
-};

package/dist/core/locale.d.ts

@@ -1,4 +0,0 @@
-export type Locale = 'en' | 'no';
-export type LocalizationSchema = {
-    [key: string]: Record<Locale, unknown>;
-};

package/dist/core/locale.js

@@ -1 +0,0 @@
-export {};

package/dist/core/media/image-helper.d.ts

@@ -1,10 +0,0 @@
-export declare class ImageHelper {
-    static checkIsVertical: (url: string) => Promise<boolean>;
-    static computeRatio: (src: string) => Promise<ImageSize | null>;
-    static getRatio: (metadata: ImageSize) => number;
-}
-type ImageSize = {
-    width: number;
-    height: number;
-};
-export {};

package/dist/core/media/image-helper.js

@@ -1,30 +0,0 @@
-export class ImageHelper {
-    static checkIsVertical = async (url) => {
-        const ratio = await ImageHelper.computeRatio(url);
-        if (!ratio) {
-            return false;
-        }
-        return ratio.height >= ratio.width;
-    };
-    static computeRatio = async (src) => {
-        const setRatio = (imageElement, resolveFn) => {
-            if (!imageElement || !imageElement.width) {
-                resolveFn(null);
-            }
-            else {
-                resolveFn({ width: imageElement.width, height: imageElement.height });
-            }
-        };
-        return new Promise((resolve) => {
-            const imageElement = new Image();
-            imageElement.onload = () => {
-                setRatio(imageElement, resolve);
-            };
-            imageElement.onerror = () => {
-                setRatio(null, resolve);
-            };
-            imageElement.src = src;
-        });
-    };
-    static getRatio = (metadata) => metadata.width / metadata.height;
-}

package/dist/core/media/images-size-detector.service.d.ts

@@ -1,6 +0,0 @@
-import { ImageScale } from '../enums';
-export declare class ImageSizeDetectorService {
-    userAgent: string | null;
-    constructor(userAgent?: string | null);
-    getImageSize(): ImageScale;
-}

package/dist/core/media/images-size-detector.service.js

@@ -1,15 +0,0 @@
-import { ImageScale } from '../enums';
-import MobileDetect from 'mobile-detect';
-export class ImageSizeDetectorService {
-    userAgent;
-    constructor(userAgent = null) {
-        this.userAgent = userAgent;
-    }
-    getImageSize() {
-        if (!this.userAgent) {
-            return ImageScale.OriginalEncoded;
-        }
-        const result = new MobileDetect(this.userAgent);
-        return result.mobile() ? ImageScale.Medium : ImageScale.OriginalEncoded;
-    }
-}

package/dist/core/toastr.d.ts

@@ -1 +0,0 @@
-export declare const toastrWarning: (message: string) => void;

package/dist/core/toastr.js

@@ -1,26 +0,0 @@
-export const toastrWarning = (message) => {
-    const toast = document.createElement('div');
-    toast.innerHTML = `
-        <span>${message}</span>
-        <span style="margin-left: auto; cursor: pointer; color: #666;" onclick="this.parentElement.remove()">x</span>
-    `;
-    Object.assign(toast.style, {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        background: 'white',
-        color: 'black',
-        borderRadius: '5px',
-        padding: '12px 16px',
-        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
-        position: 'fixed',
-        bottom: '10px',
-        right: '10px',
-        width: '300px',
-        borderLeft: '4px solid #e0a800',
-        borderBottom: '4px solid #e0a800',
-        zIndex: 1000
-    });
-    document.body.appendChild(toast);
-    setTimeout(() => toast.remove(), 5000);
-};

package/dist/core/transitions/index.d.ts

@@ -1 +0,0 @@
-export { slideHorizontally } from './slide-horizontally';

package/dist/core/transitions/index.js

@@ -1 +0,0 @@
-export { slideHorizontally } from './slide-horizontally';

package/dist/core/transitions/slide-horizontally.d.ts

@@ -1,7 +0,0 @@
-import { sineInOut } from 'svelte/easing';
-import type { TransitionConfig } from 'svelte/transition';
-export declare const slideHorizontally: (node: HTMLElement, { delay, duration, easing }?: {
-    delay?: number | undefined;
-    duration?: number | undefined;
-    easing?: typeof sineInOut | undefined;
-}) => TransitionConfig;

package/dist/core/transitions/slide-horizontally.js

@@ -1,55 +0,0 @@
-import { sineInOut } from 'svelte/easing';
-export const slideHorizontally = (node, { delay = 0, duration = 400, easing = sineInOut } = {}) => {
-    const style = getComputedStyle(node);
-    const isHtmlElement = (node) => node.nodeType === Node.ELEMENT_NODE;
-    const children = Array.from(node.children).filter(isHtmlElement);
-    children.forEach((child) => {
-        const style = getComputedStyle(child);
-        child.style.width = style.width;
-        child.style.minWidth = style.width;
-        child.style.maxWidth = style.maxWidth;
-    });
-    const opacity = +style.opacity;
-    const width = parseFloat(style.width);
-    const padding_left = parseFloat(style.paddingLeft);
-    const padding_right = parseFloat(style.paddingRight);
-    const margin_left = parseFloat(style.marginLeft);
-    const margin_right = parseFloat(style.marginRight);
-    const border_left_width = parseFloat(style.borderLeftWidth);
-    const border_right_width = parseFloat(style.borderRightWidth);
-    let initialT = undefined;
-    let initialU = undefined;
-    return {
-        delay,
-        duration,
-        easing,
-        css: (t, u) => {
-            if (initialT === undefined) {
-                initialT = t;
-            }
-            if (initialU === undefined) {
-                initialU = u;
-            }
-            return ('overflow: hidden;' +
-                `opacity: ${Math.min(t, 1) * opacity};` +
-                `width: ${t * width}px;` +
-                `min-width: ${t * width}px;` +
-                `padding-left: ${t * padding_left}px;` +
-                `padding-right: ${t * padding_right}px;` +
-                `margin-left: ${t * margin_left}px;` +
-                `margin-right: ${t * margin_right}px;` +
-                `border-left-width: ${t * border_left_width}px;` +
-                `border-right-width: ${t * border_right_width}px;`);
-        },
-        // Clean up function to remove the wrapper when the transition is done
-        tick: (t, u) => {
-            if ((initialT === 0 && t === 1) || (initialU === 0 && u === 1)) {
-                children.forEach((child) => {
-                    child.style.width = '';
-                    child.style.minWidth = '';
-                    child.style.maxWidth = '';
-                });
-            }
-        }
-    };
-};

package/dist/core/utils/array-helper.d.ts

@@ -1,23 +0,0 @@
-export declare class ArrayHelper {
-    static distinct<T>(items: T[]): T[];
-    static distinctBy<T>(items: T[], keyFn: (elem: T) => unknown): T[];
-    static intersect<T>(arrays: T[][]): T[];
-    static assertHasValue<T>(value: T | null | undefined): value is T;
-    /**
-     * Find position ("from" and "to" indexes) of the element that was moved inside array (only one element should be moved)
-     */
-    static findMovedElement(initial: unknown[], modified: unknown[]): {
-        from: number;
-        to: number;
-    } | undefined;
-    static moveArrayItem<T>(arr: T[], from: number, to: number): T[];
-    static replaceArrayItem<T>(arr: T[], originalItem: T, newItem: T): T[];
-    static randomElement<T>(arr: T[]): T;
-    static randomElements<T>(arr: T[], count: number): T[];
-    static sortArray<T>(array: T[], propertyFunc: (elem: T) => unknown): T[];
-    static sortArrayDescending<T>(array: T[], propertyFunc: (elem: T) => unknown): T[];
-    static groupBy<T>(array: T[], keyResolver: (elem: T) => string): Record<string, T[]>;
-    static repeat<T>(itemFn: (i: number) => T, length: number): T[];
-    static areEqual<T>(array1?: T[] | null, array2?: T[] | null): boolean;
-    private static sortArrayInternal;
-}