@plaidev/karte-action-sdk 1.0.27 → 1.0.30

package/dist/index.es.d.ts

@@ -230,7 +230,51 @@ declare function hasSuffix<Suffix extends "px" | "em" | "rem" | "%" | "fr" | "vw
 declare function toBr(text: string): string;
 declare function randStr(digit?: number): string;
 declare const _default: "dummy";
-export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName };
+declare function hideOnScroll<Props extends {
+    hide_on_scroll: boolean;
+    hide_on_scroll_rate: number;
+    show_on_scroll_reenter: boolean;
+}>(props: Props, fn?: () => void): () => void;
+declare function hideOnTime<Props extends {
+    hide_on_time: boolean;
+    hide_on_time_count: number;
+}>(props: Props, fn?: () => void): () => void;
+declare function showOnScroll<Props extends {
+    show_on_scroll: boolean;
+    show_on_scroll_rate: number;
+    show_on_scroll_reenter: boolean;
+}>(props: Props, fn?: Function): () => void;
+declare function showOnTime<Props extends {
+    show_on_time: boolean;
+    show_on_time_count: number;
+}>(props: Props, fn?: Function): () => void;
+declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
+declare function createFog({ color, opacity, zIndex, onclick }: {
+    color?: string;
+    opacity?: string;
+    zIndex?: number;
+    onclick: () => void;
+}): {
+    fog: HTMLDivElement;
+    close: () => void;
+};
+type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
+declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+declare const collection: (config: {
+    api_key: string;
+    table: string;
+    endpoint?: string;
+}) => {
+    get(key: string | string[], cb: (err: Error | null, items?: any) => void): void;
+    getByQuery(query_name: string, params: {
+        [p: string]: string | number | boolean | (string | number | boolean)[];
+    }, options: {
+        ignore_fields?: string[];
+    } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
+    set(key: string, value: string, cb: (err: Error | null) => void): void;
+};
+export { state, closed, maximumZindex, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, _default, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, AnimationStyleTranslations, ModalPositions, ModalPosition, ModalPositionTranslations, ModalMarginTranslations, ModalMargin, ModalPlacement, DefaultModalPlacement, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ensureModalRoot, h, createFog, EmbedLogic, embed, collection };
 export { default as State } from './State.svelte';
 export { default as GridModalState } from './GridModalState.svelte';
 export { default as GridItem } from './GridItem.svelte';

package/dist/index.es.js

@@ -310,6 +310,178 @@ const ObjectFits = ['fill', 'contain', 'cover'];
 const Repeats = ['repeat', 'space', 'round', 'no-repeat'];
 const BackgroundSizes = ['cover', 'contain', 'auto'];
 
+const NOOP = () => { };
+function hideOnScroll(props, fn) {
+    return props.hide_on_scroll && props.hide_on_scroll_rate
+        ? onScroll(() => {
+            fn && fn();
+            return props.show_on_scroll_reenter;
+        }, props.hide_on_scroll_rate / 100)
+        : NOOP;
+}
+function hideOnTime(props, fn) {
+    return props.hide_on_time && props.hide_on_time_count
+        ? onTime(() => {
+            fn && fn();
+        }, props.hide_on_time_count * 1000)
+        : NOOP;
+}
+function showOnScroll(props, fn) {
+    return props.show_on_scroll && props.show_on_scroll_rate
+        ? onScroll(() => {
+            fn && fn();
+            return props.show_on_scroll_reenter;
+        }, props.show_on_scroll_rate / 100)
+        : NOOP;
+}
+function showOnTime(props, fn) {
+    return props.show_on_time && props.show_on_time_count
+        ? onTime(() => {
+            fn && fn();
+        }, props.show_on_time_count * 1000)
+        : NOOP;
+}
+
+const KARTE_MODAL_ROOT = 'karte-modal-root';
+function ensureModalRoot(useShadow = true) {
+    let el = document.getElementById(KARTE_MODAL_ROOT);
+    if (el == null) {
+        el = h('div', { id: KARTE_MODAL_ROOT });
+        document.body.appendChild(el);
+    }
+    const isShadow = !!document.body.attachShadow && useShadow;
+    if (isShadow) {
+        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
+    }
+    else {
+        return el;
+    }
+}
+const h = (type, props, ...children) => {
+    const el = document.createElement(type);
+    for (const key of Object.keys(props)) {
+        const v = props[key];
+        if (key === 'style') {
+            Object.assign(el.style, v);
+        }
+        else {
+            // @ts-ignore
+            el[key] = v;
+        }
+    }
+    for (const child of children) {
+        el.appendChild(child);
+    }
+    return el;
+};
+function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    const root = ensureModalRoot(false);
+    if (root.querySelector('.__krt-fog')) {
+        return { fog: null, close: () => { } };
+    }
+    const fog = document.createElement('div');
+    fog.className = '__krt-fog';
+    Object.assign(fog.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        'z-index': zIndex,
+        'background-color': color,
+        opacity,
+    });
+    const close = () => {
+        onclick();
+        fog.remove();
+    };
+    fog.onclick = close;
+    root.appendChild(fog);
+    return { fog, close };
+}
+function embed(target, replace, embed_method) {
+    if (embed_method == 'replace') {
+        if (target.parentNode) {
+            target.parentNode.replaceChild(replace, target);
+        }
+    }
+    else if (embed_method == 'append') {
+        target.append(replace);
+    }
+    else if (embed_method == 'prepend') {
+        target.prepend(replace);
+    }
+    else if (embed_method == 'after') {
+        target.after(replace);
+    }
+    else if (embed_method == 'before') {
+        target.before(replace);
+    }
+}
+
+const ENDPOINT = 'https://t.karte.io/collection';
+const collection = (config) => {
+    const endpoint = config.endpoint ?? ENDPOINT;
+    const api_key = config.api_key;
+    const table = config.table;
+    return {
+        get(key, cb) {
+            if (Array.isArray(key)) {
+                return request(`${endpoint}/getByKeys`, {
+                    api_key,
+                    name: table,
+                    keys: key,
+                }, cb);
+            }
+            else {
+                request(`${endpoint}/getByKey`, {
+                    api_key,
+                    name: table,
+                    key,
+                }, cb);
+            }
+        },
+        getByQuery(query_name, params, options, cb) {
+            request(`${endpoint}/getByQuery`, {
+                api_key,
+                name: table,
+                query_name,
+                params,
+                options,
+            }, cb);
+        },
+        set(key, value, cb) {
+            request(`${endpoint}/set`, {
+                api_key,
+                name: table,
+                key,
+                value,
+            }, cb);
+        },
+    };
+};
+function request(url, data, cb) {
+    const xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState != 4) {
+            return;
+        }
+        if (xhr.status != 200) {
+            return cb(new Error(`fail to send collection api request. reason: ${xhr.responseText}`));
+        }
+        try {
+            data = JSON.parse(xhr.responseText);
+            return cb(null, data);
+        }
+        catch (err) {
+            return cb(err);
+        }
+    };
+    xhr.open('POST', url);
+    xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
+    xhr.send(JSON.stringify({ ...data }));
+}
+
 /* src/components/Normalize.svelte generated by Svelte v3.44.1 */
 
 function add_css$9(target) {
@@ -700,7 +872,7 @@ function add_css$6(target) {
 	append_styles(target, "svelte-1bxl6mz", ".modal.svelte-1bxl6mz{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-1bxl6mz{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-1bxl6mz:hover{transform:rotate(90deg)}");
 }
 
-// (78:2) {#if closable}
+// (79:2) {#if closable}
 function create_if_block(ctx) {
 	let button;
 	let svg;
@@ -864,6 +1036,15 @@ function instance$8($$self, $$props, $$invalidate) {
 		bottom: '0px'
 	} } = $$props;
 
+	const overwriteMargin = isPreview()
+	? {
+			left: '0px',
+			right: '0px',
+			top: '0px',
+			bottom: '0px'
+		}
+	: margin;
+
 	let { _style = '' } = $$props;
 	let { _closeStyle = '' } = $$props;
 
@@ -903,13 +1084,8 @@ function instance$8($$self, $$props, $$invalidate) {
 		if ('$$scope' in $$props) $$invalidate(14, $$scope = $$props.$$scope);
 	};
 
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*margin*/ 8192) {
-			$$invalidate(5, marginStyle = getMarginStyle(margin));
-		}
-	};
-
 	$$invalidate(6, pos = getPositionStyle(overwritePosition));
+	$$invalidate(5, marginStyle = getMarginStyle(overwriteMargin));
 
 	return [
 		closable,
@@ -2087,4 +2263,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, TextBlock, TextButtonBlock, closeApp, closed, finalize, getMarginStyle, getPositionStyle, handleFocus, handleKeydown, hasSuffix, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, state, toBr };
+export { Alignments, AnimationStyleTranslations, AnimationStyles, BackgroundSizes, DefaultModalPlacement, Directions, Flex, FlexItem, GridItem, GridModalState, ImageBlock, Justifies, LengthUnits, MediaQueries, Modal, ModalMarginTranslations, ModalPositionTranslations, ModalPositions, ObjectFits, PropTypes, Repeats, State, TextBlock, TextButtonBlock, closeApp, closed, collection, createFog, embed, ensureModalRoot, finalize, getMarginStyle, getPositionStyle, h, handleFocus, handleKeydown, hasSuffix, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, send_event, setMiximumZindex, setPreviousFocus, showOnScroll, showOnTime, state, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.0.27",
+  "version": "1.0.30",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",
@@ -43,6 +43,7 @@
     "node-fetch": "2.6.7",
     "picocolors": "^1.0.0",
     "playwright": "^1.23.4",
+    "preact": "10.5.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.7",
     "rollup-plugin-http-resolve": "4.0.1-alpha.0",