@streamscloud/embeddable 15.1.0 → 16.0.0

package/dist/ui/card-actions/card-action-container.js

@@ -1,17 +0,0 @@
-export const cardActionContainer = (node) => {
-    const handleHover = () => {
-        node.style.setProperty('--card-actions--opacity', '1');
-    };
-    const handleHoverOut = () => {
-        node.style.setProperty('--card-actions--opacity', '');
-    };
-    node.addEventListener('mouseenter', handleHover);
-    node.addEventListener('mouseleave', handleHoverOut);
-    node.style.position = 'relative';
-    return {
-        destroy() {
-            node.removeEventListener('mouseenter', handleHover);
-            node.removeEventListener('mouseleave', handleHoverOut);
-        }
-    };
-};

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">import { Icon, IconColor } from '../icon';
-let { action, on } = $props();
-</script>
-
-<button
-  type="button"
-  class="card-action"
-  title={action.title ?? ''}
-  onclick={(e) => {
-    if (!action.propagateClickEvent) {
-      e.stopPropagation();
-    }
-
-    action.callback?.();
-    on?.click?.();
-  }}>
-  <Icon src={action.icon} color={action.iconColor ?? IconColor.Text} />
-</button>
-
-<style>.card-action {
-  --_card-action--padding: var(--card-action-padding, 0.3125em);
-  padding: var(--_card-action--padding);
-  transition: transform 0.3s;
-  line-height: 0;
-}
-.card-action:hover {
-  transform: scale(1.2);
-}</style>

package/dist/ui/card-actions/cmp.card-action.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { CardActionModel } from './types';
-type Props = {
-    action: CardActionModel;
-    on?: {
-        click?: () => void;
-    };
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/card-actions/cmp.card-actions.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">import { Dropdown } from '../dropdown';
-import CardAction from './cmp.card-action.svelte';
-import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-let { actions, dropdownPosition = 'bottom-start' } = $props();
-let toggleDropdown = $state.raw(null);
-let closeDropdown = () => {
-    if (toggleDropdown) {
-        toggleDropdown(false);
-    }
-};
-</script>
-
-{#if actions.length}
-  <div class="card-actions">
-    <Dropdown position={dropdownPosition} on={{ mounted: (v) => (toggleDropdown = v.toggleOpen) }}>
-      {#snippet trigger()}
-        <CardAction action={{ icon: IconMoreVertical, propagateClickEvent: true }} />
-      {/snippet}
-
-      <div class="card-actions__dropdown-content">
-        {#each actions as action (action)}
-          <CardAction action={action} on={{ click: closeDropdown }} />
-        {/each}
-      </div>
-    </Dropdown>
-  </div>
-{/if}
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.card-actions {
-  --_card-actions--opacity: var(--card-actions--opacity, 0);
-  --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
-  --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
-  --_card-actions--right-offset: var(--card-actions--right-offset, auto);
-  position: absolute;
-  top: var(--_card-actions--top-offset);
-  right: var(--_card-actions--right-offset);
-  left: var(--_card-actions--left-offset);
-  --icon--stroke-width: 0.3;
-  opacity: var(--_card-actions--opacity);
-  transition: opacity ease-in-out 0.4s;
-  display: flex;
-  background: var(--sc-mc-color--bg-card-action);
-  border-radius: 0.1875em;
-}
-.card-actions__dropdown-content {
-  padding: 0 0.3125em;
-  background: var(--sc-mc-color--bg-card-action);
-}
-@media (any-hover: none) {
-  .card-actions {
-    opacity: 1;
-  }
-}
-
-:global(.card-actions-container) {
-  position: relative;
-}
-:global(.card-actions-container):hover .card-actions {
-  opacity: 1;
-}</style>

package/dist/ui/card-actions/cmp.card-actions.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type DropdownPosition } from '../dropdown';
-import type { CardActionModel } from './types';
-type Props = {
-    actions: CardActionModel[];
-    dropdownPosition?: DropdownPosition;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/card-actions/index.d.ts

@@ -1,4 +0,0 @@
-export { default as CardActions } from './cmp.card-actions.svelte';
-export { default as CardAction } from './cmp.card-action.svelte';
-export { cardActionContainer } from './card-action-container';
-export type { CardActionModel } from './types';

package/dist/ui/card-actions/index.js

@@ -1,3 +0,0 @@
-export { default as CardActions } from './cmp.card-actions.svelte';
-export { default as CardAction } from './cmp.card-action.svelte';
-export { cardActionContainer } from './card-action-container';

package/dist/ui/card-actions/types.d.ts

@@ -1,9 +0,0 @@
-import { IconColor } from '../icon';
-export type CardActionModel = {
-    icon: string;
-    title?: string;
-    iconColor?: IconColor;
-    callback?: () => void | Promise<void>;
-    disabled?: boolean;
-    propagateClickEvent?: boolean;
-};

package/dist/ui/card-actions/types.js

@@ -1 +0,0 @@
-import { IconColor } from '../icon';

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">import { runningInBrowser } from '../../core/browser';
-import { Icon } from '../icon';
-import { isIgnored } from './dropdown-ignore';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import { createPopper } from '@popperjs/core';
-import { onDestroy } from 'svelte';
-let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, on, children, trigger, isOpenRequested } = $props();
-$effect(() => {
-    on?.mounted?.({
-        toggleOpen: (value) => {
-            if (value === undefined) {
-                if (opened) {
-                    close();
-                }
-                else {
-                    open();
-                }
-            }
-            else {
-                if (!value) {
-                    close();
-                }
-                else {
-                    open();
-                }
-            }
-        }
-    });
-});
-let opened = $state(false);
-$effect(() => {
-    if (opened) {
-        on?.opened?.();
-    }
-    else {
-        on?.closed?.();
-    }
-});
-$effect(() => {
-    popper?.setOptions({ placement: position });
-});
-$effect(() => {
-    if (isOpenRequested) {
-        open();
-    }
-});
-let triggerRef = $state(null);
-let dropdownRef;
-let popper;
-onDestroy(() => {
-    removeWindowClickListener();
-});
-const open = () => {
-    opened = true;
-    window.addEventListener('click', close);
-};
-const close = () => {
-    opened = false;
-    removeWindowClickListener();
-};
-const removeWindowClickListener = () => {
-    if (runningInBrowser()) {
-        window.removeEventListener('click', close);
-    }
-};
-const handleClick = (event) => {
-    event.stopPropagation();
-    if (disabled) {
-        return;
-    }
-    if (!opened) {
-        open();
-        return;
-    }
-    const checkCanClose = (node) => {
-        if (keepDropdownOpen) {
-            return false;
-        }
-        while (node && node !== dropdownRef) {
-            if (isIgnored(node) || node.classList.contains('flatpickr-calendar')) {
-                return false;
-            }
-            node = node.parentElement;
-        }
-        return true;
-    };
-    if (checkCanClose(event.target)) {
-        close();
-    }
-};
-const initPopper = (node, _triggerEl) => {
-    popper = createPopper(_triggerEl, node, {
-        placement: position,
-        strategy: fixedPosition ? 'fixed' : 'absolute',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: () => {
-                        return [0, offset];
-                    }
-                }
-            },
-            { name: 'eventListeners', enabled: opened },
-            { name: 'flip' },
-            {
-                name: 'preventOverflow',
-                options: {
-                    boundary: document.body,
-                    padding: boundaryMargin
-                }
-            }
-        ]
-    });
-    return {
-        update(_triggerEl) {
-            popper.state.elements.reference = _triggerEl;
-            popper.update();
-        },
-        destroy() {
-            popper.destroy();
-        }
-    };
-};
-</script>
-
-<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} bind:this={dropdownRef} role="none">
-  <button type="button" class="dropdown__trigger" bind:this={triggerRef}>
-    {#if trigger}
-      {@render trigger()}
-    {:else}
-      <Icon src={IconChevronDown} />
-    {/if}
-  </button>
-  {#if opened}
-    <div use:initPopper={triggerRef} class="dropdown__content" role="tooltip" tabindex="-1">
-      {@render children()}
-    </div>
-  {/if}
-</div>
-
-<style>@keyframes fadeIn {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.dropdown {
-  --_dropdown--width: var(--dropdown--width, auto);
-  --_dropdown--content--background-color: var(--dropdown--content--background-color, transparent);
-  --_dropdown--content--box-shadow: var(--dropdown--content--box-shadow, none);
-  height: 100%;
-  width: var(--_dropdown--width);
-  -webkit-user-drag: none;
-  user-select: none;
-}
-.dropdown :global([contenteditable]) {
-  user-select: text;
-}
-.dropdown__trigger {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  line-height: 1;
-}
-.dropdown--disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.dropdown__content {
-  box-shadow: var(--_dropdown--content--box-shadow);
-  background: var(--_dropdown--content--background-color);
-  width: max-content;
-  z-index: 999;
-}
-.dropdown :global([data-popper-escaped]) {
-  visibility: hidden !important;
-}</style>

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

@@ -1,23 +0,0 @@
-import type { DropdownPosition } from './index';
-import { type Snippet } from 'svelte';
-type Props = {
-    position?: DropdownPosition;
-    disabled?: boolean;
-    keepDropdownOpen?: boolean;
-    fixedPosition?: boolean;
-    offset?: number;
-    boundaryMargin?: number;
-    on?: {
-        opened?: () => void;
-        closed?: () => void;
-        mounted?: (callbacks: {
-            toggleOpen: (value?: boolean) => void;
-        }) => void;
-    };
-    children: Snippet;
-    trigger?: Snippet;
-    isOpenRequested?: boolean;
-};
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/dropdown/dropdown-ignore.d.ts

@@ -1,6 +0,0 @@
-/** @type {import('svelte/action').Action}  */
-export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
-    destroy(): void;
-};
-export declare const ignoreAttribute = "dropdownIgnore";
-export declare const isIgnored: (node: HTMLElement) => boolean;

package/dist/ui/dropdown/dropdown-ignore.js

@@ -1,11 +0,0 @@
-/** @type {import('svelte/action').Action}  */
-export const dropdownIgnore = (node, value = true) => {
-    node.dataset[ignoreAttribute] = value.toString();
-    return {
-        destroy() {
-            // the node has been removed from the DOM
-        }
-    };
-};
-export const ignoreAttribute = 'dropdownIgnore';
-export const isIgnored = (node) => node.dataset[ignoreAttribute] === 'true';

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

@@ -1,3 +0,0 @@
-export { default as Dropdown } from './cmp.dropdown.svelte';
-export type DropdownPosition = import('@popperjs/core').Placement;
-export { dropdownIgnore } from './dropdown-ignore';

package/dist/ui/dropdown/index.js

@@ -1,2 +0,0 @@
-export { default as Dropdown } from './cmp.dropdown.svelte';
-export { dropdownIgnore } from './dropdown-ignore';

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

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

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

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

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

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

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

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

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

@@ -1,75 +0,0 @@
-<script lang="ts">import { IconColor } from './types';
-let { src, color = null } = $props();
-</script>
-
-{#if src?.startsWith('<svg')}
-  <div
-    class="icon"
-    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}>
-    {@html src}
-  </div>
-{/if}
-
-<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-color: var(--icon--stroke-color);
-  --_icon--stroke-width: var(--icon--stroke-width, 0);
-  /*--_icon--filter: drop-shadow(1px 1px 0 rgb(from var(--_icon--color) calc(255 - r) calc(255 - g) calc(255 - b) / 90%));*/
-  --_icon--filter: var(--icon--filter, none);
-  display: contents;
-}
-.icon--white {
-  --_icon--color: var(--sc-mc-color--icon-overlay);
-}
-.icon--text {
-  --_icon--color: var(--sc-mc-color--text-primary);
-}
-.icon--gray {
-  --_icon--color: var(--sc-mc-color--icon-secondary);
-}
-.icon--green {
-  --_icon--color: var(--sc-mc-color--icon-success);
-}
-.icon--red {
-  --_icon--color: var(--sc-mc-color--icon-destructive);
-}
-.icon--orange {
-  --_icon--color: var(--sc-mc-color--icon-warning);
-}
-.icon--blue {
-  --_icon--color: var(--sc-mc-color--icon-brand);
-}
-.icon :global(svg) {
-  display: inline-block;
-  color: inherit;
-  fill: var(--_icon--color, currentColor);
-  filter: var(--_icon--filter);
-  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 :global(path) {
-  stroke: var(--_icon--stroke-color, var(--_icon--color));
-  stroke-width: var(--_icon--stroke-width);
-}</style>

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

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

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

package/dist/ui/icon/index.js

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

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

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

package/dist/ui/icon/types.js

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

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

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