@streamscloud/embeddable 2.1.0 → 2.1.1

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

@@ -1,189 +0,0 @@
-$input-placeholder-color: var(--input--placeholder--color, #c1c1c1);
-
-/*Default margins and paddings are removed*/
-a,
-article,
-aside,
-blockquote,
-body,
-dd,
-div,
-dl,
-dt,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-html,
-img,
-li,
-nav,
-ol,
-p,
-section,
-table,
-td,
-ul {
-  margin: 0;
-  padding: 0;
-}
-
-header,
-section,
-footer,
-aside,
-nav,
-article,
-figure,
-figcaption {
-  display: block;
-}
-/*Images are block-level*/
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-img {
-  border: none;
-  height: auto;
-}
-
-video {
-  outline: none;
-}
-
-/*Lists are unstyled*/
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-li {
-  list-style: inherit;
-}
-
-input {
-  vertical-align: middle;
-  min-width: 0;
-  &::placeholder {
-    color: $input-placeholder-color !important;
-  }
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-background-clip: text;
-  }
-  /* Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &[type='number'] {
-    -moz-appearance: textfield;
-  }
-}
-
-$scrollbar-width: thin;
-$scrollbar-color: var(--custom-scrollbar-color, #7d7d7d);
-$scrollbar-background-color: var(--custom-scrollbar-background, transparent);
-
-textarea {
-  vertical-align: top;
-  resize: vertical;
-  scrollbar-color: $scrollbar-color $scrollbar-background-color;
-  scrollbar-width: $scrollbar-width;
-  &::-webkit-scrollbar {
-    @if ($scrollbar-width == thin) {
-      width: 3px;
-      height: 3px;
-    } @else if ($scrollbar-width == none) {
-      width: 0;
-      height: 0;
-    } @else {
-      width: 6px;
-      height: 6px;
-    }
-
-    background: $custom-scrollbar-background;
-    visibility: hidden;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: $scrollbar-color;
-  }
-  &::placeholder {
-    color: $input-placeholder-color !important;
-  }
-}
-
-input:focus,
-textarea:focus {
-  outline: none;
-}
-
-button,
-input[type='submit'] {
-  cursor: pointer;
-  -webkit-appearance: none;
-  background-color: transparent;
-  padding: 0;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-  box-sizing: border-box;
-  &:disabled {
-    cursor: default;
-  }
-}
-
-details {
-  summary {
-    list-style: none;
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-  > * {
-    box-sizing: border-box;
-  }
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: color linear 0.2s;
-}
-
-html {
-  box-sizing: border-box;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-  border-width: 0;
-  border-style: solid;
-}

package/dist/ui/shadow-dom/index.d.ts

@@ -1 +0,0 @@
-export { ShadowHost } from './shadow-host';

package/dist/ui/shadow-dom/index.js

@@ -1 +0,0 @@
-export { ShadowHost } from './shadow-host';

package/dist/ui/shadow-dom/shadow-host.d.ts

@@ -1,11 +0,0 @@
-export declare class ShadowHost {
-    shadowRoot: ShadowRoot;
-    private host;
-    private callbacks;
-    constructor(init: {
-        onClosed: () => void;
-    });
-    attachToBody(): void;
-    remove(): void;
-    private handleEsc;
-}

package/dist/ui/shadow-dom/shadow-host.js

@@ -1,45 +0,0 @@
-import normalize from './_normalize.scss?raw';
-import reset from './_reset.scss?raw';
-export class ShadowHost {
-    shadowRoot;
-    host;
-    callbacks;
-    constructor(init) {
-        this.callbacks = {
-            onClosed: init.onClosed
-        };
-        const host = document.createElement('div');
-        host.style.all = 'unset';
-        host.style.position = 'fixed';
-        host.style.inset = '0';
-        host.style.zIndex = '9999';
-        host.style.lineHeight = '1.15';
-        host.style.fontFamily = 'system-ui, Avenir, Helvetica, Arial, sans-serif';
-        host.style.fontWeight = '400';
-        host.style.margin = '0';
-        host.style.boxSizing = 'border-box';
-        host.style.textAlign = 'initial';
-        document.addEventListener('keydown', this.handleEsc);
-        this.host = host;
-        this.shadowRoot = host.attachShadow({ mode: 'open' });
-        const styleElement = document.createElement('style');
-        styleElement.textContent = normalize + reset;
-        this.shadowRoot.appendChild(styleElement);
-    }
-    attachToBody() {
-        document.getElementsByTagName('html')[0].style.overflow = 'hidden';
-        document.body.appendChild(this.host);
-    }
-    remove() {
-        this.host.remove();
-        document.getElementsByTagName('html')[0].style.overflow = '';
-        document.removeEventListener('keydown', this.handleEsc);
-        this.callbacks.onClosed();
-    }
-    handleEsc = (event) => {
-        if (event.key === 'Escape' || event.key === 'Esc') {
-            // Remove the modal from the DOM, for example:
-            this.remove();
-        }
-    };
-}

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte

@@ -1,120 +0,0 @@
-<script lang="ts">let { ratio, children, left = undefined, right = undefined, on } = $props();
-let containerRef = $state.raw(null);
-let mainSceneRef = $state.raw(null);
-let leftSidebarRef = $state.raw(null);
-let rightSidebarRef = $state.raw(null);
-const notifyDimensionChanged = () => {
-    var _a;
-    if (!containerRef || !mainSceneRef || !leftSidebarRef || !rightSidebarRef) {
-        return;
-    }
-    (_a = on === null || on === void 0 ? void 0 : on.dimensionsChanged) === null || _a === void 0 ? void 0 : _a.call(on, {
-        mainSceneWidth: mainSceneRef.getBoundingClientRect().width,
-        leftSidebarWidth: leftSidebarRef.getBoundingClientRect().width,
-        rightSidebarWidth: rightSidebarRef.getBoundingClientRect().width,
-        totalWidth: containerRef.getBoundingClientRect().width
-    });
-};
-let computedMainSceneStyle = $state('width: 100%; height: 100%');
-const calcMainSceneSize = () => {
-    if (!containerRef) {
-        return;
-    }
-    const { width: parentWidth, height: parentHeight } = containerRef.getBoundingClientRect();
-    const parentAspectRatio = parentWidth / parentHeight;
-    let width;
-    let height;
-    let margin;
-    if (parentAspectRatio > ratio) {
-        // container is wider than main content
-        width = `${parentHeight * ratio}px`;
-        height = '100%';
-        margin = '0 auto';
-    }
-    else if (parentAspectRatio < ratio) {
-        // main content is wider than container
-        width = '100%';
-        height = `${parentWidth / ratio}px`;
-        margin = 'auto 0';
-    }
-    else {
-        // fallback case
-        width = '100%';
-        height = '100%';
-        margin = '0';
-    }
-    computedMainSceneStyle = `--_spotlight-layout--main--width: ${width}; --_spotlight-layout--main--height: ${height}; --_spotlight-layout--main--margin: ${margin};`;
-};
-$effect(() => {
-    let mainSceneSizeCalculationObserver = new ResizeObserver(calcMainSceneSize);
-    let dimentionsChangedObserver = new ResizeObserver(notifyDimensionChanged);
-    if (containerRef && mainSceneRef && leftSidebarRef && rightSidebarRef) {
-        mainSceneSizeCalculationObserver.observe(mainSceneRef);
-        dimentionsChangedObserver.observe(containerRef);
-        dimentionsChangedObserver.observe(mainSceneRef);
-        dimentionsChangedObserver.observe(leftSidebarRef);
-        dimentionsChangedObserver.observe(rightSidebarRef);
-    }
-    return () => {
-        mainSceneSizeCalculationObserver.disconnect();
-        dimentionsChangedObserver.disconnect();
-    };
-});
-export {};
-</script>
-
-<div class="spotlight-layout" bind:this={containerRef}>
-  <div class="spotlight-layout__sidebar" bind:this={leftSidebarRef}>
-    {#if left}
-      {@render left()}
-    {/if}
-  </div>
-
-  <div class="spotlight-layout__main-scene" bind:this={mainSceneRef} style={computedMainSceneStyle}>
-    {@render children()}
-  </div>
-  <div class="spotlight-layout__sidebar" bind:this={rightSidebarRef}>
-    {#if right}
-      {@render right()}
-    {/if}
-  </div>
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.spotlight-layout {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  container-type: inline-size;
-  display: flex;
-}
-.spotlight-layout__main-scene {
-  width: var(--_spotlight-layout--main--width);
-  height: var(--_spotlight-layout--main--height);
-  margin: var(--_spotlight-layout--main--margin);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
-  .spotlight-layout__main-scene {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
-}</style>

package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte.d.ts

@@ -1,18 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    ratio: number;
-    children: Snippet;
-    left?: Snippet;
-    right?: Snippet;
-    on?: {
-        dimensionsChanged?: (dimensions: {
-            mainSceneWidth: number;
-            leftSidebarWidth: number;
-            rightSidebarWidth: number;
-            totalWidth: number;
-        }) => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/spotlight-layout/index.d.ts

@@ -1 +0,0 @@
-export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

package/dist/ui/spotlight-layout/index.js

@@ -1 +0,0 @@
-export { default as SpotlightLayout } from './cmp.spotlight-layout.svelte';

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
-import { TimeAgoLocalization } from './time-ago-localization.svelte';
-import { onDestroy } from 'svelte';
-let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */, localization: localizationInit } = $props();
-const localization = $derived(new TimeAgoLocalization(localizationInit));
-let timeSpan = $state.raw(null);
-let timeoutId;
-onDestroy(() => {
-    disableTimeout();
-});
-const setRelativeTime = (date) => {
-    disableTimeout();
-    const dateVal = date ? DateHelper.toDate(date) : new Date();
-    const setupAbsDate = () => {
-        timeSpan = localization.at(dateVal.toLocaleString(localization.locale, dateVal.getFullYear() === new Date().getFullYear() ? DateFormatOptions.dateFormatWithoutYear : DateFormatOptions.dateFormat), dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
-    };
-    const diffSeconds = (+new Date() - +dateVal) / 1000;
-    if (diffSeconds > thresholdMinutes * 60) {
-        return setupAbsDate();
-    }
-    const secsInHour = 60 * 60; // 3600
-    const secsIn2Hours = secsInHour * 2; // 7200
-    const secsInDay = 60 * 60 * 24; // 86400
-    const secsIn2Days = secsInDay * 2; // 172800
-    let refreshIntervalSec;
-    if (diffSeconds < 60) {
-        timeSpan = localization.justNow;
-        refreshIntervalSec = 5;
-    }
-    else if (diffSeconds < 120) {
-        timeSpan = localization.aMinuteAgo;
-        refreshIntervalSec = 5;
-    }
-    else if (diffSeconds < secsInHour) {
-        timeSpan = localization.minutesAgo(Math.floor(diffSeconds / 60));
-        refreshIntervalSec = 60;
-    }
-    else if (diffSeconds < secsIn2Hours) {
-        timeSpan = localization.anHourAgo;
-        refreshIntervalSec = 60;
-    }
-    else if (diffSeconds < secsInDay) {
-        timeSpan = localization.hoursAgo(Math.floor(diffSeconds / secsInHour));
-        refreshIntervalSec = 3600;
-    }
-    else if (diffSeconds < secsIn2Days) {
-        timeSpan = localization.yesterday(dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
-        refreshIntervalSec = 3600;
-    }
-    else {
-        return setupAbsDate();
-    }
-    timeoutId = setTimeout(() => setRelativeTime(date), refreshIntervalSec * 1000);
-};
-$effect(() => {
-    setRelativeTime(date);
-});
-const disableTimeout = () => {
-    if (timeoutId) {
-        clearTimeout(timeoutId);
-    }
-};
-</script>
-
-<span>
-  {#if timeSpan}
-    {timeSpan}
-  {/if}
-</span>

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type ITimeAgoLocalization } from './time-ago-localization.svelte';
-type Props = {
-    date: Date | string | null;
-    thresholdMinutes?: number;
-    localization?: ITimeAgoLocalization;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/time-ago/index.d.ts

@@ -1,2 +0,0 @@
-export { default as TimeAgo } from './cmp.time-ago.svelte';
-export type { ITimeAgoLocalization } from './time-ago-localization.svelte';

package/dist/ui/time-ago/index.js

@@ -1 +0,0 @@
-export { default as TimeAgo } from './cmp.time-ago.svelte';

package/dist/ui/time-ago/time-ago-localization.svelte.d.ts

@@ -1,21 +0,0 @@
-export interface ITimeAgoLocalization {
-    locale?: string;
-    aMinuteAgo?: string;
-    anHourAgo?: string;
-    justNow?: string;
-    at?: (date: string, time: string) => string;
-    hoursAgo?: (hours: number) => string;
-    minutesAgo?: (minutes: number) => string;
-    yesterday?: (time: string) => string;
-}
-export declare class TimeAgoLocalization {
-    locale: string;
-    aMinuteAgo: string;
-    anHourAgo: string;
-    justNow: string;
-    at: (date: string, time: string) => string;
-    hoursAgo: (hours: number) => string;
-    minutesAgo: (minutes: number) => string;
-    yesterday: (time: string) => string;
-    constructor(init?: ITimeAgoLocalization);
-}

package/dist/ui/time-ago/time-ago-localization.svelte.js

@@ -1,39 +0,0 @@
-export class TimeAgoLocalization {
-    locale = $state('en-US');
-    aMinuteAgo = $state('a minute ago');
-    anHourAgo = $state('an hour ago');
-    justNow = $state('just now');
-    at = $state((date, time) => `${date} at ${time}`);
-    hoursAgo = $state((hours) => `${hours} hours ago`);
-    minutesAgo = $state((minutes) => `${minutes} minutes ago`);
-    yesterday = $state((time) => `esterday at ${time}`);
-    constructor(init) {
-        if (!init) {
-            return;
-        }
-        if (init.locale !== undefined) {
-            this.locale = init.locale;
-        }
-        if (init.aMinuteAgo !== undefined) {
-            this.aMinuteAgo = init.aMinuteAgo;
-        }
-        if (init.anHourAgo !== undefined) {
-            this.anHourAgo = init.anHourAgo;
-        }
-        if (init.justNow !== undefined) {
-            this.justNow = init.justNow;
-        }
-        if (init.at !== undefined) {
-            this.at = init.at;
-        }
-        if (init.hoursAgo !== undefined) {
-            this.hoursAgo = init.hoursAgo;
-        }
-        if (init.minutesAgo !== undefined) {
-            this.minutesAgo = init.minutesAgo;
-        }
-        if (init.yesterday !== undefined) {
-            this.yesterday = init.yesterday;
-        }
-    }
-}