@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/selects/cmp.singleselect.svelte

@@ -1,386 +0,0 @@
-<script lang="ts" generics="T">import { Icon } from '../icon';
-import { SelectLocalization } from './select-localization';
-import IconAdd from '@fluentui/svg-icons/icons/add_16_filled.svg?raw';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
-import Fuse from 'fuse.js';
-import Select from 'svelte-select';
-let { value = null, options = [], placeholder = '', disabled = false, loading = false, creatable = null, allowReset = false, groupHeaderSelectable = false, compareBy, on, icon, optionSnippet, selectionSnippet } = $props();
-const valuesEqual = (a, b) => (compareBy ? compareBy(a) === compareBy(b) : a === b);
-const loc = new SelectLocalization();
-let listOpen = $state(false);
-let filterText = $state('');
-const floatingConfig = { strategy: 'absolute' };
-const flattenGroupedOptions = (opts) => {
-    const result = [];
-    for (const opt of opts) {
-        if ('options' in opt) {
-            for (const child of opt.options) {
-                result.push({ label: child.label, value: child.value, group: opt.label });
-            }
-        }
-        else {
-            result.push({ label: opt.label, value: opt.value });
-        }
-    }
-    return result;
-};
-const flatOptions = $derived(flattenGroupedOptions(options));
-let selectValue = $state.raw(null);
-$effect(() => {
-    const existent = value !== null ? flatOptions.find((x) => valuesEqual(x.value, value)) : null;
-    if (existent) {
-        selectValue = {
-            label: existent.label,
-            value: existent.value,
-            $isCreated: false,
-            group: existent.group
-        };
-    }
-    else {
-        selectValue = null;
-    }
-});
-const generateOptions = (includeReset = true) => {
-    const generated = flatOptions.map((x) => ({
-        label: x.label,
-        value: x.value,
-        $isCreated: false,
-        group: x.group
-    }));
-    if (allowReset && includeReset) {
-        return [
-            {
-                label: placeholder || '-',
-                value: undefined,
-                $isCreated: false,
-                $isResetOption: true
-            },
-            ...generated
-        ];
-    }
-    return generated;
-};
-const groupBy = (item) => item.group;
-let optionItems = $state.raw([]);
-$effect(() => {
-    let generated = generateOptions();
-    if (!listOpen) {
-        generated = generated.filter((x) => !x.$isCreated);
-    }
-    optionItems = generated;
-});
-const onSelectChange = (item) => {
-    if (item.$isResetOption) {
-        on?.change?.(null);
-        return;
-    }
-    if (item.groupHeader) {
-        const group = options.find((opt) => 'options' in opt && opt.label === item.label);
-        if (group?.value !== undefined) {
-            on?.change?.(group.value);
-        }
-        return;
-    }
-    if (item.$isCreated === true) {
-        on?.create?.(item.value);
-        if (selectValue) {
-            const val = selectValue;
-            selectValue = null;
-            selectValue = val;
-        }
-        else {
-            selectValue = null;
-        }
-    }
-    else {
-        on?.change?.(item.value);
-    }
-};
-const itemFilter = (label, query) => {
-    if (!query) {
-        return true;
-    }
-    const fuse = new Fuse([label]);
-    const result = fuse.search(query);
-    return result.length > 0;
-};
-const onSelectFilter = (itemsFiltered) => {
-    if (!creatable || loading) {
-        return;
-    }
-    if (!creatable.validateFn(filterText)) {
-        return;
-    }
-    if (selectValue?.value === filterText) {
-        return;
-    }
-    const exactMatch = itemsFiltered.find((x) => x.label.toLowerCase() === filterText.toLowerCase());
-    if (!exactMatch) {
-        const isExistentOption = (opt) => opt.$isCreated === false && !opt.$isResetOption;
-        const allExistingOptions = optionItems.filter(isExistentOption);
-        const newOption = { value: filterText, label: filterText, $isCreated: true };
-        optionItems = [
-            newOption,
-            ...allExistingOptions.map((x) => ({
-                label: x.label,
-                value: x.value,
-                $isCreated: false,
-                group: flatOptions.find((f) => valuesEqual(f.value, x.value))?.group
-            }))
-        ];
-    }
-    else if (!exactMatch.$isCreated) {
-        if (optionItems.some((x) => x.$isCreated)) {
-            optionItems = optionItems.filter((x) => !x.$isCreated);
-        }
-    }
-};
-</script>
-
-<div class="select" class:select--disabled={disabled} class:select--loading={loading}>
-  <Select
-    containerStyles="font-size: 1em;"
-    value={selectValue}
-    items={optionItems}
-    disabled={disabled}
-    floatingConfig={floatingConfig}
-    placeholder={placeholder}
-    bind:loading={loading}
-    clearable={false}
-    bind:listOpen={listOpen}
-    listOffset={2}
-    showChevron={!loading}
-    itemFilter={itemFilter}
-    groupBy={groupBy}
-    groupHeaderSelectable={groupHeaderSelectable}
-    bind:filterText={filterText}
-    inputAttributes={{ title: selectValue?.label ?? placeholder ?? '' }}
-    on:change={({ detail }) => onSelectChange(detail)}
-    on:filter={({ detail }) => onSelectFilter(detail)}>
-    <div slot="item" let:item class="select__option" title={item.label} class:select__option--faded={item.$isResetOption}>
-      {#if optionSnippet}
-        {@render optionSnippet({ item })}
-      {:else}
-        {#if item.$isCreated}
-          <Icon src={IconAdd} />
-        {/if}
-        {item.label}
-      {/if}
-    </div>
-    <div class="select__selection" slot="selection" let:selection>
-      <span class="select__selection-text">
-        {#if selectionSnippet}
-          {@render selectionSnippet({ selection })}
-        {:else}
-          {selection.label}
-        {/if}
-      </span>
-    </div>
-    <span slot="prepend" class="select__icon select__icon--prepend">
-      {#if icon}
-        {@render icon()}
-      {/if}
-    </span>
-    <span slot="chevron-icon" class="select__icon">
-      <Icon src={IconChevronDown} />
-    </span>
-    <svelte:fragment slot="empty">
-      <div class="select__no-options">{loc.noMatch}</div>
-    </svelte:fragment>
-  </Select>
-</div>
-
-<!--
-@component
-Single-value select dropdown built on svelte-select with fuzzy search. Supports groups, item creation, and reset option.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--singleselect--root--font-size` | Root font size | `1rem` |
-| `--sc-kit--singleselect--height` | Control height | `2em` |
-| `--sc-kit--singleselect--width` | Control width | `100%` |
-| `--sc-kit--singleselect--padding-block` | Vertical padding | `0.25em` |
-| `--sc-kit--singleselect--padding-inline` | Horizontal padding | `0.5em` |
-| `--sc-kit--singleselect--background` | Background color | `light-dark(white, gray-900)` |
-| `--sc-kit--singleselect--background--disabled` | Disabled background | `light-dark(neutral-50, neutral-800)` |
-| `--sc-kit--singleselect--border-color` | Border color | `light-dark(neutral-300, neutral-600)` |
-| `--sc-kit--singleselect--border-radius` | Border radius | `0.25em` |
-| `--sc-kit--singleselect--text--font-size` | Text font size | `0.875em` |
-| `--sc-kit--singleselect--text--color` | Text color | `light-dark(gray-800, white)` |
-| `--sc-kit--singleselect--placeholder--color` | Placeholder color | border-color |
-| `--sc-kit--singleselect--icon--color` | Icon color | border-color |
-| `--sc-kit--singleselect--options--max-height` | Options list max height | `20em` |
-| `--sc-kit--singleselect--item--active--background` | Active item background | `light-dark(neutral-50, neutral-700)` |
-| `--sc-kit--singleselect--item--hover--background` | Item hover background | `light-dark(gray-100, gray-800)` |
-| `--sc-kit--singleselect--group-header--color` | Group header color | placeholder-color |
-| `--sc-kit--singleselect--group-header--font-weight` | Group header font weight | `500` |
-| `--sc-kit--singleselect--group-item--padding-left` | Group item left padding | `1em` |
--->
-
-<style>.select {
-  --_singleselect--root--font-size: var(--sc-kit--singleselect--root--font-size, 1rem);
-  --_singleselect--height: var(--sc-kit--singleselect--height, 2em);
-  --_singleselect--width: var(--sc-kit--singleselect--width, 100%);
-  --_singleselect--background: var(--sc-kit--singleselect--background, light-dark(#ffffff, #1c1c1c));
-  --_singleselect--background--disabled: var(
-    --sc-kit--singleselect--background--disabled,
-    light-dark(#f9fafb, #1f2937)
-  );
-  --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, 0.25em);
-  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, 0.875em);
-  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#2e2e2e, #ffffff));
-  --_singleselect--placeholder--color: var(--sc-kit--singleselect--placeholder--color, light-dark(#d1d5db, #4b5563));
-  --_singleselect--icon--color: var(--sc-kit--singleselect--icon--color, light-dark(#d1d5db, #4b5563));
-  --_singleselect--padding-inline: var(--sc-kit--singleselect--padding-inline, 0.5em);
-  --_singleselect--padding-block: var(--sc-kit--singleselect--padding-block, 0.25em);
-  --_singleselect--options--max-height: var(--sc-kit--singleselect--options--max-height, 20em);
-  --_singleselect--item--hover--background: var(
-    --sc-kit--singleselect--item--hover--background,
-    light-dark(#f2f2f2, #2e2e2e)
-  );
-  --_singleselect--item--active--background: var(
-    --sc-kit--singleselect--item--active--background,
-    light-dark(#f9fafb, #374151)
-  );
-  --_singleselect--group-header--color: var(--sc-kit--singleselect--group-header--color, var(--_singleselect--placeholder--color));
-  --_singleselect--group-header--font-weight: var(--sc-kit--singleselect--group-header--font-weight, 500);
-  --_singleselect--group-item--padding-left: var(--sc-kit--singleselect--group-item--padding-left, 1em);
-  --background: var(--_singleselect--background);
-  --border: 1px solid var(--_singleselect--border-color);
-  --border-focused: var(--border);
-  --border-hover: var(--border);
-  --border-radius: var(--_singleselect--border-radius);
-  --border-radius-focused: var(--border-radius);
-  --box-sizing: border-box;
-  --chevron-background: transparent;
-  --chevron-border: transparent;
-  --chevron-color: transparent;
-  --chevron-height: auto;
-  --chevron-pointer-events: none;
-  --chevron-width: auto;
-  --disabled-background: var(--_singleselect--background--disabled);
-  --disabled-border-color: var(--_singleselect--border-color);
-  --disabled-color: var(--_singleselect--text--color);
-  --disabled-placeholder-color: var(--placeholder-color);
-  --disabled-placeholder-opacity: var(--placeholder-opacity);
-  --font-size: var(--_singleselect--text--font-size);
-  --height: var(--_singleselect--height);
-  --icons-color: var(--_singleselect--icon--color);
-  --indicators-bottom: auto;
-  --indicators-position: static;
-  --indicators-right: auto;
-  --indicators-top: auto;
-  --input--color: var(--_singleselect--text--color);
-  --input-left: 0;
-  --input-letter-spacing: 1;
-  --input-margin: 0;
-  --input-padding: 0 var(--_singleselect--padding-inline) 0 0;
-  --item-active-background: var(--_singleselect--item--active--background);
-  --item-color: var(--_singleselect--text--color);
-  --item-first-border-radius: 0;
-  --item-height: auto;
-  --item-hover-bg: var(--_singleselect--item--hover--background);
-  --item-hover-color: var(--_singleselect--text--color);
-  --item-is-active-bg: var(--_singleselect--item--active--background);
-  --item-is-active-color: var(--_singleselect--text--color);
-  --item-is-not-selectable-color: var(--_singleselect--group-header--color);
-  --item-line-height: 1.4;
-  --item-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-  --item-transition: auto;
-  --list-background: var(--background);
-  --list-border: var(--border);
-  --list-border-radius: var(--border-radius);
-  --list-max-height: var(--_singleselect--options--max-height);
-  --list-position: absolute;
-  --list-shadow: none;
-  --list-z-index: 2;
-  --loading--margin: 0;
-  --loading-color: var(--icons-color);
-  --loading-height: max-content;
-  --loading-width: max-content;
-  --margin: 0;
-  --max-height: var(--height);
-  --padding: 0 var(--_singleselect--padding-inline) 0 0;
-  --placeholder-color: var(--_singleselect--placeholder--color);
-  --placeholder-opacity: 0.8;
-  --selected-item-color: auto;
-  --selected-item-overflow: auto;
-  --selected-item-padding: auto;
-  --spinner-color: var(--icons-color);
-  --spinner-height: var(--_singleselect--text--font-size);
-  --spinner-width: var(--_singleselect--text--font-size);
-  --value-container-overflow: hidden;
-  --value-container-padding: 0;
-  --width: var(--_singleselect--width);
-  --group-title-color: var(--_singleselect--group-header--color);
-  --group-title-font-weight: var(--_singleselect--group-header--font-weight);
-  --group-title-font-size: var(--_singleselect--text--font-size);
-  --group-title-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-  --group-item-padding-left: var(--_singleselect--group-item--padding-left);
-  font-size: var(--_singleselect--root--font-size);
-  width: var(--_singleselect--width);
-  position: relative;
-}
-.select__icon {
-  --sc-kit--icon--color: var(--_singleselect--icon--color);
-  --sc-kit--icon--size: 1.25em;
-  display: flex;
-  align-items: center;
-}
-.select__icon--prepend {
-  padding: 0 var(--_singleselect--padding-inline);
-}
-:global(.select__icon--prepend:not(:has(*))) {
-  padding-right: 0 !important;
-}
-.select__option {
-  font-size: var(--_singleselect--text--font-size);
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.select__option--faded {
-  color: var(--_singleselect--placeholder--color);
-  opacity: 0.5;
-}
-.select__selection {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  height: 100%;
-  min-height: 100%;
-  max-height: 100%;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-.select__selection-text {
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.select__no-options {
-  color: var(--_singleselect--placeholder--color);
-  padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
-}
-.select--disabled {
-  cursor: default;
-  pointer-events: none;
-}
-.select--loading {
-  pointer-events: none;
-}
-.select--loading::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
-  opacity: 0.5;
-}</style>

package/dist/ui/selects/cmp.singleselect.svelte.d.ts

@@ -1,80 +0,0 @@
-import type { SelectCreateItemSettings, SelectOption, SelectOptionGroup } from './types';
-import type { Snippet } from 'svelte';
-declare function $$render<T>(): {
-    props: {
-        value?: T | null;
-        options?: (SelectOption<T> | SelectOptionGroup<T>)[];
-        placeholder?: string;
-        disabled?: boolean;
-        loading?: boolean;
-        /** Settings for creating new items in the dropdown */
-        creatable?: SelectCreateItemSettings | null;
-        /** Adds a reset option at the top of the list to clear the value */
-        allowReset?: boolean;
-        /** Allow clicking group headers to select them */
-        groupHeaderSelectable?: boolean;
-        /** Custom equality comparator for option values. When provided, two values are equal if compareBy(a) === compareBy(b). */
-        compareBy?: (value: T) => string | number;
-        on?: {
-            change?: (value: T | null) => void;
-            create?: (label: string) => void;
-        };
-        /** Left icon snippet */
-        icon?: Snippet;
-        /** Custom option rendering */
-        optionSnippet?: Snippet<[{
-            item: SelectOption<T>;
-        }]>;
-        /** Custom selection rendering */
-        selectionSnippet?: Snippet<[{
-            selection: SelectOption<T>;
-        }]>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-/**
- * Single-value select dropdown built on svelte-select with fuzzy search. Supports groups, item creation, and reset option.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--singleselect--root--font-size` | Root font size | `1rem` |
- * | `--sc-kit--singleselect--height` | Control height | `2em` |
- * | `--sc-kit--singleselect--width` | Control width | `100%` |
- * | `--sc-kit--singleselect--padding-block` | Vertical padding | `0.25em` |
- * | `--sc-kit--singleselect--padding-inline` | Horizontal padding | `0.5em` |
- * | `--sc-kit--singleselect--background` | Background color | `light-dark(white, gray-900)` |
- * | `--sc-kit--singleselect--background--disabled` | Disabled background | `light-dark(neutral-50, neutral-800)` |
- * | `--sc-kit--singleselect--border-color` | Border color | `light-dark(neutral-300, neutral-600)` |
- * | `--sc-kit--singleselect--border-radius` | Border radius | `0.25em` |
- * | `--sc-kit--singleselect--text--font-size` | Text font size | `0.875em` |
- * | `--sc-kit--singleselect--text--color` | Text color | `light-dark(gray-800, white)` |
- * | `--sc-kit--singleselect--placeholder--color` | Placeholder color | border-color |
- * | `--sc-kit--singleselect--icon--color` | Icon color | border-color |
- * | `--sc-kit--singleselect--options--max-height` | Options list max height | `20em` |
- * | `--sc-kit--singleselect--item--active--background` | Active item background | `light-dark(neutral-50, neutral-700)` |
- * | `--sc-kit--singleselect--item--hover--background` | Item hover background | `light-dark(gray-100, gray-800)` |
- * | `--sc-kit--singleselect--group-header--color` | Group header color | placeholder-color |
- * | `--sc-kit--singleselect--group-header--font-weight` | Group header font weight | `500` |
- * | `--sc-kit--singleselect--group-item--padding-left` | Group item left padding | `1em` |
- */
-declare const Cmp: $$IsomorphicComponent;
-type Cmp<T> = InstanceType<typeof Cmp<T>>;
-export default Cmp;

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

@@ -1,5 +0,0 @@
-export { default as Multiselect } from './cmp.multiselect.svelte';
-export { default as SearchMultiselect } from './cmp.search-multiselect.svelte';
-export { default as Singleselect } from './cmp.singleselect.svelte';
-export { SelectLocalization } from './select-localization';
-export type { SelectCreateItemSettings, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/selects/index.js

@@ -1,4 +0,0 @@
-export { default as Multiselect } from './cmp.multiselect.svelte';
-export { default as SearchMultiselect } from './cmp.search-multiselect.svelte';
-export { default as Singleselect } from './cmp.singleselect.svelte';
-export { SelectLocalization } from './select-localization';

package/dist/ui/selects/select-localization.d.ts

@@ -1,6 +0,0 @@
-export declare class SelectLocalization {
-    get empty(): string;
-    get noMatch(): string;
-    get createLabel(): (value: string) => string;
-    get nMore(): (count: number) => string;
-}

package/dist/ui/selects/select-localization.js

@@ -1,27 +0,0 @@
-import { AppLocale } from '../../core/locale';
-const loc = {
-    empty: { en: 'No options', no: 'Ingen alternativer' },
-    noMatch: { en: 'No options found', no: 'Ingen alternativer funnet' },
-    createLabel: {
-        en: (value) => `Create "${value}"`,
-        no: (value) => `Opprett "${value}"`
-    },
-    nMore: {
-        en: (count) => `+${count} more`,
-        no: (count) => `+${count} til`
-    }
-};
-export class SelectLocalization {
-    get empty() {
-        return loc.empty[AppLocale.current];
-    }
-    get noMatch() {
-        return loc.noMatch[AppLocale.current];
-    }
-    get createLabel() {
-        return loc.createLabel[AppLocale.current];
-    }
-    get nMore() {
-        return loc.nMore[AppLocale.current];
-    }
-}

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

@@ -1,29 +0,0 @@
-export type SelectOption<T = string> = {
-    label: string;
-    value: T;
-};
-export type SelectOptionGroup<T = string> = {
-    label: string;
-    /** Value emitted when the group header is selected (requires groupHeaderSelectable) */
-    value?: T;
-    options: SelectOption<T>[];
-};
-export type SelectCreateItemSettings = {
-    /** Validates whether the typed value can be created as a new item */
-    validateFn: (value: string) => boolean;
-};
-export type SelectOptionItem<T> = SelectCreatedOptionItem | SelectExistentOptionItem<T>;
-export type SelectCreatedOptionItem = {
-    $isCreated: true;
-    $isResetOption?: boolean;
-    label: string;
-    value: string;
-    group?: string;
-};
-export type SelectExistentOptionItem<T> = {
-    $isCreated: false;
-    $isResetOption?: boolean;
-    label: string;
-    value: T;
-    group?: string;
-};

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

@@ -1,2 +0,0 @@
-import type { Placement } from '@popperjs/core';
-export type TooltipPosition = Placement;

package/dist/ui/validatable/_validatable.scss

@@ -1,34 +0,0 @@
-@use 'styles/input';
-@use 'styles/colors';
-
-@mixin validatable() {
-  --_validatable--error--color: var(--sc-kit--validatable--error--color, #{colors.$color-destructive-500});
-  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
-  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
-  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
-  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
-  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
-  --_validatable--display: var(--sc-kit--validatable--display, block);
-  --_validatable--width: var(--sc-kit--validatable--width, auto);
-
-  position: relative;
-  margin-bottom: var(--_validatable--margin-bottom);
-  margin-right: var(--_validatable--margin-right);
-  display: var(--_validatable--display);
-  width: var(--_validatable--width);
-
-  &--errored {
-    @include input.input-accented(var(--_validatable--error--color));
-  }
-
-  &__error {
-    position: var(--_validatable--error--position);
-    top: calc(100% + 0.1em);
-    left: var(--_validatable--error--left);
-    right: var(--_validatable--error--right);
-    display: block;
-    color: var(--_validatable--error--color);
-    font-size: 0.7rem;
-    font-weight: 400;
-  }
-}