@athoscommerce/snap-preact 1.0.0

package/dist/esm/components/src/components/Molecules/SortBy/SortBy.js

@@ -0,0 +1,90 @@
+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, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Select } from '../Select';
+import { RadioList } from '../RadioList';
+import { List } from '../List';
+import deepmerge from 'deepmerge';
+const defaultStyles = () => {
+    return css({
+        '.ss__button__content': {
+            display: 'flex',
+            alignItems: 'center',
+        },
+    });
+};
+export const SortBy = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        label: 'Sort By',
+        type: 'dropdown',
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('sortBy', globalTheme, defaultProps, properties);
+    const { sorting, type, controller, hideLabel, disableStyles, className, internalClassName, treePath } = props;
+    let label = props.label;
+    const store = sorting || controller?.store?.sorting;
+    const subProps = {
+        Select: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        RadioList: {
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        List: {
+            multiSelect: false,
+            hideOptionCheckboxes: true,
+            horizontal: true,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const styling = mergeStyles(props, defaultStyles);
+    //initialize lang
+    const defaultLang = {
+        label: {
+            value: label,
+        },
+    };
+    //deep merge with props.lang
+    const lang = deepmerge(defaultLang, props.lang || {});
+    if (hideLabel) {
+        delete lang.label.value;
+        label = undefined;
+    }
+    // options can be an Array or ObservableArray - but should have length
+    return store?.current && typeof store?.options == 'object' && store.options?.length ? (_jsxs(CacheProvider, { children: [type?.toLowerCase() == 'dropdown' && (_jsx(Select, { ...styling, className: classnames('ss__sortby', 'ss__sortby__select', className, internalClassName), ...subProps.Select, label: label, options: store.options, selected: store.current, onSelect: (e, selection) => {
+                    selection?.url?.go();
+                }, lang: {
+                    buttonLabel: lang.label,
+                } })), type?.toLowerCase() == 'list' && (_jsx(List, { ...styling, className: classnames('ss__sortby', 'ss__sortby__list', className, internalClassName), ...subProps.List, options: store.options, selected: store.current, titleText: label, onSelect: (e, selection) => {
+                    selection?.url?.go();
+                }, lang: {
+                    title: lang.label,
+                } })), type?.toLowerCase() == 'radio' && (_jsx(RadioList, { ...styling, className: classnames('ss__sortby', 'ss__sortby__radioList', className, internalClassName), ...subProps.RadioList, options: store.options, selected: store.current, titleText: label, onSelect: (e, selection) => {
+                    selection?.url?.go();
+                }, lang: {
+                    title: lang.label,
+                } }))] })) : null;
+});

package/dist/esm/components/src/components/Molecules/SortBy/index.d.ts

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

package/dist/esm/components/src/components/Molecules/SortBy/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/SortBy/index.js

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

package/dist/esm/components/src/components/Molecules/Swatches/Swatches.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, SwatchOption, BreakpointsProps } from '../../../types';
+import { GridProps } from '../Grid';
+import { SlideshowProps } from '../Slideshow';
+export declare function Swatches(properties: SwatchesProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type SwatchesProps = {
+    breakpoints?: BreakpointsProps;
+} & SwatchesTemplatesLegalProps & ComponentProps<SwatchesProps>;
+export type SwatchesTemplatesLegalProps = {
+    options: SwatchOption[];
+    onSelect?: (e: React.MouseEvent<HTMLElement>, option: SwatchOption) => void;
+    selected?: SwatchOption;
+    hideLabels?: boolean;
+    disabled?: boolean;
+    slideshow?: Partial<SlideshowProps>;
+    grid?: Partial<GridProps>;
+    type?: 'slideshow' | 'grid';
+};
+//# sourceMappingURL=Swatches.d.ts.map

package/dist/esm/components/src/components/Molecules/Swatches/Swatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatches.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Swatches/Swatches.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAe,MAAM,gBAAgB,CAAC;AAG7F,OAAO,EAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,EAA6B,cAAc,EAAE,MAAM,cAAc,CAAC;AA2DzE,wBAAgB,QAAQ,CAAC,UAAU,EAAE,aAAa,2DAwLjD;AAED,MAAM,MAAM,aAAa,GAAG;IAC3B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAC/B,GAAG,2BAA2B,GAC9B,cAAc,CAAC,aAAa,CAAC,CAAC;AAE/B,MAAM,MAAM,2BAA2B,GAAG;IACzC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;CAC5B,CAAC"}

package/dist/esm/components/src/components/Molecules/Swatches/Swatches.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import classnames from 'classnames';
+import { css } from '@emotion/react';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { useA11y, useDisplaySettings } from '../../../hooks';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { Grid } from '../Grid';
+import { Image } from '../../Atoms/Image';
+import deepmerge from 'deepmerge';
+import { filters } from '@athoscommerce/snap-toolbox';
+import Color from 'color';
+import { Slideshow } from '../Slideshow';
+import { useState } from 'preact/hooks';
+const defaultStyles = ({ theme }) => {
+    return css({
+        '.ss__swatches__slideshow__swatch': {
+            boxSizing: 'content-box',
+            cursor: 'pointer',
+            backgroundRepeat: 'no-repeat',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            border: `1px solid ${theme?.variables?.colors?.primary || '#333'}`,
+            aspectRatio: '1/1',
+            flexDirection: 'column',
+            '.ss__swatches__slideshow__swatch__inner': {
+                aspectRatio: '1/1',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+            },
+            '&.ss__swatches__slideshow__swatch--selected': {
+                border: `2px solid ${theme?.variables?.colors?.primary || '#333'}`,
+            },
+            '&.ss__swatches__slideshow__swatch--disabled:before, &.ss__swatches__slideshow__swatch--unavailable:before': {
+                content: '""',
+                display: 'block',
+                position: 'absolute',
+                top: '50%',
+                width: '90%',
+                height: '1px',
+                borderTop: '3px solid #eee',
+                outline: '1px solid #ffff',
+                transform: 'rotate(-45deg)',
+            },
+            '&.ss__swatches__slideshow__swatch--disabled': {
+                position: 'relative',
+                cursor: 'none',
+                pointerEvents: 'none',
+                opacity: 0.5,
+            },
+            '&.ss__swatches__slideshow__swatch--unavailable': {
+                cursor: 'pointer',
+                opacity: 0.5,
+            },
+            '&.ss__swatches__slideshow__swatch--dark': {
+                color: '#fff',
+            },
+        },
+    });
+};
+export function Swatches(properties) {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultCarouselBreakpoints = {
+        0: {
+            carousel: {
+                slidesPerView: 3,
+                slidesPerGroup: 3,
+                spaceBetween: 10,
+            },
+        },
+        768: {
+            carousel: {
+                slidesPerView: 4,
+                slidesPerGroup: 4,
+                spaceBetween: 10,
+            },
+        },
+        1200: {
+            carousel: {
+                slidesPerView: 5,
+                slidesPerGroup: 5,
+                spaceBetween: 10,
+            },
+        },
+    };
+    const defaultProps = {
+        // default props
+        type: 'slideshow',
+        hideLabels: true,
+        treePath: globalTreePath,
+    };
+    let props = mergeProps('swatches', globalTheme, defaultProps, properties);
+    const breakpoints = props.breakpoints || (props.type == 'slideshow' ? defaultCarouselBreakpoints : {});
+    const displaySettings = useDisplaySettings(breakpoints);
+    if (displaySettings && Object.keys(displaySettings).length) {
+        const theme = deepmerge(props?.theme || {}, displaySettings?.theme || {}, { arrayMerge: (destinationArray, sourceArray) => sourceArray });
+        props = {
+            ...props,
+            ...displaySettings,
+            theme,
+        };
+    }
+    const { onSelect, disabled, options, hideLabels, disableStyles, className, internalClassName, type, slideshow, grid, treePath } = props;
+    const subProps = {
+        slideshow: {
+            // default props
+            internalClassName: 'ss__swatches__slideshow',
+            loop: false,
+            slidesToShow: 6, // Add explicit slidesToShow
+            slidesToMove: 1, // Add explicit slidesToMove
+            gap: 8, // Add smaller gap
+            showNavigation: true, // Enable navigation
+            showPagination: false, // Disable pagination for swatches
+            autoPlay: false, // Disable autoplay
+            ...slideshow,
+            // inherited props
+            ...defined({
+                breakpoints,
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        grid: {
+            // default props
+            internalClassName: 'ss__swatches__grid',
+            hideLabels: hideLabels,
+            overflowButtonInGrid: true,
+            disableOverflowAction: true,
+            rows: 1,
+            columns: 6,
+            ...grid,
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+        image: {
+            // default props
+            internalClassName: 'ss__swatches__image',
+            // inherited props
+            ...defined({
+                disableStyles,
+            }),
+            // component theme overrides
+            theme: props?.theme,
+            treePath,
+        },
+    };
+    const selected = props.selected;
+    const styling = mergeStyles(props, defaultStyles);
+    // selection state
+    const [selection, setSelection] = useState(selected || undefined);
+    const makeSelection = (e, option) => {
+        if (onSelect) {
+            onSelect(e, option);
+        }
+        setSelection(option);
+    };
+    const slidesArray = [];
+    if (type == 'slideshow') {
+        {
+            options.forEach((option) => {
+                const label = option.label;
+                const selected = selection?.value == option.value;
+                let isDark = false;
+                try {
+                    const color = new Color(option.background ? option.background.toLowerCase() : option.backgroundImageUrl ? `` : option.value.toString().toLowerCase());
+                    isDark = color.isDark();
+                }
+                catch (err) { }
+                slidesArray.push({
+                    onClick: (e) => !disabled && !option?.disabled && makeSelection(e, option),
+                    content: (_jsx("div", { className: classnames(`ss__swatches__slideshow__swatch`, {
+                            'ss__swatches__slideshow__swatch--selected': selected,
+                            'ss__swatches__slideshow__swatch--disabled': option?.disabled,
+                            'ss__swatches__slideshow__swatch--unavailable': option?.available === false,
+                            'ss__swatches__slideshow__swatch--dark': isDark,
+                        }), title: label, ref: (e) => useA11y(e), "aria-disabled": option.disabled || option?.available === false, role: "option", "aria-selected": selected, children: _jsxs("div", { className: classnames(`ss__swatches__slideshow__swatch__inner`, `ss__swatches__slideshow__swatch__inner--${filters.handleize(option.value?.toString())}`), style: { background: option.background ? option.background : option.backgroundImageUrl ? `` : option.value }, children: [!option.background && option.backgroundImageUrl ? (_jsx(Image, { ...subProps.image, src: option.backgroundImageUrl, alt: option.label || option.value?.toString() })) : null, !hideLabels && _jsx("span", { className: "ss__swatches__slideshow__swatch__value", children: label || option.value })] }) })),
+                });
+            });
+        }
+    }
+    return typeof options == 'object' && options?.length ? (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__swatches', className, internalClassName), children: type == 'slideshow' ? (_jsx(Slideshow, { slides: slidesArray, ...subProps.slideshow })) : (_jsx(Grid, { ...subProps.grid, options: options, onSelect: (e, option) => {
+                    !disabled && makeSelection(e, option);
+                }, selected: selected })) }) })) : null;
+}

package/dist/esm/components/src/components/Molecules/Swatches/index.d.ts

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

package/dist/esm/components/src/components/Molecules/Swatches/index.d.ts.map

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

package/dist/esm/components/src/components/Molecules/Swatches/index.js

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

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/AthosCommerceLogo.d.ts

@@ -0,0 +1,2 @@
+export declare const AthosCommerceLogo: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AthosCommerceLogo.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/AthosCommerceLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AthosCommerceLogo.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Assets/AthosCommerceLogo.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,wDAqF7B,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/AthosCommerceLogo.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+export const AthosCommerceLogo = () => {
+    return (_jsx("svg", { id: "Layer_2", className: "athos-logo", "data-name": "Layer 2", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 271.84 40", children: _jsx("g", { id: "Layer_1-2", "data-name": "Layer 1", children: _jsxs("g", { children: [_jsxs("g", { children: [_jsxs("g", { children: [_jsx("path", { className: "cls-2", d: "M50.86,18.26c.58-1.16,1.37-2.05,2.37-2.67,1-.62,2.11-.94,3.34-.94,1.05,0,1.97.21,2.77.64.79.43,1.4.99,1.83,1.68v-2.11h4.57v14.92h-4.57v-2.11c-.45.69-1.07,1.26-1.86,1.68-.79.43-1.72.64-2.77.64-1.21,0-2.32-.32-3.31-.95-1-.63-1.79-1.53-2.37-2.7s-.87-2.52-.87-4.05.29-2.88.87-4.04ZM60.22,19.62c-.63-.66-1.4-.99-2.3-.99-.66,0-1.31.2-1.85.58-.95.66-1.42,1.69-1.42,3.09,0,1.14.32,2.05.95,2.71.78.82,1.77,1.14,2.96.95.2-.03.41-.1.6-.19,1.34-.64,2.01-1.79,2.01-3.45,0-1.14-.32-2.04-.95-2.7Z" }), _jsx("path", { className: "cls-2", d: "M77.07,25.91v3.88h-2.33c-1.66,0-2.95-.41-3.88-1.22s-1.39-2.13-1.39-3.97v-5.94h-1.82v-3.8h1.82v-3.64h4.57v3.64h2.99v3.8h-2.99v5.99c0,.45.11.77.32.96s.57.29,1.07.29h1.63Z" }), _jsx("path", { className: "cls-2", d: "M92.29,16.4c1.03,1.13,1.55,2.69,1.55,4.66v8.72h-4.55v-8.1c0-1-.26-1.77-.78-2.33s-1.21-.83-2.08-.83-1.57.28-2.08.83c-.52.55-.78,1.33-.78,2.33v8.1h-4.57V10h4.57v6.87c.46-.66,1.1-1.19,1.9-1.58.8-.39,1.7-.59,2.7-.59,1.71,0,3.08.57,4.12,1.7Z" }), _jsx("path", { className: "cls-2", d: "M99.47,29.06c-1.17-.62-2.08-1.52-2.75-2.67-.67-1.16-1-2.51-1-4.06s.34-2.88,1.02-4.05c.68-1.17,1.6-2.06,2.78-2.69s2.49-.94,3.96-.94,2.78.31,3.96.94,2.1,1.52,2.78,2.69c.68,1.17,1.02,2.52,1.02,4.05s-.34,2.88-1.03,4.05c-.69,1.17-1.62,2.06-2.81,2.69-1.19.62-2.51.94-3.97.94s-2.78-.31-3.94-.94ZM105.65,25.08c.61-.64.92-1.56.92-2.75s-.3-2.11-.9-2.75c-.6-.64-1.33-.96-2.21-.96s-1.63.32-2.22.95c-.59.63-.88,1.56-.88,2.77s.29,2.11.87,2.75c.58.64,1.31.96,2.18.96s1.62-.32,2.23-.96Z" }), _jsx("path", { className: "cls-2", d: "M116.45,29.33c-1.02-.45-1.82-1.06-2.41-1.83-.59-.78-.92-1.65-.99-2.61h4.52c.05.52.3.94.72,1.26.43.32.95.48,1.58.48.57,0,1.01-.11,1.32-.33.31-.22.47-.51.47-.87,0-.43-.22-.74-.67-.95-.45-.2-1.17-.43-2.17-.68-1.07-.25-1.96-.51-2.67-.79-.71-.28-1.33-.71-1.84-1.31-.52-.6-.78-1.4-.78-2.42,0-.86.24-1.63.71-2.34.47-.7,1.17-1.26,2.09-1.67s2.01-.61,3.28-.61c1.87,0,3.35.46,4.42,1.39s1.7,2.16,1.86,3.69h-4.22c-.07-.52-.3-.93-.68-1.23-.38-.3-.89-.45-1.51-.45-.53,0-.95.1-1.23.31s-.43.49-.43.84c0,.43.23.75.68.96s1.16.43,2.13.64c1.1.29,2.01.57,2.7.84.7.28,1.31.72,1.83,1.34s.8,1.44.82,2.47c0,.87-.25,1.65-.74,2.34-.49.69-1.19,1.23-2.11,1.62-.92.39-1.98.59-3.2.59-1.3,0-2.46-.22-3.48-.67Z" })] }), _jsxs("g", { children: [_jsx("path", { className: "cls-1", d: "M133.64,18.4c.61-1.14,1.46-2.02,2.54-2.65,1.08-.62,2.31-.93,3.7-.93,1.82,0,3.32.45,4.49,1.35,1.18.9,1.94,2.12,2.28,3.67h-2.02c-.25-1.06-.8-1.9-1.63-2.5-.84-.6-1.88-.9-3.12-.9-.99,0-1.88.22-2.67.67s-1.42,1.12-1.88,2.01c-.46.89-.69,1.99-.69,3.28s.23,2.39.69,3.29,1.08,1.58,1.88,2.02c.79.45,1.68.68,2.67.68,1.24,0,2.28-.3,3.12-.91.84-.6,1.38-1.44,1.63-2.52h2.02c-.34,1.51-1.11,2.73-2.29,3.64-1.19.92-2.68,1.38-4.48,1.38-1.39,0-2.62-.31-3.7-.93s-1.93-1.5-2.54-2.65c-.61-1.14-.92-2.48-.92-4.01s.31-2.87.92-4.01Z" }), _jsx("path", { className: "cls-1", d: "M152.31,29.07c-1.11-.62-1.98-1.5-2.62-2.65-.64-1.14-.96-2.48-.96-4.01s.32-2.87.97-4.01,1.53-2.02,2.65-2.65c1.12-.62,2.37-.93,3.75-.93s2.64.31,3.77.93c1.12.62,2.01,1.5,2.65,2.65.64,1.14.96,2.48.96,4.01s-.32,2.84-.97,4c-.65,1.15-1.54,2.04-2.67,2.66-1.13.62-2.39.93-3.78.93s-2.63-.31-3.74-.93ZM158.75,27.69c.83-.44,1.5-1.11,2.01-2,.51-.89.77-1.98.77-3.28s-.25-2.39-.76-3.28-1.17-1.56-2-2c-.83-.44-1.73-.66-2.7-.66s-1.87.22-2.7.66-1.49,1.11-1.99,2c-.49.89-.74,1.99-.74,3.28s.25,2.39.74,3.28c.5.89,1.15,1.56,1.97,2,.82.44,1.72.66,2.69.66s1.87-.22,2.7-.66Z" }), _jsx("path", { className: "cls-1", d: "M187.32,16.41c1.09,1.09,1.63,2.67,1.63,4.74v8.64h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.83-1.27-3.16-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.84-1.27-3.19-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.89v-14.74h1.89v2.54c.47-.92,1.13-1.61,2-2.09.86-.48,1.83-.72,2.89-.72,1.28,0,2.4.31,3.36.92.96.61,1.66,1.51,2.09,2.7.4-1.17,1.07-2.06,2.04-2.69s2.06-.93,3.28-.93c1.73,0,3.14.55,4.23,1.63Z" }), _jsx("path", { className: "cls-1", d: "M212.8,16.41c1.09,1.09,1.63,2.67,1.63,4.74v8.64h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.83-1.27-3.16-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.86v-8.42c0-1.6-.39-2.83-1.16-3.67-.77-.85-1.84-1.27-3.19-1.27s-2.49.46-3.32,1.38c-.83.92-1.24,2.25-1.24,4v7.99h-1.89v-14.74h1.89v2.54c.47-.92,1.13-1.61,2-2.09.86-.48,1.83-.72,2.89-.72,1.28,0,2.4.31,3.36.92.96.61,1.66,1.51,2.09,2.7.4-1.17,1.07-2.06,2.04-2.69s2.06-.93,3.28-.93c1.73,0,3.14.55,4.23,1.63Z" }), _jsx("path", { className: "cls-1", d: "M230.57,23.14h-12.23c.05,1.12.32,2.07.81,2.86s1.12,1.39,1.92,1.8c.79.4,1.66.61,2.59.61,1.22,0,2.26-.3,3.09-.89s1.39-1.39,1.66-2.4h2c-.36,1.44-1.13,2.62-2.31,3.52s-2.66,1.36-4.44,1.36c-1.39,0-2.63-.31-3.73-.93-1.1-.62-1.96-1.5-2.58-2.65-.62-1.14-.93-2.48-.93-4.01s.31-2.87.92-4.02c.61-1.15,1.47-2.03,2.56-2.65s2.35-.92,3.75-.92,2.63.31,3.69.92c1.05.61,1.86,1.44,2.43,2.47.57,1.04.85,2.18.85,3.44,0,.65-.02,1.14-.05,1.48ZM228.05,18.79c-.46-.77-1.09-1.36-1.88-1.76-.79-.4-1.66-.59-2.59-.59-1.4,0-2.6.45-3.59,1.35-.99.9-1.54,2.17-1.65,3.81h10.37c.02-1.1-.2-2.03-.66-2.81Z" }), _jsx("path", { className: "cls-1", d: "M236.49,15.53c.85-.5,1.9-.76,3.15-.76v1.97h-.51c-1.37,0-2.47.37-3.29,1.11-.83.74-1.24,1.97-1.24,3.7v8.23h-1.89v-14.74h1.89v2.62c.41-.92,1.05-1.63,1.9-2.13Z" }), _jsx("path", { className: "cls-1", d: "M242.55,18.4c.61-1.14,1.46-2.02,2.54-2.65s2.31-.93,3.7-.93c1.82,0,3.32.45,4.49,1.35,1.18.9,1.94,2.12,2.28,3.67h-2.02c-.25-1.06-.8-1.9-1.63-2.5-.84-.6-1.88-.9-3.12-.9-.99,0-1.88.22-2.67.67s-1.42,1.12-1.88,2.01c-.46.89-.69,1.99-.69,3.28s.23,2.39.69,3.29,1.08,1.58,1.88,2.02c.79.45,1.68.68,2.67.68,1.24,0,2.28-.3,3.12-.91.84-.6,1.38-1.44,1.63-2.52h2.02c-.34,1.51-1.11,2.73-2.29,3.64-1.19.92-2.68,1.38-4.48,1.38-1.39,0-2.62-.31-3.7-.93s-1.93-1.5-2.54-2.65c-.61-1.14-.92-2.48-.92-4.01s.31-2.87.92-4.01Z" }), _jsx("path", { className: "cls-1", d: "M271.79,23.14h-12.23c.05,1.12.32,2.07.81,2.86.49.79,1.12,1.39,1.92,1.8.79.4,1.66.61,2.59.61,1.22,0,2.25-.3,3.09-.89.84-.59,1.39-1.39,1.66-2.4h2c-.36,1.44-1.13,2.62-2.31,3.52-1.18.91-2.66,1.36-4.44,1.36-1.39,0-2.63-.31-3.73-.93s-1.96-1.5-2.58-2.65c-.62-1.14-.93-2.48-.93-4.01s.31-2.87.92-4.02c.61-1.15,1.47-2.03,2.57-2.65s2.35-.92,3.75-.92,2.63.31,3.68.92c1.05.61,1.86,1.44,2.43,2.47.57,1.04.85,2.18.85,3.44,0,.65-.02,1.14-.05,1.48ZM269.26,18.79c-.46-.77-1.09-1.36-1.88-1.76-.79-.4-1.66-.59-2.59-.59-1.4,0-2.6.45-3.59,1.35s-1.54,2.17-1.65,3.81h10.37c.02-1.1-.2-2.03-.66-2.81Z" })] })] }), _jsxs("g", { children: [_jsx("path", { className: "cls-2", d: "M40,13.34c0,2.87-2.1,5.2-4.7,5.2h-10.42c-3.66,0-5.9-4.42-4.02-7.9l4.37-8.11c.86-1.57,2.37-2.53,4.02-2.53h6.03c2.59,0,4.7,2.34,4.7,5.2l.02,8.14Z" }), _jsx("path", { className: "cls-1", d: "M40,34.79c0,2.87-2.1,5.2-4.7,5.2h-10.42c-3.66,0-5.9-4.42-4.02-7.9l4.37-8.11c.86-1.57,2.37-2.53,4.02-2.53h6.03c2.59,0,4.7,2.34,4.7,5.2l.02,8.14Z" }), _jsx("path", { className: "cls-1", d: "M0,5.2C0,2.34,2.1,0,4.7,0h10.42c3.66,0,5.9,4.42,4.02,7.9l-4.37,8.11c-.86,1.57-2.37,2.53-4.02,2.53h-6.03C2.12,18.54.02,16.21.02,13.34l-.02-8.14Z" }), _jsx("path", { className: "cls-2", d: "M0,26.66c0-2.87,2.1-5.2,4.7-5.2h10.42c3.66,0,5.9,4.42,4.02,7.9l-4.37,8.11c-.86,1.57-2.37,2.53-4.02,2.53h-6.03C2.12,40,.02,37.66.02,34.8l-.02-8.14Z" })] })] }) }) }));
+};

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/Reset.d.ts

@@ -0,0 +1,2 @@
+export declare const Reset: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Reset.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/Reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reset.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Assets/Reset.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,wDAajB,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/Reset.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+export const Reset = () => {
+    return (_jsxs("svg", { fill: "#000000", viewBox: "0 0 1920 1920", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }), _jsx("g", { id: "SVGRepo_tracerCarrier", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("g", { id: "SVGRepo_iconCarrier", children: _jsx("path", { d: "M960 0v213.333c411.627 0 746.667 334.934 746.667 746.667S1371.627 1706.667 960 1706.667 213.333 1371.733 213.333 960c0-197.013 78.4-382.507 213.334-520.747v254.08H640V106.667H53.333V320h191.04C88.64 494.08 0 720.96 0 960c0 529.28 430.613 960 960 960s960-430.72 960-960S1489.387 0 960 0", fillRule: "evenodd" }) })] }));
+};

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/index.d.ts

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

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Assets/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Assets/index.js

@@ -0,0 +1,2 @@
+export * from './AthosCommerceLogo';
+export * from './Reset';

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/AbstractedControls.d.ts

@@ -0,0 +1,13 @@
+import { TemplateEditorStore } from '../../../../../../src/Templates/Stores/TemplateEditor/TemplateEditorStore';
+type AbstractedControlsProps<Params> = {
+    title?: string;
+    feature: string;
+    editorStore: TemplateEditorStore;
+    data?: Params;
+    enableGroupReset?: boolean;
+};
+export declare const AbstractedControls: (<Params>(properties: AbstractedControlsProps<Params>) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=AbstractedControls.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/AbstractedControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractedControls.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Components/AbstractedControls.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2EAA2E,CAAC;AAKhH,KAAK,uBAAuB,CAAC,MAAM,IAAI;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAMF,eAAO,MAAM,kBAAkB,IAAa,MAAM,cAAe,uBAAuB,CAAC,MAAM,CAAC;;CAoG9F,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/AbstractedControls.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import { observer } from 'mobx-react-lite';
+import { Control } from './Control';
+import { Reset } from '../Assets';
+const CSS = {
+    AbstractedControls: ({}) => css({}),
+};
+export const AbstractedControls = observer((properties) => {
+    const styling = {
+        css: [CSS.AbstractedControls({ ...properties })],
+    };
+    const { title, enableGroupReset, feature, editorStore, data } = properties;
+    const [section, feat] = feature.split('/');
+    const controlSection = editorStore.uiAbstractions[section];
+    const controlGroups = controlSection?.[feat];
+    if (!controlGroups) {
+        console.warn(`No controls found for feature: ${feature}`, controlSection, controlGroups);
+        return null;
+    }
+    const showGroupReset = enableGroupReset && controlGroups.some((group) => group.controls.some((control) => control.shouldShowReset()));
+    const resetAll = () => {
+        controlGroups.forEach((group) => {
+            group.controls.forEach((control) => {
+                if (control.shouldShowReset()) {
+                    control.onReset(data);
+                }
+            });
+        });
+    };
+    return (_jsxs("div", { className: "ss__template-editor__abstracted-controls", ...styling, children: [title && (_jsxs("div", { className: "control-title", children: [_jsx("h3", { children: title }), showGroupReset && (_jsx("span", { className: "reset", children: _jsx("button", { title: "Reset", onClick: () => {
+                                resetAll();
+                            }, children: _jsx(Reset, {}) }) }))] })), controlGroups.map((group) => {
+                const showGroupReset = group.showReset && group.controls.some((control) => control.shouldShowReset());
+                const resetGroup = () => {
+                    group.controls.forEach((control) => {
+                        if (control.shouldShowReset()) {
+                            control.onReset(data);
+                        }
+                        else {
+                        }
+                    });
+                };
+                return (_jsxs("div", { className: "group", children: [group.title && (_jsxs("div", { className: "group-title", children: [_jsx("h4", { title: group.description, children: group.title }), showGroupReset && (_jsx("span", { className: "reset", children: showGroupReset ? (_jsx("button", { title: "Reset", onClick: () => {
+                                            resetGroup();
+                                        }, children: _jsx(Reset, {}) })) : null }))] })), group.controls.map((control, index) => {
+                            return (_jsx(Control, { type: control.type, label: control.label, description: control.description, showReset: control.shouldShowReset(), onChange: (value) => control.onValueChange(value, data), onReset: () => control.onReset(data), display: control.getDisplayState ? control.getDisplayState(data) : 'visible', value: control.getValue(data), options: control.getOptions ? control.getOptions(data) : [] }, index));
+                        })] }, group.title));
+            })] }));
+});

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/Control.d.ts

@@ -0,0 +1,17 @@
+import { ControlDisplayState, ControlOptions, ControlValues, ControlValueTypes } from '../../../../../../src/types';
+export declare const Control: ((props: ControlProps) => import("@emotion/react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+type ControlProps = {
+    type: ControlValueTypes;
+    label: string;
+    description?: string;
+    onReset: () => void;
+    display: ControlDisplayState;
+    showReset: boolean;
+    value: ControlValues;
+    options?: ControlOptions;
+    onChange: (value: ControlValues) => void;
+};
+export {};
+//# sourceMappingURL=Control.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/Control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Components/Control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAGpH,eAAO,MAAM,OAAO,WAAoB,YAAY;;CAkGlD,CAAC;AAEH,KAAK,YAAY,GAAG;IACnB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Components/Control.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'preact/hooks';
+import { Reset } from '../Assets';
+export const Control = observer((props) => {
+    const { type, label, description, onReset, display, showReset, value, options, onChange } = props;
+    const [inputValue, setInputValue] = useState(value);
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
+    return display === 'hidden' ? null : (_jsxs("div", { className: "option checkbox", children: [_jsx("label", { children: label }), _jsx("div", { className: "reset", children: showReset ? (_jsx("button", { title: "Reset", onClick: () => {
+                        onReset();
+                    }, children: _jsx(Reset, {}) })) : null }), _jsx("div", { className: "value", title: description, children: (() => {
+                    switch (type) {
+                        case 'text': {
+                            return _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), disabled: display === 'disabled' });
+                        }
+                        case 'number': {
+                            return (_jsx("input", { type: "number", value: value, onChange: (e) => onChange(Number(e.target.value)), disabled: display === 'disabled' }));
+                        }
+                        case 'checkbox': {
+                            return (_jsx("input", { type: "checkbox", checked: value, onChange: (e) => onChange(e.target.checked), disabled: display === 'disabled' }));
+                        }
+                        case 'dropdown': {
+                            return (_jsx("select", { onChange: (e) => onChange(e.target.value), disabled: display === 'disabled', value: value, children: options?.map((group, groupIndex) => group.group ? (_jsx("optgroup", { label: group.group, children: group.options.map((option, optionIndex) => (_jsx("option", { value: option.value, children: option.label || option.value }, `${groupIndex}-${optionIndex}`))) }, groupIndex)) : (group.options.map((option, optionIndex) => (_jsx("option", { value: option.value, children: option.label || option.value }, `${groupIndex}-${optionIndex}`))))) }));
+                        }
+                        case 'color': {
+                            return (_jsxs(_Fragment, { children: [_jsx("input", { type: "color", value: value, onChange: (e) => {
+                                            setInputValue(e.target.value);
+                                            onChange(e.target.value);
+                                        }, disabled: display === 'disabled' }), _jsx("input", { type: "text", className: isValidHexColor(inputValue) ? '' : 'invalid', value: inputValue, onChange: (e) => {
+                                            setInputValue(e.target.value);
+                                            isValidHexColor(e.target.value) && onChange(e.target.value);
+                                        }, disabled: display === 'disabled' })] }));
+                        }
+                        default: {
+                            return null;
+                        }
+                    }
+                })() })] }));
+});
+// function to validate hex color values of the type: #333333
+const isValidHexColor = (color) => {
+    if (!/^#[0-9A-F]{6}$/i.test(color)) {
+        return false;
+    }
+    return true;
+};

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.d.ts

@@ -0,0 +1,13 @@
+export declare const DropdownControl: (props: DropdownControlProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+type DropdownControlProps = {
+    label: string;
+    description: string;
+    options: (string | number)[];
+    onReset: () => void;
+    disabled: boolean;
+    showReset?: boolean;
+    value?: string | number;
+    onChange: (value: string | number) => void;
+};
+export {};
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../../../../../components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,UAAW,oBAAoB,qDA6B1D,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC"}

package/dist/esm/components/src/components/Molecules/TemplatesEditor/Controls/Dropdown.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Reset } from '../Assets';
+export const DropdownControl = (props) => {
+    const { label, description, onReset, disabled, showReset, value, options, onChange } = props;
+    return (_jsxs("div", { className: "option dropdown", children: [_jsx("label", { children: label }), _jsx("div", { className: "reset", children: showReset ? (_jsx("button", { title: "Reset", onClick: () => {
+                        onReset();
+                    }, children: _jsx(Reset, {}) })) : null }), _jsxs("div", { className: "value", children: [_jsx("select", { onChange: (e) => onChange(e.target.value), disabled: disabled, value: value, children: options.map((option, index) => (_jsx("option", { value: option, children: option }, index))) }), _jsx("span", { children: description })] })] }));
+};

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.d.ts

@@ -0,0 +1,13 @@
+import { TemplateEditorStore } from '../../../../../src/Templates/Stores/TemplateEditor/TemplateEditorStore';
+import { TemplatesStore } from '../../../../../src/Templates/Stores/TemplateStore';
+import { SnapTemplates } from '../../../../../src';
+export declare const TemplatesEditor: ((properties: TemplatesEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export interface TemplatesEditorProps {
+    onRemoveClick: () => void;
+    templatesStore: TemplatesStore;
+    editorStore: TemplateEditorStore;
+    snap: SnapTemplates;
+}
+//# sourceMappingURL=TemplatesEditor.d.ts.map

package/dist/esm/components/src/components/Molecules/TemplatesEditor/TemplatesEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplatesEditor.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/TemplatesEditor/TemplatesEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wEAAwE,CAAC;AAC7G,OAAO,EAAE,cAAc,EAAiB,MAAM,mDAAmD,CAAC;AAClG,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAsTnD,eAAO,MAAM,eAAe,gBAAyB,oBAAoB;;CAuGvE,CAAC;AAYH,MAAM,WAAW,oBAAoB;IACpC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,mBAAmB,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;CACpB"}