@streamscloud/embeddable 2.0.4 → 2.1.1

package/dist/ui/image/cmp.image.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-import { calculateImageState, ImageState } from './image-state';
-import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg';
-let { src, alt = '', showStubOnError = false, on, stub } = $props();
-let hasError = $state(false);
-const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
-const onLoad = () => {
-    hasError = false;
-    on === null || on === void 0 ? void 0 : on.load(true);
-};
-const onLoadError = () => {
-    hasError = true;
-    on === null || on === void 0 ? void 0 : on.load(false);
-};
-</script>
-
-<div class="image">
-  {#if !!src}
-    <img class="image__img" class:image__img--hidden={imageState !== ImageState.showImage} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
-  {/if}
-
-  {#if imageState === ImageState.showError}
-    <div class="image__load-error">
-      <Icon src={IconImageOff} />
-    </div>
-  {/if}
-
-  {#if imageState === ImageState.showStub}
-    {#if stub}
-      {@render stub()}
-    {:else}
-      <div class="image__img image__img--stub"></div>
-    {/if}
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.image {
-  --_image--background: var(--image--background, transparent);
-  --_image--border-radius: var(--image--border-radius, 0);
-  --_image--object-fit: var(--image--object-fit, cover);
-  --_image--stub--background: var(--image--stub--background, #e5e7eb);
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--_image--border-radius);
-  background: var(--_image--background);
-}
-:global([data-theme="dark"]) .image {
-  --_image--stub--background: var(--image--stub--background, #374151);
-}
-.image__img {
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  object-fit: var(--_image--object-fit);
-}
-.image__img--hidden {
-  display: none;
-}
-.image__img--stub {
-  background: var(--_image--stub--background);
-}
-.image__load-error {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.2em;
-  text-align: center;
-}</style>

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

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    src: string | null | undefined;
-    alt?: string;
-    showStubOnError?: boolean;
-    on?: {
-        load: (loadedSuccessfully: boolean) => void;
-    };
-    stub?: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/image/image-state.d.ts

@@ -1,6 +0,0 @@
-export declare enum ImageState {
-    showImage = 0,
-    showError = 1,
-    showStub = 2
-}
-export declare const calculateImageState: (src: string | null | undefined, isError: boolean, showStubOnError: boolean) => ImageState;

package/dist/ui/image/image-state.js

@@ -1,17 +0,0 @@
-export var ImageState;
-(function (ImageState) {
-    ImageState[ImageState["showImage"] = 0] = "showImage";
-    ImageState[ImageState["showError"] = 1] = "showError";
-    ImageState[ImageState["showStub"] = 2] = "showStub";
-})(ImageState || (ImageState = {}));
-export const calculateImageState = (src, isError, showStubOnError) => {
-    if (isError && !showStubOnError) {
-        return ImageState.showError;
-    }
-    else if (!src || (isError && showStubOnError)) {
-        return ImageState.showStub;
-    }
-    else {
-        return ImageState.showImage;
-    }
-};

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

@@ -1,4 +0,0 @@
-export { default as Image } from './cmp.image.svelte';
-export { default as ImageRound } from './cmp.image-round.svelte';
-export { default as ImageRounded } from './cmp.image-rounded.svelte';
-export { default as ImageStub } from './cmp.image-stub.svelte';

package/dist/ui/image/index.js

@@ -1,4 +0,0 @@
-export { default as Image } from './cmp.image.svelte';
-export { default as ImageRound } from './cmp.image-round.svelte';
-export { default as ImageRounded } from './cmp.image-rounded.svelte';
-export { default as ImageStub } from './cmp.image-stub.svelte';

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

@@ -1,84 +0,0 @@
-<script lang="ts">var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-    intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
-});
-const onLoadMore = () => __awaiter(void 0, void 0, void 0, function* () {
-    if (isLoading) {
-        return;
-    }
-    isLoading = true;
-    try {
-        yield 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>

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

@@ -1,11 +0,0 @@
-import { type Snippet } from 'svelte';
-type Props = {
-    loadMore: () => Promise<unknown>;
-    container?: HTMLElement | null;
-    actuationOffset?: string;
-    children: Snippet;
-    loading?: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/infinite-scrolling/index.d.ts

@@ -1 +0,0 @@
-export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/infinite-scrolling/index.js

@@ -1 +0,0 @@
-export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -1,89 +0,0 @@
-<script lang="ts">import { LineClampLocalization } from './line-clamp-localization.svelte';
-import { LineClampUtils } from './line-clamp-utils';
-import { onDestroy, onMount } from 'svelte';
-let { value = undefined, maxLines = 3, localization: localizationInit, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(localizationInit));
-let parent;
-let element;
-let clampWrapperRef;
-let isTruncated = $state(false);
-let showingAllText = $state(false);
-let resizeObserver = null;
-onMount(() => {
-    let parentElement = element.parentElement;
-    if (!parentElement || !('clientHeight' in parentElement)) {
-        console.error('Unsupported parent for multiline clamper');
-    }
-    else {
-        parent = parentElement;
-        clamp();
-        resizeObserver = new ResizeObserver(clamp);
-        resizeObserver.observe(parent);
-    }
-});
-onDestroy(() => {
-    resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-    resizeObserver = null;
-});
-const clamp = () => {
-    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
-    if (showingAllText) {
-        setClampValue('unset');
-    }
-    else {
-        let clampValue;
-        if (maxLines === 'auto') {
-            clampValue = LineClampUtils.calculateClampValue(parent);
-        }
-        else {
-            clampValue = maxLines;
-        }
-        setClampValue(clampValue.toString());
-    }
-};
-const setClampValue = (value) => {
-    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
-};
-const toggleShowMore = () => {
-    showingAllText = !showingAllText;
-    clamp();
-};
-</script>
-
-<div class="line-clamp" bind:this={element}>
-  <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
-    {#if children}
-      {@render children()}
-    {:else if value}
-      {@html value}
-    {/if}
-  </div>
-  {#if enableShowMore && (isTruncated || showingAllText)}
-    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
-      {#if showingAllText}
-        {localization.showLess}
-      {:else}
-        {localization.showMore}
-      {/if}
-    </button>
-  {/if}
-</div>
-
-<style>.line-clamp {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.line-clamp__wrapper {
-  display: -webkit-box;
-  overflow: hidden;
-  word-break: break-word;
-  white-space: var(--line-clamp-white-space, pre-line);
-  -webkit-box-orient: vertical;
-}
-.line-clamp__show-more-button {
-  margin-top: 0.5em;
-  font-size: 0.9em;
-  opacity: 0.8;
-}</style>

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -1,12 +0,0 @@
-import { type ILineClampLocalization } from './line-clamp-localization.svelte';
-import { type Snippet } from 'svelte';
-type Props = {
-    value?: string | null;
-    maxLines?: number | 'auto';
-    enableShowMore?: boolean;
-    localization?: ILineClampLocalization;
-    children?: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/line-clamp/index.d.ts

@@ -1,2 +0,0 @@
-export { default as LineClamp } from './cmp.line-clamp.svelte';
-export { type ILineClampLocalization } from './line-clamp-localization.svelte';

package/dist/ui/line-clamp/index.js

@@ -1,2 +0,0 @@
-export { default as LineClamp } from './cmp.line-clamp.svelte';
-export {} from './line-clamp-localization.svelte';

package/dist/ui/line-clamp/line-clamp-localization.svelte.d.ts

@@ -1,9 +0,0 @@
-export interface ILineClampLocalization {
-    showLess?: string;
-    showMore?: string;
-}
-export declare class LineClampLocalization {
-    showLess: string;
-    showMore: string;
-    constructor(init?: ILineClampLocalization);
-}

package/dist/ui/line-clamp/line-clamp-localization.svelte.js

@@ -1,15 +0,0 @@
-export class LineClampLocalization {
-    showLess = $state('Show less');
-    showMore = $state('Show more');
-    constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.showLess !== undefined) {
-            this.showLess = init.showLess;
-        }
-        if (init.showMore !== undefined) {
-            this.showMore = init.showMore;
-        }
-    }
-}

package/dist/ui/line-clamp/line-clamp-types.d.ts

@@ -1,3 +0,0 @@
-export type SupportedHtmlElement = HTMLElement & {
-    clientHeight: number;
-};

package/dist/ui/line-clamp/line-clamp-types.js

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

package/dist/ui/line-clamp/line-clamp-utils.d.ts

@@ -1,8 +0,0 @@
-import type { SupportedHtmlElement } from './line-clamp-types';
-export declare class LineClampUtils {
-    static calculateClampValue(elm: SupportedHtmlElement): number;
-    static getContentMaxHeight(elm: SupportedHtmlElement): number;
-    private static num;
-    private static getNumberStyleValue;
-    private static getContentLineHeight;
-}

package/dist/ui/line-clamp/line-clamp-utils.js

@@ -1,33 +0,0 @@
-export class LineClampUtils {
-    static calculateClampValue(elm) {
-        const maxHeight = LineClampUtils.getContentMaxHeight(elm);
-        const lineHeight = LineClampUtils.getContentLineHeight(elm);
-        return Math.floor(maxHeight / lineHeight);
-    }
-    static getContentMaxHeight(elm) {
-        const propsToExtractHeightOf = ['padding-top', 'padding-bottom', 'border-top-width', 'border-bottom-width'];
-        const valueToExclude = propsToExtractHeightOf.map((p) => LineClampUtils.getNumberStyleValue(elm, p)).reduce((prev, curr) => prev + curr);
-        const maxHeightStyle = LineClampUtils.getNumberStyleValue(elm, 'max-height');
-        const heightStyle = LineClampUtils.getNumberStyleValue(elm, 'height');
-        const elementHeight = maxHeightStyle || heightStyle || elm.clientHeight;
-        return elementHeight - valueToExclude;
-    }
-    static num(str) {
-        return parseFloat((str + '').replace(/[^\d.]/g, ''));
-    }
-    static getNumberStyleValue(elm, style) {
-        const styleValue = window.getComputedStyle(elm, null).getPropertyValue(style);
-        if (styleValue.indexOf('px') < 0) {
-            return 0;
-        }
-        return LineClampUtils.num(styleValue);
-    }
-    static getContentLineHeight(elm) {
-        const lineHeight = LineClampUtils.getNumberStyleValue(elm, 'line-height');
-        if (lineHeight) {
-            return lineHeight;
-        }
-        console.warn('line-clamp: line-height is not set, using font-size * 1.2', elm);
-        return LineClampUtils.getNumberStyleValue(elm, 'font-size') * 1.2;
-    }
-}

package/dist/ui/loading/cmp.loading.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">import { onMount } from 'svelte';
-let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
-let visible = $state(false);
-onMount(() => {
-    setTimeout(() => (visible = true), timeout);
-});
-</script>
-
-{#if visible && blocking}
-  <div class="loading-ring-overlay" class:loading-ring-overlay--fixed={positionFixedCenter}></div>
-{/if}
-
-<div
-  class="la-ball-clip-rotate"
-  class:la-ball-clip-rotate--absolute-center={positionAbsoluteCenter}
-  class:la-ball-clip-rotate--fixed-center={positionFixedCenter}
-  class:la-ball-clip-rotate--visible={visible}>
-  <div class="la-ball-clip-rotate__spin"></div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.loading-ring-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.3);
-  z-index: 999;
-}
-.loading-ring-overlay--fixed {
-  position: fixed;
-}
-
-.la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #144ab0);
-  color: var(--loading--spinner-color_);
-  display: block;
-  opacity: 0;
-  width: 2em;
-  height: 2em;
-  z-index: 10;
-}
-:global([data-theme="dark"]) .la-ball-clip-rotate {
-  --loading--spinner-color_: var(--loading--spinner-color, #5a8dec);
-}
-.la-ball-clip-rotate--visible {
-  opacity: 1;
-}
-.la-ball-clip-rotate--absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.la-ball-clip-rotate--fixed-center {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-}
-.la-ball-clip-rotate__spin {
-  position: relative;
-  box-sizing: border-box;
-  display: inline-block;
-  float: none;
-  border: 0.125em solid currentColor;
-  width: 2em;
-  height: 2em;
-  background: transparent;
-  border-bottom-color: transparent;
-  border-radius: 100%;
-  animation: ball-clip-rotate 0.75s linear infinite;
-}
-
-@keyframes ball-clip-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}</style>

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

@@ -1,9 +0,0 @@
-type Props = {
-    positionFixedCenter?: boolean;
-    positionAbsoluteCenter?: boolean;
-    blocking?: boolean;
-    timeout?: number;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

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

package/dist/ui/loading/index.js

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

package/dist/ui/media-item-view/cmp.media-item-view.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">import { MediaFormat, MediaType } from '../../core/enums';
-import { getMediaItemImageUrl } from '../../core/media';
-import { Image } from '../image';
-import { ProportionalContainer } from '../proportional-container';
-import { Video } from '../video';
-let { media, ratio = 0, inert = false, on } = $props();
-const handleClick = (e) => {
-    if (on === null || on === void 0 ? void 0 : on.click) {
-        e.stopPropagation();
-        on.click();
-    }
-};
-const parsedRatio = $derived.by(() => {
-    if (!ratio || ratio === 'fit-parent') {
-        return 0;
-    }
-    else {
-        if (typeof ratio !== 'number') {
-            return ratio === MediaFormat.W16H9 ? 16 / 9 : 4 / 3;
-        }
-        else {
-            return ratio;
-        }
-    }
-});
-</script>
-
-{#if media}
-  {#snippet mediaView()}
-    {#if media.type === MediaType.Image}
-      <div class="media-item-view__image" onclick={handleClick} onkeydown={() => {}} role="none">
-        <Image src={getMediaItemImageUrl(media)} />
-      </div>
-    {:else}
-      <div class="media-item-view__video" onclick={handleClick} onkeydown={() => {}} role="none">
-        <Video src={media.url} poster={media.thumbnailUrl} inert={!!on?.click} />
-      </div>
-    {/if}
-  {/snippet}
-
-  <div class="media-item-view" class:media-item-view--clickable={on?.click} class:media-item-view--fit-parent={ratio === 'fit-parent'} inert={inert}>
-    {#if parsedRatio}
-      <ProportionalContainer ratio={parsedRatio}>
-        {@render mediaView()}
-      </ProportionalContainer>
-    {:else}
-      {@render mediaView()}
-    {/if}
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.media-item-view {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  overflow: hidden;
-  position: relative;
-  --video--media-fit: cover;
-}
-.media-item-view--fit-parent {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-}
-.media-item-view__image {
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.media-item-view__video {
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-.media-item-view--clickable {
-  cursor: pointer;
-}</style>

package/dist/ui/media-item-view/cmp.media-item-view.svelte.d.ts

@@ -1,13 +0,0 @@
-import { MediaFormat } from '../../core/enums';
-import { type MediaItemModel } from '../../core/media';
-type Props = {
-    media: MediaItemModel | null;
-    ratio?: number | MediaFormat | 'fit-parent';
-    inert?: boolean;
-    on?: {
-        click?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/media-item-view/index.d.ts

@@ -1 +0,0 @@
-export { default as MediaItemView } from './cmp.media-item-view.svelte';

package/dist/ui/media-item-view/index.js

@@ -1 +0,0 @@
-export { default as MediaItemView } from './cmp.media-item-view.svelte';