@streamscloud/embeddable 15.1.0 → 16.0.0

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

@@ -1,64 +0,0 @@
-<script lang="ts">import Image from './cmp.image.svelte';
-let { src, alt = '', noBorders = false, on } = $props();
-</script>
-
-<div class="rounded-img" class:rounded-img--stub={!src} class:rounded-img--clear={noBorders}>
-  <div class="rounded-img__placer" onclick={() => on?.click()} onkeydown={() => ({})} role="none">
-    <Image src={src} alt={alt} showStubOnError={true} />
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.rounded-img {
-  --image--rounded--size_: var(--image--rounded--size, 100%);
-  --image--rounded--width_: var(--image--rounded--width, var(--image--rounded--size_));
-  --image--rounded--height_: var(--image--rounded--height, var(--image--rounded--size_));
-  --image--rounded--image--border-radius_: var(
-    --image--rounded--image--border-radius,
-    calc(var(--image--rounded--inner--border-radius_) - var(--image--rounded--inner--border-width_))
-  );
-  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, var(--sc-mc-color--bg-card));
-  --image--rounded--inner--border-radius_: var(
-    --image--rounded--inner--border-radius,
-    calc(var(--image--rounded--outer--border-radius_) - var(--image--rounded--outer--border-width_))
-  );
-  --image--rounded--inner--border-width_: var(--image--rounded--inner--border-width, 4px);
-  --image--rounded--outer--border-color_: var(--image--rounded--outer--border-color, var(--sc-mc-color--bg-card));
-  --image--rounded--outer--border-radius_: var(--image--rounded--outer--border-radius, 0);
-  --image--rounded--outer--border-width_: var(--image--rounded--outer--border-width, 2px);
-  --image--rounded--stub--background_: var(--image--rounded--stub--background, var(--sc-mc-color--bg-image));
-  width: var(--image--rounded--width_);
-  height: var(--image--rounded--height_);
-  border-radius: var(--image--rounded--outer--border-radius_);
-  padding: var(--image--rounded--outer--border-width_);
-  background: var(--image--rounded--outer--border-color_);
-  overflow: hidden;
-}
-.rounded-img--stub {
-  background: var(--image--rounded--stub--background_);
-}
-.rounded-img--clear {
-  --image--rounded--outer--border-width_: 0;
-  --image--rounded--inner--border-width_: 0;
-  --image--rounded--outer--border-color_: transparent;
-  --image--rounded--inner--border-color_: transparent;
-}
-.rounded-img__placer {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--image--rounded--inner--border-radius_);
-  padding: var(--image--rounded--inner--border-width_);
-  background: var(--image--rounded--inner--border-color_);
-  overflow: hidden;
-  --image--border-radius: var(--image--rounded--image--border-radius_);
-}</style>

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

@@ -1,11 +0,0 @@
-type Props = {
-    src: string | null | undefined;
-    alt?: string;
-    noBorders?: boolean;
-    on?: {
-        click: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,31 +0,0 @@
-<script lang="ts">import { Icon } from '../icon';
-import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
-</script>
-
-<div class="image-stub">
-  <Icon src={IconImage} />
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.image-stub {
-  --_image-stub--color: var(--image-stub--color, var(--sc-mc-color--bg-image));
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: var(--_image-stub--color);
-  border: 1px solid var(--_image-stub--color);
-  border-radius: 0.25rem;
-}</style>

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

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Cmp = InstanceType<typeof Cmp>;
-export default Cmp;

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

@@ -1,79 +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?raw';
-let { src, alt = '', showStubOnError = false, on, stub } = $props();
-let hasError = $state(false);
-const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
-const onLoad = () => {
-    hasError = false;
-    on?.load(true);
-};
-const onLoadError = () => {
-    hasError = true;
-    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, var(--sc-mc-color--bg-image));
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--_image--border-radius);
-  background: var(--_image--background);
-}
-.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,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>

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-auto.svelte

@@ -1,119 +0,0 @@
-<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
-import { LineClampUtils } from './line-clamp-utils';
-import { onDestroy, onMount } from 'svelte';
-let { locale, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(locale ?? 'en'));
-let parent;
-let element;
-let clampWrapperRef;
-let isTruncated = $state(false);
-let showingAllText = $state(false);
-let resizeObserver = null;
-const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
-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?.disconnect();
-    resizeObserver = null;
-});
-const clamp = () => {
-    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
-    if (showingAllText) {
-        setClampValue('unset');
-    }
-    else {
-        const clampValue = LineClampUtils.calculateClampValue(parent);
-        setClampValue(clampValue.toString());
-    }
-};
-const setClampValue = (value) => {
-    clampWrapperRef.style.setProperty('-webkit-line-clamp', value);
-};
-const toggleShowMore = () => {
-    showingAllText = !showingAllText;
-    clamp();
-};
-</script>
-
-<div
-  class="line-clamp"
-  class:line-clamp--clickable={canShowMore}
-  bind:this={element}
-  onclick={() => canShowMore && toggleShowMore()}
-  onmousedown={() => {}}
-  role="none">
-  <div class="line-clamp__wrapper-container">
-    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
-      {@render children()}
-    </div>
-    <!--Testing new concept-->
-    <!--{#if enableShowMore && isTruncated && !showingAllText}
-      <button type="button" class="line-clamp__show-more-button line-clamp__show-more-button&#45;&#45;inline" onclick={toggleShowMore}>
-        {localization.showMore}
-      </button>
-    {/if}-->
-  </div>
-
-  {#if enableShowMore && showingAllText}
-    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
-      {localization.showLess}
-    </button>
-  {/if}
-</div>
-
-<style>.line-clamp {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.line-clamp--clickable {
-  cursor: pointer;
-  pointer-events: auto;
-}
-.line-clamp__wrapper-container {
-  position: relative;
-}
-.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 {
-  font-size: 0.9em;
-  font-style: italic;
-  pointer-events: auto;
-  /*Testing new concept*/
-  /*&--inline {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding-left: 1em;
-
-    backdrop-filter:
-      brightness(2)
-      contrast(0.3)
-      saturate(0);
-
-    &::after {
-      content: '...';
-      position: absolute;
-      left: 0;
-    }
-  }*/
-}
-.line-clamp__show-more-button:not(.line-clamp__show-more-button--inline) {
-  margin-top: 0.5em;
-}</style>

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

@@ -1,10 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type Snippet } from 'svelte';
-type Props = {
-    enableShowMore?: boolean;
-    locale?: Locale;
-    children: Snippet;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,84 +0,0 @@
-<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
-import {} from 'svelte';
-let { maxLines, locale, enableShowMore = false, children } = $props();
-const localization = $derived(new LineClampLocalization(locale));
-let isTruncated = $state(false);
-let showingAllText = $state(false);
-const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
-const toggleShowMore = () => {
-    showingAllText = !showingAllText;
-};
-const trackTruncatatedState = (node) => {
-    const resizeObserver = new ResizeObserver(() => {
-        isTruncated = node.scrollHeight > node.offsetHeight;
-    });
-    resizeObserver.observe(node);
-    return {
-        destroy() {
-            resizeObserver.disconnect();
-        }
-    };
-};
-const styles = $derived.by(() => {
-    const values = [];
-    if (maxLines) {
-        values.push(`--line-clamp--line-clamp: ${maxLines}`);
-    }
-    return values.join(';');
-});
-</script>
-
-<div
-  class="line-clamp"
-  class:line-clamp--clickable={canShowMore}
-  style={styles}
-  onclick={() => canShowMore && toggleShowMore()}
-  onmousedown={() => {}}
-  role="none">
-  <div class="line-clamp__wrapper-container">
-    <div class="line-clamp__wrapper" class:line-clamp__wrapper--showing-all={showingAllText} use:trackTruncatatedState>
-      {@render children()}
-    </div>
-  </div>
-
-  {#if enableShowMore && showingAllText}
-    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
-      {localization.showLess}
-    </button>
-  {/if}
-</div>
-
-<style>.line-clamp {
-  --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
-  --_line-clamp--line-clamp: var(--line-clamp--line-clamp, 0);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.line-clamp--clickable {
-  cursor: pointer;
-  pointer-events: auto;
-}
-.line-clamp__wrapper-container {
-  position: relative;
-}
-.line-clamp__wrapper {
-  display: -webkit-box;
-  overflow: hidden;
-  word-break: break-word;
-  white-space: var(--_line-clamp--white-space);
-  -webkit-box-orient: vertical;
-  line-clamp: var(--_line-clamp--line-clamp);
-  -webkit-line-clamp: var(--_line-clamp--line-clamp);
-  text-overflow: ellipsis;
-}
-.line-clamp__wrapper--showing-all {
-  --_line-clamp--line-clamp: none;
-}
-.line-clamp__show-more-button {
-  font-size: 0.9em;
-  font-style: italic;
-  pointer-events: auto;
-  margin-top: 0.5em;
-}</style>

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

@@ -1,11 +0,0 @@
-import type { Locale } from '../../core/locale';
-import { type Snippet } from 'svelte';
-type Props = {
-    maxLines?: number;
-    enableShowMore?: boolean;
-    locale: Locale;
-    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 { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

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

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

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

@@ -1,6 +0,0 @@
-import { type Locale } from '../../core/locale';
-export declare class LineClampLocalization {
-    showLess: string;
-    showMore: string;
-    constructor(locale: Locale);
-}

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

@@ -1,19 +0,0 @@
-import {} from '../../core/locale';
-export class LineClampLocalization {
-    showLess;
-    showMore;
-    constructor(locale) {
-        this.showLess = loc.showLess[locale];
-        this.showMore = loc.showMore[locale];
-    }
-}
-const loc = {
-    showLess: {
-        en: 'Show less',
-        no: 'Vis mindre'
-    },
-    showMore: {
-        en: 'Show more',
-        no: 'Vis mer'
-    }
-};

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;
-    }
-}