@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/ui/player/slider-horizontal/cmp.slider.svelte

@@ -1,424 +0,0 @@
-<script lang="ts" generics="T">import { runningInBrowser } from '../../../core/browser';
-import { Utils } from '../../../core/utils';
-import { HtmlHelper } from '../../../core/utils/html-helper';
-import { Icon } from '../../icon';
-import { TouchSynchronizer } from '../utils';
-import { SliderLocalization } from './slider-localization';
-import { SliderMode } from './types';
-import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
-import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
-import { onDestroy, onMount, untrack } from 'svelte';
-let { items, sliderMode = SliderMode.ArrowsWithCounts, dotsConfig = {
-    activeHtml: '<i class="fa-solid fa-circle" tabindex="0"></i>',
-    inactiveHtml: '<i class="fa-regular fa-circle" tabindex="0"></i>'
-}, locale, initialIndex, autoSlideMs = 0, on, children } = $props();
-const localization = $derived.by(() => new SliderLocalization(locale));
-const itemIndices = $derived(items.map((_, index) => index));
-const animationDuration = 300;
-let previousItems = $state.raw(undefined);
-let selectedIndex = $state(untrack(() => initialIndex));
-let animationIndex = $state(null);
-let interval;
-let slidesRef;
-let sliderWidth = $state(0);
-let swipeTransition = $state(0);
-let resizeObserver;
-onMount(() => {
-    notifyIndexChanged();
-    setTimeout(() => {
-        slidesRef?.classList.toggle('animate', false);
-    });
-    let touchStartX = 0;
-    let touchStartY = 0;
-    let touchMoveX = 0;
-    let touchStartTime = 0;
-    let swipeState = 'not-initialized';
-    slidesRef.addEventListener('touchstart', (e) => {
-        TouchSynchronizer.touchStarted(slidesRef);
-        slidesRef.classList.toggle('animate', false);
-        touchStartX = e.changedTouches[0].screenX;
-        touchStartY = e.changedTouches[0].screenY;
-        touchStartTime = Date.now();
-        swipeState = 'not-initialized';
-    }, { passive: true });
-    slidesRef.addEventListener('touchmove', (e) => {
-        if (swipeState === 'horizontal') {
-            // Already determined this is a horizontal swipe
-            e.preventDefault();
-            e.stopPropagation();
-            TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
-        }
-        else if (swipeState === 'vertical') {
-            // Already determined this is a vertical swipe
-            return;
-        }
-        const touchCurrentX = e.changedTouches[0].screenX;
-        const touchCurrentY = e.changedTouches[0].screenY;
-        const diffX = Math.abs(touchCurrentX - touchStartX);
-        const diffY = Math.abs(touchCurrentY - touchStartY);
-        // Determine direction on first significant movement
-        if (diffX > 10 || diffY > 10) {
-            if (diffX > diffY) {
-                // Horizontal swipe - block vertical scroll
-                swipeState = 'horizontal';
-                e.preventDefault();
-                e.stopPropagation();
-                TouchSynchronizer.touchMovePropagationBlocked(slidesRef);
-                touchMoveX = touchCurrentX - touchStartX;
-                const basePosition = -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex);
-                swipeTransition = basePosition + touchMoveX;
-            }
-            else {
-                // Vertical swipe - allow parent to handle
-                swipeState = 'vertical';
-            }
-        }
-    }, { passive: false });
-    slidesRef.addEventListener('touchend', (e) => {
-        const reset = () => {
-            swipeTransition = 0;
-            touchMoveX = 0;
-        };
-        // Check if this is a horizontal swipe
-        if (swipeState !== 'horizontal') {
-            reset();
-            return;
-        }
-        // This is a horizontal swipe - block propagation
-        e.stopPropagation();
-        e.preventDefault();
-        slidesRef.classList.toggle('animate', true);
-        TouchSynchronizer.touchEndPropatationBlocked(slidesRef);
-        TouchSynchronizer.touchEnded(slidesRef);
-        const isFastSwipe = Date.now() - touchStartTime < 300;
-        if (!isFastSwipe && Math.abs(touchMoveX) < sliderWidth / 6) {
-            reset();
-            return;
-        }
-        if (touchMoveX < 0) {
-            loadNext();
-        }
-        else {
-            loadPrevious();
-        }
-        reset();
-    }, { passive: false });
-    slidesRef.addEventListener('transitionend', (e) => {
-        e.stopPropagation();
-        if (animationIndex !== null && animationIndex > items.length - 1) {
-            slidesRef.classList.toggle('animate', false);
-            animationIndex = null;
-        }
-        if (animationIndex !== null && animationIndex === 0) {
-            slidesRef.classList.toggle('animate', false);
-            animationIndex = null;
-        }
-        setTimeout(() => {
-            slidesRef?.classList.toggle('animate', true);
-        });
-    });
-    if (autoSlideMs) {
-        interval = window.setInterval(() => {
-            if (items?.length <= 1) {
-                return;
-            }
-            loadNext();
-        }, autoSlideMs);
-    }
-    sliderWidth = slidesRef.getBoundingClientRect().width;
-    let resizeTimeout = 0;
-    resizeObserver = new ResizeObserver(() => {
-        if (runningInBrowser() && resizeTimeout) {
-            window.clearTimeout(resizeTimeout);
-        }
-        slidesRef.classList.toggle('animate', false);
-        sliderWidth = slidesRef.getBoundingClientRect().width;
-        resizeTimeout = window.setTimeout(() => {
-            slidesRef?.classList.toggle('animate', true);
-        });
-    });
-    resizeObserver.observe(slidesRef);
-    if (runningInBrowser()) {
-        window.addEventListener(`keydown`, onKeyPress);
-    }
-});
-onDestroy(() => {
-    if (resizeObserver) {
-        resizeObserver.disconnect();
-    }
-    if (runningInBrowser()) {
-        window.removeEventListener('keydown', onKeyPress);
-        if (interval) {
-            window.clearInterval(interval);
-        }
-    }
-});
-const onKeyPress = Utils.throttle((e) => {
-    if (e.key === 'ArrowLeft') {
-        loadPrevious();
-    }
-    if (e.key === 'ArrowRight') {
-        loadNext();
-    }
-}, animationDuration);
-const notifyIndexChanged = () => {
-    on?.indexChanged?.(selectedIndex);
-};
-notifyIndexChanged();
-const setIndex = (index) => {
-    if (index < 0) {
-        animationIndex = 0;
-        selectedIndex = items.length - 1;
-    }
-    else if (index > items.length - 1) {
-        animationIndex = index + 1;
-        selectedIndex = 0;
-    }
-    else {
-        animationIndex = null;
-        selectedIndex = index;
-    }
-    setTimeout(() => {
-        notifyIndexChanged();
-    }, 600);
-};
-const loadPrevious = Utils.throttle(() => {
-    setIndex(--selectedIndex);
-}, animationDuration);
-const loadNext = Utils.throttle(() => {
-    setIndex(++selectedIndex);
-}, animationDuration);
-$effect(() => {
-    if (previousItems && items !== previousItems) {
-        setIndex(0);
-    }
-    previousItems = items;
-});
-const styles = $derived.by(() => {
-    const values = [
-        `transform: translateX(${swipeTransition || (items.length > 1 ? -sliderWidth * (animationIndex === null ? selectedIndex + 1 : animationIndex) : 0)}px)`,
-        `--_slider-horizontal--animation: ${animationDuration}ms ease-out transform`
-    ];
-    return values.join(';');
-});
-const showClassicArrowsAndDots = $derived([SliderMode.ArrowsAndDots, SliderMode.ArrowsOnly, SliderMode.DotsOnly, SliderMode.DotsOnlyBelow].includes(sliderMode));
-</script>
-
-<div
-  class="slider"
-  class:slider--arrows-and-dots={sliderMode === SliderMode.ArrowsAndDots}
-  class:slider--arrows-only={sliderMode === SliderMode.ArrowsOnly}
-  class:slider--dots-only={sliderMode === SliderMode.DotsOnly}
-  class:slider--dots-only-below={sliderMode === SliderMode.DotsOnlyBelow}
-  class:slider--arrows-with-counts={sliderMode === SliderMode.ArrowsWithCounts}>
-  <div class="slider__slides" bind:this={slidesRef} style={styles}>
-    {#if items.length > 1}
-      <div class="slider__slide">
-        {#if children}
-          {@render children(items[items.length - 1])}
-        {/if}
-      </div>
-    {/if}
-    {#each items as item (item)}
-      <div class="slider__slide">
-        {#if children}
-          {@render children(item)}
-        {/if}
-      </div>
-    {/each}
-    {#if items.length > 1}
-      <div class="slider__slide" data-after>
-        {#if children}
-          {@render children(items[0])}
-        {/if}
-      </div>
-    {/if}
-  </div>
-
-  {#if items.length > 1}
-    {#if showClassicArrowsAndDots}
-      <button type="button" class="slider__navigation-button slider__navigation-button--prev" onclick={loadPrevious} aria-label="none">
-        <Icon src={IconChevronLeft} />
-      </button>
-      <button type="button" class="slider__navigation-button slider__navigation-button--next" onclick={loadNext} aria-label="none">
-        <Icon src={IconChevronRight} />
-      </button>
-      <div class="slider__dots">
-        {#each itemIndices as index (index)}
-          <div class="slider__dot" onclick={() => setIndex(index)} onkeydown={() => ({})} role="none">
-            {@html HtmlHelper.sanitizeHtml(index === selectedIndex ? dotsConfig.activeHtml : dotsConfig.inactiveHtml)}
-          </div>
-        {/each}
-      </div>
-    {:else if sliderMode === SliderMode.ArrowsWithCounts}
-      <div class="slider__arrows-with-counts">
-        <button type="button" class="slider__counts-navigation-button" onclick={loadPrevious} aria-label="none">
-          <Icon src={IconChevronLeft} />
-        </button>
-        <div class="slider__counts">{localization.nOfM(selectedIndex + 1, items.length)}</div>
-        <button type="button" class="slider__counts-navigation-button" onclick={loadNext} aria-label="none">
-          <Icon src={IconChevronRight} />
-        </button>
-      </div>
-    {/if}
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.slider {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.slider__slides {
-  display: flex;
-  height: 100%;
-}
-.slider__slides:global(.animate) {
-  transition: var(--_slider-horizontal--animation);
-}
-.slider__slide {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-.slider__dots {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  z-index: 1;
-  gap: 1em;
-  flex-wrap: wrap;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0.625rem;
-  font-size: var(--slider-dots-size-internal, var(--slider-dots-size, 0.75rem));
-}
-.slider__dot {
-  cursor: pointer;
-  color: var(--slider-dots-color, white);
-}
-.slider__navigation-button {
-  font-size: 0.75rem;
-  width: 1.875rem;
-  height: 1.875rem;
-  background-color: var(--sc-mc-color--button-secondary);
-  border-radius: 50%;
-  text-align: center;
-  color: var(--sc-mc-color--text-white);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  visibility: hidden;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .slider__navigation-button {
-    visibility: visible;
-  }
-}
-.slider__navigation-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.slider__navigation-button--prev {
-  left: 0.9375rem;
-}
-.slider__navigation-button--next {
-  right: 0.9375rem;
-}
-.slider__arrows-with-counts {
-  position: absolute;
-  bottom: 0.75rem;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 1.625rem;
-  z-index: 1;
-}
-.slider__counts {
-  font-size: 0.9375rem;
-  font-weight: 300;
-  width: 5.625rem;
-  text-align: center;
-  color: var(--sc-mc-color--text-white);
-  text-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);
-}
-.slider__counts-navigation-button {
-  font-size: 0.75rem;
-  width: 1.625rem;
-  height: 1.625rem;
-  background-color: var(--sc-mc-color--button-secondary);
-  border-radius: 50%;
-  text-align: center;
-  color: var(--sc-mc-color--text-white);
-  visibility: hidden;
-}
-.slider__counts-navigation-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-.slider__counts-navigation-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .slider__counts-navigation-button {
-    visibility: visible;
-  }
-}
-.slider:hover .slider__navigation-button {
-  visibility: visible;
-}
-.slider:hover .slider__counts-navigation-button {
-  visibility: visible;
-}
-.slider--arrows-only .slider__dots {
-  display: none;
-}
-.slider--dots-only .slider__navigation-button {
-  display: none;
-}
-.slider--dots-only .slider__dots {
-  --slider-dots-size-internal: var(--slider-dots-size, 1rem);
-}
-.slider--dots-only-below .slider__navigation-button {
-  display: none;
-}
-.slider--dots-only-below .slider__dots {
-  --slider-dots-size-internal: var(--slider-dots-size, 1rem);
-  position: static;
-  margin-top: 1rem;
-}
-.slider {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .slider__navigation-button {
-    visibility: visible;
-  }
-  .slider__counts-navigation-button {
-    visibility: visible;
-  }
-}</style>

package/dist/ui/player/slider-horizontal/cmp.slider.svelte.d.ts

@@ -1,31 +0,0 @@
-import type { Locale } from '../../../core/locale';
-import { type SliderDotsConfig, SliderMode } from './types';
-import { type Snippet } from 'svelte';
-declare class __sveltets_Render<T> {
-    props(): {
-        items: T[];
-        initialIndex: number;
-        sliderMode?: SliderMode;
-        dotsConfig?: SliderDotsConfig;
-        autoSlideMs?: number;
-        locale: Locale;
-        on?: {
-            indexChanged: (index: number) => void;
-        } | undefined;
-        children: Snippet<[T]>;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Cmp: $$IsomorphicComponent;
-type Cmp<T> = InstanceType<typeof Cmp<T>>;
-export default Cmp;

package/dist/ui/player/slider-horizontal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as SliderHorizontal } from './cmp.slider.svelte';
-export { SliderMode, type SliderDotsConfig } from './types';

package/dist/ui/player/slider-horizontal/index.js

@@ -1,2 +0,0 @@
-export { default as SliderHorizontal } from './cmp.slider.svelte';
-export { SliderMode } from './types';

package/dist/ui/player/slider-horizontal/slider-localization.d.ts

@@ -1,5 +0,0 @@
-import { type Locale } from '../../../core/locale';
-export declare class SliderLocalization {
-    nOfM: (n: number, m: number) => string;
-    constructor(locale: Locale);
-}

package/dist/ui/player/slider-horizontal/slider-localization.js

@@ -1,13 +0,0 @@
-import {} from '../../../core/locale';
-export class SliderLocalization {
-    nOfM;
-    constructor(locale) {
-        this.nOfM = loc.nOfM[locale];
-    }
-}
-const loc = {
-    nOfM: {
-        en: (n, m) => `${n} of ${m}`,
-        no: (n, m) => `${n} av ${m}`
-    }
-};

package/dist/ui/player/slider-horizontal/types.d.ts

@@ -1,11 +0,0 @@
-export declare enum SliderMode {
-    ArrowsAndDots = 0,
-    ArrowsOnly = 1,
-    DotsOnly = 2,
-    DotsOnlyBelow = 3,
-    ArrowsWithCounts = 4
-}
-export type SliderDotsConfig = {
-    activeHtml: string;
-    inactiveHtml: string;
-};

package/dist/ui/player/slider-horizontal/types.js

@@ -1,8 +0,0 @@
-export var SliderMode;
-(function (SliderMode) {
-    SliderMode[SliderMode["ArrowsAndDots"] = 0] = "ArrowsAndDots";
-    SliderMode[SliderMode["ArrowsOnly"] = 1] = "ArrowsOnly";
-    SliderMode[SliderMode["DotsOnly"] = 2] = "DotsOnly";
-    SliderMode[SliderMode["DotsOnlyBelow"] = 3] = "DotsOnlyBelow";
-    SliderMode[SliderMode["ArrowsWithCounts"] = 4] = "ArrowsWithCounts";
-})(SliderMode || (SliderMode = {}));

package/dist/ui/player/utils/index.d.ts

@@ -1 +0,0 @@
-export { TouchSynchronizer } from './touch-synchronizer';

package/dist/ui/player/utils/index.js

@@ -1 +0,0 @@
-export { TouchSynchronizer } from './touch-synchronizer';

package/dist/ui/player/utils/touch-synchronizer.d.ts

@@ -1,7 +0,0 @@
-export declare class TouchSynchronizer {
-    private static listeners;
-    static touchStarted: (ref: HTMLElement) => void;
-    static touchMovePropagationBlocked: (ref: HTMLElement) => void;
-    static touchEndPropatationBlocked: (ref: HTMLElement) => void;
-    static touchEnded: (ref: HTMLElement) => void;
-}

package/dist/ui/player/utils/touch-synchronizer.js

@@ -1,21 +0,0 @@
-export class TouchSynchronizer {
-    static listeners = [];
-    static touchStarted = (ref) => {
-        TouchSynchronizer.listeners.push(ref);
-    };
-    static touchMovePropagationBlocked = (ref) => {
-        const otherListeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
-        otherListeners.forEach((r) => {
-            r.dispatchEvent(new TouchEvent('touchend', { cancelable: false }));
-        });
-    };
-    static touchEndPropatationBlocked = (ref) => {
-        const otherListeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
-        otherListeners.forEach((r) => {
-            r.dispatchEvent(new TouchEvent('touchend', { cancelable: false }));
-        });
-    };
-    static touchEnded = (ref) => {
-        TouchSynchronizer.listeners = TouchSynchronizer.listeners.filter((r) => r !== ref);
-    };
-}

package/dist/ui/progress/cmp.progress.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">let { value } = $props();
-</script>
-
-<div class="progress">
-  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style="width: {`${100 * (value <= 1 ? value : 1)}%`}">
-    &nbsp;
-  </span>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.progress {
-  --_progress--height: var(--progress--height, 0.25em);
-  --_progress--back-color: var(--progress--back-color, #b0b0b0);
-  --_progress--front-color: var(--progress--front-color, #ffffff);
-  --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
-  --_progress--border-radius: var(--progress--border-radius, 0);
-  width: 100%;
-  background: var(--_progress--back-color);
-  height: var(--_progress--height);
-  box-shadow: var(--_progress--box-shadow);
-  border-radius: var(--_progress--border-radius);
-}
-.progress__value {
-  background: var(--_progress--front-color);
-  display: inline-block;
-  height: 100%;
-}
-.progress__value--animated {
-  transition: width 600ms;
-}</style>

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

@@ -1,6 +0,0 @@
-type Props = {
-    value: number;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1 +0,0 @@
-export { default as Progress } from './cmp.progress.svelte';

package/dist/ui/progress/index.js

@@ -1 +0,0 @@
-export { default as Progress } from './cmp.progress.svelte';

package/dist/ui/proportional-container/cmp.proportional-container.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">let { ratio, children } = $props();
-export {};
-</script>
-
-<div class="proportional-container" style={ratio ? `--proportional-container--ratio: ${ratio};` : undefined}>
-  <div class="proportional-container__placer">
-    {@render children?.()}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.proportional-container {
-  --_proportional-container--ratio: var(--proportional-container--ratio, 1);
-  --_proportional-container--height: var(--proportional-container--height, auto);
-  --_proportional-container--width: var(--proportional-container--width, 100%);
-  width: var(--_proportional-container--width);
-  max-width: 100%;
-  height: var(--_proportional-container--height);
-  max-height: 100%;
-  aspect-ratio: var(--_proportional-container--ratio);
-  position: relative;
-}
-.proportional-container__placer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}</style>

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    ratio?: number | undefined;
-    children?: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/proportional-container/index.d.ts

@@ -1 +0,0 @@
-export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/proportional-container/index.js

@@ -1 +0,0 @@
-export { default as ProportionalContainer } from './cmp.proportional-container.svelte';