@streamscloud/kit 0.0.1-1770887346972 → 0.0.1-1770903095775

package/dist/core/utils/compact-number.d.ts

@@ -0,0 +1,8 @@
+import { type Locale } from '../../locale';
+type CompactOptions = {
+    decimals?: number;
+    trimZeros?: boolean;
+    locale?: Locale;
+};
+export declare const compactNumber: (value: number, options?: CompactOptions) => string;
+export {};

package/dist/core/utils/compact-number.js

@@ -0,0 +1,35 @@
+import { getLocale } from '../../locale';
+const THOUSAND = 1_000;
+const MILLION = 1_000_000;
+const BILLION = 1_000_000_000;
+const TRILLION = 1_000_000_000_000;
+export const compactNumber = (value, options = {}) => {
+    const { decimals = 1, trimZeros = true, locale = getLocale() } = options;
+    const abs = Math.abs(value);
+    const formatter = makeNumberFormatter(locale, decimals, trimZeros);
+    if (abs >= TRILLION) {
+        return `${formatter.format(value / TRILLION)}${loc.T[locale]}`;
+    }
+    if (abs >= BILLION) {
+        return `${formatter.format(value / BILLION)}${loc.B[locale]}`;
+    }
+    if (abs >= MILLION) {
+        return `${formatter.format(value / MILLION)}${loc.M[locale]}`;
+    }
+    if (abs >= THOUSAND) {
+        return `${formatter.format(value / THOUSAND)}${loc.K[locale]}`;
+    }
+    return formatter.format(value);
+};
+const makeNumberFormatter = (locale, decimals, trimZeros) => new Intl.NumberFormat(loc.numberLocale[locale], {
+    minimumFractionDigits: trimZeros ? 0 : decimals,
+    maximumFractionDigits: decimals,
+    useGrouping: false
+});
+const loc = {
+    K: { en: 'K', no: 'K' },
+    M: { en: 'M', no: 'M' },
+    B: { en: 'B', no: 'B' },
+    T: { en: 'T', no: 'T' },
+    numberLocale: { en: 'nb-NO', no: 'nb-NO' }
+};

package/dist/core/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './array-helper';
+export * from './compact-number';
 export * from './base64-serializer';
 export * from './browser';
 export * from './date-helper';

package/dist/core/utils/index.js

@@ -1,4 +1,5 @@
 export * from './array-helper';
+export * from './compact-number';
 export * from './base64-serializer';
 export * from './browser';
 export * from './date-helper';

package/dist/core/utils/number-helper.d.ts

@@ -1,5 +1,4 @@
 export declare class NumberHelper {
     static formatNumber: (n: number | string) => string;
-    static formatCompactNumber: (num: number, locale?: string) => string;
     static randomIntFromInterval: (min: number, max: number) => number;
 }

package/dist/core/utils/number-helper.js

@@ -15,16 +15,6 @@ export class NumberHelper {
         output.unshift(modulo);
         return `${isNegative ? '-' : ''}${output.join(' ')}`;
     };
-    static formatCompactNumber = (num, locale) => {
-        if (num < 1000) {
-            return num.toString();
-        }
-        return new Intl.NumberFormat(locale, {
-            notation: 'compact',
-            compactDisplay: 'short',
-            maximumFractionDigits: 1
-        }).format(num);
-    };
     static randomIntFromInterval = (min, max) => {
         // min and max included
         return Math.floor(Math.random() * (max - min + 1) + min);

package/dist/ui/card-actions/card-action-container.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const cardActionContainer: Action;

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

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

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon } 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 ?? '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

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

@@ -0,0 +1,65 @@
+<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>.card-actions {
+  --_card-actions--background: var(--card-actions--background, light-dark(#f9fafb, #111827));
+  --_card-actions--border-radius: var(--card-actions--border-radius, 0.1875em);
+  --_card-actions--dropdown-background: var(--card-actions--dropdown-background, var(--_card-actions--background));
+  --_card-actions--font-size: var(--card-actions--font-size, 1rem);
+  --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
+  --_card-actions--opacity: var(--card-actions--opacity, 0);
+  --_card-actions--right-offset: var(--card-actions--right-offset, auto);
+  --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
+  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;
+  font-size: var(--_card-actions--font-size);
+  opacity: var(--_card-actions--opacity);
+  transition: opacity ease-in-out 0.4s;
+  display: flex;
+  background: var(--_card-actions--background);
+  border-radius: var(--_card-actions--border-radius);
+}
+.card-actions__dropdown-content {
+  padding: 0 0.3125em;
+  background: var(--_card-actions--dropdown-background);
+}
+@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

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

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,171 @@
+<script lang="ts">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 { untrack } from 'svelte';
+let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 8, boundaryMargin = 8, backdrop = false, isOpenRequested, on, children, trigger } = $props();
+let opened = $state(false);
+$effect(() => untrack(() => {
+    on?.mounted?.({
+        toggleOpen: (value) => {
+            if (value === undefined) {
+                if (opened) {
+                    close();
+                }
+                else {
+                    open();
+                }
+            }
+            else if (value) {
+                open();
+            }
+            else {
+                close();
+            }
+        }
+    });
+}));
+$effect(() => {
+    if (opened) {
+        on?.opened?.();
+    }
+    else {
+        on?.closed?.();
+    }
+});
+$effect(() => untrack(() => {
+    if (isOpenRequested) {
+        open();
+    }
+}));
+$effect(() => {
+    return () => {
+        window.removeEventListener('click', close);
+    };
+});
+const open = () => {
+    opened = true;
+    window.addEventListener('click', close);
+};
+const close = () => {
+    opened = false;
+    window.removeEventListener('click', close);
+};
+const handleClick = (event) => {
+    event.stopPropagation();
+    if (disabled) {
+        return;
+    }
+    if (!opened) {
+        open();
+        return;
+    }
+    if (canClose(event.target, event.currentTarget)) {
+        close();
+    }
+};
+const canClose = (target, container) => {
+    if (keepDropdownOpen) {
+        return false;
+    }
+    let node = target;
+    while (node && node !== container) {
+        if (isIgnored(node)) {
+            return false;
+        }
+        node = node.parentElement;
+    }
+    return true;
+};
+const initPopper = (node) => {
+    const triggerEl = node.previousElementSibling;
+    const popper = createPopper(triggerEl, node, {
+        placement: position,
+        strategy: fixedPosition ? 'fixed' : 'absolute',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: () => [0, offset]
+                }
+            },
+            { name: 'eventListeners', enabled: true },
+            { name: 'flip' },
+            {
+                name: 'preventOverflow',
+                options: {
+                    boundary: document.body,
+                    padding: boundaryMargin
+                }
+            }
+        ]
+    });
+    return {
+        destroy() {
+            popper.destroy();
+        }
+    };
+};
+</script>
+
+{#if opened && backdrop}
+  <div
+    class="dropdown-backdrop"
+    onclick={(e) => {
+      e.stopPropagation();
+      close();
+    }}
+    onkeydown={() => ({})}
+    role="none">
+  </div>
+{/if}
+<div class="dropdown" class:dropdown--disabled={disabled} onclick={handleClick} onkeydown={() => ({})} role="none">
+  <button type="button" class="dropdown__trigger">
+    {#if trigger}
+      {@render trigger()}
+    {:else}
+      <Icon src={IconChevronDown} />
+    {/if}
+  </button>
+  {#if opened}
+    <div use:initPopper class="dropdown__content" role="tooltip" tabindex="-1">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>.dropdown-backdrop {
+  position: fixed;
+  inset: 0;
+  background: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1));
+  z-index: 998;
+}
+
+.dropdown {
+  --_dropdown--width: var(--dropdown--width, auto);
+  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 {
+  width: max-content;
+  z-index: 999;
+}
+.dropdown :global([data-popper-escaped]) {
+  visibility: hidden !important;
+}</style>

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

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

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

@@ -0,0 +1,4 @@
+export declare const dropdownIgnore: (node: HTMLElement, value?: boolean) => {
+    destroy(): void;
+};
+export declare const isIgnored: (node: HTMLElement) => boolean;

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

@@ -0,0 +1,8 @@
+const IGNORE_ATTRIBUTE = 'dropdownIgnore';
+export const dropdownIgnore = (node, value = true) => {
+    node.dataset[IGNORE_ATTRIBUTE] = value.toString();
+    return {
+        destroy() { }
+    };
+};
+export const isIgnored = (node) => node.dataset[IGNORE_ATTRIBUTE] === 'true';

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

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

package/dist/ui/dropdown/index.js

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

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,12 @@
+/* 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/swipe-indicator/cmp.swipe-indicator.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">import { Icon } from '../icon';
+import { SwipeIndicatorLocalization } from './swipe-indicator-localization';
+import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
+let { fadeTimeout = 2000 } = $props();
+const localization = new SwipeIndicatorLocalization();
+let isFaded = $state(false);
+const indicatorMounted = (_) => {
+    if (fadeTimeout) {
+        const timeout = setTimeout(() => {
+            isFaded = true;
+        }, fadeTimeout);
+        return {
+            destroy() {
+                clearTimeout(timeout);
+            }
+        };
+    }
+};
+</script>
+
+<div class="swipe-indicator" class:swipe-indicator--faded={isFaded} use:indicatorMounted>
+  <div class="swipe-indicator__icon">
+    <Icon src={IconArrowUp} />
+  </div>
+  <div class="swipe-indicator__text">
+    {localization.swipe}
+  </div>
+</div>
+
+<style>.swipe-indicator {
+  --_swipe-indicator--color: var(--swipe-indicator--color, #ffffff);
+  --_swipe-indicator--font-size: var(--swipe-indicator--font-size, 1rem);
+  --_swipe-indicator--icon-size: var(--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  color: var(--_swipe-indicator--color);
+  opacity: 1;
+  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.swipe-indicator--faded {
+  opacity: 0;
+  pointer-events: none;
+}
+.swipe-indicator:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: 50%;
+  background: #000000;
+  filter: blur(12px);
+  transform: scale(3);
+}
+.swipe-indicator__icon {
+  font-size: var(--_swipe-indicator--icon-size);
+  animation: bounce 2.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  will-change: transform;
+  z-index: 1;
+}
+.swipe-indicator__text {
+  font-size: var(--_swipe-indicator--font-size);
+  z-index: 1;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-24px);
+  }
+  18% {
+    transform: translateY(0);
+  }
+  26% {
+    transform: translateY(-12px);
+  }
+  34% {
+    transform: translateY(0);
+  }
+  41% {
+    transform: translateY(-8px);
+  }
+  48% {
+    transform: translateY(0);
+  }
+  54% {
+    transform: translateY(-4px);
+  }
+  60% {
+    transform: translateY(0);
+  }
+  65% {
+    transform: translateY(-2px);
+  }
+  70% {
+    transform: translateY(0);
+  }
+  75% {
+    transform: translateY(-1px);
+  }
+  80% {
+    transform: translateY(0);
+  }
+}</style>

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    fadeTimeout?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/swipe-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';

package/dist/ui/swipe-indicator/index.js

@@ -0,0 +1 @@
+export { default as SwipeIndicator } from './cmp.swipe-indicator.svelte';

package/dist/ui/swipe-indicator/swipe-indicator-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class SwipeIndicatorLocalization {
+    get swipe(): string;
+}

package/dist/ui/swipe-indicator/swipe-indicator-localization.js

@@ -0,0 +1,12 @@
+import { getLocale } from '../../locale';
+export class SwipeIndicatorLocalization {
+    get swipe() {
+        return loc.swipe[getLocale()];
+    }
+}
+const loc = {
+    swipe: {
+        en: 'Swipe',
+        no: 'Sveip'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770887346972",
+  "version": "0.0.1-1770903095775",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -88,10 +88,22 @@
       "types": "./dist/ui/button/index.d.ts",
       "svelte": "./dist/ui/button/index.js"
     },
+    "./ui/card-actions": {
+      "types": "./dist/ui/card-actions/index.d.ts",
+      "svelte": "./dist/ui/card-actions/index.js"
+    },
     "./ui/dialog": {
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
+    "./ui/dynamic-component": {
+      "types": "./dist/ui/dynamic-component/index.d.ts",
+      "svelte": "./dist/ui/dynamic-component/index.js"
+    },
+    "./ui/dropdown": {
+      "types": "./dist/ui/dropdown/index.d.ts",
+      "svelte": "./dist/ui/dropdown/index.js"
+    },
     "./ui/icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
@@ -124,6 +136,10 @@
       "types": "./dist/ui/seek-bar/index.d.ts",
       "svelte": "./dist/ui/seek-bar/index.js"
     },
+    "./ui/swipe-indicator": {
+      "types": "./dist/ui/swipe-indicator/index.d.ts",
+      "svelte": "./dist/ui/swipe-indicator/index.js"
+    },
     "./ui/time-ago": {
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"