@streamscloud/embeddable 1.1.2

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

@@ -0,0 +1,84 @@
+<script lang="ts">import { onMount } from 'svelte';
+let { type = 'button', disabled = false, autofocus = false, on, children } = $props();
+let buttonRef;
+onMount(() => {
+    if (autofocus) {
+        buttonRef.focus();
+    }
+});
+</script>
+
+<button class="button" disabled={disabled} type={type} bind:this={buttonRef} onclick={(e) => on?.click?.(e)}>
+  <span class="button__text">
+    {@render children()}
+  </span>
+</button>
+
+<style>@keyframes fadeIn {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.button {
+  --_button--font--size: var(--button--font--size, 1rem);
+  --_button--font--color: var(--button--font--color, black);
+  --_button--font-weight: var(--button--font-weight, 400);
+  --_button--text--font-size: var(--button--text--font-size, 0.75em);
+  --_button--icon--font-size: var(--button--icon--font-size, 1em);
+  --_button--justify-content: var(--button--justify-content, center);
+  --_button--background: var(--button--background, white);
+  --_button--background--hover: var(--button--background--hover, var(--_button--background));
+  --_button--background--active: var(--button--background--active, var(--_button--background));
+  --_button--background--disabled: var(--button--background--disabled, var(--_button--background));
+  --_button--border: var(--button--border, none);
+  --_button--border-radius: var(--button--border-radius, 0.25em);
+  --_button--padding--vertical: var(--button--padding--vertical, 0);
+  --_button--padding--horizontal: var(--button--padding--horizontal, 1em);
+  --_button--min-width: var(--button--min-width, 0);
+  --_button--height: var(--button--height, 2em);
+  --_button--box-shadow: var(--button--box-shadow, none);
+  font-size: var(--_button--font--size);
+  font-weight: var(--_button--font-weight);
+  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
+  color: var(--_button--font--color);
+  background: var(--_button--background);
+  box-shadow: var(--_button--box-shadow);
+  border: var(--_button--border);
+  border-radius: var(--_button--border-radius);
+  min-width: var(--_button--min-width);
+  max-width: 100%;
+  height: var(--_button--height);
+  outline: none;
+  display: inline-flex;
+  flex: 1;
+  justify-content: var(--_button--justify-content);
+  align-items: center;
+  vertical-align: middle;
+  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s, filter linear 0.2s;
+  white-space: nowrap;
+}
+.button__text {
+  width: 100%;
+  text-align: center;
+  font-size: var(--_button--text--font-size);
+  --icon-text--global--font-size: 1rem;
+  --icon-text--text--font-size: var(--_button--text--font-size);
+  --icon-text--icon--font-size: var(--_button--icon--font-size);
+  --icon-text--justify-content: var(--_button--justify-content);
+}
+.button:not(:disabled):hover {
+  background: var(--_button--background--hover);
+}
+.button:not(:disabled):active {
+  background: var(--_button--background--active);
+}
+.button:disabled {
+  cursor: default;
+  background: var(--_button--background--disabled);
+}</style>

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

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    autofocus?: boolean;
+    on?: {
+        click?: (e: MouseEvent) => void;
+    };
+    children: Snippet;
+};
+declare const ButtonBase: import("svelte").Component<Props, {}, "">;
+type ButtonBase = ReturnType<typeof ButtonBase>;
+export default ButtonBase;

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;