@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { MutableRef } from 'preact/hooks';
+export declare function useClickOutside(callback: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void): MutableRef<HTMLElement | undefined>;
+//# sourceMappingURL=useClickOutside.d.ts.map

package/dist/esm/components/src/hooks/useClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE7D,wBAAgB,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,GAAG,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAoBxI"}

package/dist/esm/components/src/hooks/useClickOutside.js

@@ -0,0 +1,17 @@
+import { useRef, useEffect } from 'preact/hooks';
+export function useClickOutside(callback) {
+    const callbackRef = useRef();
+    const innerRef = useRef();
+    useEffect(() => {
+        callbackRef.current = callback;
+    });
+    useEffect(() => {
+        document.addEventListener('click', handleClick);
+        return () => document.removeEventListener('click', handleClick);
+        function handleClick(e) {
+            if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target))
+                callbackRef.current(e);
+        }
+    }, []);
+    return innerRef;
+}

package/dist/esm/components/src/hooks/useComponent.d.ts

@@ -0,0 +1,3 @@
+import { ComponentMap, JSXComponent } from '../types';
+export declare const useComponent: (map: ComponentMap, name: string) => JSXComponent | undefined;
+//# sourceMappingURL=useComponent.d.ts.map

package/dist/esm/components/src/hooks/useComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponent.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEtD,eAAO,MAAM,YAAY,QAAS,YAAY,QAAQ,MAAM,KAAG,YAAY,GAAG,SAkB7E,CAAC"}

package/dist/esm/components/src/hooks/useComponent.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'preact/hooks';
+export const useComponent = (map, name) => {
+    const [importedComponent, setImportedComponent] = useState(undefined);
+    useEffect(() => {
+        const importFn = map[name];
+        if (importFn && typeof importFn === 'function') {
+            const componentFn = importFn();
+            if (componentFn instanceof Promise) {
+                componentFn.then((component) => {
+                    setImportedComponent(() => component);
+                });
+            }
+            else {
+                setImportedComponent(() => componentFn);
+            }
+        }
+    }, []);
+    return importedComponent;
+};

package/dist/esm/components/src/hooks/useConstructor.d.ts

@@ -0,0 +1,2 @@
+export declare const useConstructor: (callBack?: () => void) => void;
+//# sourceMappingURL=useConstructor.d.ts.map

package/dist/esm/components/src/hooks/useConstructor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConstructor.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useConstructor.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,iCAK1B,CAAC"}

package/dist/esm/components/src/hooks/useConstructor.js

@@ -0,0 +1,9 @@
+import { useRef } from 'preact/hooks';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const useConstructor = (callBack = () => { }) => {
+    const hasBeenCalled = useRef(false);
+    if (hasBeenCalled.current)
+        return;
+    callBack();
+    hasBeenCalled.current = true;
+};

package/dist/esm/components/src/hooks/useControllerStorage.d.ts

@@ -0,0 +1,3 @@
+import { AbstractController } from '@athoscommerce/snap-controller';
+export declare const useControllerStorage: (controller: AbstractController, key: string, defaultVal?: any) => any[];
+//# sourceMappingURL=useControllerStorage.d.ts.map

package/dist/esm/components/src/hooks/useControllerStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControllerStorage.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useControllerStorage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAoB,MAAM,gCAAgC,CAAC;AAGtF,eAAO,MAAM,oBAAoB,eAAgB,kBAAkB,OAAO,MAAM,eAAe,GAAG,UAgBjG,CAAC"}

package/dist/esm/components/src/hooks/useControllerStorage.js

@@ -0,0 +1,14 @@
+import { useState } from 'preact/hooks';
+export const useControllerStorage = (controller, key, defaultVal) => {
+    //todo - refactor abstract controller to have storage and use it
+    const storage = controller.storage;
+    const storedState = storage.get(key);
+    const initialState = storedState || defaultVal || undefined;
+    const [state, setState] = useState(initialState);
+    const setter = (newState) => {
+        // update storage and setState
+        storage.set(key, newState);
+        setState(newState);
+    };
+    return [state, setter];
+};

package/dist/esm/components/src/hooks/useCreateController.d.ts

@@ -0,0 +1,4 @@
+import type { ControllerTypes, ControllerConfigs, Controllers } from '@athoscommerce/snap-controller';
+import type { Snap } from '../../../src';
+export declare const useCreateController: <ControllerType extends Controllers>(snap: Snap, type: keyof typeof ControllerTypes, config: ControllerConfigs) => ControllerType;
+//# sourceMappingURL=useCreateController.d.ts.map

package/dist/esm/components/src/hooks/useCreateController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCreateController.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useCreateController.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,mBAAmB,GAAI,cAAc,SAAS,WAAW,QAC/D,IAAI,QACJ,MAAM,OAAO,eAAe,UAC1B,iBAAiB,KACvB,cAkBF,CAAC"}

package/dist/esm/components/src/hooks/useCreateController.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'preact/hooks';
+export const useCreateController = (snap, type, config) => {
+    const [controller, setController] = useState(undefined);
+    useEffect(() => {
+        // check if the controller already exists, and use that if it does, otherwise create one
+        snap
+            .getController(config.id)
+            .then((controller) => {
+            setController(controller);
+        })
+            .catch(() => {
+            snap.createController(type, config).then((controller) => {
+                setController(controller);
+            });
+        });
+    }, []);
+    return controller;
+};

package/dist/esm/components/src/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1,4 @@
+import type { EffectCallback, Inputs } from 'preact/hooks';
+export declare function useDeepCompareMemoize<T>(value: T): T;
+export declare function useDeepCompareEffect(callback: EffectCallback, dependencies: Inputs | undefined): void;
+//# sourceMappingURL=useDeepCompareEffect.d.ts.map

package/dist/esm/components/src/hooks/useDeepCompareEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDeepCompareEffect.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useDeepCompareEffect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG3D,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,KAUhD;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,GAAG,SAAS,QAE9F"}

package/dist/esm/components/src/hooks/useDeepCompareEffect.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef, useMemo } from 'preact/hooks';
+import { dequal as deepEqual } from 'dequal';
+export function useDeepCompareMemoize(value) {
+    const ref = useRef(value);
+    const signalRef = useRef(0);
+    if (!deepEqual(value, ref.current)) {
+        ref.current = value;
+        signalRef.current += 1;
+    }
+    return useMemo(() => ref.current, [signalRef.current]);
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    return useEffect(callback, [useDeepCompareMemoize(dependencies)]);
+}

package/dist/esm/components/src/hooks/useDisplaySettings.d.ts

@@ -0,0 +1,4 @@
+import { BreakpointsProps, BreakpointsEntry } from '../types';
+export declare function useDisplaySettings(breakpointsObj: BreakpointsProps): BreakpointsEntry | undefined;
+export declare const getDisplaySettings: (breakpoints: BreakpointsProps) => any | undefined;
+//# sourceMappingURL=useDisplaySettings.d.ts.map

package/dist/esm/components/src/hooks/useDisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisplaySettings.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useDisplaySettings.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG9D,wBAAgB,kBAAkB,CAAC,cAAc,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,SAAS,CAkCjG;AAED,eAAO,MAAM,kBAAkB,gBAAiB,gBAAgB,KAAG,GAAG,GAAG,SAgCxE,CAAC"}

package/dist/esm/components/src/hooks/useDisplaySettings.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'preact/hooks';
+import { debounce } from '@athoscommerce/snap-toolbox';
+import { useDeepCompareEffect } from './useDeepCompareEffect';
+export function useDisplaySettings(breakpointsObj) {
+    if (!breakpointsObj || !Object.keys(breakpointsObj).length)
+        return;
+    // Call getDisplaySettings right away to prevent flashing
+    const [displaySettings, setDisplaySettings] = useState(getDisplaySettings(breakpointsObj));
+    let debouncedHandleResize;
+    const resetResizeListener = () => {
+        function handleResize() {
+            // Set display settings to state
+            setDisplaySettings(getDisplaySettings(breakpointsObj));
+        }
+        // Add event listener
+        debouncedHandleResize = debounce(() => {
+            handleResize();
+        }, 50);
+        window.addEventListener('resize', debouncedHandleResize);
+    };
+    useEffect(() => {
+        resetResizeListener();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener('resize', debouncedHandleResize);
+    }, []);
+    // when breakpointsObj changes (due to computed values)
+    useDeepCompareEffect(() => {
+        setDisplaySettings(getDisplaySettings(breakpointsObj));
+        resetResizeListener();
+    }, [breakpointsObj]);
+    return displaySettings;
+}
+export const getDisplaySettings = (breakpoints) => {
+    let breakpointsSettings;
+    const currentScreenWidth = window.innerWidth;
+    const sortedList = Object.keys(breakpoints)
+        .map((str) => +str)
+        .sort((a, b) => a - b)
+        .map((vp) => ({ [vp]: breakpoints[vp] }));
+    if (sortedList.length) {
+        //loop through and find the desired breakpoints setting
+        for (let i = 0; i < sortedList.length; i++) {
+            const entry = sortedList[i];
+            const breakpoint = parseInt(Object.keys(entry)[0]);
+            const isLastEntry = i + 1 === sortedList.length;
+            const isFirstEntry = i === 0;
+            if (isLastEntry || (isFirstEntry && currentScreenWidth < breakpoint)) {
+                // last entry or a '0' value breakpoint was not provided
+                breakpointsSettings = sortedList[i][breakpoint];
+                break;
+            }
+            else {
+                const nextBreakpoint = parseInt(Object.keys(sortedList[i + 1])[0]);
+                if (currentScreenWidth >= breakpoint && currentScreenWidth < nextBreakpoint) {
+                    breakpointsSettings = sortedList[i][breakpoint];
+                    break;
+                }
+            }
+        }
+        return breakpointsSettings;
+    }
+    return breakpointsSettings;
+};

package/dist/esm/components/src/hooks/useFuncDebounce.d.ts

@@ -0,0 +1,2 @@
+export declare const useFuncDebounce: (func: () => any, delay: number) => void;
+//# sourceMappingURL=useFuncDebounce.d.ts.map

package/dist/esm/components/src/hooks/useFuncDebounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFuncDebounce.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useFuncDebounce.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,SAAU,MAAM,GAAG,SAAS,MAAM,SAgB7D,CAAC"}

package/dist/esm/components/src/hooks/useFuncDebounce.js

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'preact/hooks';
+export const useFuncDebounce = (func, delay) => {
+    // Use a ref to store the function
+    const funcRef = useRef(func);
+    funcRef.current = func;
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            funcRef.current();
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [func, delay]); // re-call effect if func or delay changes
+    // No return value because we're debouncing a function, not a value
+};

package/dist/esm/components/src/hooks/useIntersection.d.ts

@@ -0,0 +1,3 @@
+import { MutableRef } from 'preact/hooks';
+export declare const useIntersection: (ref: MutableRef<HTMLElement | null>, rootMargin?: string, fireOnce?: boolean) => boolean;
+//# sourceMappingURL=useIntersection.d.ts.map

package/dist/esm/components/src/hooks/useIntersection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersection.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useIntersection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/D,eAAO,MAAM,eAAe,QAAS,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,qDAyBlE,CAAC"}

package/dist/esm/components/src/hooks/useIntersection.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'preact/hooks';
+export const useIntersection = (ref, rootMargin = '0px', fireOnce = false) => {
+    // State and setter for storing whether element is visible
+    const [isIntersecting, setIntersecting] = useState(false);
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            // Update our state when observer callback fires
+            setIntersecting(entry.isIntersecting);
+            if (fireOnce && entry.isIntersecting) {
+                observer.unobserve(ref.current);
+            }
+        }, {
+            rootMargin,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            observer.unobserve(ref.current);
+        };
+    }, []); // Empty array ensures that effect is only run on mount and unmount
+    return isIntersecting;
+};

package/dist/esm/components/src/hooks/useIntersectionAdvanced.d.ts

@@ -0,0 +1,12 @@
+import { MutableRef } from 'preact/hooks';
+export interface UseIntersectionOptions {
+    rootMargin?: string;
+    fireOnce?: boolean;
+    threshold?: number | number[];
+    minVisibleTime?: number;
+}
+export declare const useIntersectionAdvanced: (ref: MutableRef<HTMLElement | null>, options?: UseIntersectionOptions) => {
+    inViewport: boolean;
+    updateRef: (el: HTMLElement | null) => void;
+};
+//# sourceMappingURL=useIntersectionAdvanced.d.ts.map

package/dist/esm/components/src/hooks/useIntersectionAdvanced.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntersectionAdvanced.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useIntersectionAdvanced.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,UAAU,EAAE,MAAM,cAAc,CAAC;AAEpF,MAAM,WAAW,sBAAsB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAGD,eAAO,MAAM,uBAAuB,QAC9B,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,YAC1B,sBAAsB,KAC7B;IAAE,UAAU,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CA+HpE,CAAC"}

package/dist/esm/components/src/hooks/useIntersectionAdvanced.js

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
+const VISIBILITY_POLL_INTERVAL = 250;
+export const useIntersectionAdvanced = (ref, options = {}) => {
+    const { rootMargin = '0px', fireOnce = false, threshold = 0, minVisibleTime = 0 } = options;
+    // State and setter for storing whether element is visible
+    const [isIntersecting, setIntersecting] = useState(false);
+    // Timer reference to track visibility duration
+    const visibleTimerRef = useRef(null);
+    // Track when the element started being visible
+    const visibleStartRef = useRef(null);
+    const [counter, setCounter] = useState(0);
+    const updateRef = useCallback((el) => {
+        ref.current = el;
+        setCounter((c) => c + 1);
+    }, []);
+    useEffect(() => {
+        setIntersecting(false);
+        let observer = null;
+        let pollInterval = null;
+        if (!window.IntersectionObserver || !ref.current) {
+            return;
+        }
+        const clearPoll = () => {
+            if (pollInterval) {
+                window.clearInterval(pollInterval);
+                pollInterval = null;
+            }
+        };
+        const handleVisible = () => {
+            // Start tracking visibility time if minVisibleTime is set
+            if (minVisibleTime > 0) {
+                visibleStartRef.current = Date.now();
+                // Clear any existing timer
+                if (visibleTimerRef.current) {
+                    window.clearTimeout(visibleTimerRef.current);
+                }
+                // Set up a timer for the minimum visibility duration
+                visibleTimerRef.current = window.setTimeout(() => {
+                    setIntersecting(true);
+                    if (fireOnce && ref.current && observer) {
+                        observer.unobserve(ref.current);
+                    }
+                }, minVisibleTime);
+            }
+            else {
+                // If no minimum time required, update state immediately
+                setIntersecting(true);
+                if (fireOnce && ref.current && observer) {
+                    observer.unobserve(ref.current);
+                }
+            }
+        };
+        const handleHidden = () => {
+            // Element is no longer visible
+            if (visibleTimerRef.current) {
+                // Clear the timer if element goes out of view before minimum time
+                window.clearTimeout(visibleTimerRef.current);
+            }
+            visibleTimerRef.current = null;
+            visibleStartRef.current = null;
+            setIntersecting(false);
+        };
+        observer = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                if (ref.current && elementIsVisible(ref.current)) {
+                    clearPoll();
+                    handleVisible();
+                }
+                else {
+                    // Element is intersecting but not visible (e.g. opacity 0)
+                    // Treat as hidden but start polling for visibility
+                    handleHidden();
+                    if (!pollInterval) {
+                        pollInterval = window.setInterval(() => {
+                            if (!ref.current) {
+                                clearPoll();
+                                return;
+                            }
+                            if (elementIsVisible(ref.current)) {
+                                clearPoll();
+                                handleVisible();
+                            }
+                        }, VISIBILITY_POLL_INTERVAL);
+                    }
+                }
+            }
+            else {
+                // Element is no longer intersecting
+                clearPoll();
+                handleHidden();
+            }
+        }, {
+            rootMargin,
+            threshold,
+        });
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            setIntersecting(false);
+            clearPoll();
+            if (visibleTimerRef.current) {
+                window.clearTimeout(visibleTimerRef.current);
+            }
+            // Clean up observer
+            if (observer && ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, [ref, counter]);
+    return { inViewport: isIntersecting, updateRef };
+};
+function elementIsVisible(el) {
+    if (el && 'checkVisibility' in el) {
+        return el.checkVisibility({ contentVisibilityAuto: true, opacityProperty: true, visibilityProperty: true });
+    }
+    return true;
+}

package/dist/esm/components/src/hooks/useLang.d.ts

@@ -0,0 +1,45 @@
+export type LangAttributesObj = {
+    [textId: string]: LangAttributesObjAttributes;
+};
+type ValType = {
+    'ss-lang': string;
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+};
+type AttType = {
+    'ss-lang': string;
+    'aria-label'?: string;
+    'aria-valuetext'?: string;
+    title?: string;
+    placeholder?: string;
+    alt?: string;
+};
+export type LangAttributesObjAttributes = {
+    value?: ValType;
+    attributes?: AttType;
+    all?: Partial<ValType> & Partial<AttType> & {
+        'ss-lang': string;
+    };
+};
+export type LangType<P> = string | ((data: P) => string);
+export interface LangObjType {
+    [name: string]: Lang<any>;
+}
+export interface Lang<T> extends Partial<LangValue<T>>, Partial<LangAttributes<T>> {
+}
+export interface LangValue<T> {
+    value: LangType<T>;
+}
+export interface LangAttributes<T> {
+    attributes: {
+        'aria-label'?: LangType<T>;
+        'aria-valuetext'?: LangType<T>;
+        title?: LangType<T>;
+        alt?: LangType<T>;
+        placeholder?: LangType<T>;
+    };
+}
+export declare const useLang: (lang: LangObjType, data?: any) => LangAttributesObj;
+export {};
+//# sourceMappingURL=useLang.d.ts.map

package/dist/esm/components/src/hooks/useLang.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLang.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useLang.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC/B,CAAC,MAAM,EAAE,MAAM,GAAG,2BAA2B,CAAC;CAC9C,CAAC;AAEF,KAAK,OAAO,GAAG;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB,EAAE;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAEF,KAAK,OAAO,GAAG;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AACF,MAAM,MAAM,2BAA2B,GAAG;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC3B,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;CAC1B;AAGD,MAAM,WAAW,IAAI,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;CAAG;AAarF,MAAM,WAAW,SAAS,CAAC,CAAC;IAC3B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,UAAU,EAAE;QACX,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,gBAAgB,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpB,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QAClB,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;CACF;AAED,eAAO,MAAM,OAAO,SAAU,WAAW,SAAS,GAAG,KAAG,iBA2EvD,CAAC"}

package/dist/esm/components/src/hooks/useLang.js

@@ -0,0 +1,75 @@
+export const useLang = (lang, data) => {
+    const returnObj = {};
+    Object.keys(lang).forEach((key) => {
+        const currentLangSettings = lang && lang[key];
+        const currentObj = {};
+        if (currentLangSettings) {
+            if (currentLangSettings?.value) {
+                if (typeof currentLangSettings.value == 'function') {
+                    currentObj.value = {
+                        'ss-lang': key,
+                        dangerouslySetInnerHTML: { __html: currentLangSettings.value(data) },
+                    };
+                }
+                else {
+                    currentObj.value = {
+                        'ss-lang': key,
+                        dangerouslySetInnerHTML: { __html: currentLangSettings.value },
+                    };
+                }
+            }
+            if (currentLangSettings?.attributes && Object.keys(currentLangSettings?.attributes).length) {
+                currentObj.attributes = {
+                    'ss-lang': key,
+                };
+                if (currentLangSettings?.attributes?.['aria-label']) {
+                    if (typeof currentLangSettings.attributes?.['aria-label'] == 'function') {
+                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'](data);
+                    }
+                    else {
+                        currentObj.attributes['aria-label'] = currentLangSettings.attributes['aria-label'];
+                    }
+                }
+                if (currentLangSettings?.attributes?.['aria-valuetext']) {
+                    if (typeof currentLangSettings.attributes?.['aria-valuetext'] == 'function') {
+                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'](data);
+                    }
+                    else {
+                        currentObj.attributes['aria-valuetext'] = currentLangSettings.attributes['aria-valuetext'];
+                    }
+                }
+                if (currentLangSettings?.attributes?.title) {
+                    if (typeof currentLangSettings.attributes?.title == 'function') {
+                        currentObj.attributes['title'] = currentLangSettings.attributes['title'](data);
+                    }
+                    else {
+                        currentObj.attributes['title'] = currentLangSettings.attributes['title'];
+                    }
+                }
+                if (currentLangSettings?.attributes?.alt) {
+                    if (typeof currentLangSettings.attributes?.alt == 'function') {
+                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'](data);
+                    }
+                    else {
+                        currentObj.attributes['alt'] = currentLangSettings.attributes['alt'];
+                    }
+                }
+                if (currentLangSettings?.attributes?.placeholder) {
+                    if (typeof currentLangSettings.attributes?.placeholder == 'function') {
+                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'](data);
+                    }
+                    else {
+                        currentObj.attributes['placeholder'] = currentLangSettings.attributes['placeholder'];
+                    }
+                }
+            }
+            currentObj.all = {
+                ...currentObj.value,
+                ...currentObj.attributes,
+                'ss-lang': key,
+            };
+        }
+        returnObj[key] = currentObj;
+    });
+    return returnObj;
+};

package/dist/esm/components/src/hooks/useLayoutOptions.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '../providers';
+export declare const useLayoutOptions: (props: any, globalTheme: Theme) => void;
+//# sourceMappingURL=useLayoutOptions.d.ts.map

package/dist/esm/components/src/hooks/useLayoutOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLayoutOptions.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useLayoutOptions.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAGrC,eAAO,MAAM,gBAAgB,UAAW,GAAG,eAAe,KAAK,SAiE9D,CAAC"}

package/dist/esm/components/src/hooks/useLayoutOptions.js

@@ -0,0 +1,58 @@
+import deepmerge from 'deepmerge';
+import { useControllerStorage } from './useControllerStorage';
+export const useLayoutOptions = (props, globalTheme) => {
+    const layoutOptions = props?.layoutOptions || [];
+    // handle layoutOptions and selected option
+    const [selectedLayout, setSelectedLayout] = useControllerStorage(props.controller, 'layoutOptions', layoutOptions.filter((option) => option.default).pop());
+    // verify selectedLayout is in layoutOptions - if not set it to the default one
+    try {
+        if (!layoutOptions.some((option) => JSON.stringify(option) == JSON.stringify(selectedLayout))) {
+            const newSelection = layoutOptions.filter((option) => option.default).pop();
+            setSelectedLayout(newSelection);
+        }
+    }
+    catch (err) {
+        props.controller.log('invalid layoutOptions provided to component', props.inherits ? ` '${props.inherits}'` : '');
+    }
+    props.theme = props.theme || {};
+    props.theme.components = {
+        ...(props.theme.components || {}),
+        layoutSelector: {
+            options: layoutOptions,
+            onSelect: (e, option) => {
+                if (option) {
+                    setSelectedLayout(option);
+                }
+            },
+            selected: selectedLayout,
+        },
+    };
+    let shouldUseOverrides = false;
+    if (globalTheme.components && props.treePath) {
+        // pull out the template (top level parent) component from the treePath to use in filtering out globalTheme overrides
+        const templateComponent = props.treePath.split(' ')[0];
+        // we only want to use overrides if one of the toolbars is actually rendering the layoutSelector
+        Object.keys(globalTheme.components).forEach((key) => {
+            const paths = key.split(' ');
+            const componentTypeAndName = paths.splice(-1).pop() ?? '';
+            const [componentType] = componentTypeAndName.split('.');
+            if (globalTheme.components &&
+                componentType == 'toolbar' &&
+                (paths[0] == templateComponent ||
+                    paths[0] == `*${templateComponent}` ||
+                    paths[0] == `*(M)${templateComponent}` ||
+                    paths[0] == `*(T)${templateComponent}` ||
+                    paths[0] == `*(D)${templateComponent}` ||
+                    !paths.length)) {
+                const toolbarConfig = globalTheme.components[key];
+                if (toolbarConfig?.layout && toolbarConfig.layout.toString().indexOf('layoutSelector') > -1) {
+                    shouldUseOverrides = true;
+                }
+            }
+        });
+    }
+    // grab overrides out of the "selected" or default layoutOptions and merge it in
+    if (selectedLayout?.overrides && shouldUseOverrides) {
+        props.theme = deepmerge(props.theme, { components: selectedLayout.overrides.components });
+    }
+};

package/dist/esm/components/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+export declare function useMediaQuery(query: string, runOnCleanup?: () => void): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/esm/components/src/hooks/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../../../../components/src/hooks/useMediaQuery.tsx"],"names":[],"mappings":"AAGA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAgB/E"}

package/dist/esm/components/src/hooks/useMediaQuery.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'preact/hooks';
+export function useMediaQuery(query, runOnCleanup) {
+    if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
+        return false;
+    const mediaQuery = window.matchMedia(query);
+    const [match, setMatch] = useState(!!mediaQuery.matches);
+    useEffect(() => {
+        const handler = () => setMatch(!!mediaQuery.matches);
+        mediaQuery.addListener(handler);
+        return () => {
+            runOnCleanup instanceof Function && runOnCleanup();
+            mediaQuery.removeListener(handler);
+        };
+    }, []);
+    return match;
+}