@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Organisms/NoResults/NoResults.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, useSnap, useTreePath } from '../../../providers';
+import { cloneWithProps, mergeProps, mergeStyles } from '../../../utilities';
+import { filters } from '@athoscommerce/snap-toolbox';
+import { useComponent } from '../../../hooks/useComponent';
+import { useCreateController } from '../../../hooks/useCreateController';
+import deepmerge from 'deepmerge';
+import { useLang } from '../../../hooks';
+const defaultStyles = ({}) => {
+    return css({});
+};
+export const NoResults = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        suggestionsTitleText: `Suggestions`,
+        suggestionsList: [
+            `Check for misspellings.`,
+            `Remove possible redundant keywords (ie. "products").`,
+            `Use other words to describe what you are searching for.`,
+        ],
+        templates: {
+            recommendation: {
+                enabled: true,
+            },
+        },
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('noResults', globalTheme, defaultProps, properties);
+    const { contentSlot, suggestionsTitleText, hideSuggestionsTitleText, hideContactsTitleText, suggestionsList, hideContact, contactsTitleText, hideSuggestions, contactsList, controller, templates, className, internalClassName, treePath, } = props;
+    const styling = mergeStyles(props, defaultStyles);
+    const suggestionsExist = suggestionsList && Array.isArray(suggestionsList) && suggestionsList.length !== 0;
+    const contactsExist = contactsList && Array.isArray(contactsList) && contactsList.length !== 0;
+    let recommendationTemplateComponent;
+    let recommendationTemplateResultComponent;
+    let recsController;
+    if (templates?.recommendation?.enabled) {
+        const componentName = templates?.recommendation?.component || 'Recommendation';
+        const snap = useSnap();
+        if (snap?.templates) {
+            const themeName = properties.theme?.name;
+            let defaultResultComponentFromTheme;
+            if (themeName) {
+                defaultResultComponentFromTheme = snap?.templates?.config.theme?.resultComponent;
+            }
+            const resultComponentName = (templates?.recommendation?.resultComponent || defaultResultComponentFromTheme);
+            const mergedConfig = Object.assign({
+                id: '',
+                tag: 'no-results',
+                branch: 'production',
+            }, templates.recommendation.config);
+            mergedConfig.id = mergedConfig.id || `search-${mergedConfig.tag}`;
+            recsController = useCreateController(snap, 'recommendation', mergedConfig);
+            if (!recsController?.store?.loaded && !recsController?.store?.loading && recsController?.store.error?.type !== 'error') {
+                recsController?.search();
+            }
+            if (resultComponentName && snap?.templates?.library.import.component.result) {
+                recommendationTemplateResultComponent = useComponent(snap?.templates?.library.import.component.result, resultComponentName);
+            }
+            if (componentName && snap?.templates?.library.import.component.recommendation.default) {
+                recommendationTemplateComponent = useComponent(snap?.templates?.library.import.component.recommendation.default, componentName);
+            }
+        }
+    }
+    const RecommendationTemplateComponent = recommendationTemplateComponent;
+    const RecommendationTemplateResultComponent = recommendationTemplateResultComponent;
+    //deep merge with props.lang
+    const defaultLang = {
+        suggestionsTitleText: {
+            value: suggestionsTitleText,
+        },
+        suggestionsList: {
+            value: `${suggestionsList
+                ? suggestionsList.map((suggestion) => `<li class="ss__no-results__suggestions__list__option">${suggestion}</li>`).join('')
+                : undefined}
+			`,
+        },
+        contactsTitleText: {
+            value: contactsTitleText,
+        },
+        contactsList: {
+            value: `${contactsList
+                ? contactsList
+                    .map((contact) => `<div class='ss__no-results__contact__detail ss__no-results__contact__detail--${filters.handleize(contact.title)}'><h4 class="ss__no-results__contact__detail__title">${contact.title}</h4><p class="ss__no-results__contact__detail__content">${contact.content}</p></div>`)
+                    .join('')
+                : undefined}`,
+        },
+    };
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        controller: controller,
+    });
+    return (_jsxs("div", { className: classnames('ss__no-results', className, internalClassName), ...styling, children: [contentSlot &&
+                (typeof contentSlot == 'string' ? (_jsx("div", { className: "ss__no-results__slot", dangerouslySetInnerHTML: { __html: contentSlot } })) : (_jsx("div", { className: "ss__no-results__slot", children: cloneWithProps(contentSlot, { controller, treePath }) }))), !hideSuggestions && (suggestionsTitleText || suggestionsExist) && (_jsxs("div", { className: "ss__no-results__suggestions", children: [suggestionsTitleText && !hideSuggestionsTitleText && (_jsx("h3", { className: "ss__no-results__suggestions__title", ...mergedLang.suggestionsTitleText?.all })), suggestionsExist && _jsx("ul", { className: "ss__no-results__suggestions__list", ...mergedLang.suggestionsList?.all })] })), !hideContact && (contactsTitleText || contactsExist) && (_jsxs("div", { className: "ss__no-results__contact", children: [contactsTitleText && !hideContactsTitleText && _jsx("h3", { className: "ss__no-results__contact__title", ...mergedLang.contactsTitleText?.all }), contactsExist && _jsx("div", { ...mergedLang.contactsList?.all })] })), RecommendationTemplateComponent && recsController?.store?.loaded ? (_jsx("div", { className: "ss__no-results__recommendations", children: _jsx(RecommendationTemplateComponent, { controller: recsController, title: recsController.store?.profile?.display?.templateParameters?.title, resultComponent: RecommendationTemplateResultComponent, name: 'noResultsRecommendations' }) })) : null] }));
+});

package/dist/esm/components/src/components/Organisms/NoResults/index.d.ts

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

package/dist/esm/components/src/components/Organisms/NoResults/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/NoResults/index.js

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

package/dist/esm/components/src/components/Organisms/Results/Results.d.ts

@@ -0,0 +1,19 @@
+import type { SearchController, AutocompleteController, RecommendationController } from '@athoscommerce/snap-controller';
+import type { SearchResultStore } from '@athoscommerce/snap-store-mobx';
+import { ComponentProps, ResultsLayout, BreakpointsProps, ResultComponent } from '../../../types';
+export declare const Results: ((properties: ResultsProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type ResultsProps = {
+    breakpoints?: BreakpointsProps;
+    controller?: SearchController | AutocompleteController | RecommendationController;
+    resultComponent?: ResultComponent | string;
+    results?: SearchResultStore;
+} & ResultsTemplatesLegalProps & ComponentProps<ResultsProps>;
+export type ResultsTemplatesLegalProps = {
+    columns?: number;
+    rows?: number;
+    gapSize?: string;
+    layout?: keyof typeof ResultsLayout | ResultsLayout;
+};
+//# sourceMappingURL=Results.d.ts.map

package/dist/esm/components/src/components/Organisms/Results/Results.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Results.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Results/Results.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,iBAAiB,EAAmB,MAAM,gCAAgC,CAAC;AAIzF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAe,MAAM,gBAAgB,CAAC;AA4C/G,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA6HvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;IAClF,eAAe,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC3C,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,GAAG,aAAa,CAAC;CACpD,CAAC"}

package/dist/esm/components/src/components/Organisms/Results/Results.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { ContentType } from '@athoscommerce/snap-store-mobx';
+import { InlineBanner } from '../../Atoms/InlineBanner';
+import { Result } from '../../Molecules/Result';
+import { ResultsLayout } from '../../../types';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useTheme, CacheProvider, withTracking, useSnap, useTreePath } from '../../../providers';
+import { useDisplaySettings } from '../../../hooks/useDisplaySettings';
+import { ResultTracker } from '../../Trackers/ResultTracker';
+import { useComponent } from '../../../hooks';
+const defaultStyles = ({ gapSize, columns }) => {
+    return css({
+        display: 'flex',
+        flexFlow: 'row wrap',
+        gap: gapSize,
+        gridTemplateRows: 'auto',
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
+        '& .ss__result, & .ss__result-layout': {
+            boxSizing: 'border-box',
+            flex: '0 1 auto',
+            width: `calc(${100 / columns}% - (${columns - 1} * ${gapSize} / ${columns} ) )`,
+            marginRight: gapSize,
+            marginBottom: gapSize,
+            [`&:nth-of-type(${columns}n)`]: {
+                marginRight: '0',
+            },
+            [`&:nth-last-of-type(-n+${columns})`]: {
+                marginBottom: '0',
+            },
+        },
+        '@supports (display: grid)': {
+            display: 'grid',
+            '& .ss__result, & .ss__result-layout': {
+                width: 'initial',
+                flex: undefined,
+                margin: 0,
+            },
+        },
+    });
+};
+const TrackedResultComponent = withTracking(Result);
+export const Results = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultBreakpointsProps = {
+        0: {
+            columns: properties.columns || 1,
+        },
+        540: {
+            columns: properties.columns || 2,
+        },
+        768: {
+            columns: properties.columns || 3,
+        },
+        991: {
+            columns: properties.columns || 4,
+        },
+    };
+    const defaultProps = {
+        results: properties.controller?.store?.results,
+        columns: 4,
+        gapSize: '20px',
+        layout: ResultsLayout.grid,
+        breakpoints: defaultBreakpointsProps,
+        treePath: globalTreePath,
+    };
+    let props = mergeProps('results', globalTheme, defaultProps, properties);
+    if (!properties.theme?.name) {
+        // breakpoint settings are calculated in ThemeStore for snap templates
+        const displaySettings = useDisplaySettings(props?.breakpoints || {});
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
+    const { disableStyles, className, internalClassName, layout, theme, controller, treePath } = props;
+    let { resultComponent } = props;
+    const subProps = {
+        result: {
+            // default props
+            internalClassName: 'ss__results__result',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        inlineBanner: {
+            controller,
+            // default props
+            internalClassName: 'ss__results__inline-banner',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    let results = props.results;
+    if (props?.columns && props?.rows && props.columns > 0 && props.rows > 0) {
+        results = props.results?.slice(0, props.columns * props.rows);
+    }
+    const styling = mergeStyles({ ...props, columns: layout == ResultsLayout.list ? 1 : props.columns }, defaultStyles);
+    if (typeof resultComponent === 'string') {
+        const snap = useSnap();
+        if (snap?.templates?.library.import.component.result) {
+            resultComponent = useComponent(snap?.templates?.library.import.component.result, resultComponent);
+            if (!resultComponent) {
+                return null;
+            }
+        }
+    }
+    return results?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__results', `ss__results-${props.layout}`, className, internalClassName), children: results.map((result) => (() => {
+                switch (result.type) {
+                    case ContentType.BANNER:
+                        return _createElement(InlineBanner, { ...subProps.inlineBanner, key: result.id, banner: result, layout: props.layout });
+                    default:
+                        if (resultComponent && controller) {
+                            const ResultComponent = resultComponent;
+                            return (_jsx(ResultTracker, { result: result, controller: controller, children: _jsx(ResultComponent, { controller: controller, result: result, theme: theme, treePath: treePath }, result.id) }));
+                        }
+                        else {
+                            return (_jsx(TrackedResultComponent, { ...subProps.result, result: result, layout: props.layout, controller: controller }, result.id));
+                        }
+                }
+            })()) }) })) : null;
+});

package/dist/esm/components/src/components/Organisms/Results/index.d.ts

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

package/dist/esm/components/src/components/Organisms/Results/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/Results/index.js

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

package/dist/esm/components/src/components/Organisms/Sidebar/Sidebar.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps } from '../../../types';
+import { SearchController } from '@athoscommerce/snap-controller';
+import { Lang } from '../../../hooks/useLang';
+export declare const Sidebar: ((properties: SidebarProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type SideBarModuleNames = 'filterSummary' | 'sortBy' | 'perPage' | 'facets' | 'banner.left' | 'paginationInfo' | 'layoutSelector' | '_';
+export type SidebarProps = {
+    controller: SearchController;
+    lang?: Partial<SidebarLang>;
+} & SidebarTemplatesLegalProps & ComponentProps<SidebarProps>;
+export type SidebarTemplatesLegalProps = {
+    layout?: SideBarModuleNames[] | SideBarModuleNames[][];
+    titleText?: string;
+    hideTitleText?: boolean;
+    sticky?: boolean;
+    stickyOffset?: number;
+};
+export interface SidebarLang {
+    titleText: Lang<{
+        controller: SearchController;
+    }>;
+}
+//# sourceMappingURL=Sidebar.d.ts.map

package/dist/esm/components/src/components/Organisms/Sidebar/Sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAGlE,OAAO,EAAE,IAAI,EAAW,MAAM,wBAAwB,CAAC;AAgBvD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CA4DvD,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,GAAG,GAAG,CAAC;AAE/I,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,CAAC,EAAE,kBAAkB,EAAE,GAAG,kBAAkB,EAAE,EAAE,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,SAAS,EAAE,IAAI,CAAC;QACf,UAAU,EAAE,gBAAgB,CAAC;KAC7B,CAAC,CAAC;CACH"}

package/dist/esm/components/src/components/Organisms/Sidebar/Sidebar.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Layout } from '../Layout';
+import deepmerge from 'deepmerge';
+import { useLang } from '../../../hooks/useLang';
+const defaultStyles = ({ stickyOffset }) => {
+    return css({
+        // need sticky styles using new sticky prop
+        '&.ss__sidebar--sticky': {
+            position: 'sticky',
+            top: stickyOffset || 0,
+        },
+        '& .ss__facets': {
+            width: '100%',
+        },
+    });
+};
+export const Sidebar = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        titleText: 'Filters',
+        treePath: globalTreePath,
+        layout: [['filterSummary'], ['sortBy', 'perPage'], ['facets'], ['banner.left']],
+    };
+    const props = mergeProps('sidebar', globalTheme, defaultProps, properties);
+    const { controller, layout, hideTitleText, titleText, sticky, disableStyles, className, internalClassName, treePath } = props;
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        titleText: {
+            value: titleText,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {
+        controller: controller,
+    });
+    const subProps = {
+        Layout: {
+            // default props
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const hasChildrenToRender = layout?.length;
+    return controller?.store?.loaded && controller?.store?.pagination?.totalResults > 0 && hasChildrenToRender ? (_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__sidebar', className, internalClassName, { 'ss__sidebar--sticky': sticky }), children: [!hideTitleText ? (_jsx("h4", { className: classnames('ss__sidebar__title'), "aria-atomic": "true", "aria-live": "polite", ...mergedLang.titleText.all, children: titleText })) : (_jsx(_Fragment, {})), _jsx("div", { className: classnames('ss__sidebar__inner'), children: _jsx(Layout, { controller: controller, layout: layout, ...subProps.Layout }) })] }) })) : null;
+});

package/dist/esm/components/src/components/Organisms/Sidebar/index.d.ts

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

package/dist/esm/components/src/components/Organisms/Sidebar/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/Sidebar/index.js

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

package/dist/esm/components/src/components/Organisms/TermsList/TermsList.d.ts

@@ -0,0 +1,19 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+export declare const TermsList: ((properties: TermsListProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export type TermsListModuleNames = 'Trending' | 'Suggestions' | 'History' | '_';
+export type TermsListProps = {
+    controller: AutocompleteController;
+} & TermsListTemplatesLegalProps & ComponentProps<TermsListProps>;
+export type TermsListTemplatesLegalProps = {
+    layout?: TermsListModuleNames[] | TermsListModuleNames[][];
+    historyTitle?: string;
+    suggestionTitle?: string;
+    trendingTitle?: string;
+    retainHistory?: boolean;
+    retainTrending?: boolean;
+    verticalOptions?: boolean;
+};
+//# sourceMappingURL=TermsList.d.ts.map

package/dist/esm/components/src/components/Organisms/TermsList/TermsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TermsList.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/TermsList/TermsList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AA8B7D,eAAO,MAAM,SAAS,gBAAyB,cAAc;;CAmI3D,CAAC;AAMH,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,GAAG,CAAC;AAEhF,MAAM,MAAM,cAAc,GAAG;IAC5B,UAAU,EAAE,sBAAsB,CAAC;CACnC,GAAG,4BAA4B,GAC/B,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhC,MAAM,MAAM,4BAA4B,GAAG;IAC1C,MAAM,CAAC,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,EAAE,CAAC;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC"}

package/dist/esm/components/src/components/Organisms/TermsList/TermsList.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Terms } from '../../Molecules/Terms/Terms';
+const defaultStyles = ({}) => {
+    return css({
+        display: 'flex',
+        flexDirection: 'row',
+        background: '#f8f8f8',
+        width: 'auto',
+        flexWrap: 'wrap',
+        '.ss__terms-list__row': {
+            display: 'flex',
+            flexDirection: 'row',
+            flexBasis: '100%',
+        },
+        '.ss__terms-list__row:empty': {
+            display: 'none',
+        },
+        '.ss__terms-list__separator': {
+            flexGrow: 1,
+            flexShrink: 1,
+        },
+    });
+};
+export const TermsList = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        layout: [['Suggestions'], ['Trending'], ['History']],
+        historyTitle: 'Recent Searches',
+        trendingTitle: 'Popular Searches',
+        suggestionTitle: 'Search Suggestions',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('termsList', globalTheme, defaultProps, properties);
+    const { layout, historyTitle, verticalOptions, trendingTitle, suggestionTitle, retainHistory, retainTrending, treePath, disableStyles, className, internalClassName, controller, } = props;
+    const subProps = {
+        terms: {
+            vertical: verticalOptions ? true : false,
+            // default props
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            theme: props.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    const history = controller?.store.history || [];
+    const suggestions = controller?.store.terms || [];
+    const trending = controller?.store.trending || [];
+    const trendingActive = trending?.filter((term) => term.active).pop();
+    const historyActive = history?.filter((term) => term.active).pop();
+    const { loaded, results, state } = controller?.store;
+    let showTrending = false;
+    if (trending?.length && ((retainTrending && loaded) || (!results.length && !state.input))) {
+        showTrending = true;
+    }
+    let showHistory = false;
+    if (history?.length && ((retainHistory && loaded) || (!results.length && !state.input))) {
+        showHistory = true;
+    }
+    if (!controller.store.state.input && (historyActive || trendingActive)) {
+        if (history?.length)
+            showHistory = true;
+        if (trending?.length)
+            showTrending = true;
+    }
+    const findModule = (module) => {
+        if (typeof module !== 'string') {
+            const children = module?.map((subModule) => findModule(subModule));
+            const hasContent = module?.some((subModule, i) => subModule !== '_' && children[i]);
+            if (!hasContent)
+                return null;
+            return _jsx("div", { className: "ss__terms-list__row", children: children });
+        }
+        if (module == '_') {
+            return _jsx("div", { className: "ss__terms-list__separator" });
+        }
+        if (module == 'History' && showHistory) {
+            return (_jsx(Terms, { internalClassName: 'ss__terms-list__terms--history', title: historyTitle, terms: history, controller: controller, name: 'history', limit: controller.config.settings?.history?.limit, ...subProps.terms }));
+        }
+        if (module == 'Trending' && showTrending) {
+            return (_jsx(Terms, { internalClassName: 'ss__terms-list__terms--trending', title: trendingTitle, terms: trending, controller: controller, name: 'trending', limit: controller.config.settings?.trending?.limit, ...subProps.terms }));
+        }
+        if (module == 'Suggestions') {
+            if (!suggestions.length)
+                return null;
+            return (_jsx(Terms, { internalClassName: 'ss__terms-list__terms--suggestions', title: suggestionTitle, terms: suggestions, controller: controller, name: 'suggestions', ...subProps.terms }));
+        }
+    };
+    const modules = layout?.map((module) => findModule(module));
+    return modules?.some(Boolean) ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__terms-list', className, internalClassName), children: modules }) })) : null;
+});

package/dist/esm/components/src/components/Organisms/TermsList/index.d.ts

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

package/dist/esm/components/src/components/Organisms/TermsList/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/TermsList/index.js

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

package/dist/esm/components/src/components/Organisms/Toolbar/Toolbar.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from '../../../types';
+import { SearchController } from '@athoscommerce/snap-controller';
+import { ButtonProps } from '../../Atoms/Button';
+export declare const Toolbar: ((properties: ToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export type ToolbarProps = {
+    controller: SearchController;
+    name?: ToolbarNames;
+} & ToolbarTemplatesLegalProps & ComponentProps<ToolbarProps>;
+export type ToolbarTemplatesLegalProps = {
+    layout?: (ModuleNames | ModuleNames[])[];
+    toggleSideBarButton?: Partial<ButtonProps>;
+};
+export type ModuleNames = 'searchHeader' | 'filterSummary' | 'mobileSidebar' | 'layoutSelector' | 'perPage' | 'sortBy' | 'pagination' | 'paginationInfo' | 'breadcrumbs' | '_' | 'button.sidebar-toggle' | 'banner.header' | 'banner.banner' | 'banner.footer' | 'facetsHorizontal';
+export type ToolbarNames = 'top' | 'middle' | 'bottom';
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/esm/components/src/components/Organisms/Toolbar/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Organisms/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAMjD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAwCvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC;CACpB,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,MAAM,CAAC,EAAE,CAAC,WAAW,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,WAAW,GACpB,cAAc,GACd,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,SAAS,GACT,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,aAAa,GACb,GAAG,GACH,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,eAAe,GACf,kBAAkB,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC"}

package/dist/esm/components/src/components/Organisms/Toolbar/Toolbar.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Layout } from '../Layout';
+const defaultStyles = ({}) => {
+    return css({});
+};
+export const Toolbar = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        layout: ['mobileSidebar', 'filterSummary', 'paginationInfo', 'sortBy', 'perPage', 'pagination'],
+    };
+    const props = mergeProps('toolbar', globalTheme, defaultProps, properties);
+    const { controller, toggleSideBarButton, disableStyles, className, internalClassName, treePath, layout } = props;
+    const styling = mergeStyles(props, defaultStyles);
+    const subProps = {
+        Layout: {
+            // default props
+            toggleSideBarButton,
+            internalClassName: 'ss__toolbar__layout',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const hasChildrenToRender = layout?.length;
+    return hasChildrenToRender ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__toolbar', className, internalClassName), children: _jsx(Layout, { controller: controller, layout: layout, ...subProps.Layout }) }) })) : (_jsx(_Fragment, {}));
+});

package/dist/esm/components/src/components/Organisms/Toolbar/index.d.ts

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

package/dist/esm/components/src/components/Organisms/Toolbar/index.d.ts.map

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

package/dist/esm/components/src/components/Organisms/Toolbar/index.js

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

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

@@ -0,0 +1,23 @@
+import type { AutocompleteController } from '@athoscommerce/snap-controller';
+import { ComponentProps } from '../../../types';
+import { AutocompleteLayoutProps } from '../../Organisms/AutocompleteLayout';
+export declare const AutocompleteFixed: ((properties: AutocompleteFixedProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+interface inputBounds {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export type AutocompleteFixedProps = {
+    controller: AutocompleteController;
+} & AutocompleteFixedTemplatesLegalProps & ComponentProps<AutocompleteFixedProps>;
+export type AutocompleteFixedTemplatesLegalProps = {
+    buttonSelector?: string | Element;
+    overlayColor?: string;
+    renderInput?: boolean;
+    offset?: Partial<Omit<inputBounds, 'height'>>;
+} & AutocompleteLayoutProps;
+export {};
+//# sourceMappingURL=AutocompleteFixed.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteFixed.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Templates/AutocompleteFixed/AutocompleteFixed.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;AA8CjG,eAAO,MAAM,iBAAiB,gBAAyB,sBAAsB;;CAuM3E,CAAC;AAEH,UAAU,WAAW;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAQD,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,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;CAC9C,GAAG,uBAAuB,CAAC"}