@streamscloud/embeddable 15.1.0-1770823267010 → 16.0.0

package/dist/core/utils/compact-number.js

@@ -1,48 +0,0 @@
-// Fixed thresholds (constants)
-const THOUSAND = 1_000;
-const MILLION = 1_000_000;
-const BILLION = 1_000_000_000;
-const TRILLION = 1_000_000_000_000;
-export const compactNumber = (value, options = {}) => {
-    const { decimals = 1, trimZeros = true, locale = 'en' } = options;
-    const abs = Math.abs(value);
-    const formatter = makeNumberFormatter(locale, decimals, trimZeros);
-    if (abs >= TRILLION) {
-        return `${formatter.format(value / TRILLION)}${loc.T[locale]}`;
-    }
-    if (abs >= BILLION) {
-        return `${formatter.format(value / BILLION)}${loc.B[locale]}`;
-    }
-    if (abs >= MILLION) {
-        return `${formatter.format(value / MILLION)}${loc.M[locale]}`;
-    }
-    if (abs >= THOUSAND) {
-        return `${formatter.format(value / THOUSAND)}${loc.K[locale]}`;
-    }
-    // Below 1000 — plain localized number
-    return formatter.format(value);
-};
-const makeNumberFormatter = (locale, decimals, trimZeros) => new Intl.NumberFormat(loc.numberLocale[locale], {
-    minimumFractionDigits: trimZeros ? 0 : decimals,
-    maximumFractionDigits: decimals,
-    useGrouping: false // grouping with suffixes like "1_234K" is noisy
-});
-const loc = {
-    K: {
-        en: 'K',
-        no: 'K'
-    },
-    M: {
-        en: 'M',
-        no: 'M'
-    },
-    B: {
-        en: 'B',
-        no: 'B'
-    },
-    T: {
-        en: 'T',
-        no: 'T'
-    },
-    numberLocale: { en: 'nb-NO', no: 'nb-NO' }
-};

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

@@ -1 +0,0 @@
-export { DateHelper, DateFormatOptions, type MonthRange } from '@streamscloud/kit/core/utils';

package/dist/core/utils/date-helper.js

@@ -1 +0,0 @@
-export { DateHelper, DateFormatOptions } from '@streamscloud/kit/core/utils';

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

@@ -1 +0,0 @@
-export { HtmlHelper } from '@streamscloud/kit/core/utils';

package/dist/core/utils/html-helper.js

@@ -1 +0,0 @@
-export { HtmlHelper } from '@streamscloud/kit/core/utils';

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

@@ -1 +0,0 @@
-export { Utils, type Without, type UnsubscribeMethod } from '@streamscloud/kit/core/utils';

package/dist/core/utils/index.js

@@ -1 +0,0 @@
-export { Utils } from '@streamscloud/kit/core/utils';

package/dist/core/utils/string-generator.d.ts

@@ -1 +0,0 @@
-export { randomNanoid } from '@streamscloud/kit/core/utils';

package/dist/core/utils/string-generator.js

@@ -1 +0,0 @@
-export { randomNanoid } from '@streamscloud/kit/core/utils';

package/dist/streams/layout/element-views/short-video-stream-element-localization.d.ts

@@ -1,5 +0,0 @@
-import { type Locale } from '../../../core/locale';
-export declare class ShortVideoStreamElementLocalization {
-    shortVideoViewerLocale: Locale;
-    constructor(locale: Locale);
-}

package/dist/streams/layout/element-views/short-video-stream-element-localization.js

@@ -1,7 +0,0 @@
-import {} from '../../../core/locale';
-export class ShortVideoStreamElementLocalization {
-    shortVideoViewerLocale;
-    constructor(locale) {
-        this.shortVideoViewerLocale = locale;
-    }
-}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.d.ts

@@ -1,5 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class StreamPageViewerLocalization {
-    elementsLocale: Locale;
-    constructor(init: Locale);
-}

package/dist/streams/stream-page-viewer/stream-page-viewer-localization.js

@@ -1,7 +0,0 @@
-import {} from '../../core/locale';
-export class StreamPageViewerLocalization {
-    elementsLocale;
-    constructor(init) {
-        this.elementsLocale = init;
-    }
-}

package/dist/ui/button/index.d.ts

@@ -1,3 +0,0 @@
-export { Button, OptionsButton } from '@streamscloud/kit/button';
-export type { ButtonVariant, ButtonSize } from '@streamscloud/kit/button';
-export type { ButtonVariant as ButtonStyle } from '@streamscloud/kit/button';

package/dist/ui/button/index.js

@@ -1 +0,0 @@
-export { Button, OptionsButton } from '@streamscloud/kit/button';

package/dist/ui/card-actions/card-action-container.d.ts

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

package/dist/ui/card-actions/card-action-container.js

@@ -1,17 +0,0 @@
-export const cardActionContainer = (node) => {
-    const handleHover = () => {
-        node.style.setProperty('--card-actions--opacity', '1');
-    };
-    const handleHoverOut = () => {
-        node.style.setProperty('--card-actions--opacity', '');
-    };
-    node.addEventListener('mouseenter', handleHover);
-    node.addEventListener('mouseleave', handleHoverOut);
-    node.style.position = 'relative';
-    return {
-        destroy() {
-            node.removeEventListener('mouseenter', handleHover);
-            node.removeEventListener('mouseleave', handleHoverOut);
-        }
-    };
-};

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-let { action, on } = $props();
-</script>
-
-<button
-  type="button"
-  class="card-action"
-  title={action.title ?? ''}
-  onclick={(e) => {
-    if (!action.propagateClickEvent) {
-      e.stopPropagation();
-    }
-
-    action.callback?.();
-    on?.click?.();
-  }}>
-  <Icon src={action.icon} color={action.iconColor ?? 'text'} />
-</button>
-
-<style>.card-action {
-  --_card-action--padding: var(--card-action-padding, 0.3125em);
-  padding: var(--_card-action--padding);
-  transition: transform 0.3s;
-  line-height: 0;
-}
-.card-action:hover {
-  transform: scale(1.2);
-}</style>

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/card-actions/cmp.card-actions.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">import { Dropdown } from '../dropdown';
-import CardAction from './cmp.card-action.svelte';
-import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-let { actions, dropdownPosition = 'bottom-start' } = $props();
-let toggleDropdown = $state.raw(null);
-let closeDropdown = () => {
-    if (toggleDropdown) {
-        toggleDropdown(false);
-    }
-};
-</script>
-
-{#if actions.length}
-  <div class="card-actions">
-    <Dropdown position={dropdownPosition} on={{ mounted: (v) => (toggleDropdown = v.toggleOpen) }}>
-      {#snippet trigger()}
-        <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
-      {/snippet}
-
-      <div class="card-actions__dropdown-content">
-        {#each actions as action (action)}
-          <CardAction action={action} on={{ click: closeDropdown }} />
-        {/each}
-      </div>
-    </Dropdown>
-  </div>
-{/if}
-
-<style>.card-actions {
-  --_card-actions--opacity: var(--card-actions--opacity, 0);
-  --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
-  --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
-  --_card-actions--right-offset: var(--card-actions--right-offset, auto);
-  position: absolute;
-  top: var(--_card-actions--top-offset);
-  right: var(--_card-actions--right-offset);
-  left: var(--_card-actions--left-offset);
-  --icon--stroke-width: 0.3;
-  opacity: var(--_card-actions--opacity);
-  transition: opacity ease-in-out 0.4s;
-  display: flex;
-  background: var(--sc-mc-color--bg-card-action);
-  border-radius: 0.1875em;
-}
-.card-actions__dropdown-content {
-  padding: 0 0.3125em;
-  background: var(--sc-mc-color--bg-card-action);
-}
-@media (any-hover: none) {
-  .card-actions {
-    opacity: 1;
-  }
-}
-
-:global(.card-actions-container) {
-  position: relative;
-}
-:global(.card-actions-container):hover .card-actions {
-  opacity: 1;
-}</style>

package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/card-actions/index.d.ts

@@ -1,4 +0,0 @@
-export { default as CardActions } from './cmp.card-actions.svelte';
-export { default as CardAction } from './cmp.card-action.svelte';
-export { cardActionContainer } from './card-action-container';
-export type { CardActionModel } from './types';

package/dist/ui/card-actions/index.js

@@ -1,3 +0,0 @@
-export { default as CardActions } from './cmp.card-actions.svelte';
-export { default as CardAction } from './cmp.card-action.svelte';
-export { cardActionContainer } from './card-action-container';

package/dist/ui/card-actions/types.d.ts

@@ -1,9 +0,0 @@
-import type { IconColor } from '../icon';
-export type CardActionModel = {
-    icon: string;
-    title?: string;
-    iconColor?: IconColor;
-    callback?: () => void | Promise<void>;
-    disabled?: boolean;
-    propagateClickEvent?: boolean;
-};

package/dist/ui/card-actions/types.js

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

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -1,173 +0,0 @@
-<script lang="ts">import { runningInBrowser } from '../../core/browser';
-import { Icon } from '../icon';
-import { isIgnored } from './dropdown-ignore';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import { createPopper } from '@popperjs/core';
-import { onDestroy } from 'svelte';
-let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
-$effect(() => {
-    on?.mounted?.({
-        toggleOpen: (value) => {
-            if (value === undefined) {
-                if (opened) {
-                    close();
-                }
-                else {
-                    open();
-                }
-            }
-            else {
-                if (!value) {
-                    close();
-                }
-                else {
-                    open();
-                }
-            }
-        }
-    });
-});
-let opened = $state(false);
-$effect(() => {
-    if (opened) {
-        on?.opened?.();
-    }
-    else {
-        on?.closed?.();
-    }
-});
-$effect(() => {
-    popper?.setOptions({ placement: position });
-});
-$effect(() => {
-    if (isOpenRequested) {
-        open();
-    }
-});
-let triggerRef = $state(null);
-let dropdownRef;
-let popper;
-onDestroy(() => {
-    removeWindowClickListener();
-});
-const open = () => {
-    opened = true;
-    window.addEventListener('click', close);
-};
-const close = () => {
-    opened = false;
-    removeWindowClickListener();
-};
-const removeWindowClickListener = () => {
-    if (runningInBrowser()) {
-        window.removeEventListener('click', close);
-    }
-};
-const handleClick = (event) => {
-    event.stopPropagation();
-    if (disabled) {
-        return;
-    }
-    if (!opened) {
-        open();
-        return;
-    }
-    const checkCanClose = (node) => {
-        if (keepDropdownOpen) {
-            return false;
-        }
-        while (node && node !== dropdownRef) {
-            if (isIgnored(node) || node.classList.contains('flatpickr-calendar')) {
-                return false;
-            }
-            node = node.parentElement;
-        }
-        return true;
-    };
-    if (checkCanClose(event.target)) {
-        close();
-    }
-};
-const initPopper = (node, _triggerEl) => {
-    popper = createPopper(_triggerEl, node, {
-        placement: position,
-        strategy: fixedPosition ? 'fixed' : 'absolute',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: () => {
-                        return [0, offset];
-                    }
-                }
-            },
-            { name: 'eventListeners', enabled: opened },
-            { name: 'flip' },
-            {
-                name: 'preventOverflow',
-                options: {
-                    boundary: document.body,
-                    padding: boundaryMargin
-                }
-            }
-        ]
-    });
-    return {
-        update(_triggerEl) {
-            popper.state.elements.reference = _triggerEl;
-            popper.update();
-        },
-        destroy() {
-            popper.destroy();
-        }
-    };
-};
-</script>
-
-<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} bind:this={dropdownRef} role="none">
-  <button type="button" class="dropdown__trigger" bind:this={triggerRef}>
-    {#if trigger}
-      {@render trigger()}
-    {:else}
-      <Icon src={IconChevronDown} />
-    {/if}
-  </button>
-  {#if opened}
-    <div use:initPopper={triggerRef} class="dropdown__content" role="tooltip" tabindex="-1">
-      {@render children()}
-    </div>
-  {/if}
-</div>
-
-<style>.dropdown {
-  --_dropdown--width: var(--dropdown--width, auto);
-  --_dropdown--content--background-color: var(--dropdown--content--background-color, transparent);
-  --_dropdown--content--box-shadow: var(--dropdown--content--box-shadow, none);
-  height: 100%;
-  width: var(--_dropdown--width);
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.dropdown :global([contenteditable]) {
-  user-select: text;
-}
-.dropdown__trigger {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  line-height: 1;
-}
-.dropdown--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.dropdown__content {
-  box-shadow: var(--_dropdown--content--box-shadow);
-  background: var(--_dropdown--content--background-color);
-  width: max-content;
-  z-index: 999;
-}
-.dropdown :global([data-popper-escaped]) {
-  visibility: hidden !important;
-}</style>

package/dist/ui/dropdown/cmp.dropdown.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/dropdown/dropdown-ignore.d.ts

@@ -1,6 +0,0 @@
-/** @type {import('svelte/action').Action}  */
-export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
-    destroy(): void;
-};
-export declare const ignoreAttribute = "dropdownIgnore";
-export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/dropdown/dropdown-ignore.js

@@ -1,11 +0,0 @@
-/** @type {import('svelte/action').Action}  */
-export const dropdownIgnore = (node, value = true) => {
-    node.dataset[ignoreAttribute] = value.toString();
-    return {
-        destroy() {
-            // the node has been removed from the DOM
-        }
-    };
-};
-export const ignoreAttribute = 'dropdownIgnore';
-export const isIgnored = (node) => node.dataset[ignoreAttribute] === 'true';

package/dist/ui/dropdown/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Dropdown } from './cmp.dropdown.svelte';
-export type DropdownPosition = import('@popperjs/core').Placement;
-export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dropdown/index.js

@@ -1,2 +0,0 @@
-export { default as Dropdown } from './cmp.dropdown.svelte';
-export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">let { model: DynamicModel } = $props();
-export {};
-</script>
-
-<DynamicModel.component {...DynamicModel.props}></DynamicModel.component>

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CmpProps = typeof __propDef.props;
-export type CmpEvents = typeof __propDef.events;
-export type CmpSlots = typeof __propDef.slots;
-export default class Cmp extends SvelteComponentTyped<CmpProps, CmpEvents, CmpSlots> {
-}
-export {};

package/dist/ui/dynamic-component/index.d.ts

@@ -1,2 +0,0 @@
-export { default as DynamicComponent } from './cmp.dynamic-component.svelte';
-export { DynamicComponentModel } from './types.svelte';

package/dist/ui/dynamic-component/index.js

@@ -1,2 +0,0 @@
-export { default as DynamicComponent } from './cmp.dynamic-component.svelte';
-export { DynamicComponentModel } from './types.svelte';

package/dist/ui/dynamic-component/types.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Component } from 'svelte';
-export type DynamicComponentProps<TComponent extends Component> = TComponent extends Component<infer Props> ? Props : never;
-export declare class DynamicComponentModel<TComponent extends Component<any> = Component<any>> {
-    component: TComponent;
-    props: DynamicComponentProps<TComponent>;
-    constructor(init: {
-        component: TComponent;
-        props: DynamicComponentProps<TComponent>;
-    });
-    updateProps(props: Partial<DynamicComponentProps<TComponent>>): void;
-}

package/dist/ui/dynamic-component/types.svelte.js

@@ -1,13 +0,0 @@
-// Define the DynamicComponentModel class
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export class DynamicComponentModel {
-    component;
-    props = $state(null);
-    constructor(init) {
-        this.component = init.component;
-        this.props = init.props;
-    }
-    updateProps(props) {
-        this.props = { ...this.props, ...props };
-    }
-}

package/dist/ui/icon/index.d.ts

@@ -1,2 +0,0 @@
-export { Icon } from '@streamscloud/kit/icon';
-export type { IconColor } from '@streamscloud/kit/icon';

package/dist/ui/icon/index.js

@@ -1 +0,0 @@
-export { Icon } from '@streamscloud/kit/icon';

package/dist/ui/icon/types.d.ts

@@ -1 +0,0 @@
-export type { IconColor } from '@streamscloud/kit/icon';

package/dist/ui/icon/types.js

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

package/dist/ui/image/index.d.ts

@@ -1 +0,0 @@
-export { Image, ImageRound, ImageRounded, ImageStub } from '@streamscloud/kit/image';

package/dist/ui/image/index.js

@@ -1 +0,0 @@
-export { Image, ImageRound, ImageRounded, ImageStub } from '@streamscloud/kit/image';

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">import { Loading } from '../loading';
-import { onDestroy, onMount } from 'svelte';
-let { loadMore, container = null, actuationOffset = '', children, loading } = $props();
-let isLoading = $state(false);
-let paginationTrigger;
-let itemsContainer;
-let intersectionObserver;
-let resizeObserver;
-onMount(() => {
-    intersectionObserver = new IntersectionObserver((e) => {
-        const [entries] = e;
-        if (entries.isIntersecting) {
-            onLoadMore();
-        }
-    }, {
-        root: container,
-        rootMargin: actuationOffset
-    });
-    resizeObserver = new ResizeObserver(() => {
-        intersectionObserver.unobserve(paginationTrigger);
-        intersectionObserver.observe(paginationTrigger);
-    });
-    resizeObserver.observe(itemsContainer);
-});
-onDestroy(() => {
-    resizeObserver?.disconnect();
-    intersectionObserver?.disconnect();
-});
-const onLoadMore = async () => {
-    if (isLoading) {
-        return;
-    }
-    isLoading = true;
-    try {
-        await loadMore();
-    }
-    finally {
-        isLoading = false;
-    }
-};
-</script>
-
-<div class="infinite-scrolling">
-  <div bind:this={itemsContainer}>
-    {@render children()}
-  </div>
-
-  <div class="infinite-scrolling__pagination-trigger" bind:this={paginationTrigger}></div>
-  {#if isLoading}
-    {#if loading}
-      {@render loading()}
-    {:else}
-      <div class="infinite-scrolling__loading-container">
-        <Loading timeout={500} />
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>.infinite-scrolling {
-  --infinite-scrolling--overflow-y_: var(--infinite-scrolling--overflow-y, initial);
-  overflow-y: var(--infinite-scrolling--overflow-y_);
-  min-height: calc(2em + 0.3125em * 2);
-  position: relative;
-  width: 100%;
-}
-.infinite-scrolling__pagination-trigger {
-  border: 1px solid transparent;
-}
-.infinite-scrolling__loading-container {
-  position: absolute;
-  bottom: 0.3125em;
-  left: 50%;
-  transform: translateX(-50%);
-}</style>