@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { AutocompleteLayout } from '../../Organisms/AutocompleteLayout';
+import { Modal } from '../../Molecules/Modal';
+import classNames from 'classnames';
+import { SearchInput } from '../../Molecules/SearchInput';
+import { debounce } from '@athoscommerce/snap-toolbox';
+import { useA11y } from '../../../hooks';
+import { useAcRenderedInput } from '../../../hooks/useAcRenderedInput';
+const defaultStyles = ({ inputBounds, offset, renderInput, width }) => {
+    return css({
+        position: 'absolute',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        right: '0',
+        top: '0',
+        zIndex: 1001,
+        '.ss__autocomplete-fixed__inner': {
+            position: 'absolute',
+            left: `calc(0px + ${offset?.left || 0}px)`,
+            top: `calc(0px + ${renderInput ? '0px' : `${inputBounds.height}px`} + ${offset?.top || 0}px)`,
+            width: `calc(100% + ${offset?.width || 0}px)`,
+            zIndex: 1001,
+            maxWidth: '100vw',
+            '.ss__search-input': {
+                background: '#fff',
+                width: `${inputBounds.width}px`,
+                height: `${inputBounds.height}px`,
+                border: '0px',
+            },
+        },
+        '.ss__autocomplete-fixed__inner__layout-wrapper': {
+            width: width,
+            overflowY: 'scroll',
+            maxHeight: `calc(90vh - ${inputBounds.top || 0}px - ${renderInput ? `${inputBounds.height}px` : '0px'} + ${offset?.top || 0}px)`,
+        },
+        '.ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+    });
+};
+export const AutocompleteFixed = observer((properties) => {
+    const globalTheme = useTheme();
+    const defaultProps = {
+        layout: [['c1', 'c2', 'c3']],
+        renderInput: true,
+        overlayColor: '',
+    };
+    const props = mergeProps('autocompleteFixed', globalTheme, defaultProps, properties);
+    const [active, setActive] = useState(false);
+    const [inputName, setInputName] = useState('query');
+    let input = props.input;
+    let buttonSelector = props.buttonSelector;
+    let inputPlaceholderText = undefined;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        const existingInputName = input?.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+        inputPlaceholderText = input?.getAttribute('placeholder');
+    }
+    if (!buttonSelector && input) {
+        buttonSelector = input;
+    }
+    const { layout, disableStyles, controller, renderInput, overlayColor, className, internalClassName, offset, treePath } = props;
+    const renderedInputRef = useRef(null);
+    const reset = () => {
+        controller.setFocused();
+        setActive(false);
+    };
+    const subProps = {
+        autocompleteLayout: {
+            // default props
+            layout: layout,
+            onReset: () => reset(),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            // default props
+            internalClassName: 'autocomplete-fixed__modal',
+            buttonSelector: buttonSelector,
+            lockScroll: false,
+            onOverlayClick: reset,
+            open: active,
+            // inherited props
+            ...defined({
+                overlayColor,
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-fixed__search-input autocomplete__search-input',
+            placeholderText: inputPlaceholderText || undefined,
+            submitSearchButton: {
+                onClick: () => {
+                    () => reset();
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            },
+            clearSearchButton: {
+                icon: 'close-thin',
+            },
+            closeSearchButton: {
+                onClick: () => reset(),
+            },
+            inputName: inputName,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: `${treePath} modal`,
+        },
+    };
+    const getInputBounds = (inputElem) => {
+        if (inputElem) {
+            const elem = inputElem.getBoundingClientRect();
+            return {
+                top: elem.top + window.scrollY + (offset?.top || 0),
+                left: elem.left + window.scrollX + (offset?.left || 0),
+                width: elem.width,
+                height: elem.height,
+            };
+        }
+        else {
+            //fallback if input element is not found
+            return {
+                top: 0,
+                left: 0,
+                width: 0,
+                height: 0,
+            };
+        }
+    };
+    const [inputBounds, setInputBounds] = useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+    });
+    const checkForInputChange = () => {
+        const currentInputBounds = getInputBounds(input);
+        if (inputBounds.height !== currentInputBounds.height ||
+            inputBounds.left !== currentInputBounds.left ||
+            inputBounds.top !== currentInputBounds.top ||
+            inputBounds.width !== currentInputBounds.width) {
+            setInputBounds(currentInputBounds);
+        }
+    };
+    checkForInputChange();
+    const debouncedHandleResize = debounce(() => {
+        checkForInputChange();
+    }, 10);
+    useEffect(() => {
+        window.addEventListener('resize', debouncedHandleResize);
+    }, []);
+    const styling = mergeStyles({ ...props, inputBounds }, defaultStyles);
+    let _input;
+    if (input) {
+        _input = useAcRenderedInput({
+            input: input,
+            controller,
+            renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector,
+            setActive: setActive,
+        });
+    }
+    const acProps = {
+        ...props,
+    };
+    delete acProps.width;
+    delete acProps.className;
+    delete acProps.internalClassName;
+    delete acProps.style;
+    delete acProps.styleScript;
+    delete acProps.themeStyleScript;
+    return layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-fixed', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-fixed__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx("div", { className: "ss__autocomplete-fixed__inner__layout-wrapper", children: _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` }) })] }) }) }) })) : null;
+});

package/dist/esm/components/src/components/Templates/AutocompleteFixed/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteFixed';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Templates/AutocompleteFixed/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteFixed/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteFixed';

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts

@@ -0,0 +1,16 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+export declare const AutocompleteModal: ((properties: AutocompleteModalProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type AutocompleteModalProps = {
+    controller: AutocompleteController;
+} & AutocompleteModalTemplatesLegalProps & ComponentProps<AutocompleteModalProps>;
+export type AutocompleteModalTemplatesLegalProps = {
+    buttonSelector?: string | Element;
+    overlayColor?: string;
+    renderInput?: boolean;
+    height?: string;
+} & AutocompleteLayoutProps;
+//# sourceMappingURL=AutocompleteModal.d.ts.map

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteModal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/AutocompleteModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AA4DjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAkJ3E,CAAC;AAQH,MAAM,MAAM,sBAAsB,GAAG;IACpC,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,oCAAoC,GACvC,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAExC,MAAM,MAAM,oCAAoC,GAAG;IAClD,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,uBAAuB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteModal/AutocompleteModal.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useRef, useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { AutocompleteLayout } from '../../Organisms/AutocompleteLayout';
+import { Modal } from '../../Molecules/Modal';
+import classNames from 'classnames';
+import { SearchInput } from '../../Molecules/SearchInput';
+import { useA11y } from '../../../hooks';
+import { useAcRenderedInput } from '../../../hooks/useAcRenderedInput';
+const defaultStyles = ({ width, height, theme }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const variables = theme?.variables;
+    return css({
+        position: 'fixed',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        right: '0',
+        top: '0',
+        zIndex: 1001,
+        '& .ss__autocomplete-modal__inner': {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: '10vh',
+            maxHeight: height ? 'initial' : '80vh',
+            overflow: 'scroll',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            background: '#fff',
+            zIndex: 1001,
+            width: width,
+            height: height,
+            maxWidth: '100vw',
+        },
+        '& .ss__overlay': {
+            zIndex: 1000,
+        },
+        '& .ss__autocomplete': {
+            position: 'relative',
+        },
+        '& .ss__search-input': {
+            margin: '1px',
+        },
+        '& .input_wrapper input': {
+            background: '#eee',
+        },
+        '& .ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+        [`@media (max-width: ${variables?.breakpoints.desktop}px)`]: {
+            '& .ss__autocomplete-modal__inner': {
+                top: '0',
+                maxHeight: '100vh',
+            },
+        },
+    });
+};
+export const AutocompleteModal = observer((properties) => {
+    const globalTheme = useTheme();
+    const defaultProps = {
+        layout: [['c1', 'c2', 'c3']],
+        overlayColor: 'rgba(0,0,0,0.8)',
+        width: '950px',
+        renderInput: true,
+    };
+    const props = mergeProps('autocompleteModal', globalTheme, defaultProps, properties);
+    const [active, setActive] = useState(false);
+    const [inputName, setInputName] = useState('query');
+    let input = props.input;
+    let buttonSelector = props.buttonSelector;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        const existingInputName = input?.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+    }
+    if (!buttonSelector && input) {
+        buttonSelector = input;
+    }
+    const { layout, disableStyles, overlayColor, controller, renderInput, className, internalClassName, treePath } = props;
+    const renderedInputRef = useRef(null);
+    const reset = () => {
+        controller.setFocused();
+        setActive(false);
+    };
+    const subProps = {
+        autocompleteLayout: {
+            // default props
+            layout: layout,
+            onReset: () => reset(),
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        modal: {
+            // default props
+            internalClassName: 'autocomplete-modal__modal',
+            buttonSelector: buttonSelector,
+            onOverlayClick: () => reset(),
+            overlayColor: overlayColor,
+            open: active,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-modal__search-input autocomplete__search-input',
+            submitSearchButton: {
+                onClick: () => {
+                    () => reset();
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            },
+            clearSearchButton: {
+                icon: 'close-thin',
+            },
+            closeSearchButton: {
+                onClick: () => reset(),
+                icon: 'angle-left',
+            },
+            inputName: inputName,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath: `${treePath} modal`,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    let _input;
+    if (input) {
+        _input = useAcRenderedInput({
+            input: input,
+            controller,
+            renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector,
+            setActive: setActive,
+        });
+    }
+    const acProps = {
+        ...props,
+    };
+    delete acProps.width;
+    delete acProps.className;
+    delete acProps.internalClassName;
+    delete acProps.style;
+    delete acProps.styleScript;
+    delete acProps.themeStyleScript;
+    return layout?.length && active ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classNames('ss__autocomplete-modal', className, internalClassName), children: _jsx(Modal, { ...subProps.modal, children: _jsxs("div", { className: "ss__autocomplete-modal__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} modal` })] }) }) }) })) : null;
+});

package/dist/esm/components/src/components/Templates/AutocompleteModal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteModal';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Templates/AutocompleteModal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteModal/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteModal/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteModal';

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts

@@ -0,0 +1,17 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+import { SlideDirectionType } from '../../Molecules/Slideout';
+export declare const AutocompleteSlideout: ((properties: AutocompleteSlideoutProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type AutocompleteSlideoutProps = {
+    controller: AutocompleteController;
+} & AutocompleteSlideoutTemplatesLegalProps & ComponentProps<AutocompleteSlideoutProps>;
+export type AutocompleteSlideoutTemplatesLegalProps = {
+    overlayColor?: string;
+    slideDirection?: SlideDirectionType;
+    buttonSelector?: string | Element;
+    renderInput?: boolean;
+} & AutocompleteLayoutProps;
+//# sourceMappingURL=AutocompleteSlideout.d.ts.map

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteSlideout.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAsB,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AACjG,OAAO,EAAE,kBAAkB,EAA2B,MAAM,0BAA0B,CAAC;AAsBvF,eAAO,MAAM,oBAAoB,gBAAyB,yBAAyB;;CA0JjF,CAAC;AAOH,MAAM,MAAM,yBAAyB,GAAG;IACvC,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,uCAAuC,GAC1C,cAAc,CAAC,yBAAyB,CAAC,CAAC;AAE3C,MAAM,MAAM,uCAAuC,GAAG;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,uBAAuB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/AutocompleteSlideout.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider } from '../../../providers';
+import { AutocompleteLayout } from '../../Organisms/AutocompleteLayout';
+import { Slideout } from '../../Molecules/Slideout';
+import classNames from 'classnames';
+import { SearchInput } from '../../Molecules/SearchInput';
+import { useA11y } from '../../../hooks';
+import { useAcRenderedInput } from '../../../hooks/useAcRenderedInput';
+const defaultStyles = ({}) => {
+    return css({
+        border: '1px solid #eee',
+        '& .ss__autocomplete': {
+            position: 'relative',
+        },
+        '& .input_wrapper input': {
+            background: '#eee',
+        },
+        '& .ss__search-input__button--close-search-icon': {
+            border: 'none',
+        },
+    });
+};
+export const AutocompleteSlideout = observer((properties) => {
+    const globalTheme = useTheme();
+    const defaultProps = {
+        slideDirection: 'left',
+        overlayColor: 'rgba(0,0,0,0.8)',
+        layout: [['button.see-more'], ['termsList'], ['content']],
+        width: '500px',
+        renderInput: true,
+    };
+    const props = mergeProps('autocompleteSlideout', globalTheme, defaultProps, properties);
+    const [inputName, setInputName] = useState('query');
+    let input = props.input;
+    let buttonSelector = props.buttonSelector;
+    if (input) {
+        if (typeof input === 'string') {
+            input = document.querySelector(input);
+        }
+        const existingInputName = input?.getAttribute('name');
+        if (existingInputName) {
+            setInputName(existingInputName);
+            if (props.renderInput) {
+                input.setAttribute('name', '');
+            }
+        }
+    }
+    if (!buttonSelector && input) {
+        buttonSelector = input;
+    }
+    const { layout, disableStyles, slideDirection, controller, overlayColor, renderInput, className, internalClassName, treePath, width } = props;
+    const renderedInputRef = useRef(null);
+    const reset = () => {
+        setActive(false);
+        controller.setFocused();
+    };
+    const subProps = {
+        autocompleteLayout: {
+            // default props
+            onReset: () => reset(),
+            layout: layout,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        slideout: {
+            // default props
+            width: width,
+            rerender: false,
+            overlayColor: overlayColor,
+            slideDirection: slideDirection,
+            buttonSelector: buttonSelector,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        searchInput: {
+            // default props
+            // autocomplete__search-input is required for useAcRenderedInput hook.
+            internalClassName: 'autocomplete-slideout__search-input  autocomplete__search-input',
+            inputName: inputName,
+            submitSearchButton: {
+                onClick: () => {
+                    () => reset();
+                    window.location.href = controller.store.state.url.link.href;
+                },
+            },
+            clearSearchButton: {
+                icon: 'close-thin',
+            },
+            closeSearchButton: {
+                onClick: () => reset(),
+                icon: 'angle-left',
+            },
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            treePath: `${treePath} slideout`,
+            theme: props?.theme,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const [active, setActive] = useState(false);
+    let _input;
+    if (input) {
+        useEffect(() => {
+            input.addEventListener('click', () => setActive(true));
+        });
+        _input = useAcRenderedInput({
+            input: input,
+            controller,
+            renderedInputRef,
+            renderInput: Boolean(renderInput),
+            buttonSelector,
+        });
+    }
+    const acProps = {
+        ...props,
+    };
+    delete acProps.width;
+    delete acProps.className;
+    delete acProps.internalClassName;
+    delete acProps.style;
+    delete acProps.styleScript;
+    delete acProps.themeStyleScript;
+    /***************************************/
+    return layout?.length ? (_jsx(CacheProvider, { children: _jsx(Slideout, { ...styling, ...subProps.slideout, className: classNames('ss__autocomplete-slideout', 'ss__autocomplete-slideout__slideout', className, internalClassName), active: active, children: _jsxs("div", { className: "ss__autocomplete-slideout__inner", ref: (e) => useA11y(e, 0, true, reset), children: [renderInput ? (_jsx(SearchInput, { ...subProps.searchInput, value: controller.store.state.input || '', inputRef: renderedInputRef })) : (_jsx(_Fragment, {})), _jsx(AutocompleteLayout, { ...acProps, ...subProps.autocompleteLayout, input: _input, controller: controller, treePath: `${treePath} slideout` })] }) }) })) : null;
+});

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AutocompleteSlideout';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteSlideout/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/esm/components/src/components/Templates/AutocompleteSlideout/index.js

@@ -0,0 +1 @@
+export * from './AutocompleteSlideout';

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.d.ts

@@ -0,0 +1,40 @@
+import { ComponentChildren } from 'preact';
+import type { SwiperOptions } from 'swiper/types';
+import type { RecommendationController } from '@athoscommerce/snap-controller';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+import { ComponentProps, BreakpointsProps, ResultComponent } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const Recommendation: ((properties: RecommendationProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type RecommendationProps = {
+    controller: RecommendationController;
+    resultComponent?: ResultComponent;
+    lang?: Partial<RecommendationLang>;
+    breakpoints?: BreakpointsProps;
+} & RecommendationTemplatesLegalProps & ComponentProps<RecommendationProps>;
+export type RecommendationTemplatesLegalProps = {
+    title?: JSX.Element | string;
+    description?: string;
+    hideTitle?: boolean;
+    prevButton?: JSX.Element | string;
+    nextButton?: JSX.Element | string;
+    hideButtons?: boolean;
+    loop?: boolean;
+    results?: Product[];
+    pagination?: boolean;
+    children?: ComponentChildren;
+    vertical?: boolean;
+    scrollbar?: boolean;
+    lazyRender?: {
+        enabled: boolean;
+        offset?: string;
+    };
+    slidesPerView?: number | 'auto';
+} & Omit<SwiperOptions, 'breakpoints' | 'slidesPerView'> & ComponentProps;
+export interface RecommendationLang {
+    titleText?: Lang<{
+        controller: RecommendationController;
+    }>;
+}
+//# sourceMappingURL=Recommendation.d.ts.map

package/dist/esm/components/src/components/Templates/Recommendation/Recommendation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Recommendation.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/Recommendation/Recommendation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAO9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAGhG,OAAO,EAAE,IAAI,EAAW,MAAM,gBAAgB,CAAC;AAY/C,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA+LrE,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG;IACjC,UAAU,EAAE,wBAAwB,CAAC;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE;QACZ,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,CAAC,GACvD,cAAc,CAAC;AAEhB,MAAM,WAAW,kBAAkB;IAClC,SAAS,CAAC,EAAE,IAAI,CAAC;QAChB,UAAU,EAAE,wBAAwB,CAAC;KACrC,CAAC,CAAC;CACH"}