@athoscommerce/snap-preact 1.2.3-beta.2 → 1.3.0

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/autocompleteControllerUI.d.ts

@@ -1,6 +1,7 @@
 import { AutocompleteController } from '@athoscommerce/snap-controller';
 import { AbstractionGroup } from '../../../../types';
 import { TemplateEditorStore } from '../TemplateEditorStore';
+export declare function autocompleteTargetUI(store: TemplateEditorStore): AbstractionGroup<number>[];
 export declare function autocompleteControllerUI(store: TemplateEditorStore): AbstractionGroup<AutocompleteController>[];
 export declare function updateAutocompleteControllerState(controller: AutocompleteController): Promise<void>;
 //# sourceMappingURL=autocompleteControllerUI.d.ts.map

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/autocompleteControllerUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleteControllerUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/autocompleteControllerUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,sBAAsB,CAAC,EAAE,CAgN/G;AAED,wBAAsB,iCAAiC,CAAC,UAAU,EAAE,sBAAsB,iBA2BzF"}
+{"version":3,"file":"autocompleteControllerUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/autocompleteControllerUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAgF3F;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,sBAAsB,CAAC,EAAE,CAsM/G;AAED,wBAAsB,iCAAiC,CAAC,UAAU,EAAE,sBAAsB,iBA2BzF"}

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/autocompleteControllerUI.js

@@ -1,3 +1,78 @@
+export function autocompleteTargetUI(store) {
+    return [
+        {
+            // title: 'Autocomplete',
+            description: '',
+            collapsible: true,
+            controls: [
+                {
+                    type: 'dropdown',
+                    label: 'Component',
+                    description: 'Template component to render',
+                    getValue: (index) => {
+                        // all autocomplete targeters are in store.templatesStore.targets.autocomplete
+                        // TODO: need to handle case where there are no targets
+                        const targetAtIndex = store.templatesStore.targets?.autocomplete[index];
+                        return targetAtIndex?.component;
+                    },
+                    getOptions: () => {
+                        // return list of available templates
+                        const templateList = Object.keys(store.templatesStore.library.components.autocomplete).map((name) => ({ value: name }));
+                        return [{ options: templateList }];
+                    },
+                    shouldShowReset: (index) => {
+                        // if the override differs from the initial state, show reset
+                        const initialTargetAtIndex = store.initial.targets?.autocomplete?.[index];
+                        const overrideTargetAtIndex = store.overrides.targets?.autocomplete?.[index];
+                        return (Boolean(initialTargetAtIndex?.component) &&
+                            Boolean(overrideTargetAtIndex?.component) &&
+                            initialTargetAtIndex.component != overrideTargetAtIndex.component);
+                    },
+                    onValueChange: (value, index) => {
+                        store.setTargetOverride({ path: ['autocomplete', `[${index}]`, 'component'], value: value });
+                    },
+                    onReset: (index) => {
+                        store.setTargetOverride({ path: ['autocomplete', `[${index}]`, 'component'], value: undefined });
+                    },
+                },
+                // {
+                // 	type: 'dropdown',
+                // 	label: 'Result Component',
+                // 	description: 'Template component to render',
+                // 	getValue: (index) => {
+                // 		// all autocomplete targeters are in store.templatesStore.targets.autocomplete
+                // 		// TODO: need to handle case where there are no targets
+                // 		const targetAtIndex = store.templatesStore.targets?.autocomplete[index as number];
+                // 		return targetAtIndex?.resultComponent;
+                // 	},
+                // 	getOptions: () => {
+                // 		// return list of available templates
+                // 		const templateList = Object.keys(store.templatesStore.library.components.result).map((name) => ({ value: name }));
+                // 		return [{ options: templateList }];
+                // 	},
+                // 	shouldShowReset: (index) => {
+                // 		// if the override differs from the initial state, show reset
+                // 		const initialTargetAtIndex = store.initial.targets?.autocomplete?.[index as number];
+                // 		const overrideTargetAtIndex = store.overrides.targets?.autocomplete?.[index as number];
+                // 		return initialTargetAtIndex && overrideTargetAtIndex && initialTargetAtIndex.resultComponent != overrideTargetAtIndex.resultComponent;
+                // 	},
+                // 	onValueChange: (value, index) => {
+                // 		store.setTargetOverride({ path: ['autocomplete', `[${index}]`, 'resultComponent'], value: value as string });
+                // 	},
+                // 	onReset: (index) => {
+                // 		store.setTargetOverride({ path: ['autocomplete', `[${index}]`, 'resultComponent'], value: undefined });
+                // 		// if no initial value
+                // 		const initialTargetAtIndex = store.initial.targets?.autocomplete?.[index as number];
+                // 		if (!initialTargetAtIndex.resultComponent) {
+                // 			const targetAtIndex = store.templatesStore.targets?.autocomplete[index as number];
+                // 			targetAtIndex?.setValue('resultComponent', 'Result');
+                // 		}
+                // 	},
+                // },
+            ],
+        },
+    ];
+}
 export function autocompleteControllerUI(store) {
     return [
         {
@@ -32,37 +107,31 @@ export function autocompleteControllerUI(store) {
                         const initialConfig = store.initial.controller.autocomplete?.history;
                         const initialEnabled = Boolean(initialConfig?.enabled !== undefined ? initialConfig.enabled : initialConfig?.limit && initialConfig.limit > 0);
                         const overrideConfig = store.overrides.controller.autocomplete?.history;
-                        const overrideEnabled = Boolean(overrideConfig?.enabled !== undefined);
-                        return (overrideEnabled && initialEnabled !== overrideEnabled) || initialConfig?.limit !== overrideConfig?.limit;
+                        if (overrideConfig?.enabled === undefined && overrideConfig?.limit === undefined)
+                            return false;
+                        const overrideEnabled = Boolean(overrideConfig?.enabled !== undefined ? overrideConfig.enabled : overrideConfig?.limit && overrideConfig.limit > 0);
+                        return initialEnabled !== overrideEnabled || initialConfig?.limit !== overrideConfig?.limit;
                     },
                     onValueChange: (value, controller) => {
                         if (typeof value === 'undefined' || !controller)
                             return;
                         const initialConfig = store.initial.controller.autocomplete?.history;
                         const initialValue = initialConfig?.enabled ? initialConfig?.limit : 'Disabled';
-                        if (value === 'Disabled' && initialValue !== 'Disabled') {
-                            store.setControllerOverride({ path: ['history'], value: { enabled: false, limit: undefined, showResults: undefined }, controller });
+                        if (value === initialValue) {
+                            store.setControllerOverride({ path: ['history'], controller });
                         }
-                        else if (value !== 'Disabled' && initialValue === 'Disabled') {
-                            store.setControllerOverride({ path: ['history'], value: { enabled: true, limit: Number(value) }, controller });
+                        else if (value === 'Disabled') {
+                            store.setControllerOverride({ path: ['history'], value: { enabled: false, limit: undefined, showResults: undefined }, controller });
                         }
                         else {
-                            store.setControllerOverride({
-                                path: ['history'],
-                                value: { enabled: undefined, limit: undefined, showResults: undefined },
-                                controller,
-                            });
+                            store.setControllerOverride({ path: ['history'], value: { enabled: true, limit: Number(value) }, controller });
                         }
                         updateAutocompleteControllerState(controller);
                     },
                     onReset: (controller) => {
                         if (!controller)
                             return;
-                        const resetValues = { enabled: undefined, limit: undefined, showResults: undefined };
-                        if (store.initial.controller.autocomplete?.history?.enabled) {
-                            delete resetValues.showResults;
-                        }
-                        store.setControllerOverride({ path: ['history'], value: resetValues, controller });
+                        store.setControllerOverride({ path: ['history'], controller });
                         updateAutocompleteControllerState(controller);
                     },
                 },
@@ -94,40 +163,31 @@ export function autocompleteControllerUI(store) {
                         const initialConfig = store.initial.controller.autocomplete?.trending;
                         const initialEnabled = Boolean(initialConfig?.enabled !== undefined ? initialConfig.enabled : initialConfig?.limit && initialConfig.limit > 0);
                         const overrideConfig = store.overrides.controller.autocomplete?.trending;
-                        const overrideEnabled = Boolean(overrideConfig?.enabled !== undefined);
-                        return overrideEnabled && (initialEnabled !== overrideEnabled || initialConfig?.limit !== overrideConfig?.limit);
+                        if (overrideConfig?.enabled === undefined && overrideConfig?.limit === undefined)
+                            return false;
+                        const overrideEnabled = Boolean(overrideConfig?.enabled !== undefined ? overrideConfig.enabled : overrideConfig?.limit && overrideConfig.limit > 0);
+                        return initialEnabled !== overrideEnabled || initialConfig?.limit !== overrideConfig?.limit;
                     },
                     onValueChange: async (value, controller) => {
                         if (typeof value === 'undefined' || !controller)
                             return;
                         const initialConfig = store.initial.controller.autocomplete?.trending;
                         const initialValue = initialConfig?.enabled ? initialConfig?.limit : 'Disabled';
-                        if (value === 'Disabled' && initialValue !== 'Disabled') {
-                            store.setControllerOverride({ path: ['trending'], value: { enabled: false, limit: undefined, showResults: undefined }, controller });
-                        }
-                        else if (value !== 'Disabled' && initialValue === 'Disabled') {
-                            store.setControllerOverride({ path: ['trending'], value: { enabled: true, limit: Number(value) }, controller });
+                        if (value === initialValue) {
+                            store.setControllerOverride({ path: ['trending'], controller });
                         }
-                        else if (value !== 'Disabled' && initialValue !== value) {
-                            store.setControllerOverride({ path: ['trending'], value: { enabled: true, limit: Number(value) }, controller });
+                        else if (value === 'Disabled') {
+                            store.setControllerOverride({ path: ['trending'], value: { enabled: false, limit: undefined, showResults: undefined }, controller });
                         }
                         else {
-                            store.setControllerOverride({
-                                path: ['trending'],
-                                value: { enabled: undefined, limit: undefined, showResults: undefined },
-                                controller,
-                            });
+                            store.setControllerOverride({ path: ['trending'], value: { enabled: true, limit: Number(value) }, controller });
                         }
                         updateAutocompleteControllerState(controller);
                     },
                     onReset: (controller) => {
                         if (!controller)
                             return;
-                        const resetValues = { enabled: undefined, limit: undefined, showResults: undefined };
-                        if (store.initial.controller.autocomplete?.trending?.enabled) {
-                            delete resetValues.showResults;
-                        }
-                        store.setControllerOverride({ path: ['trending'], value: resetValues, controller });
+                        store.setControllerOverride({ path: ['trending'], controller });
                         updateAutocompleteControllerState(controller);
                     },
                 },
@@ -150,48 +210,40 @@ export function autocompleteControllerUI(store) {
                         return [{ options: opts }];
                     },
                     getValue: (controller) => {
-                        if (controller?.store.config.settings?.trending?.showResults)
+                        // controller can have both history and trending enabled - in that case we prioritize showing 'Trending'
+                        const historyEnabled = controller?.store.config.settings?.history?.enabled;
+                        const trendingEnabled = controller?.store.config.settings?.trending?.enabled;
+                        if (trendingEnabled && controller?.store.config.settings?.trending?.showResults)
                             return 'Trending';
-                        if (controller?.store.config.settings?.history?.showResults)
+                        if (historyEnabled && controller?.store.config.settings?.history?.showResults)
                             return 'History';
                         return 'Disabled';
                     },
                     shouldShowReset: () => {
-                        // see what the initial state is
-                        let initialValue = 'Disabled';
                         const initialConfig = store.initial.controller.autocomplete;
-                        if (initialConfig?.trending?.showResults && initialConfig?.trending?.enabled !== false) {
-                            initialValue = 'Trending';
-                        }
-                        else if (initialConfig?.history?.showResults && initialConfig?.history?.enabled !== false) {
-                            initialValue = 'History';
-                        }
-                        // see what the override state is
-                        let overrideValue = 'Disabled';
+                        const initialHistoryShowResults = initialConfig?.history?.enabled && initialConfig?.history?.showResults;
+                        const initialTrendingShowResults = initialConfig?.trending?.enabled && initialConfig?.trending?.showResults;
+                        const initialValue = initialTrendingShowResults ? 'Trending' : initialHistoryShowResults ? 'History' : 'Disabled';
                         const overrideConfig = store.overrides.controller.autocomplete;
-                        if (overrideConfig?.trending?.showResults && overrideConfig?.trending?.enabled !== false) {
-                            overrideValue = 'Trending';
-                        }
-                        else if (overrideConfig?.history?.showResults && overrideConfig?.history?.enabled !== false) {
-                            overrideValue = 'History';
-                        }
-                        return initialValue !== overrideValue;
+                        const overrideHistoryShowResults = overrideConfig?.history?.enabled !== false && overrideConfig?.history?.showResults;
+                        const overrideTrendingShowResults = overrideConfig?.trending?.enabled !== false && overrideConfig?.trending?.showResults;
+                        const bothOverriddenToDisabled = overrideConfig?.history?.showResults === false &&
+                            overrideConfig?.trending?.showResults === false &&
+                            (initialHistoryShowResults || initialTrendingShowResults);
+                        const overrideValue = bothOverriddenToDisabled
+                            ? 'Disabled'
+                            : overrideTrendingShowResults
+                                ? 'Trending'
+                                : overrideHistoryShowResults
+                                    ? 'History'
+                                    : undefined;
+                        return overrideValue !== undefined && initialValue !== overrideValue;
                     },
                     onValueChange: (value, controller) => {
                         if (typeof value === 'undefined' || !controller)
                             return;
-                        if (value === 'Disabled') {
-                            store.setControllerOverride({ path: ['history', 'showResults'], controller });
-                            store.setControllerOverride({ path: ['trending', 'showResults'], controller });
-                        }
-                        else if (value === 'History') {
-                            store.setControllerOverride({ path: ['history', 'showResults'], value: true, controller });
-                            store.setControllerOverride({ path: ['trending', 'showResults'], controller });
-                        }
-                        else if (value === 'Trending') {
-                            store.setControllerOverride({ path: ['history', 'showResults'], controller });
-                            store.setControllerOverride({ path: ['trending', 'showResults'], value: true, controller });
-                        }
+                        store.setControllerOverride({ path: ['history', 'showResults'], value: value === 'History', controller });
+                        store.setControllerOverride({ path: ['trending', 'showResults'], value: value === 'Trending', controller });
                         updateAutocompleteControllerState(controller);
                     },
                     onReset: (controller) => {

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,QAAQ,UAAW,mBAAmB,KAAG,gBAAgB,EAgHrE,CAAC"}
+{"version":3,"file":"configUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,QAAQ,UAAW,mBAAmB,KAAG,gBAAgB,EAsHrE,CAAC"}

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/configUI.js

@@ -42,7 +42,9 @@ export const configUI = (store) => {
                     },
                     shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        return typeof store.overrides.config.platform !== 'undefined';
+                        const initialPlatform = store.initial.config.platform || 'other';
+                        const overridePlatform = store.overrides.config.platform;
+                        return typeof overridePlatform !== 'undefined' && initialPlatform != overridePlatform;
                     },
                     onValueChange: (value) => {
                         store.setConfigOverride({ path: ['platform'], value });
@@ -70,7 +72,9 @@ export const configUI = (store) => {
                     },
                     shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        return typeof store.overrides.config.language !== 'undefined';
+                        const initialLanguage = store.initial.config.language || 'en';
+                        const overrideLanguage = store.overrides.config.language;
+                        return typeof overrideLanguage !== 'undefined' && initialLanguage != overrideLanguage;
                     },
                     onValueChange: (value) => {
                         store.setConfigOverride({ path: ['language'], value });
@@ -98,7 +102,9 @@ export const configUI = (store) => {
                     },
                     shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        return typeof store.overrides.config.currency !== 'undefined';
+                        const initialCurrency = store.initial.config.currency || 'usd';
+                        const overrideCurrency = store.overrides.config.currency;
+                        return typeof overrideCurrency !== 'undefined' && initialCurrency != overrideCurrency;
                     },
                     onValueChange: async (value) => {
                         store.setConfigOverride({ path: ['currency'], value });

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.d.ts

@@ -1,5 +1,6 @@
 import { SearchController } from '@athoscommerce/snap-controller';
 import { AbstractionGroup } from '../../../../types';
 import { TemplateEditorStore } from '../TemplateEditorStore';
+export declare function searchTargetUI(store: TemplateEditorStore): AbstractionGroup<number>[];
 export declare function searchControllerUI(store: TemplateEditorStore): AbstractionGroup<SearchController>[];
 //# sourceMappingURL=searchControllerUI.d.ts.map

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"searchControllerUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,CA0CnG"}
+{"version":3,"file":"searchControllerUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAgFrF;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,CAgDnG"}

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/searchControllerUI.js

@@ -1,3 +1,78 @@
+export function searchTargetUI(store) {
+    return [
+        {
+            // title: 'Search',
+            description: '',
+            collapsible: true,
+            controls: [
+                {
+                    type: 'dropdown',
+                    label: 'Component',
+                    description: 'Template component to render',
+                    getValue: (index) => {
+                        // all search targeters are in store.templatesStore.targets.search
+                        // TODO: need to handle case where there are no targets
+                        const targetAtIndex = store.templatesStore.targets?.search[index];
+                        return targetAtIndex?.component;
+                    },
+                    getOptions: () => {
+                        // return list of available templates
+                        const templateList = Object.keys(store.templatesStore.library.components.search).map((name) => ({ value: name }));
+                        return [{ options: templateList }];
+                    },
+                    shouldShowReset: (index) => {
+                        // if the override differs from the initial state, show reset
+                        const initialTargetAtIndex = store.initial.targets?.search?.[index];
+                        const overrideTargetAtIndex = store.overrides.targets?.search?.[index];
+                        return (Boolean(initialTargetAtIndex?.component) &&
+                            Boolean(overrideTargetAtIndex?.component) &&
+                            initialTargetAtIndex.component != overrideTargetAtIndex.component);
+                    },
+                    onValueChange: (value, index) => {
+                        store.setTargetOverride({ path: ['search', `[${index}]`, 'component'], value: value });
+                    },
+                    onReset: (index) => {
+                        store.setTargetOverride({ path: ['search', `[${index}]`, 'component'], value: undefined });
+                    },
+                },
+                // {
+                // 	type: 'dropdown',
+                // 	label: 'Result Component',
+                // 	description: 'Template component to render',
+                // 	getValue: (index) => {
+                // 		// all search targeters are in store.templatesStore.targets.search
+                // 		// TODO: need to handle case where there are no targets
+                // 		const targetAtIndex = store.templatesStore.targets?.search[index as number];
+                // 		return targetAtIndex?.resultComponent;
+                // 	},
+                // 	getOptions: () => {
+                // 		// return list of available templates
+                // 		const templateList = Object.keys(store.templatesStore.library.components.result).map((name) => ({ value: name }));
+                // 		return [{ options: templateList }];
+                // 	},
+                // 	shouldShowReset: (index) => {
+                // 		// if the override differs from the initial state, show reset
+                // 		const initialTargetAtIndex = store.initial.targets?.search?.[index as number];
+                // 		const overrideTargetAtIndex = store.overrides.targets?.search?.[index as number];
+                // 		return initialTargetAtIndex && overrideTargetAtIndex && initialTargetAtIndex.resultComponent != overrideTargetAtIndex.resultComponent;
+                // 	},
+                // 	onValueChange: (value, index) => {
+                // 		store.setTargetOverride({ path: ['search', `[${index}]`, 'resultComponent'], value: value as string });
+                // 	},
+                // 	onReset: (index) => {
+                // 		store.setTargetOverride({ path: ['search', `[${index}]`, 'resultComponent'], value: undefined });
+                // 		// if no initial value
+                // 		const initialTargetAtIndex = store.initial.targets?.search?.[index as number];
+                // 		if (!initialTargetAtIndex.resultComponent) {
+                // 			const targetAtIndex = store.templatesStore.targets?.search[index as number];
+                // 			targetAtIndex?.setValue('resultComponent', 'Result');
+                // 		}
+                // 	},
+                // },
+            ],
+        },
+    ];
+}
 export function searchControllerUI(store) {
     return [
         {
@@ -29,7 +104,13 @@ export function searchControllerUI(store) {
                     onValueChange: (value, controller) => {
                         if (typeof value === 'undefined' || !controller)
                             return;
-                        store.setControllerOverride({ path: ['infinite', 'enabled'], value: Boolean(value), controller });
+                        const initialConfig = store.initial.controller.search?.infinite;
+                        if (value == initialConfig?.enabled || (value === false && !initialConfig)) {
+                            store.setControllerOverride({ path: ['infinite'], controller });
+                        }
+                        else {
+                            store.setControllerOverride({ path: ['infinite', 'enabled'], value: Boolean(value), controller });
+                        }
                     },
                     onReset: (controller) => {
                         if (!controller)

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/themeUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/themeUI.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,OAAO,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,EAAE,CA2LtE"}
+{"version":3,"file":"themeUI.d.ts","sourceRoot":"","sources":["../../../../../../../src/Templates/Stores/TemplateEditor/uiAbstractions/themeUI.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,wBAAgB,OAAO,CAAC,KAAK,EAAE,mBAAmB,GAAG,gBAAgB,EAAE,CA4MtE"}

package/dist/esm/src/Templates/Stores/TemplateEditor/uiAbstractions/themeUI.js

@@ -49,7 +49,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.breakpoints?.mobile ?? store.initial.theme.variables?.breakpoints?.mobile ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.breakpoints?.mobile !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialMobile = store.initial.theme.variables?.breakpoints?.mobile;
+                        const overrideMobile = store.overrides.theme.variables?.breakpoints?.mobile;
+                        return typeof overrideMobile !== 'undefined' && initialMobile != overrideMobile;
                     },
                     onValueChange: (value) => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'mobile'], value });
@@ -68,7 +71,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.breakpoints?.tablet ?? store.initial.theme.variables?.breakpoints?.tablet ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.breakpoints?.tablet !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialTablet = store.initial.theme.variables?.breakpoints?.tablet;
+                        const overrideTablet = store.overrides.theme.variables?.breakpoints?.tablet;
+                        return typeof overrideTablet !== 'undefined' && initialTablet != overrideTablet;
                     },
                     onValueChange: (value) => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'tablet'], value });
@@ -87,7 +93,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.breakpoints?.desktop ?? store.initial.theme.variables?.breakpoints?.desktop ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.breakpoints?.desktop !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialDesktop = store.initial.theme.variables?.breakpoints?.desktop;
+                        const overrideDesktop = store.overrides.theme.variables?.breakpoints?.desktop;
+                        return typeof overrideDesktop !== 'undefined' && initialDesktop != overrideDesktop;
                     },
                     onValueChange: (value) => {
                         store.setThemeOverride({ path: ['variables', 'breakpoints', 'desktop'], value });
@@ -111,7 +120,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.colors?.text ?? store.initial.theme.variables?.colors?.text ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.colors?.text !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialText = store.initial.theme.variables?.colors?.text?.toUpperCase();
+                        const overrideText = store.overrides.theme.variables?.colors?.text?.toUpperCase();
+                        return typeof overrideText !== 'undefined' && initialText != overrideText;
                     },
                     onValueChange: debounce((value) => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'text'], value });
@@ -130,7 +142,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.colors?.primary ?? store.initial.theme.variables?.colors?.primary ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.colors?.primary !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialPrimary = store.initial.theme.variables?.colors?.primary?.toUpperCase();
+                        const overridePrimary = store.overrides.theme.variables?.colors?.primary?.toUpperCase();
+                        return typeof overridePrimary !== 'undefined' && initialPrimary != overridePrimary;
                     },
                     onValueChange: debounce((value) => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'primary'], value });
@@ -149,7 +164,10 @@ export function themeUI(store) {
                         return store.overrides.theme.variables?.colors?.secondary ?? store.initial.theme.variables?.colors?.secondary ?? '';
                     },
                     shouldShowReset: () => {
-                        return typeof store.overrides.theme.variables?.colors?.secondary !== 'undefined';
+                        // if the override differs from the initial state, show reset
+                        const initialSecondary = store.initial.theme.variables?.colors?.secondary?.toUpperCase();
+                        const overrideSecondary = store.overrides.theme.variables?.colors?.secondary?.toUpperCase();
+                        return typeof overrideSecondary !== 'undefined' && initialSecondary != overrideSecondary;
                     },
                     onValueChange: debounce((value) => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'secondary'], value });
@@ -169,8 +187,9 @@ export function themeUI(store) {
                     },
                     shouldShowReset: () => {
                         // if the override differs from the initial state, show reset
-                        return (Boolean(store.overrides.theme.variables?.colors?.accent) &&
-                            store.overrides.theme.variables?.colors?.accent !== store.initial.theme.variables?.colors?.accent);
+                        const initialAccent = store.initial.theme.variables?.colors?.accent?.toUpperCase();
+                        const overrideAccent = store.overrides.theme.variables?.colors?.accent?.toUpperCase();
+                        return typeof overrideAccent !== 'undefined' && initialAccent != overrideAccent;
                     },
                     onValueChange: debounce((value) => {
                         store.setThemeOverride({ path: ['variables', 'colors', 'accent'], value });