@hkdigital/lib-sveltekit 0.2.8 → 0.2.10

package/dist/classes/svelte/network-loader/mocks.js

@@ -1,30 +1,30 @@
-import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
-
-import { OCTET_STREAM } from '../../../constants/mime/application.js';
-
-const BASE64_DATA =
-  'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
-
-/**
- * Create a response value that can be used by a mocked
- * fetch function
- *
- * @returns {Response}
- */
-export function createDataResponse(/* data , options */) {
-  const binaryString = atob(BASE64_DATA);
-  const bytes = new Uint8Array(binaryString.length);
-
-  for (let i = 0; i < binaryString.length; i++) {
-    bytes[i] = binaryString.charCodeAt(i);
-  }
-
-  const response = new Response(bytes, {
-    headers: new Headers({
-      [CONTENT_TYPE]: OCTET_STREAM,
-      [CONTENT_LENGTH]: String(bytes.length)
-    })
-  });
-
-  return response;
-}
+import { CONTENT_TYPE, CONTENT_LENGTH } from '../../../constants/http/index.js';
+
+import { OCTET_STREAM } from '../../../constants/mime/application.js';
+
+const BASE64_DATA =
+  'UklGRnwAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
+
+/**
+ * Create a response value that can be used by a mocked
+ * fetch function
+ *
+ * @returns {Response}
+ */
+export function createDataResponse(/* data , options */) {
+  const binaryString = atob(BASE64_DATA);
+  const bytes = new Uint8Array(binaryString.length);
+
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+
+  const response = new Response(bytes, {
+    headers: new Headers({
+      [CONTENT_TYPE]: OCTET_STREAM,
+      [CONTENT_LENGTH]: String(bytes.length)
+    })
+  });
+
+  return response;
+}

package/dist/classes/svelte/network-loader/typedef.js

@@ -1,8 +1,8 @@
-/**
- * @typedef {Object} LoadingProgress
- * @property {number} bytesLoaded
- * @property {number} size
- * @property {boolean} loaded
- */
-
-export default {};
+/**
+ * @typedef {Object} LoadingProgress
+ * @property {number} bytesLoaded
+ * @property {number} size
+ * @property {boolean} loaded
+ */
+
+export default {};

package/dist/components/area/HkArea.svelte

@@ -1,49 +1,49 @@
-<script>
-  /**
-   * Area component
-   * An area is actually a DIV that can be styled and can contain content
-   *
-   * Following component guidelines from Skeleton
-   * @see https://next.skeleton.dev/docs/resources/contribute/components
-   */
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   children: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    padding,
-    margin,
-    classes,
-    style,
-
-    // Snippets
-    children,
-
-    // DOM Element
-    domElem = $bindable(),
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<div
-  data-hk-area
-  class="{base} {bg} {padding} {margin} {classes}"
-  bind:this={domElem}
-  {style}
-  {...attrs}
->
-  {@render children()}
-</div>
+<script>
+  /**
+   * Area component
+   * An area is actually a DIV that can be styled and can contain content
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+
+    // Snippets
+    children,
+
+    // DOM Element
+    domElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-area
+  class="{base} {bg} {padding} {margin} {classes}"
+  bind:this={domElem}
+  {style}
+  {...attrs}
+>
+  {@render children()}
+</div>

package/dist/components/area/HkGridArea.svelte

@@ -1,77 +1,77 @@
-<script>
-  /**
-   * Grid area component
-   * This component contains a DIV that has display: grid set. It is
-   * wrapped in a box which makes it possible to add box attributes
-   * such as margins.
-   *
-   * Following component guidelines from Skeleton
-   * @see https://next.skeleton.dev/docs/resources/contribute/components
-   */
-
-  import HkArea from './HkArea.svelte';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   padding?: string,
-   *   margin?: string,
-   *   classes?: string,
-   *   style?: string,
-   *   boxBase?: string,
-   *   boxBg?: string,
-   *   boxPadding?: string,
-   *   boxMargin?: string,
-   *   boxClasses?: string,
-   *   boxAttrs?: { [attr: string]: * },
-   *   children: import('svelte').Snippet
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    padding,
-    margin,
-    classes,
-    style,
-    boxBase,
-    boxBg,
-    boxPadding,
-    boxMargin,
-    boxClasses,
-    boxAttrs,
-
-    // Snippets
-    children,
-
-    // DOM Element's
-    domElem = $bindable(),
-    boxDomElem = $bindable(),
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<div
-  data-hk-grid-area-box
-  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
-  {...boxAttrs}
-  bind:this={boxDomElem}
->
-  <HkArea
-    data-hk-grid-area
-    base="grid {base}"
-    bind:domElem
-    {bg}
-    {padding}
-    {margin}
-    {classes}
-    {style}
-    {...attrs}
-  >
-    {@render children()}
-  </HkArea>
-</div>
+<script>
+  /**
+   * Grid area component
+   * This component contains a DIV that has display: grid set. It is
+   * wrapped in a box which makes it possible to add box attributes
+   * such as margins.
+   *
+   * Following component guidelines from Skeleton
+   * @see https://next.skeleton.dev/docs/resources/contribute/components
+   */
+
+  import HkArea from './HkArea.svelte';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   padding?: string,
+   *   margin?: string,
+   *   classes?: string,
+   *   style?: string,
+   *   boxBase?: string,
+   *   boxBg?: string,
+   *   boxPadding?: string,
+   *   boxMargin?: string,
+   *   boxClasses?: string,
+   *   boxAttrs?: { [attr: string]: * },
+   *   children: import('svelte').Snippet
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    padding,
+    margin,
+    classes,
+    style,
+    boxBase,
+    boxBg,
+    boxPadding,
+    boxMargin,
+    boxClasses,
+    boxAttrs,
+
+    // Snippets
+    children,
+
+    // DOM Element's
+    domElem = $bindable(),
+    boxDomElem = $bindable(),
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<div
+  data-hk-grid-area-box
+  class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
+  {...boxAttrs}
+  bind:this={boxDomElem}
+>
+  <HkArea
+    data-hk-grid-area
+    base="grid {base}"
+    bind:domElem
+    {bg}
+    {padding}
+    {margin}
+    {classes}
+    {style}
+    {...attrs}
+  >
+    {@render children()}
+  </HkArea>
+</div>

package/dist/components/area/index.js

@@ -1,2 +1,2 @@
-export { default as HkArea } from './HkArea.svelte';
-export { default as HkGridArea } from './HkGridArea.svelte';
+export { default as HkArea } from './HkArea.svelte';
+export { default as HkGridArea } from './HkGridArea.svelte';

package/dist/components/buttons/button/Button.svelte

@@ -1,82 +1,82 @@
-<script>
-  import { toStateClasses } from '../../../util/design-system/index.js';
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   type?: string,
-   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
-   *   size?: 'sm' | 'md' | 'lg',
-   *   variant?: string,
-   *   mode?: 'light'|'dark'
-   *   buttonType?: 'button' | 'submit' | 'reset',
-   *   active?: boolean,
-   *   selected?: boolean,
-   *   loading?: boolean,
-   *   error?: boolean,
-   *   disabled?: boolean,
-   *   snippetLoading?: import('svelte').Snippet,
-   *   snippetError?: import('svelte').Snippet,
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Style
-    base,
-    bg,
-    classes,
-
-    type = '',
-    role = 'primary',
-    size = 'md',
-    variant = '',
-    mode = 'light',
-
-    buttonType = 'button',
-
-    // States
-    active = $bindable(false),
-    selected = $bindable(false),
-    loading = $bindable(false),
-    error = $bindable(false),
-    disabled = $bindable(false),
-
-    // Snippets
-    snippetLoading,
-    snippetError,
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-
-  let stateClasses = $derived.by(() => {
-    return toStateClasses({ active, selected, loading, error, disabled });
-  });
-</script>
-
-<button
-  data-component="button"
-  data-type={type}
-  data-role={role}
-  data-size={size}
-  data-variant={variant}
-  data-mode={mode}
-  type={buttonType}
-  class="{base} {bg} {classes} {stateClasses}"
-  disabled={disabled || loading}
-  aria-busy={loading}
-  aria-pressed={selected}
-  {...attrs}
->
-  {#if loading && snippetLoading}
-    {@render snippetLoading()}
-  {:else if error && snippetError}
-    {@render snippetError()}
-  {:else}
-    {@render children()}
-  {/if}
-</button>
+<script>
+  import { toStateClasses } from '../../../util/design-system/index.js';
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   type?: string,
+   *   role?: 'primary' | 'secondary' | 'tertiary' | 'custom',
+   *   size?: 'sm' | 'md' | 'lg',
+   *   variant?: string,
+   *   mode?: 'light'|'dark'
+   *   buttonType?: 'button' | 'submit' | 'reset',
+   *   active?: boolean,
+   *   selected?: boolean,
+   *   loading?: boolean,
+   *   error?: boolean,
+   *   disabled?: boolean,
+   *   snippetLoading?: import('svelte').Snippet,
+   *   snippetError?: import('svelte').Snippet,
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Style
+    base,
+    bg,
+    classes,
+
+    type = '',
+    role = 'primary',
+    size = 'md',
+    variant = '',
+    mode = 'light',
+
+    buttonType = 'button',
+
+    // States
+    active = $bindable(false),
+    selected = $bindable(false),
+    loading = $bindable(false),
+    error = $bindable(false),
+    disabled = $bindable(false),
+
+    // Snippets
+    snippetLoading,
+    snippetError,
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+
+  let stateClasses = $derived.by(() => {
+    return toStateClasses({ active, selected, loading, error, disabled });
+  });
+</script>
+
+<button
+  data-component="button"
+  data-type={type}
+  data-role={role}
+  data-size={size}
+  data-variant={variant}
+  data-mode={mode}
+  type={buttonType}
+  class="{base} {bg} {classes} {stateClasses}"
+  disabled={disabled || loading}
+  aria-busy={loading}
+  aria-pressed={selected}
+  {...attrs}
+>
+  {#if loading && snippetLoading}
+    {@render snippetLoading()}
+  {:else if error && snippetError}
+    {@render snippetError()}
+  {:else}
+    {@render children()}
+  {/if}
+</button>

package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte

@@ -1,30 +1,30 @@
-<script>
-  import Button from '../button/Button.svelte';
-
-  import { SteezeIcon } from '../../icons/index.js';
-
-  /**
-   * @type {{
-   *   src: import('../../icons/typedef.js').IconSource,
-   *   iconSize?: string,
-   *   theme?: string,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Icon
-    src,
-    iconSize,
-    theme,
-
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<Button type="icon-steeze" {...attrs}>
-  <SteezeIcon {src} size={iconSize} {theme} />
-</Button>
+<script>
+  import Button from '../button/Button.svelte';
+
+  import { SteezeIcon } from '../../icons/index.js';
+
+  /**
+   * @type {{
+   *   src: import('../../icons/typedef.js').IconSource,
+   *   iconSize?: string,
+   *   theme?: string,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Icon
+    src,
+    iconSize,
+    theme,
+
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="icon-steeze" {...attrs}>
+  <SteezeIcon {src} size={iconSize} {theme} />
+</Button>

package/dist/components/buttons/button-text/TextButton.svelte

@@ -1,21 +1,21 @@
-<script>
-  import Button from '../button/Button.svelte';
-
-  /**
-   * @type {{
-   *   children: import('svelte').Snippet,
-   *   [key: string]: any
-   * }}
-   */
-  const {
-    // Snippets
-    children,
-
-    // Attributes
-    ...attrs
-  } = $props();
-</script>
-
-<Button type="text" {...attrs}>
-  {@render children()}
-</Button>
+<script>
+  import Button from '../button/Button.svelte';
+
+  /**
+   * @type {{
+   *   children: import('svelte').Snippet,
+   *   [key: string]: any
+   * }}
+   */
+  const {
+    // Snippets
+    children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<Button type="text" {...attrs}>
+  {@render children()}
+</Button>

package/dist/components/buttons/index.js

@@ -1,3 +1,3 @@
-export { default as Button } from './button/Button.svelte';
-export { default as TextButton } from './button-text/TextButton.svelte';
-export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as TextButton } from './button-text/TextButton.svelte';
+export { default as SteezeIconButton } from './button-icon-steeze/SteezeIconButton.svelte';