@onsvisual/svelte-components 0.1.44 → 0.1.46

package/dist/@types/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Container } from "./wrappers/Container/Container.svelte";
 export { default as Embed } from "./wrappers/Embed/Embed.svelte";
+export { default as LazyLoad } from "./wrappers/LazyLoad/LazyLoad.svelte";
 export { default as Main } from "./wrappers/Main/Main.svelte";
 export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";

package/dist/@types/inputs/Button/Button.svelte.d.ts

@@ -14,6 +14,7 @@ export default class Button extends SvelteComponentTyped<{
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
+    icon: {};
     default: {};
 }> {
 }
@@ -37,6 +38,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        icon: {};
         default: {};
     };
 };

package/dist/@types/wrappers/LazyLoad/LazyLoad.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  LazyLoadProps */
+/** @typedef {typeof __propDef.events}  LazyLoadEvents */
+/** @typedef {typeof __propDef.slots}  LazyLoadSlots */
+export default class LazyLoad extends SvelteComponentTyped<{
+    entered?: boolean;
+    initialHeight?: number;
+    rootMargin?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type LazyLoadProps = typeof __propDef.props;
+export type LazyLoadEvents = typeof __propDef.events;
+export type LazyLoadSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        entered?: boolean;
+        initialHeight?: number;
+        rootMargin?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/index.js

@@ -1,6 +1,7 @@
 // Wrappers
 export { default as Container } from "./wrappers/Container/Container.svelte";
 export { default as Embed } from "./wrappers/Embed/Embed.svelte";
+export { default as LazyLoad } from "./wrappers/LazyLoad/LazyLoad.svelte";
 export { default as Main } from "./wrappers/Main/Main.svelte";
 export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";

package/dist/inputs/Button/Button.svelte

@@ -54,12 +54,20 @@
     on:click="{(e) => dispatch('click', e)}"
   >
     <span class="ons-btn__inner">
-      {#if icon && iconPosition === "before"}
-        <Icon type="{icon}" marginRight />
+      {#if iconPosition === "before"}
+        <slot name="icon">
+          {#if icon}
+            <Icon type="{icon}" marginRight />
+          {/if}
+        </slot>
       {/if}
       <span class="ons-btn__text"><slot /></span>
-      {#if icon && iconPosition === "after"}
-        <Icon type="{icon}" marginLeft />
+      {#if iconPosition === "after"}
+        <slot name="icon">
+          {#if icon}
+            <Icon type="{icon}" marginLeft />
+          {/if}
+        </slot>
       {/if}
     </span>
   </a>
@@ -75,12 +83,20 @@
     on:click="{(e) => dispatch('click', e)}"
   >
     <span class="ons-btn__inner">
-      {#if icon && iconPosition === "before"}
-        <Icon type="{icon}" marginRight />
+      {#if iconPosition === "before"}
+        <slot name="icon">
+          {#if icon}
+            <Icon type="{icon}" marginRight />
+          {/if}
+        </slot>
       {/if}
       <span class="ons-btn__text"><slot /></span>
-      {#if icon && iconPosition === "after"}
-        <Icon type="{icon}" marginLeft />
+      {#if iconPosition === "after"}
+        <slot name="icon">
+          {#if icon}
+            <Icon type="{icon}" marginLeft />
+          {/if}
+        </slot>
       {/if}
     </span>
   </button>

package/dist/wrappers/LazyLoad/LazyLoad.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { onMount, onDestroy } from "svelte";
+
+  /**
+   * Bind to this variable to monitor whether the component has entered the viewport (boolean true/false).
+   * @type {boolean}
+   */
+  export let entered = false;
+  /**
+   * Set the initial "placeholder" height of the component in pixels.
+   * @type {number}
+   */
+  export let initialHeight = 400;
+  /**
+   * Set how many pixels from the viewport you want lazy loading to kick in.
+   * @type {number}
+   */
+  export let rootMargin = 200;
+
+  let el, observer;
+
+  const callback = (entries, observer) => {
+    entries.forEach((entry) => {
+      let intersecting = entry.isIntersecting;
+      if (!entered && intersecting) {
+        observer.unobserve(el);
+        entered = true;
+        console.log("in view");
+      }
+    });
+  };
+
+  onMount(() => {
+    let options = { root: document, rootMargin: `${rootMargin}px` };
+
+    observer = new IntersectionObserver(callback, options);
+    observer.observe(el);
+  });
+
+  onDestroy(() => observer.unobserve(el));
+</script>
+
+{#if entered}
+  <slot />
+{:else}
+  <div bind:this="{el}" style:height="{+initialHeight || 100}px"></div>
+{/if}

package/dist/wrappers/Observe/Observe.svelte

@@ -3,6 +3,10 @@
 
   const dispatch = createEventDispatcher();
 
+  /**
+   * Bind to this variable to monitor visiblity (boolean true/false).
+   * @type {boolean}
+   */
   export let visible = false;
 
   let el, observer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.44",
+  "version": "0.1.46",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -177,6 +177,7 @@
     "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",
     "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
     "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",
+    "./wrappers/LazyLoad/LazyLoad.svelte": "./dist/wrappers/LazyLoad/LazyLoad.svelte",
     "./wrappers/Main/Main.svelte": "./dist/wrappers/Main/Main.svelte",
     "./wrappers/Observe/Observe.svelte": "./dist/wrappers/Observe/Observe.svelte",
     "./wrappers/Theme/Theme.svelte": "./dist/wrappers/Theme/Theme.svelte",