@streamscloud/embeddable 2.1.1 → 2.1.3

package/dist/ui/button/resources/button-theme.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">import { ButtonStyle, ButtonSize } from './button-types';
+let { style = undefined, size = ButtonSize.Standard, children } = $props();
+</script>
+
+<div
+  class="button-theme"
+  class:button-theme--standard={style === ButtonStyle.Standard}
+  class:button-theme--primary={style === ButtonStyle.Primary}
+  class:button-theme--alert={style === ButtonStyle.Alert}
+  class:button-theme--white={style === ButtonStyle.White}
+  class:button-theme--gray={style === ButtonStyle.Gray}
+  class:button-theme--green={style === ButtonStyle.Green}
+  class:button-theme--black={style === ButtonStyle.Black}
+  class:button-theme--text-only={style === ButtonStyle.TextOnly}
+  class:button-theme--transparent-success={style === ButtonStyle.TransparentSuccess}
+  class:button-theme--transparent-primary={style === ButtonStyle.TransparentPrimary}
+  class:button-theme--transparent-gray={style === ButtonStyle.TransparentGray}
+  class:button-theme--transparent-white={style === ButtonStyle.TransparentWhite}
+  class:button-theme--transparent-warning={style === ButtonStyle.TransparentWarning}
+  class:button-theme--transparent-destructive={style === ButtonStyle.TransparentDestructive}
+  class:button-theme--size-standard={size === ButtonSize.Standard}
+  class:button-theme--size-large={size === ButtonSize.Large}
+  class:button-theme--size-small={size === ButtonSize.Small}>
+  {@render children()}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.button-theme {
+  /*Style*/
+  /*Size*/
+}
+.button-theme--primary {
+  --button--font--color: #ffffff;
+  --button--background: #144ab0;
+  --button--background--hover: #1244a0;
+  --button--background--active: #103a89;
+  --button--background--disabled: #91b3f3;
+}
+:global([data-theme="dark"]) .button-theme--primary {
+  --button--background--disabled: #91b3f3;
+}
+.button-theme--standard {
+  --button--font--color: #2e2e2e;
+  --button--background: #ffffff;
+  --button--background--hover: #f9fafb;
+  --button--background--active: #f3f4f6;
+  --button--background--disabled: #f3f4f6;
+  --button--border: 1px solid #e5e7eb;
+}
+:global([data-theme="dark"]) .button-theme--standard {
+  --button--font--color: #ffffff;
+  --button--background: #111827;
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+}
+:global([data-theme="dark"]) .button-theme--standard {
+  --button--border: 1px solid #4b5563;
+}
+.button-theme--white {
+  --button--font--color: #2e2e2e;
+  --button--background: #ffffff;
+  --button--background--hover: #f9fafb;
+  --button--background--active: #f3f4f6;
+  --button--background--disabled: #f3f4f6;
+}
+:global([data-theme="dark"]) .button-theme--white {
+  --button--font--color: #ffffff;
+  --button--background: #111827;
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+}
+.button-theme--gray {
+  --button--font--color: #2e2e2e;
+  --button--background: #f3f4f6;
+  --button--background--hover: #f9fafb;
+  --button--background--active: #f3f4f6;
+  --button--background--disabled: #f3f4f6;
+  --button--border: 1px solid #e5e7eb;
+}
+:global([data-theme="dark"]) .button-theme--gray {
+  --button--font--color: #ffffff;
+  --button--background: #374151;
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+  --button--border: 1px solid #4b5563;
+}
+.button-theme--green {
+  --button--font--color: #0cce6b;
+  --button--background: #066031;
+  --button--background--hover: #088745;
+  --button--background--active: #088745;
+  --button--background--disabled: #0aa454;
+  --button--border: 1px solid #066031;
+}
+:global([data-theme="dark"]) .button-theme--green {
+  --button--font--color: #ffffff;
+  --button--background: #374151;
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+  --button--border: 1px solid #4b5563;
+}
+.button-theme--black {
+  --button--font--color: #ffffff;
+  --button--background: #1c1c1c;
+  --button--background--hover: #1f2937;
+  --button--background--active: #374151;
+  --button--background--disabled: #374151;
+}
+:global([data-theme="dark"]) .button-theme--black {
+  --button--font--color: #2e2e2e;
+  --button--background: #fafafa;
+  --button--background--hover: #f3f4f6;
+  --button--background--active: #e5e7eb;
+  --button--background--disabled: #e5e7eb;
+}
+.button-theme--alert {
+  --button--font--color: #ffffff;
+  --button--background: #e71d36;
+  --button--background--hover: #d4172d;
+  --button--background--active: #b81427;
+  --button--background--disabled: #f6a7b1;
+}
+.button-theme--text-only {
+  --button--font--color: #2e2e2e;
+  --button--background: transparent;
+  --button--background--hover: #f3f4f6;
+  --button--background--active: #e5e7eb;
+  --button--border: none;
+}
+:global([data-theme="dark"]) .button-theme--text-only {
+  --button--font--color: #ffffff;
+  --button--background--hover: #111827;
+  --button--background--active: #1f2937;
+  --button--border: none;
+}
+.button-theme--transparent-success {
+  --button--font--color: #0cce6b;
+  --button--background: #ecfef4;
+  --button--border: 1px solid #0cce6b;
+  --button--background--active: #d4fce7;
+}
+.button-theme--transparent-primary {
+  --button--font--color: #144ab0;
+  --button--background: #f1f6fd;
+  --button--border: 1px solid #144ab0;
+  --button--background--active: #dfe9fb;
+}
+.button-theme--transparent-white {
+  --button--font--color: #ffffff;
+  --button--background: transparent;
+  --button--border: 1px solid #ffffff;
+}
+.button-theme--transparent-gray {
+  --button--font--color: #6b7280;
+  --button--background: #f9fafb;
+  --button--border: 1px solid #6b7280;
+  --button--background--active: #f3f4f6;
+}
+:global([data-theme="dark"]) .button-theme--transparent-gray {
+  --button--font--color: #e5e7eb;
+  --button--background: #1f2937;
+  --button--border: 1px solid #e5e7eb;
+  --button--background--active: #374151;
+}
+.button-theme--transparent-warning {
+  --button--font--color: #ffa62b;
+  --button--background: #fffbeb;
+  --button--border: 1px solid #ffa62b;
+  --button--background--active: #fef3c7;
+}
+.button-theme--transparent-destructive {
+  --button--font--color: #e71d36;
+  --button--background: #fef1f3;
+  --button--border: 1px solid #e71d36;
+  --button--background--active: #fde8ea;
+}
+.button-theme--size-standard {
+  --button--height: 2em;
+  --button--text--font-size: 0.75em;
+}
+.button-theme--size-large {
+  --button--height: 3em;
+  --button--font-weight: 500;
+  --icon--stroke-width: 0.4;
+  --button--text--font-size: 0.9375em;
+}
+.button-theme--size-small {
+  --button--height: 1.5em;
+  --button--text--font-size: 0.625em;
+}</style>

package/dist/ui/button/resources/button-theme.svelte.d.ts

@@ -0,0 +1,10 @@
+import { ButtonStyle, ButtonSize } from './button-types';
+import type { Snippet } from 'svelte';
+type Props = {
+    style?: ButtonStyle | null;
+    size?: ButtonSize | null;
+    children: Snippet;
+};
+declare const ButtonTheme: import("svelte").Component<Props, {}, "">;
+type ButtonTheme = ReturnType<typeof ButtonTheme>;
+export default ButtonTheme;

package/dist/ui/button/resources/button-types.d.ts

@@ -0,0 +1,21 @@
+export declare enum ButtonStyle {
+    Primary = "primary",
+    Standard = "standard",
+    Alert = "alert",
+    White = "white",
+    Gray = "gray",
+    Green = "green",
+    Black = "black",
+    TextOnly = "text-only",
+    TransparentSuccess = "transparent-success",
+    TransparentPrimary = "transparent-primary",
+    TransparentGray = "transparent-gray",
+    TransparentWhite = "transparent-white",
+    TransparentWarning = "transparent-warning",
+    TransparentDestructive = "transparent-destructive"
+}
+export declare enum ButtonSize {
+    Standard = "Standard",
+    Large = "Large",
+    Small = "Small"
+}

package/dist/ui/button/resources/button-types.js

@@ -0,0 +1,23 @@
+export var ButtonStyle;
+(function (ButtonStyle) {
+    ButtonStyle["Primary"] = "primary";
+    ButtonStyle["Standard"] = "standard";
+    ButtonStyle["Alert"] = "alert";
+    ButtonStyle["White"] = "white";
+    ButtonStyle["Gray"] = "gray";
+    ButtonStyle["Green"] = "green";
+    ButtonStyle["Black"] = "black";
+    ButtonStyle["TextOnly"] = "text-only";
+    ButtonStyle["TransparentSuccess"] = "transparent-success";
+    ButtonStyle["TransparentPrimary"] = "transparent-primary";
+    ButtonStyle["TransparentGray"] = "transparent-gray";
+    ButtonStyle["TransparentWhite"] = "transparent-white";
+    ButtonStyle["TransparentWarning"] = "transparent-warning";
+    ButtonStyle["TransparentDestructive"] = "transparent-destructive";
+})(ButtonStyle || (ButtonStyle = {}));
+export var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize["Standard"] = "Standard";
+    ButtonSize["Large"] = "Large";
+    ButtonSize["Small"] = "Small";
+})(ButtonSize || (ButtonSize = {}));

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">let { model: DynamicModel } = $props();
+export {};
+</script>
+
+<DynamicModel.component {...DynamicModel.props}></DynamicModel.component>

package/dist/ui/dynamic-component/cmp.dynamic-component.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DynamicComponentModel } from './types.svelte';
+type Props = {
+    model: DynamicComponentModel;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/dynamic-component/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DynamicComponent } from './cmp.dynamic-component.svelte';
+export { DynamicComponentModel } from './types.svelte';

package/dist/ui/dynamic-component/index.js

@@ -0,0 +1,2 @@
+export { default as DynamicComponent } from './cmp.dynamic-component.svelte';
+export { DynamicComponentModel } from './types.svelte';

package/dist/ui/dynamic-component/types.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Component } from 'svelte';
+export type DynamicComponentProps<TComponent extends Component> = TComponent extends Component<infer Props> ? Props : never;
+export declare class DynamicComponentModel<TComponent extends Component<any> = Component<any>> {
+    component: TComponent;
+    props: DynamicComponentProps<TComponent>;
+    constructor(init: {
+        component: TComponent;
+        props: DynamicComponentProps<TComponent>;
+    });
+    updateProps(props: Partial<DynamicComponentProps<TComponent>>): void;
+}

package/dist/ui/dynamic-component/types.svelte.js

@@ -0,0 +1,13 @@
+// Define the DynamicComponentModel class
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export class DynamicComponentModel {
+    component;
+    props = $state(null);
+    constructor(init) {
+        this.component = init.component;
+        this.props = init.props;
+    }
+    updateProps(props) {
+        this.props = { ...this.props, ...props };
+    }
+}

package/dist/ui/icon/cmp.icon.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">import { IconColor } from './types';
+import { inlineSvg } from '@svelte-put/inline-svg';
+let { src, color = null } = $props();
+let svgRef;
+$effect(() => {
+    if (svgRef && src) {
+        inlineSvg(svgRef, src);
+    }
+});
+const fillSvg = (node) => {
+    svgRef = node;
+    return inlineSvg(node, src);
+};
+</script>
+
+<div style="display: contents">
+  {#if src.startsWith('fa-')}
+    <i class="{src} font-awesome-icon-to-replace"></i>
+  {:else}
+    <svg
+      class="icon"
+      use:fillSvg
+      class:icon--white={color === IconColor.White}
+      class:icon--text={color === IconColor.Text}
+      class:icon--gray={color === IconColor.Gray}
+      class:icon--green={color === IconColor.Green}
+      class:icon--red={color === IconColor.Red}
+      class:icon--orange={color === IconColor.Orange}
+      class:icon--blue={color === IconColor.Blue}></svg>
+  {/if}
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.icon {
+  --_icon--color: var(--icon--color);
+  --_icon--size: var(--icon--size, 1.25em);
+  --_icon--stroke-width: var(--icon--stroke-width, 0);
+  display: inline-block;
+  color: inherit;
+  fill: var(--_icon--color, currentColor);
+  height: var(--_icon--size);
+  min-height: var(--_icon--size);
+  max-height: var(--_icon--size);
+  width: var(--_icon--size);
+  min-width: var(--_icon--size);
+  max-width: var(--_icon--size);
+}
+.icon--white {
+  --_icon--color: #ffffff;
+}
+:global([data-theme="dark"]) .icon--white {
+  --_icon--color: #ffffff;
+}
+.icon--text {
+  --_icon--color: #2e2e2e;
+}
+:global([data-theme="dark"]) .icon--text {
+  --_icon--color: #ffffff;
+}
+.icon--gray {
+  --_icon--color: #6b7280;
+}
+:global([data-theme="dark"]) .icon--gray {
+  --_icon--color: #6b7280;
+}
+.icon--green {
+  --_icon--color: #0cce6b;
+}
+:global([data-theme="dark"]) .icon--green {
+  --_icon--color: #0cce6b;
+}
+.icon--red {
+  --_icon--color: #e71d36;
+}
+:global([data-theme="dark"]) .icon--red {
+  --_icon--color: #e71d36;
+}
+.icon--orange {
+  --_icon--color: #ffa62b;
+}
+:global([data-theme="dark"]) .icon--orange {
+  --_icon--color: #ffa62b;
+}
+.icon--blue {
+  --_icon--color: #144ab0;
+}
+:global([data-theme="dark"]) .icon--blue {
+  --_icon--color: #91b3f3;
+}
+.icon :global(path) {
+  stroke: var(--_icon--color);
+  stroke-width: var(--_icon--stroke-width);
+}
+:global([data-theme="dark"]) .icon :global(path) {
+  stroke: var(--_icon--color);
+  stroke-width: var(--_icon--stroke-width);
+}
+
+.font-awesome-icon-to-replace {
+  font-size: 1em;
+  transform: scale(2);
+  color: red;
+}</style>

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

@@ -0,0 +1,8 @@
+import { IconColor } from './types';
+type Props = {
+    src: string;
+    color?: IconColor | null;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Icon } from './cmp.icon.svelte';
+export { IconColor } from './types';

package/dist/ui/icon/index.js

@@ -0,0 +1,2 @@
+export { default as Icon } from './cmp.icon.svelte';
+export { IconColor } from './types';

package/dist/ui/icon/types.d.ts

@@ -0,0 +1,9 @@
+export declare enum IconColor {
+    White = "white",
+    Blue = "blue",
+    Green = "green",
+    Gray = "gray",
+    Orange = "orange",
+    Red = "red",
+    Text = "text"
+}

package/dist/ui/icon/types.js

@@ -0,0 +1,10 @@
+export var IconColor;
+(function (IconColor) {
+    IconColor["White"] = "white";
+    IconColor["Blue"] = "blue";
+    IconColor["Green"] = "green";
+    IconColor["Gray"] = "gray";
+    IconColor["Orange"] = "orange";
+    IconColor["Red"] = "red";
+    IconColor["Text"] = "text";
+})(IconColor || (IconColor = {}));

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

@@ -0,0 +1,41 @@
+<script lang="ts">import RoundedImg from './cmp.image-rounded.svelte';
+let { src, alt = '', noBorders = false, on } = $props();
+</script>
+
+<div class="round-img">
+  <div class="round-img__placer">
+    <RoundedImg src={src} alt={alt} noBorders={noBorders} on={on} />
+  </div>
+</div>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.round-img {
+  --_image--round--size: var(--image--round--size, 100%);
+  --image--rounded--inner--border-radius: 50%;
+  --image--rounded--outer--border-radius: 50%;
+  --image--rounded--image--border-radius: 50%;
+  --image--rounded--width: 100%;
+  --image--rounded--height: 100%;
+  display: inline-block;
+  width: var(--_image--round--size);
+  position: relative;
+  padding-bottom: var(--_image--round--size);
+}
+.round-img__placer {
+  position: absolute;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}</style>

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

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

@@ -0,0 +1,71 @@
+<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, #ffffff);
+  --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,
+    linear-gradient(#144ab0, #dfe9fb)
+  );
+  --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, #f3f4f6);
+  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;
+}
+:global([data-theme="dark"]) .rounded-img {
+  --image--rounded--inner--border-color_: var(--image--rounded--inner--border-color, #000000);
+  --image--rounded--stub--background_: var(--image--rounded--stub--background, #374151);
+}
+.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

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

@@ -0,0 +1,34 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg';
+</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, #d1d5db);
+  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;
+}
+:global([data-theme="dark"]) .image-stub {
+  --_image-stub--color: var(--image-stub--color, #374151);
+}</style>

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

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