@plaidev/karte-action-sdk 1.1.74 → 1.1.75

package/dist/hydrate/index.es.d.ts

@@ -191,7 +191,7 @@ declare const Overflows: string[];
 type Overflow = typeof Overflows[number];
 type Style = string;
 type StateName = string;
-// Svelteの機能の隠蔽
+// Wrap svelte tools
 type Store<T> = Writable_<T>;
 declare const getStoreState: typeof get_;
 type OPTIONS = {
@@ -205,16 +205,40 @@ declare const CONSTANTS: {
     STATE_EVENT: string;
 };
 declare const actionId: string;
-// 現在のステートのストア
+declare const ACTION_SHOW_EVENT: string;
+declare const ACTION_CLOSE_EVENT: string;
+declare const ACTION_DESTROY_EVENT: string;
+// Store to handle current state ID
 declare const state: Store<string>;
-// アクションの表示を管理するストア
+// Store to handle all state IDs
+declare const states: Store<string[]>;
+// Store to handle visibility of action
 declare const closed: Store<boolean>;
-// グリッドの最大z-indexを管理するストア
+// Store to handle max z-index for grid items
 declare const maximumZindex: Store<number>;
-// カスタムイベントハンドラを管理するストア
+// Store to handle internal event handlers
+declare const internalHandlers: Store<{
+    [key: string]: ActionEventHandler;
+}>;
+// Store to handle custom event handlers
 declare const customHandlers: Store<{
     [key: string]: ActionEventHandler;
 }>;
+// Store to handle destruction of action
+declare const destroyed: Store<boolean>;
+// Store to handle stop of action
+declare const stopped: Store<boolean>;
+// Store to handle custom variables
+declare const customVariables: Store<{
+    [key: string]: any;
+}>;
+/**
+ * {@link setAutoStart} function to set auto start flag.
+ *
+ * @param {boolean} on
+ */
+declare const setAutoStart: (on?: boolean) => void;
+declare const setState: (event: any) => void;
 declare const initialize: (options?: OPTIONS) => () => void;
 declare const finalize: () => void;
 declare const send_event: (event_name: string, values?: any) => void;
@@ -273,6 +297,24 @@ declare function customAnimation(node: Element, { transform, animationStyle, del
     easing: (t: any) => any;
     css: (progress: number) => string;
 };
+/**
+ * {@link loadGlobalScript} load JavaScript that does not support ESM.
+ *
+ * @param {string} src Link of JavaScript file
+ */
+declare function loadGlobalScript(src: string): Promise<any>;
+/**
+ * {@link applyGlobalCss} apply global CSS to WEB page.
+ *
+ * @param {string} css CSS
+ */
+declare function applyGlobalCss(css: string): Promise<any>;
+/**
+ * {@link loadGlobalStyle} load global style to WEB page.
+ *
+ * @param {string} href Link of style file
+ */
+declare function loadGlobalStyle(href: string): Promise<any>;
 declare const handleFocus: (node: HTMLElement | null) => (e: any) => void;
 declare const setPreviousFocus: () => void;
 declare const handleKeydown: (handlers: {
@@ -323,28 +365,53 @@ declare function showOnTime<Props extends {
     show_on_time?: boolean;
     show_on_time_count?: number;
 }>(props: Props, fn?: Function): (() => void) | null;
+declare const NOOP: Function;
+interface ActionProps<Props, Variables> {
+    send: Function;
+    data: Props & Variables;
+    onShow?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    onChangeState?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+}
 /**
- * An options for {@link showModal}
+ * An options for {@link create}
  */
-interface ModalOptions<Props, Variables> {
+interface ActionOptions<Props, Variables> {
     /**
-     * {@link Send} function to receive events triggered in Karte action.
+     * {@link Send} function to receive events triggered in KARTE action.
      *
      * @default () => {}
      */
     send?: Function;
     /**
-     * {@link Props} used in Karte action.
+     * {@link Props} used in KARTE action.
      *
      * @default {}
      */
     props?: Props;
     /**
-     * {@link Variables} in which user variables or action table used in Karte action.
+     * {@link Variables} in which user variables or action table used in KARTE action.
      *
      * @default {}
      */
     variables?: Variables;
+    /**
+     * {@link onShow} function to hook the phase of showing action in KARTE action.
+     *
+     * @default () => {}
+     */
+    onShow?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    /**
+     * {@link onClose} function to hook the phase of closing action in KARTE action.
+     *
+     * @default () => {}
+     */
+    onClose?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    /**
+     * {@link onClose} function to hook the phase of changing action state in KARTE action.
+     *
+     * @default () => {}
+     */
+    onChangeState?: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>;
 }
 // types of props to reference for internaly
 interface _Props {
@@ -361,17 +428,74 @@ interface _Props {
     show_on_time_count?: number;
 }
 /**
- * Show the modal
+ * Create the KARTE action
  *
  * @param App - An entry point of svelte component.
- * @param options - A {@link ModalOptions | options}
+ * @param options - A {@link ActionOptions | options}
  *
- * @return A function to close the modal
+ * @return A function to destroy KARTE action
  */
-declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
-declare const KARTE_MODAL_ROOT = "karte-modal-root";
+declare function create<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ActionOptions<Props, Variables>): () => void;
+/**
+ * Dispatch the event to destroy KARTE action
+ */
+declare function dispatchDestroyEvent(): void;
+/**
+ * Destory KARTE action
+ */
+declare function destroy(): void;
+/**
+ * Show KARTE action
+ */
+declare function show(): void;
+/**
+ * Close KARTE action
+ */
+declare function close(): void;
+declare const KARTE_ACTION_ROOT = "karte-modal-root";
 declare const KARTE_ACTION_RID = "karte-action-rid";
-declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+/**
+ * {@link onShow} function to set the function to hook the phase after showing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onShow<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onClose} function to set the function to hook the phase before closing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onClose<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onDestory} function to set the function to hook the phase before destroying action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onDestroy<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onChangeState} function to set the function to hook the phase after changing action state.
+ *
+ * @param {(props: ActionProps, newState: string) => void | Promise<void>} fn Callback
+ */
+declare function onChangeState<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @param {string} newState New state of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>): void;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
 declare function createFog({ color, opacity, zIndex, onclick }: {
     color?: string;
@@ -384,11 +508,28 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
 };
 type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
 declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+/**
+ * {@link applyCss} apply CSS to KARTE action.
+ *
+ * @param {string} css CSS
+ */
+declare function applyCss(css: string): Promise<any>;
+/**
+ * {@link loadStyle} load global style to KARTE action.
+ *
+ * @param {string} href Link of style file
+ */
+declare function loadStyle(href: string): Promise<any>;
+// -------- The following codes are deprecated --------
+declare const showModal: typeof create; // @deprecated
+type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated
+declare const KARTE_MODAL_ROOT = "karte-modal-root"; // @deprecated
+declare const ensureModalRoot: typeof ensureActionRoot; // @deprecated
 /**
  * An options for {@link createApp}
  * @deprecated
  */
-type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
+type AppOptions<Props, Variables> = ActionOptions<Props, Variables>;
 /**
  * App application instance that is with {@link createApp}
  * @deprecated
@@ -428,7 +569,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, state, closed, maximumZindex, customHandlers, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, KARTE_MODAL_ROOT, KARTE_ACTION_RID, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
+export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/hydrate/index.es.js

@@ -1,7 +1,7 @@
 import { writable, get } from 'svelte/store';
 import 'svelte/easing';
 import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, claim_component, claim_space, mount_component, insert_hydration, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, claim_element, children, attr, listen, is_function, append_hydration, add_render_callback, create_in_transition, svg_element, claim_svg_element, binding_callbacks, destroy_each, text, claim_text, set_data, src_url_equal, null_to_empty } from 'https://esm.sh/svelte@3.53.1/internal';
-import { createEventDispatcher, onMount, onDestroy, setContext, getContext } from 'https://esm.sh/svelte@3.53.1';
+import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'https://esm.sh/svelte@3.53.1';
 
 /**
  * 内部的に使われている、UIから選択できない関数
@@ -139,21 +139,41 @@ const CONSTANTS = {
 };
 const functionOptions = writable({});
 const actionId = randStr();
-// 現在のステートのストア
+const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
+const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
+const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+// Store to handle current state ID
 const state = writable('/');
-// アクションの表示を管理するストア
+// Store to handle all state IDs
+const states = writable([]);
+// Store to handle visibility of action
 const closed = writable(false);
-// グリッドの最大z-indexを管理するストア
+// Store to handle max z-index for grid items
 const maximumZindex = writable(0);
-// カスタムイベントハンドラを管理するストア
+// Store to handle internal event handlers
+const internalHandlers = writable({});
+// Store to handle custom event handlers
 const customHandlers = writable({});
+// Store to handle destruction of action
+const destroyed = writable(false);
+// Store to handle stop of action
+const stopped = writable(false);
+// Store to handle custom variables
+const customVariables = writable({});
+/**
+ * {@link setAutoStart} function to set auto start flag.
+ *
+ * @param {boolean} on
+ */
+const setAutoStart = (on = true) => {
+    stopped.set(!on);
+};
 const setState = (event) => {
     if (event.detail.actionId === actionId || event.detail.actionId === CONSTANTS.ALL_ACTION_ID) {
         state.set(event.detail.to);
     }
 };
 const initialize = (options) => {
-    window.addEventListener(CONSTANTS.STATE_EVENT, setState);
     if (options?.initialState) {
         state.set(options?.initialState);
     }
@@ -162,7 +182,6 @@ const initialize = (options) => {
     return () => finalize();
 };
 const finalize = () => {
-    window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
     functionOptions.set({});
 };
 const send_event = (event_name, values) => {
@@ -236,6 +255,49 @@ function customAnimation(node, { transform, animationStyle, delay = 0, duration
         return {};
     }
 }
+/**
+ * {@link loadGlobalScript} load JavaScript that does not support ESM.
+ *
+ * @param {string} src Link of JavaScript file
+ */
+async function loadGlobalScript(src) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        document.body.appendChild(script);
+        script.addEventListener('load', () => resolve(script));
+        script.addEventListener('error', () => reject(script));
+    });
+}
+/**
+ * {@link applyGlobalCss} apply global CSS to WEB page.
+ *
+ * @param {string} css CSS
+ */
+async function applyGlobalCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        document.body.appendChild(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * {@link loadGlobalStyle} load global style to WEB page.
+ *
+ * @param {string} href Link of style file
+ */
+async function loadGlobalStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.body.appendChild(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
 
 const PropTypes = [
     'BooleanKeyword',
@@ -376,58 +438,121 @@ function showOnTime(props, fn) {
         : null;
 }
 
+const NOOP = (_args) => { };
 /**
- * Show the modal
+ * Create the KARTE action
  *
  * @param App - An entry point of svelte component.
- * @param options - A {@link ModalOptions | options}
+ * @param options - A {@link ActionOptions | options}
  *
- * @return A function to close the modal
+ * @return A function to destroy KARTE action
  */
-function showModal(App, options = {
+function create(App, options = {
     send: () => { },
     props: {},
     variables: {},
 }) {
     let app = null;
+    const data = { ...options.props, ...options.variables };
     const close = () => {
-        if (app) {
-            app.$destroy();
-            app = null;
+        if (!app) {
+            return;
+        }
+        closed.set(true);
+        window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
+        if (options.onClose) {
+            options.onClose({ send: options.send, data });
         }
+        app.$destroy();
+        app = null;
     };
+    window.addEventListener(ACTION_CLOSE_EVENT, close);
     const show = () => {
         if (app) {
             return;
         }
         options.send('message_open');
+        closed.set(false);
+        window.addEventListener(CONSTANTS.STATE_EVENT, setState);
         app = new App({
             target: ensureModalRoot(!true),
             hydrate: true,
             props: {
                 send: options.send,
                 close,
-                data: {
-                    ...options.props,
-                    ...options.variables,
-                },
+                data,
+                onShow: options.onShow,
+                onChangeState: options.onChangeState,
             },
         });
     };
+    window.addEventListener(ACTION_SHOW_EVENT, show);
+    const startClose = () => {
+        let cleanup;
+        // if in hydrate mode (preview), nothing is done, since action will be disposed and closed in the preview module
+        {
+            cleanup = NOOP;
+        }
+        return cleanup;
+    };
     const _show = () => {
         show();
         return close;
     };
-    // if in hydrate mode (preview), always show modal
-    const showCleanup = _show();
+    const startShow = () => {
+        let cleanup;
+        // if in hydrate mode (preview), always show action
+        {
+            cleanup = _show();
+        }
+        return cleanup;
+    };
+    // init
+    let hideCleanup = NOOP;
+    let showCleanup = NOOP;
+    if (!getStoreState(stopped)) {
+        hideCleanup = startShow();
+        showCleanup = startClose();
+    }
     return () => {
         close();
+        hideCleanup();
         showCleanup();
+        window.removeEventListener(ACTION_SHOW_EVENT, show);
+        window.removeEventListener(ACTION_CLOSE_EVENT, close);
     };
 }
-const KARTE_MODAL_ROOT = 'karte-modal-root';
+/**
+ * Dispatch the event to destroy KARTE action
+ */
+function dispatchDestroyEvent() {
+    const event = new Event(ACTION_DESTROY_EVENT);
+    window.dispatchEvent(event);
+}
+/**
+ * Destory KARTE action
+ */
+function destroy() {
+    destroyed.set(true);
+    dispatchDestroyEvent();
+}
+/**
+ * Show KARTE action
+ */
+function show() {
+    const event = new Event(ACTION_SHOW_EVENT);
+    window.dispatchEvent(event);
+}
+/**
+ * Close KARTE action
+ */
+function close() {
+    const event = new Event(ACTION_CLOSE_EVENT);
+    window.dispatchEvent(event);
+}
+const KARTE_ACTION_ROOT = 'karte-modal-root';
 const KARTE_ACTION_RID = 'karte-action-rid';
-function ensureModalRoot(useShadow = true) {
+function ensureActionRoot(useShadow = true) {
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
     if (el == null) {
         el = h('div', { class: KARTE_MODAL_ROOT, [`data-${KARTE_ACTION_RID}`]: actionId });
@@ -441,6 +566,71 @@ function ensureModalRoot(useShadow = true) {
         return el;
     }
 }
+/**
+ * {@link onShow} function to set the function to hook the phase after showing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onShow(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onShow = fn;
+        return current;
+    });
+}
+/**
+ * {@link onClose} function to set the function to hook the phase before closing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onClose(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onClose = fn;
+        return current;
+    });
+}
+/**
+ * {@link onDestory} function to set the function to hook the phase before destroying action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onDestroy(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onDestroy = fn;
+        return current;
+    });
+}
+/**
+ * {@link onChangeState} function to set the function to hook the phase after changing action state.
+ *
+ * @param {(props: ActionProps, newState: string) => void | Promise<void>} fn Callback
+ */
+function onChangeState(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @param {string} newState New state of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onChangeState = fn;
+        return current;
+    });
+}
 const h = (type, props, ...children) => {
     const el = document.createElement(type);
     for (const key of Object.keys(props)) {
@@ -501,6 +691,52 @@ function embed(target, replace, embed_method) {
         target.before(replace);
     }
 }
+function getActionShadowRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root || !root.shadowRoot) {
+        return null;
+    }
+    return root.shadowRoot;
+}
+/**
+ * {@link applyCss} apply CSS to KARTE action.
+ *
+ * @param {string} css CSS
+ */
+async function applyCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        const shadowRoot = getActionShadowRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * {@link loadStyle} load global style to KARTE action.
+ *
+ * @param {string} href Link of style file
+ */
+async function loadStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        const shadowRoot = getActionShadowRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
+// -------- The following codes are deprecated --------
+const showModal = create; // @deprecated
+const KARTE_MODAL_ROOT = KARTE_ACTION_ROOT; // @deprecated
+const ensureModalRoot = ensureActionRoot; // @deprecated
 /**
  * Create an application instance
  * @deprecated
@@ -831,6 +1067,17 @@ function instance$e($$self, $$props, $$invalidate) {
 		if ('$$scope' in $$props) $$invalidate(2, $$scope = $$props.$$scope);
 	};
 
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*path*/ 1) {
+			{
+				states.update(current => {
+					current.push(path);
+					return current;
+				});
+			}
+		}
+	};
+
 	return [path, $state, $$scope, slots];
 }
 
@@ -1295,7 +1542,7 @@ function instance$c($$self, $$props, $$invalidate) {
 		$$invalidate(6, visible = true);
 	});
 
-	onDestroy(() => setPreviousFocus());
+	onDestroy$1(() => setPreviousFocus());
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -3220,4 +3467,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_MODAL_ROOT, LengthUnits, MediaQueries, Modal, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, closeApp, closed, collection, createApp, createFog, customAnimation, customHandlers, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, runScript, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
+export { ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };

package/dist/index.es.d.ts

@@ -191,7 +191,7 @@ declare const Overflows: string[];
 type Overflow = typeof Overflows[number];
 type Style = string;
 type StateName = string;
-// Svelteの機能の隠蔽
+// Wrap svelte tools
 type Store<T> = Writable_<T>;
 declare const getStoreState: typeof get_;
 type OPTIONS = {
@@ -205,16 +205,40 @@ declare const CONSTANTS: {
     STATE_EVENT: string;
 };
 declare const actionId: string;
-// 現在のステートのストア
+declare const ACTION_SHOW_EVENT: string;
+declare const ACTION_CLOSE_EVENT: string;
+declare const ACTION_DESTROY_EVENT: string;
+// Store to handle current state ID
 declare const state: Store<string>;
-// アクションの表示を管理するストア
+// Store to handle all state IDs
+declare const states: Store<string[]>;
+// Store to handle visibility of action
 declare const closed: Store<boolean>;
-// グリッドの最大z-indexを管理するストア
+// Store to handle max z-index for grid items
 declare const maximumZindex: Store<number>;
-// カスタムイベントハンドラを管理するストア
+// Store to handle internal event handlers
+declare const internalHandlers: Store<{
+    [key: string]: ActionEventHandler;
+}>;
+// Store to handle custom event handlers
 declare const customHandlers: Store<{
     [key: string]: ActionEventHandler;
 }>;
+// Store to handle destruction of action
+declare const destroyed: Store<boolean>;
+// Store to handle stop of action
+declare const stopped: Store<boolean>;
+// Store to handle custom variables
+declare const customVariables: Store<{
+    [key: string]: any;
+}>;
+/**
+ * {@link setAutoStart} function to set auto start flag.
+ *
+ * @param {boolean} on
+ */
+declare const setAutoStart: (on?: boolean) => void;
+declare const setState: (event: any) => void;
 declare const initialize: (options?: OPTIONS) => () => void;
 declare const finalize: () => void;
 declare const send_event: (event_name: string, values?: any) => void;
@@ -273,6 +297,24 @@ declare function customAnimation(node: Element, { transform, animationStyle, del
     easing: (t: any) => any;
     css: (progress: number) => string;
 };
+/**
+ * {@link loadGlobalScript} load JavaScript that does not support ESM.
+ *
+ * @param {string} src Link of JavaScript file
+ */
+declare function loadGlobalScript(src: string): Promise<any>;
+/**
+ * {@link applyGlobalCss} apply global CSS to WEB page.
+ *
+ * @param {string} css CSS
+ */
+declare function applyGlobalCss(css: string): Promise<any>;
+/**
+ * {@link loadGlobalStyle} load global style to WEB page.
+ *
+ * @param {string} href Link of style file
+ */
+declare function loadGlobalStyle(href: string): Promise<any>;
 declare const handleFocus: (node: HTMLElement | null) => (e: any) => void;
 declare const setPreviousFocus: () => void;
 declare const handleKeydown: (handlers: {
@@ -323,28 +365,53 @@ declare function showOnTime<Props extends {
     show_on_time?: boolean;
     show_on_time_count?: number;
 }>(props: Props, fn?: Function): (() => void) | null;
+declare const NOOP: Function;
+interface ActionProps<Props, Variables> {
+    send: Function;
+    data: Props & Variables;
+    onShow?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    onChangeState?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+}
 /**
- * An options for {@link showModal}
+ * An options for {@link create}
  */
-interface ModalOptions<Props, Variables> {
+interface ActionOptions<Props, Variables> {
     /**
-     * {@link Send} function to receive events triggered in Karte action.
+     * {@link Send} function to receive events triggered in KARTE action.
      *
      * @default () => {}
      */
     send?: Function;
     /**
-     * {@link Props} used in Karte action.
+     * {@link Props} used in KARTE action.
      *
      * @default {}
      */
     props?: Props;
     /**
-     * {@link Variables} in which user variables or action table used in Karte action.
+     * {@link Variables} in which user variables or action table used in KARTE action.
      *
      * @default {}
      */
     variables?: Variables;
+    /**
+     * {@link onShow} function to hook the phase of showing action in KARTE action.
+     *
+     * @default () => {}
+     */
+    onShow?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    /**
+     * {@link onClose} function to hook the phase of closing action in KARTE action.
+     *
+     * @default () => {}
+     */
+    onClose?: (props: ActionProps<Props, Variables>) => void | Promise<void>;
+    /**
+     * {@link onClose} function to hook the phase of changing action state in KARTE action.
+     *
+     * @default () => {}
+     */
+    onChangeState?: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>;
 }
 // types of props to reference for internaly
 interface _Props {
@@ -361,17 +428,74 @@ interface _Props {
     show_on_time_count?: number;
 }
 /**
- * Show the modal
+ * Create the KARTE action
  *
  * @param App - An entry point of svelte component.
- * @param options - A {@link ModalOptions | options}
+ * @param options - A {@link ActionOptions | options}
  *
- * @return A function to close the modal
+ * @return A function to destroy KARTE action
  */
-declare function showModal<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ModalOptions<Props, Variables>): () => void;
-declare const KARTE_MODAL_ROOT = "karte-modal-root";
+declare function create<Props extends _Props, Variables>(App: typeof SvelteComponentDev, options?: ActionOptions<Props, Variables>): () => void;
+/**
+ * Dispatch the event to destroy KARTE action
+ */
+declare function dispatchDestroyEvent(): void;
+/**
+ * Destory KARTE action
+ */
+declare function destroy(): void;
+/**
+ * Show KARTE action
+ */
+declare function show(): void;
+/**
+ * Close KARTE action
+ */
+declare function close(): void;
+declare const KARTE_ACTION_ROOT = "karte-modal-root";
 declare const KARTE_ACTION_RID = "karte-action-rid";
-declare function ensureModalRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+declare function ensureActionRoot(useShadow?: boolean): ShadowRoot | HTMLElement;
+/**
+ * {@link onShow} function to set the function to hook the phase after showing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onShow<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onClose} function to set the function to hook the phase before closing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onClose<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onDestory} function to set the function to hook the phase before destroying action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+declare function onDestroy<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>) => void | Promise<void>): void;
+/**
+ * {@link onChangeState} function to set the function to hook the phase after changing action state.
+ *
+ * @param {(props: ActionProps, newState: string) => void | Promise<void>} fn Callback
+ */
+declare function onChangeState<Props extends _Props, Variables>(/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @param {string} newState New state of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn: (props: ActionProps<Props, Variables>, newState: string) => void | Promise<void>): void;
 declare const h: (type: string, props: any, ...children: Array<any>) => HTMLElement;
 declare function createFog({ color, opacity, zIndex, onclick }: {
     color?: string;
@@ -384,11 +508,28 @@ declare function createFog({ color, opacity, zIndex, onclick }: {
 };
 type EmbedLogic = "replace" | "append" | "prepend" | "after" | "before";
 declare function embed(target: HTMLElement, replace: HTMLElement, embed_method: EmbedLogic): void;
+/**
+ * {@link applyCss} apply CSS to KARTE action.
+ *
+ * @param {string} css CSS
+ */
+declare function applyCss(css: string): Promise<any>;
+/**
+ * {@link loadStyle} load global style to KARTE action.
+ *
+ * @param {string} href Link of style file
+ */
+declare function loadStyle(href: string): Promise<any>;
+// -------- The following codes are deprecated --------
+declare const showModal: typeof create; // @deprecated
+type ModalOptions<Props, Variables> = ActionOptions<Props, Variables>; // @deprecated
+declare const KARTE_MODAL_ROOT = "karte-modal-root"; // @deprecated
+declare const ensureModalRoot: typeof ensureActionRoot; // @deprecated
 /**
  * An options for {@link createApp}
  * @deprecated
  */
-type AppOptions<Props, Variables> = ModalOptions<Props, Variables>;
+type AppOptions<Props, Variables> = ActionOptions<Props, Variables>;
 /**
  * App application instance that is with {@link createApp}
  * @deprecated
@@ -428,7 +569,7 @@ declare const collection: (config: {
     } | null | undefined, cb: (err: Error | null, items?: any) => void): void;
     set(key: string, value: string, cb: (err: Error | null) => void): void;
 };
-export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, state, closed, maximumZindex, customHandlers, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, ModalOptions, showModal, KARTE_MODAL_ROOT, KARTE_ACTION_RID, ensureModalRoot, h, createFog, EmbedLogic, embed, AppOptions, App, createApp, collection };
+export { Store, getStoreState, ActionEventHandler, CONSTANTS, actionId, ACTION_SHOW_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, state, states, closed, maximumZindex, internalHandlers, customHandlers, destroyed, stopped, customVariables, setAutoStart, setState, initialize, finalize, send_event, isPreview, setMiximumZindex, none, moveTo, linkTo, closeApp, runScript, execOnClickOperation, haveFunction, customAnimation, loadGlobalScript, applyGlobalCss, loadGlobalStyle, handleFocus, setPreviousFocus, handleKeydown, getPositionStyle, getTransform, getMarginStyle, onScroll, onTime, hasSuffix, toBr, randStr, PropTypes, PropType, Code, MediaQueries, MediaQuery, Directions, Direction, AnimationStyles, AnimationStyle, ModalPositions, ModalPosition, ModalMargin, ModalPlacement, DefaultModalPlacement, OperationArgumentType, Operation, OnClickOperationOptions, OnClickOperation, LongText, Url, Image, LengthUnits, LengthUnit, Length, Color, Justifies, Justify, Alignments, Alignment, ObjectFits, ObjectFit, Repeats, Repeat, BackgroundSizes, BackgroundSize, Cursors, Cursor, Overflows, Overflow, Style, StateName, hideOnScroll, hideOnTime, showOnScroll, showOnTime, NOOP, ActionProps, ActionOptions, create, dispatchDestroyEvent, destroy, show, close, KARTE_ACTION_ROOT, KARTE_ACTION_RID, ensureActionRoot, onShow, onClose, onDestroy, onChangeState, h, createFog, EmbedLogic, embed, applyCss, loadStyle, showModal, ModalOptions, KARTE_MODAL_ROOT, ensureModalRoot, AppOptions, App, createApp, collection };
 export { default as State } from './components/State.svelte';
 export { default as StateItem } from './components/StateItem.svelte';
 export { default as Modal } from './components/Modal.svelte';

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { writable, get } from 'svelte/store';
 import { linear, elasticOut, cubicOut } from 'svelte/easing';
 import { SvelteComponent, init, safe_not_equal, append_styles, create_slot, create_component, space, mount_component, insert, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, destroy_component, detach, empty, group_outros, check_outros, component_subscribe, noop, element, attr, listen, is_function, append, add_render_callback, create_in_transition, svg_element, binding_callbacks, destroy_each, text, set_data, src_url_equal, null_to_empty } from 'svelte/internal';
-import { createEventDispatcher, onMount, onDestroy, setContext, getContext } from 'svelte';
+import { createEventDispatcher, onMount, onDestroy as onDestroy$1, setContext, getContext } from 'svelte';
 
 /**
  * 内部的に使われている、UIから選択できない関数
@@ -139,21 +139,41 @@ const CONSTANTS = {
 };
 const functionOptions = writable({});
 const actionId = randStr();
-// 現在のステートのストア
+const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
+const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
+const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+// Store to handle current state ID
 const state = writable('/');
-// アクションの表示を管理するストア
+// Store to handle all state IDs
+const states = writable([]);
+// Store to handle visibility of action
 const closed = writable(false);
-// グリッドの最大z-indexを管理するストア
+// Store to handle max z-index for grid items
 const maximumZindex = writable(0);
-// カスタムイベントハンドラを管理するストア
+// Store to handle internal event handlers
+const internalHandlers = writable({});
+// Store to handle custom event handlers
 const customHandlers = writable({});
+// Store to handle destruction of action
+const destroyed = writable(false);
+// Store to handle stop of action
+const stopped = writable(false);
+// Store to handle custom variables
+const customVariables = writable({});
+/**
+ * {@link setAutoStart} function to set auto start flag.
+ *
+ * @param {boolean} on
+ */
+const setAutoStart = (on = true) => {
+    stopped.set(!on);
+};
 const setState = (event) => {
     if (event.detail.actionId === actionId || event.detail.actionId === CONSTANTS.ALL_ACTION_ID) {
         state.set(event.detail.to);
     }
 };
 const initialize = (options) => {
-    window.addEventListener(CONSTANTS.STATE_EVENT, setState);
     if (options?.initialState) {
         state.set(options?.initialState);
     }
@@ -162,7 +182,6 @@ const initialize = (options) => {
     return () => finalize();
 };
 const finalize = () => {
-    window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
     functionOptions.set({});
 };
 const send_event = (event_name, values) => {
@@ -288,6 +307,49 @@ function customAnimation(node, { transform, animationStyle, delay = 0, duration
         css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
     };
 }
+/**
+ * {@link loadGlobalScript} load JavaScript that does not support ESM.
+ *
+ * @param {string} src Link of JavaScript file
+ */
+async function loadGlobalScript(src) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        document.body.appendChild(script);
+        script.addEventListener('load', () => resolve(script));
+        script.addEventListener('error', () => reject(script));
+    });
+}
+/**
+ * {@link applyGlobalCss} apply global CSS to WEB page.
+ *
+ * @param {string} css CSS
+ */
+async function applyGlobalCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        document.body.appendChild(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * {@link loadGlobalStyle} load global style to WEB page.
+ *
+ * @param {string} href Link of style file
+ */
+async function loadGlobalStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.body.appendChild(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
 
 const PropTypes = [
     'BooleanKeyword',
@@ -478,69 +540,129 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
     return haveCondition ? cleanupAll : null;
 }
 
-const NOOP = () => { };
+const NOOP = (_args) => { };
 /**
- * Show the modal
+ * Create the KARTE action
  *
  * @param App - An entry point of svelte component.
- * @param options - A {@link ModalOptions | options}
+ * @param options - A {@link ActionOptions | options}
  *
- * @return A function to close the modal
+ * @return A function to destroy KARTE action
  */
-function showModal(App, options = {
+function create(App, options = {
     send: () => { },
     props: {},
     variables: {},
 }) {
     let app = null;
+    const data = { ...options.props, ...options.variables };
     const close = () => {
-        if (app) {
-            app.$destroy();
-            app = null;
+        if (!app) {
+            return;
+        }
+        closed.set(true);
+        window.removeEventListener(CONSTANTS.STATE_EVENT, setState);
+        if (options.onClose) {
+            options.onClose({ send: options.send, data });
         }
+        app.$destroy();
+        app = null;
     };
+    window.addEventListener(ACTION_CLOSE_EVENT, close);
     const show = () => {
         if (app) {
             return;
         }
         options.send('message_open');
+        closed.set(false);
+        window.addEventListener(CONSTANTS.STATE_EVENT, setState);
         app = new App({
             target: ensureModalRoot(!false),
             hydrate: false,
             props: {
                 send: options.send,
                 close,
-                data: {
-                    ...options.props,
-                    ...options.variables,
-                },
+                data,
+                onShow: options.onShow,
+                onChangeState: options.onChangeState,
             },
         });
     };
-    const currying = conditionFn => fn => conditionFn(options.props, fn);
-    // if in hydrate mode (preview), nothing is done, since modal will be disposed and closed in the preview module
-    const hideCleanup = (options.props.hide_and_condition
-            ? and(close, currying(hideOnScroll), currying(hideOnTime))
-            : or(close, currying(hideOnScroll), currying(hideOnTime))) || NOOP
-        ;
+    window.addEventListener(ACTION_SHOW_EVENT, show);
+    const currying = (conditionFn, options) => (fn) => conditionFn(options.props, fn);
+    const startClose = () => {
+        let cleanup;
+        // if in hydrate mode (preview), nothing is done, since action will be disposed and closed in the preview module
+        if (options.props.hide_and_condition) {
+            cleanup = and(close, currying(hideOnScroll, options), currying(hideOnTime, options)) || NOOP;
+        }
+        else {
+            cleanup = or(close, currying(hideOnScroll, options), currying(hideOnTime, options)) || NOOP;
+        }
+        return cleanup;
+    };
     const _show = () => {
         show();
         return close;
     };
-    // if in hydrate mode (preview), always show modal
-    const showCleanup = (options.props.show_and_condition
-            ? and(show, currying(showOnScroll), currying(showOnTime))
-            : or(show, currying(showOnScroll), currying(showOnTime))) || _show()
-        ;
+    const startShow = () => {
+        let cleanup;
+        // if in hydrate mode (preview), always show action
+        if (options.props.show_and_condition) {
+            cleanup =
+                and(show, currying(showOnScroll, options), currying(showOnTime, options)) || _show();
+        }
+        else {
+            cleanup = or(show, currying(showOnScroll, options), currying(showOnTime, options)) || _show();
+        }
+        return cleanup;
+    };
+    // init
+    let hideCleanup = NOOP;
+    let showCleanup = NOOP;
+    if (!getStoreState(stopped)) {
+        hideCleanup = startShow();
+        showCleanup = startClose();
+    }
     return () => {
         close();
-        showCleanup();
         hideCleanup();
+        showCleanup();
+        window.removeEventListener(ACTION_SHOW_EVENT, show);
+        window.removeEventListener(ACTION_CLOSE_EVENT, close);
     };
 }
-const KARTE_MODAL_ROOT = 'karte-modal-root';
+/**
+ * Dispatch the event to destroy KARTE action
+ */
+function dispatchDestroyEvent() {
+    const event = new Event(ACTION_DESTROY_EVENT);
+    window.dispatchEvent(event);
+}
+/**
+ * Destory KARTE action
+ */
+function destroy() {
+    destroyed.set(true);
+    dispatchDestroyEvent();
+}
+/**
+ * Show KARTE action
+ */
+function show() {
+    const event = new Event(ACTION_SHOW_EVENT);
+    window.dispatchEvent(event);
+}
+/**
+ * Close KARTE action
+ */
+function close() {
+    const event = new Event(ACTION_CLOSE_EVENT);
+    window.dispatchEvent(event);
+}
+const KARTE_ACTION_ROOT = 'karte-modal-root';
 const KARTE_ACTION_RID = 'karte-action-rid';
-function ensureModalRoot(useShadow = true) {
+function ensureActionRoot(useShadow = true) {
     let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
     if (el == null) {
         el = h('div', { class: KARTE_MODAL_ROOT, [`data-${KARTE_ACTION_RID}`]: actionId });
@@ -554,6 +676,71 @@ function ensureModalRoot(useShadow = true) {
         return el;
     }
 }
+/**
+ * {@link onShow} function to set the function to hook the phase after showing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onShow(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onShow = fn;
+        return current;
+    });
+}
+/**
+ * {@link onClose} function to set the function to hook the phase before closing action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onClose(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onClose = fn;
+        return current;
+    });
+}
+/**
+ * {@link onDestory} function to set the function to hook the phase before destroying action.
+ *
+ * @param {(props: ActionProps<Props, Variables>) => void | Promise<void>} fn Callback
+ */
+function onDestroy(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onDestroy = fn;
+        return current;
+    });
+}
+/**
+ * {@link onChangeState} function to set the function to hook the phase after changing action state.
+ *
+ * @param {(props: ActionProps, newState: string) => void | Promise<void>} fn Callback
+ */
+function onChangeState(
+/**
+ * @param {ActionProps<Props, Variables>} props Properties of KARTE action
+ * @param {string} newState New state of KARTE action
+ * @returns {void|Promise<void>}
+ */
+fn) {
+    internalHandlers.update(current => {
+        current.onChangeState = fn;
+        return current;
+    });
+}
 const h = (type, props, ...children) => {
     const el = document.createElement(type);
     for (const key of Object.keys(props)) {
@@ -614,6 +801,52 @@ function embed(target, replace, embed_method) {
         target.before(replace);
     }
 }
+function getActionShadowRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root || !root.shadowRoot) {
+        return null;
+    }
+    return root.shadowRoot;
+}
+/**
+ * {@link applyCss} apply CSS to KARTE action.
+ *
+ * @param {string} css CSS
+ */
+async function applyCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        const shadowRoot = getActionShadowRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * {@link loadStyle} load global style to KARTE action.
+ *
+ * @param {string} href Link of style file
+ */
+async function loadStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        const shadowRoot = getActionShadowRoot();
+        if (!shadowRoot)
+            return;
+        shadowRoot.append(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
+// -------- The following codes are deprecated --------
+const showModal = create; // @deprecated
+const KARTE_MODAL_ROOT = KARTE_ACTION_ROOT; // @deprecated
+const ensureModalRoot = ensureActionRoot; // @deprecated
 /**
  * Create an application instance
  * @deprecated
@@ -931,6 +1164,17 @@ function instance$e($$self, $$props, $$invalidate) {
 		if ('$$scope' in $$props) $$invalidate(2, $$scope = $$props.$$scope);
 	};
 
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*path*/ 1) {
+			{
+				states.update(current => {
+					current.push(path);
+					return current;
+				});
+			}
+		}
+	};
+
 	return [path, $state, $$scope, slots];
 }
 
@@ -1331,7 +1575,7 @@ function instance$c($$self, $$props, $$invalidate) {
 		$$invalidate(6, visible = true);
 	});
 
-	onDestroy(() => setPreviousFocus());
+	onDestroy$1(() => setPreviousFocus());
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -3089,4 +3333,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_MODAL_ROOT, LengthUnits, MediaQueries, Modal, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, closeApp, closed, collection, createApp, createFog, customAnimation, customHandlers, embed, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, isPreview, linkTo, maximumZindex, moveTo, none, onScroll, onTime, randStr, runScript, send_event, setMiximumZindex, setPreviousFocus, showModal, showOnScroll, showOnTime, state, toBr };
+export { ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, Alignments, AnimationStyles, BackgroundSizes, CONSTANTS, Cursors, DefaultModalPlacement, Directions, Flex, FlexItem, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_MODAL_ROOT, LengthUnits, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextElement, actionId, applyCss, applyGlobalCss, close, closeApp, closed, collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getMarginStyle, getPositionStyle, getStoreState, getTransform, h, handleFocus, handleKeydown, hasSuffix, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isPreview, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onDestroy, onScroll, onShow, onTime, randStr, runScript, send_event, setAutoStart, setMiximumZindex, setPreviousFocus, setState, show, showModal, showOnScroll, showOnTime, state, states, stopped, toBr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plaidev/karte-action-sdk",
-  "version": "1.1.74",
+  "version": "1.1.75",
   "author": "Plaid Inc.",
   "license": "Apache-2.0",
   "module": "./dist/index.es.js",