@streamscloud/embeddable 2.1.1 → 2.1.2

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

@@ -0,0 +1,189 @@
+$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

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

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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,120 @@
+<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

@@ -0,0 +1,18 @@
+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

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

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

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

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

@@ -0,0 +1,69 @@
+<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

@@ -0,0 +1,9 @@
+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

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

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

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

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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,39 @@
+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;
+        }
+    }
+}