@likable-hair/svelte 3.3.30 → 3.3.32

package/dist/components/simple/navigation/TabSwitcher.svelte.d.ts

@@ -1,42 +1,46 @@
-import { SvelteComponent } from "svelte";
 export type Tab = {
     name: string;
     label: string;
     icon?: string;
 };
 import './TabSwitcher.css';
-declare const __propDef: {
-    props: {
-        class?: {
-            container?: string | undefined;
-            tabs?: string | undefined;
-            selected?: string | undefined;
-            bookmark?: string | undefined;
-            guide?: string | undefined;
-        } | undefined;
-        tabs?: Tab[] | undefined;
-        selected?: string | undefined;
-        mandatory?: boolean | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        "tab-click": CustomEvent<{
-            nativeEvent: MouseEvent;
-            tab: Tab;
-        }>;
-        "tab-keypress": CustomEvent<{
-            nativeEvent: KeyboardEvent;
-            tab: Tab;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        append: {};
-    };
-};
-export type TabSwitcherProps = typeof __propDef.props;
-export type TabSwitcherEvents = typeof __propDef.events;
-export type TabSwitcherSlots = typeof __propDef.slots;
-export default class TabSwitcher extends SvelteComponent<TabSwitcherProps, TabSwitcherEvents, TabSwitcherSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const TabSwitcher: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        container?: string;
+        tabs?: string;
+        selected?: string;
+        bookmark?: string;
+        guide?: string;
+    };
+    tabs?: Tab[];
+    selected?: string | undefined;
+    mandatory?: boolean;
+}, {
+    "tab-click": CustomEvent<{
+        nativeEvent: MouseEvent;
+        tab: Tab;
+    }>;
+    "tab-keypress": CustomEvent<{
+        nativeEvent: KeyboardEvent;
+        tab: Tab;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    append: {};
+}, {}, string>;
+type TabSwitcher = InstanceType<typeof TabSwitcher>;
+export default TabSwitcher;

package/dist/components/simple/notifiers/AlertBanner.svelte

@@ -1,18 +1,46 @@
-<script>import "../../../css/main.css";
-import "./AlertBanner.css";
-import { createEventDispatcher } from "svelte";
-let clazz = {};
-export { clazz as class };
-export let title = void 0, description = void 0, disabled = false;
-let dispatch = createEventDispatcher();
-function handleClickEvent(e) {
-  if (!disabled)
-    dispatch("click", e);
-}
-function handleKeypressEvent(e) {
-  if (!disabled)
-    dispatch("keypress", e);
-}
+<script lang="ts">
+  import '../../../css/main.css'
+  import './AlertBanner.css'
+  import { createEventDispatcher } from "svelte";
+
+  let clazz: {
+    container?: string,
+    border?: string,
+    body?: string
+  } = {};
+	export { clazz as class };
+
+  /* 
+    Styles:
+    
+    --alert-banner-color
+    --alert-banner-cursor
+    --alert-banner-border-radius
+    --alert-banner-padding-left
+    --alert-banner-padding-right
+    --alert-banner-padding-top
+    --alert-banner-padding-bottom
+    --alert-banner-border-width
+    --alert-banner-width
+  */
+
+  // props
+  export let title: string | undefined = undefined,
+    description: string | undefined = undefined,
+    disabled: boolean = false
+
+    let dispatch = createEventDispatcher<{
+      'click': MouseEvent,
+      'keypress': KeyboardEvent
+    }>()
+
+    function handleClickEvent(e: MouseEvent) {
+      if(!disabled) dispatch('click', e)
+    }
+
+    function handleKeypressEvent(e: KeyboardEvent) {
+      if(!disabled) dispatch('keypress', e)
+    }
 </script>
 
 <div 

package/dist/components/simple/notifiers/AlertBanner.svelte.d.ts

@@ -1,42 +1,46 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './AlertBanner.css';
-declare const __propDef: {
-    props: {
-        class?: {
-            container?: string | undefined;
-            border?: string | undefined;
-            body?: string | undefined;
-        } | undefined;
-        title?: string | undefined;
-        description?: string | undefined;
-        disabled?: boolean | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: CustomEvent<MouseEvent>;
-        keypress: CustomEvent<KeyboardEvent>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const AlertBanner: $$__sveltets_2_IsomorphicComponent<{
+    class?: {
+        container?: string;
+        border?: string;
+        body?: string;
     };
-    slots: {
-        content: {
-            title: string | undefined;
-            description: string | undefined;
-        };
-        title: {
-            title: string | undefined;
-        };
-        description: {
-            description: string | undefined;
-        };
-        append: {
-            disabled: boolean;
-        };
+    title?: string | undefined;
+    description?: string | undefined;
+    disabled?: boolean;
+}, {
+    click: CustomEvent<MouseEvent>;
+    keypress: CustomEvent<KeyboardEvent>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    content: {
+        title: string | undefined;
+        description: string | undefined;
     };
-};
-export type AlertBannerProps = typeof __propDef.props;
-export type AlertBannerEvents = typeof __propDef.events;
-export type AlertBannerSlots = typeof __propDef.slots;
-export default class AlertBanner extends SvelteComponent<AlertBannerProps, AlertBannerEvents, AlertBannerSlots> {
-}
-export {};
+    title: {
+        title: string | undefined;
+    };
+    description: {
+        description: string | undefined;
+    };
+    append: {
+        disabled: boolean;
+    };
+}, {}, string>;
+type AlertBanner = InstanceType<typeof AlertBanner>;
+export default AlertBanner;

package/dist/components/simple/progress/ProgressBar.svelte

@@ -1,16 +1,23 @@
-<script>import "../../../css/main.css";
-import "./ProgressBar.css";
-import ToolTip from "../../composed/common/ToolTip.svelte";
-export let value = 0, total = 100, valueTooltip = false, valueTooltipLabel = void 0;
-let activator;
-$:
-  hundredBasedProgress = total === 0 ? 100 : value * 100 / total;
-$:
-  cssVariables = Object.entries({
-    "--progress-width": hundredBasedProgress + "%"
-  }).filter(([key]) => key.startsWith("--")).reduce((css, [key, value2]) => {
-    return `${css}${key}: ${value2};`;
-  }, "");
+<script lang="ts">
+  import '../../../css/main.css'
+  import './ProgressBar.css'
+  import ToolTip from '../../composed/common/ToolTip.svelte';
+
+  export let value = 0,
+    total = 100,
+    valueTooltip: boolean = false,
+    valueTooltipLabel: string | number | undefined = undefined
+
+  let activator: HTMLElement
+
+  $: hundredBasedProgress = total === 0 ? 100 : (value * 100) / total;
+  $: cssVariables = Object.entries({
+    "--progress-width": hundredBasedProgress + "%",
+  })
+    .filter(([key]) => key.startsWith("--"))
+    .reduce((css, [key, value]) => {
+      return `${css}${key}: ${value};`;
+    }, "");
 </script>
 
 <div

package/dist/components/simple/progress/ProgressBar.svelte.d.ts

@@ -1,21 +1,25 @@
-import { SvelteComponent } from "svelte";
 import '../../../css/main.css';
 import './ProgressBar.css';
-declare const __propDef: {
-    props: {
-        value?: number | undefined;
-        total?: number | undefined;
-        valueTooltip?: boolean | undefined;
-        valueTooltipLabel?: string | number | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ProgressBarProps = typeof __propDef.props;
-export type ProgressBarEvents = typeof __propDef.events;
-export type ProgressBarSlots = typeof __propDef.slots;
-export default class ProgressBar extends SvelteComponent<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ProgressBar: $$__sveltets_2_IsomorphicComponent<{
+    value?: number;
+    total?: number;
+    valueTooltip?: boolean;
+    valueTooltipLabel?: string | number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressBar = InstanceType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/simple/timeline/SimpleTimeLine.svelte

@@ -1,9 +1,23 @@
-<script context="module"></script>
+<script context="module" lang="ts">
+  export type TimeLineItem = {
+    name: string;
+    title?: string;
+    description?: string;
+    imageUrl?: string;
+    from?: Date;
+    to?: Date;
+    data?: any;
+  };
+</script>
+
+<script lang="ts">
+  import { dateToString } from "../dates/utils";
+  import "../../../css/main.css";
+  import "./SimpleTimeLine.css";
 
-<script>import { dateToString } from "../dates/utils";
-import "../../../css/main.css";
-import "./SimpleTimeLine.css";
-export let items = [], singleSided = false, circleAlignment = "top";
+  export let items: TimeLineItem[] = [],
+    singleSided = false,
+    circleAlignment: "top" | "center" | "bottom" = "top";
 </script>
 
 <div
@@ -14,7 +28,7 @@ export let items = [], singleSided = false, circleAlignment = "top";
   style:--simple-time-line-body-width={singleSided
     ? `calc(100% - var(--simple-time-line-divider-width))`
     : `calc(50% - var(--simple-time-line-divider-width) / 2)`}
-  class="container"
+  class="simple-timeline-container"
 >
   {#each items as item, index}
     <div
@@ -43,9 +57,9 @@ export let items = [], singleSided = false, circleAlignment = "top";
             >
               <slot name="times" {item} {dateToString}>
                 <div
-                  class:vertical-centered-container={circleAlignment ==
+                  class:vertical-centered-simple-timeline-container={circleAlignment ==
                     "center"}
-                  class:vertical-bottom-container={circleAlignment == "bottom"}
+                  class:vertical-bottom-simple-timeline-container={circleAlignment == "bottom"}
                 >
                   {#if !!item.from}
                     <div
@@ -109,7 +123,7 @@ export let items = [], singleSided = false, circleAlignment = "top";
 </div>
 
 <style>
-  .container {
+  .simple-timeline-container {
     position: relative;
     height: var(
       --simple-time-line-height,
@@ -121,7 +135,7 @@ export let items = [], singleSided = false, circleAlignment = "top";
     gap: var(--simple-time-line-gap, var(--simple-time-line-default-gap));
   }
 
-  .container::before {
+  .simple-timeline-container::before {
     position: absolute;
     left: var(--simple-time-line-central-line-left);
     right: auto;
@@ -188,14 +202,14 @@ export let items = [], singleSided = false, circleAlignment = "top";
     justify-content: center;
   }
 
-  .vertical-centered-container {
+  .vertical-centered-simple-timeline-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100%;
   }
 
-  .vertical-bottom-container {
+  .vertical-bottom-simple-timeline-container {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;

package/dist/components/simple/timeline/SimpleTimeLine.svelte.d.ts

@@ -1,4 +1,3 @@
-import { SvelteComponent } from "svelte";
 export type TimeLineItem = {
     name: string;
     title?: string;
@@ -10,40 +9,45 @@ export type TimeLineItem = {
 };
 import "../../../css/main.css";
 import "./SimpleTimeLine.css";
-declare const __propDef: {
-    props: {
-        items?: TimeLineItem[] | undefined;
-        singleSided?: boolean | undefined;
-        circleAlignment?: "bottom" | "top" | "center" | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
+    z_$$bindings?: Bindings;
+}
+declare const SimpleTimeLine: $$__sveltets_2_IsomorphicComponent<{
+    items?: TimeLineItem[];
+    singleSided?: boolean;
+    circleAlignment?: "top" | "center" | "bottom";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    item: {
+        item: TimeLineItem;
+        alignment: string;
     };
-    slots: {
-        item: {
-            item: TimeLineItem;
-            alignment: string;
-        };
-        times: {
-            item: TimeLineItem;
-            dateToString: (date: Date, format?: import("../dates/utils").DateFormat | undefined, locale?: import("../dates/utils").Locale | undefined) => string;
-        };
-        infos: {
-            item: TimeLineItem;
-            alignment: string;
-        };
-        'infos-append': {
-            item: TimeLineItem;
-            alignment: string;
-        };
-        circle: {
-            item: TimeLineItem;
-        };
+    times: {
+        item: TimeLineItem;
+        dateToString: (date: Date, format?: import("../dates/utils").DateFormat, locale?: import("../dates/utils").Locale) => string;
     };
-};
-export type SimpleTimeLineProps = typeof __propDef.props;
-export type SimpleTimeLineEvents = typeof __propDef.events;
-export type SimpleTimeLineSlots = typeof __propDef.slots;
-export default class SimpleTimeLine extends SvelteComponent<SimpleTimeLineProps, SimpleTimeLineEvents, SimpleTimeLineSlots> {
-}
-export {};
+    infos: {
+        item: TimeLineItem;
+        alignment: string;
+    };
+    'infos-append': {
+        item: TimeLineItem;
+        alignment: string;
+    };
+    circle: {
+        item: TimeLineItem;
+    };
+}, {}, string>;
+type SimpleTimeLine = InstanceType<typeof SimpleTimeLine>;
+export default SimpleTimeLine;

package/dist/components/simple/typography/Code.svelte

@@ -1,15 +1,30 @@
-<script>import { onMount } from "svelte";
-import hljs from "highlight.js";
-import hljsSvelte from "highlightjs-svelte";
-import "highlight.js/styles/github.css";
-import "./dracula.css";
-import lodash from "lodash";
-export let codeBackgroundColor = "rgb(24 24 27/1)", headerBackgroundColor = "rgb(39 39 42/1)", dividerColor = "rgb(63 63 70)", borderRadius = ".5rem", headerPadding = "1rem 1rem", codePadding = "0rem 1rem", color = "white", boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", code, title = void 0, language = "javascript";
-let codeElement;
-onMount(() => {
-  hljsSvelte(hljs);
-  hljs.highlightElement(codeElement);
-});
+<script lang="ts">
+  import { onMount } from "svelte";
+  import hljs from 'highlight.js';
+  import hljsSvelte from 'highlightjs-svelte';
+  import 'highlight.js/styles/github.css';
+  import './dracula.css'
+  import lodash from 'lodash'
+
+
+  export let 
+    codeBackgroundColor: string = "rgb(24 24 27/1)",
+    headerBackgroundColor: string = "rgb(39 39 42/1)",
+    dividerColor: string = "rgb(63 63 70)",
+    borderRadius: string = ".5rem",
+    headerPadding: string = "1rem 1rem",
+    codePadding: string = "0rem 1rem",
+    color: string = "white",
+    boxShadow: string = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    code: string,
+    title: string | undefined = undefined,
+    language: 'javascript' | 'bash' | 'html' | 'svelte' | 'typescript' | 'css' = 'javascript'
+
+  let codeElement: HTMLElement
+  onMount(() => {
+    hljsSvelte(hljs)
+    hljs.highlightElement(codeElement)
+  })
 </script>
 
 <div 

package/dist/components/simple/typography/Code.svelte.d.ts

@@ -1,28 +1,32 @@
-import { SvelteComponent } from "svelte";
 import 'highlight.js/styles/github.css';
 import './dracula.css';
-declare const __propDef: {
-    props: {
-        codeBackgroundColor?: string | undefined;
-        headerBackgroundColor?: string | undefined;
-        dividerColor?: string | undefined;
-        borderRadius?: string | undefined;
-        headerPadding?: string | undefined;
-        codePadding?: string | undefined;
-        color?: string | undefined;
-        boxShadow?: string | undefined;
-        code: string;
-        title?: string | undefined;
-        language?: "html" | "javascript" | "bash" | "svelte" | "typescript" | "css" | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Code: $$__sveltets_2_IsomorphicComponent<{
+    codeBackgroundColor?: string;
+    headerBackgroundColor?: string;
+    dividerColor?: string;
+    borderRadius?: string;
+    headerPadding?: string;
+    codePadding?: string;
+    color?: string;
+    boxShadow?: string;
+    code: string;
+    title?: string | undefined;
+    language?: "javascript" | "bash" | "html" | "svelte" | "typescript" | "css";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Code = InstanceType<typeof Code>;
+export default Code;

package/dist/stores/debounce.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { derived } from 'svelte/store';
 export type Stores = Parameters<typeof derived>[0];
 declare function debounceStore<T extends Stores>(original: T, timeout?: number): import("svelte/store").Readable<any>;

package/dist/stores/layouts/unstableSidebarOpened.d.ts

@@ -1,2 +1 @@
-/// <reference types="svelte" />
 export declare let sidebarOpened: import("svelte/store").Writable<boolean>;

package/dist/stores/mediaQuery.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 export type DeviceDimension = {
     xs: boolean;
     s: boolean;

package/dist/stores/theme.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 export declare const COLOR_TYPES: string[];
 export declare const COLOR_SHADES: string[];
 export type Shades = Record<(typeof COLOR_SHADES)[number], string>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.30",
+  "version": "3.3.32",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",