@empathyco/x-components 6.0.0-alpha.17 → 6.0.0-alpha.170

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js

@@ -1,39 +1,39 @@
 import { defineComponent, computed } from 'vue';
-import { extraParamsXModule } from '../x-module.js';
 import { useState } from '../../../composables/use-state.js';
 import { useXBus } from '../../../composables/use-x-bus.js';
+import { extraParamsXModule } from '../x-module.js';
 
-/**
- * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
- * is called.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'RenderlessExtraParam',
-    xModule: extraParamsXModule.name,
-    props: {
-        name: {
-            type: String,
-            required: true
-        }
-    },
-    setup(props, { slots }) {
-        const xBus = useXBus();
-        /** A dictionary with the extra params in the store state. */
-        const stateParams = useState('extraParams', ['params']).params;
-        /** It returns the value of the extra param from the store. */
-        const extraParam = computed(() => stateParams.value[props.name]);
-        /**
-         * It sets the new value to the store.
-         *
-         * @param newValue - The new value of the extra param.
-         */
-        function updateValue(newValue) {
-            xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
-        }
-        return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';
-    }
+/**
+ * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
+ * is called.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'RenderlessExtraParam',
+    xModule: extraParamsXModule.name,
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props, { slots }) {
+        const xBus = useXBus();
+        /** A dictionary with the extra params in the store state. */
+        const stateParams = useState('extraParams').params;
+        /** It returns the value of the extra param from the store. */
+        const extraParam = computed(() => stateParams.value[props.name]);
+        /**
+         * It sets the new value to the store.
+         *
+         * @param newValue - The new value of the extra param.
+         */
+        function updateValue(newValue) {
+            xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
+        }
+        return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/extra-params/components/renderless-extra-param.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { extraParamsXModule } from '../x-module';\n  import { useState } from '../../../composables/use-state';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /**\n   * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n   * is called.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RenderlessExtraParam',\n    xModule: extraParamsXModule.name,\n    props: {\n      name: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props, { slots }) {\n      const xBus = useXBus();\n\n      /** A dictionary with the extra params in the store state. */\n      const stateParams = useState('extraParams', ['params']).params;\n\n      /** It returns the value of the extra param from the store. */\n      const extraParam = computed(() => stateParams.value[props.name]);\n\n      /**\n       * It sets the new value to the store.\n       *\n       * @param newValue - The new value of the extra param.\n       */\n      function updateValue(newValue: unknown) {\n        xBus.emit('UserChangedExtraParams', { [props.name]: newValue });\n      }\n\n      return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\n  import { RenderlessExtraParams } from '@empathyco/x-components/extra-params';\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'RenderlessExtraParamsDemo',\n    components: {\n      RenderlessExtraParams,\n      BaseDropdown\n    },\n    props: ['name'],\n    data() {\n      return {\n        items: ['spain', 'portugal']\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAME;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;;AAGtB,QAAA,MAAM,WAAY,GAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAA;;AAG9D,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAA;AAEhE;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAS,EAAC,CAAC,CAAA;SACjE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAY,EAAC,CAAC,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACjF;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"renderless-extra-param.vue.js","sources":["../../../../../src/x-modules/extra-params/components/renderless-extra-param.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { useXBus } from '../../../composables/use-x-bus'\nimport { extraParamsXModule } from '../x-module'\n\n/**\n * It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`\n * is called.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RenderlessExtraParam',\n  xModule: extraParamsXModule.name,\n  props: {\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props, { slots }) {\n    const xBus = useXBus()\n\n    /** A dictionary with the extra params in the store state. */\n    const stateParams = useState('extraParams').params\n\n    /** It returns the value of the extra param from the store. */\n    const extraParam = computed(() => stateParams.value[props.name])\n\n    /**\n     * It sets the new value to the store.\n     *\n     * @param newValue - The new value of the extra param.\n     */\n    function updateValue(newValue: unknown) {\n      xBus.emit('UserChangedExtraParams', { [props.name]: newValue })\n    }\n\n    return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nRenders default slot content. It binds to the default slot the name of the extra parameter and the\ndefault value of it.\n\n### Basic usage\n\n```vue\n<template>\n  <RenderlessExtraParam #default=\"{ value, updateValue }\" name=\"store\">\n    <BaseDropdown @update:modelValue=\"updateValue\" :modelValue=\"value\" :items=\"items\" />\n  </RenderlessExtraParam>\n</template>\n\n<script>\nimport { RenderlessExtraParams } from '@empathyco/x-components/extra-params'\nimport { BaseDropdown } from '@empathyco/x-components'\n\nexport default {\n  name: 'RenderlessExtraParamsDemo',\n  components: {\n    RenderlessExtraParams,\n    BaseDropdown,\n  },\n  props: ['name'],\n  data() {\n    return {\n      items: ['spain', 'portugal'],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;;QAGrB,MAAM,WAAY,GAAE,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAK,CAAA;;AAGjD,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA;AAE/D;;;;AAIE;QACF,SAAS,WAAW,CAAC,QAAiB,EAAA;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,QAAO,EAAG,CAAA,CAAA;SAChE;QAEA,OAAO,MAAM,KAAK,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAU,EAAG,CAAC,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KAC/E;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n  import { forEach, Dictionary } from '@empathyco/x-utils';\n  import { defineComponent, inject, PropType, ref, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { extraParamsXModule } from '../x-module';\n  import ExtraParams from './extra-params.vue';\n\n  export default defineComponent({\n    name: 'SnippetConfigExtraParams',\n    xModule: extraParamsXModule.name,\n    components: {\n      ExtraParams\n    },\n    props: {\n      values: {\n        type: Object as PropType<Dictionary<unknown>>\n      },\n      excludedExtraParams: {\n        type: Array as PropType<Array<keyof SnippetConfig>>,\n        default: (): Array<keyof SnippetConfig> => [\n          'callbacks',\n          'productId',\n          'uiLang',\n          'consent',\n          'documentDirection',\n          'filters',\n          'isSpa',\n          'queriesPreview'\n        ]\n      }\n    },\n    setup(props) {\n      const snippetConfig = inject('snippetConfig') as SnippetConfig;\n      const extraParams = ref<Record<string, any>>({});\n\n      watch(\n        [() => snippetConfig, () => props.values],\n        () => {\n          forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n            if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n              extraParams.value = { ...extraParams.value, [name]: value };\n            }\n          });\n        },\n        {\n          deep: true,\n          immediate: true\n        }\n      );\n\n      return {\n        extraParams\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script>\n  import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n  const Provider = {\n    provide: {\n      snippetConfig: {\n        instance: 'demo',\n        lang: 'es',\n        warehouse: 1234\n      }\n    }\n  };\n\n  export default {\n    name: 'SnippetConfigExtraParamsDemo',\n    components: {\n      Provider,\n      SnippetConfigExtraParams\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent"],"mappings":";;;;;AACE,EAAA,MAAA,sBAAA,GAAAA,gBAAA,CAAqC,aAAvB,CAAA,CAAA;;;;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { defineComponent, inject, ref, watch } from 'vue'\nimport { extraParamsXModule } from '../x-module'\nimport ExtraParams from './extra-params.vue'\n\nexport default defineComponent({\n  name: 'SnippetConfigExtraParams',\n  xModule: extraParamsXModule.name,\n  components: {\n    ExtraParams,\n  },\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n    },\n    excludedExtraParams: {\n      type: Array as PropType<Array<keyof SnippetConfig>>,\n      default: (): Array<keyof SnippetConfig> => [\n        'callbacks',\n        'productId',\n        'uiLang',\n        'consent',\n        'documentDirection',\n        'filters',\n        'isSpa',\n        'queriesPreview',\n      ],\n    },\n  },\n  setup(props) {\n    const snippetConfig = inject('snippetConfig') as SnippetConfig\n    const extraParams = ref<Record<string, any>>({})\n\n    watch(\n      [() => snippetConfig, () => props.values],\n      () => {\n        forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n          if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n            extraParams.value = { ...extraParams.value, [name]: value }\n          }\n        })\n      },\n      {\n        deep: true,\n        immediate: true,\n      },\n    )\n\n    return {\n      extraParams,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script>\nimport { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params'\n\nconst Provider = {\n  provide: {\n    snippetConfig: {\n      instance: 'demo',\n      lang: 'es',\n      warehouse: 1234,\n    },\n  },\n}\n\nexport default {\n  name: 'SnippetConfigExtraParamsDemo',\n  components: {\n    Provider,\n    SnippetConfigExtraParams,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_createBlock"],"mappings":";;;;;;sBACEA,WAAqC,CAAA,sBAAA,EAAA,EAAvB,QAAQ,IAAW,CAAA,WAAA,EAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js

@@ -3,47 +3,47 @@ import { defineComponent, inject, ref, watch } from 'vue';
 import { extraParamsXModule } from '../x-module.js';
 import _sfc_main$1 from './extra-params.vue.js';
 
-var _sfc_main = defineComponent({
-    name: 'SnippetConfigExtraParams',
-    xModule: extraParamsXModule.name,
-    components: {
-        ExtraParams: _sfc_main$1
-    },
-    props: {
-        values: {
-            type: Object
-        },
-        excludedExtraParams: {
-            type: Array,
-            default: () => [
-                'callbacks',
-                'productId',
-                'uiLang',
-                'consent',
-                'documentDirection',
-                'filters',
-                'isSpa',
-                'queriesPreview'
-            ]
-        }
-    },
-    setup(props) {
-        const snippetConfig = inject('snippetConfig');
-        const extraParams = ref({});
-        watch([() => snippetConfig, () => props.values], () => {
-            forEach({ ...props.values, ...snippetConfig }, (name, value) => {
-                if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {
-                    extraParams.value = { ...extraParams.value, [name]: value };
-                }
-            });
-        }, {
-            deep: true,
-            immediate: true
-        });
-        return {
-            extraParams
-        };
-    }
+var _sfc_main = defineComponent({
+    name: 'SnippetConfigExtraParams',
+    xModule: extraParamsXModule.name,
+    components: {
+        ExtraParams: _sfc_main$1,
+    },
+    props: {
+        values: {
+            type: Object,
+        },
+        excludedExtraParams: {
+            type: Array,
+            default: () => [
+                'callbacks',
+                'productId',
+                'uiLang',
+                'consent',
+                'documentDirection',
+                'filters',
+                'isSpa',
+                'queriesPreview',
+            ],
+        },
+    },
+    setup(props) {
+        const snippetConfig = inject('snippetConfig');
+        const extraParams = ref({});
+        watch([() => snippetConfig, () => props.values], () => {
+            forEach({ ...props.values, ...snippetConfig }, (name, value) => {
+                if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {
+                    extraParams.value = { ...extraParams.value, [name]: value };
+                }
+            });
+        }, {
+            deep: true,
+            immediate: true,
+        });
+        return {
+            extraParams,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/extra-params/components/snippet-config-extra-params.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet-config-extra-params.vue2.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\n  import { forEach, Dictionary } from '@empathyco/x-utils';\n  import { defineComponent, inject, PropType, ref, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { extraParamsXModule } from '../x-module';\n  import ExtraParams from './extra-params.vue';\n\n  export default defineComponent({\n    name: 'SnippetConfigExtraParams',\n    xModule: extraParamsXModule.name,\n    components: {\n      ExtraParams\n    },\n    props: {\n      values: {\n        type: Object as PropType<Dictionary<unknown>>\n      },\n      excludedExtraParams: {\n        type: Array as PropType<Array<keyof SnippetConfig>>,\n        default: (): Array<keyof SnippetConfig> => [\n          'callbacks',\n          'productId',\n          'uiLang',\n          'consent',\n          'documentDirection',\n          'filters',\n          'isSpa',\n          'queriesPreview'\n        ]\n      }\n    },\n    setup(props) {\n      const snippetConfig = inject('snippetConfig') as SnippetConfig;\n      const extraParams = ref<Record<string, any>>({});\n\n      watch(\n        [() => snippetConfig, () => props.values],\n        () => {\n          forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n            if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n              extraParams.value = { ...extraParams.value, [name]: value };\n            }\n          });\n        },\n        {\n          deep: true,\n          immediate: true\n        }\n      );\n\n      return {\n        extraParams\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script>\n  import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';\n\n  const Provider = {\n    provide: {\n      snippetConfig: {\n        instance: 'demo',\n        lang: 'es',\n        warehouse: 1234\n      }\n    }\n  };\n\n  export default {\n    name: 'SnippetConfigExtraParamsDemo',\n    components: {\n      Provider,\n      SnippetConfigExtraParams\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["ExtraParams"],"mappings":";;;;;AAWE,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAsC;AAC7C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAe;AACjB,aAAA;AACF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAkB,CAAA;AAC9D,QAAA,MAAM,WAAU,GAAI,GAAG,CAAsB,EAAE,CAAC,CAAA;AAEhD,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAM;AACJ,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAY,EAAG,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;AAC9D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAA,IAAK,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA,KAAM,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAI,GAAI,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAI,EAAG,CAAA;AAC7D,iBAAA;AACF,aAAC,CAAC,CAAA;AACJ,SAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAG;AAChB,SAAA,CACD,CAAA;QAED,OAAO;YACL,WAAU;SACX,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"snippet-config-extra-params.vue2.js","sources":["../../../../../src/x-modules/extra-params/components/snippet-config-extra-params.vue"],"sourcesContent":["<template>\n  <ExtraParams :values=\"extraParams\" />\n</template>\n\n<script lang=\"ts\">\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { PropType } from 'vue'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { forEach } from '@empathyco/x-utils'\nimport { defineComponent, inject, ref, watch } from 'vue'\nimport { extraParamsXModule } from '../x-module'\nimport ExtraParams from './extra-params.vue'\n\nexport default defineComponent({\n  name: 'SnippetConfigExtraParams',\n  xModule: extraParamsXModule.name,\n  components: {\n    ExtraParams,\n  },\n  props: {\n    values: {\n      type: Object as PropType<Dictionary<unknown>>,\n    },\n    excludedExtraParams: {\n      type: Array as PropType<Array<keyof SnippetConfig>>,\n      default: (): Array<keyof SnippetConfig> => [\n        'callbacks',\n        'productId',\n        'uiLang',\n        'consent',\n        'documentDirection',\n        'filters',\n        'isSpa',\n        'queriesPreview',\n      ],\n    },\n  },\n  setup(props) {\n    const snippetConfig = inject('snippetConfig') as SnippetConfig\n    const extraParams = ref<Record<string, any>>({})\n\n    watch(\n      [() => snippetConfig, () => props.values],\n      () => {\n        forEach({ ...props.values, ...snippetConfig }, (name, value) => {\n          if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) {\n            extraParams.value = { ...extraParams.value, [name]: value }\n          }\n        })\n      },\n      {\n        deep: true,\n        immediate: true,\n      },\n    )\n\n    return {\n      extraParams,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\n_See how the snippet config is injected and passed to the SnippetConfigExtraParams component._\n\n```vue\n<template>\n  <Provider>\n    <SnippetConfigExtraParams />\n  </Provider>\n</template>\n\n<script>\nimport { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params'\n\nconst Provider = {\n  provide: {\n    snippetConfig: {\n      instance: 'demo',\n      lang: 'es',\n      warehouse: 1234,\n    },\n  },\n}\n\nexport default {\n  name: 'SnippetConfigExtraParamsDemo',\n  components: {\n    Provider,\n    SnippetConfigExtraParams,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["ExtraParams"],"mappings":";;;;;AAaA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;qBACVA,WAAW;AACZ,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAuC;AAC9C,SAAA;AACD,QAAA,mBAAmB,EAAE;AACnB,YAAA,IAAI,EAAE,KAA6C;YACnD,OAAO,EAAE,MAAkC;gBACzC,WAAW;gBACX,WAAW;gBACX,QAAQ;gBACR,SAAS;gBACT,mBAAmB;gBACnB,SAAS;gBACT,OAAO;gBACP,gBAAgB;AACjB,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,aAAY,GAAI,MAAM,CAAC,eAAe,CAAiB,CAAA;AAC7D,QAAA,MAAM,cAAc,GAAG,CAAsB,EAAE,CAAA,CAAA;AAE/C,QAAA,KAAK,CACH,CAAC,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC,MAAM,CAAC,EACzC,MAAM;AACJ,YAAA,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,aAAY,EAAG,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK;AAC9D,gBAAA,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAA,IAAK,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA,KAAM,KAAK,EAAE;AAClF,oBAAA,WAAW,CAAC,KAAI,GAAI,EAAE,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,KAAM,EAAA,CAAA;iBAC5D;AACF,aAAC,CAAA,CAAA;AACH,SAAC,EACD;AACE,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACH,CAAA;QAEA,OAAO;YACL,WAAW;SACb,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/extra-params/store/emitters.js

@@ -1,16 +1,17 @@
+import '@empathyco/x-utils';
 import { createStoreEmitters } from '../../../store/utils/store-emitters.utils.js';
 import { extraParamsXStoreModule } from './module.js';
 
-/**
- * {@link StoreEmitters} For the {@link ExtraParamsXModule}.
- *
- * @internal
- */
-const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {
-    ExtraParamsChanged: {
-        selector: state => state.params,
-        metadata: { priority: 9 }
-    }
+/**
+ * {@link StoreEmitters} For the {@link ExtraParamsXModule}.
+ *
+ * @internal
+ */
+const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {
+    ExtraParamsChanged: {
+        selector: state => state.params,
+        metadata: { priority: 9 },
+    },
 });
 
 export { extraParamsEmitters };

package/js/x-modules/extra-params/store/emitters.js.map

@@ -1 +1 @@
-{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/extra-params/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store';\nimport { extraParamsXStoreModule } from './module';\n\n/**\n * {@link StoreEmitters} For the {@link ExtraParamsXModule}.\n *\n * @internal\n */\nexport const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {\n  ExtraParamsChanged: {\n    selector: state => state.params,\n    metadata: { priority: 9 }\n  }\n});\n"],"names":[],"mappings":";;;AAGA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE;AAClB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAC/B,QAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"emitters.js","sources":["../../../../../src/x-modules/extra-params/store/emitters.ts"],"sourcesContent":["import { createStoreEmitters } from '../../../store'\nimport { extraParamsXStoreModule } from './module'\n\n/**\n * {@link StoreEmitters} For the {@link ExtraParamsXModule}.\n *\n * @internal\n */\nexport const extraParamsEmitters = createStoreEmitters(extraParamsXStoreModule, {\n  ExtraParamsChanged: {\n    selector: state => state.params,\n    metadata: { priority: 9 },\n  },\n})\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;AACU,MAAA,mBAAmB,GAAG,mBAAmB,CAAC,uBAAuB,EAAE;AAC9E,IAAA,kBAAkB,EAAE;AAClB,QAAA,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,MAAM;AAC/B,QAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE;AAC1B,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/extra-params/store/module.js

@@ -1,19 +1,19 @@
-/**
- * {@link XStoreModule} For the ExtraParams module.
- *
- * @internal
- */
-const extraParamsXStoreModule = {
-    state: () => ({
-        params: {}
-    }),
-    getters: {},
-    mutations: {
-        setParams(state, params) {
-            state.params = { ...state.params, ...params };
-        }
-    },
-    actions: {}
+/**
+ * {@link XStoreModule} For the ExtraParams module.
+ *
+ * @internal
+ */
+const extraParamsXStoreModule = {
+    state: () => ({
+        params: {},
+    }),
+    getters: {},
+    mutations: {
+        setParams(state, params) {
+            state.params = { ...state.params, ...params };
+        },
+    },
+    actions: {},
 };
 
 export { extraParamsXStoreModule };

package/js/x-modules/extra-params/store/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/extra-params/store/module.ts"],"sourcesContent":["import { ExtraParamsXStoreModule } from './types';\n\n/**\n * {@link XStoreModule} For the ExtraParams module.\n *\n * @internal\n */\nexport const extraParamsXStoreModule: ExtraParamsXStoreModule = {\n  state: () => ({\n    params: {}\n  }),\n  getters: {},\n  mutations: {\n    setParams(state, params) {\n      state.params = { ...state.params, ...params };\n    }\n  },\n  actions: {}\n};\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,uBAAuB,GAA4B;AAC9D,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;SAC/C;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}
+{"version":3,"file":"module.js","sources":["../../../../../src/x-modules/extra-params/store/module.ts"],"sourcesContent":["import type { ExtraParamsXStoreModule } from './types'\n\n/**\n * {@link XStoreModule} For the ExtraParams module.\n *\n * @internal\n */\nexport const extraParamsXStoreModule: ExtraParamsXStoreModule = {\n  state: () => ({\n    params: {},\n  }),\n  getters: {},\n  mutations: {\n    setParams(state, params) {\n      state.params = { ...state.params, ...params }\n    },\n  },\n  actions: {},\n}\n"],"names":[],"mappings":"AAEA;;;;AAIG;AACU,MAAA,uBAAuB,GAA4B;AAC9D,IAAA,KAAK,EAAE,OAAO;AACZ,QAAA,MAAM,EAAE,EAAE;KACX,CAAC;AACF,IAAA,OAAO,EAAE,EAAE;AACX,IAAA,SAAS,EAAE;QACT,SAAS,CAAC,KAAK,EAAE,MAAM,EAAA;AACrB,YAAA,KAAK,CAAC,MAAM,GAAG,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAA;SAC9C;AACF,KAAA;AACD,IAAA,OAAO,EAAE,EAAE;;;;;"}

package/js/x-modules/extra-params/wiring.js

@@ -3,33 +3,33 @@ import 'rxjs/operators';
 import 'rxjs';
 import { createWiring } from '../../wiring/wiring.utils.js';
 
-/**
- * WireCommit for {@link ExtraParamsXModule}.
- *
- * @internal
- */
-const wireCommit = namespacedWireCommit('extraParams');
-/**
- * Sets the extra params of the {@link ExtraParamsXModule}.
- *
- * @public
- */
-const setExtraParams = wireCommit('setParams');
-/**
- * Wiring configuration for the {@link ExtraParamsXModule | extraParams module}.
- *
- * @internal
- */
-const extraParamsWiring = createWiring({
-    UserChangedExtraParams: {
-        setExtraParams
-    },
-    ExtraParamsProvided: {
-        setExtraParams
-    },
-    ExtraParamsLoadedFromUrl: {
-        setExtraParams
-    }
+/**
+ * WireCommit for {@link ExtraParamsXModule}.
+ *
+ * @internal
+ */
+const wireCommit = namespacedWireCommit('extraParams');
+/**
+ * Sets the extra params of the {@link ExtraParamsXModule}.
+ *
+ * @public
+ */
+const setExtraParams = wireCommit('setParams');
+/**
+ * Wiring configuration for the {@link ExtraParamsXModule | extraParams module}.
+ *
+ * @internal
+ */
+const extraParamsWiring = createWiring({
+    UserChangedExtraParams: {
+        setExtraParams,
+    },
+    ExtraParamsProvided: {
+        setExtraParams,
+    },
+    ExtraParamsLoadedFromUrl: {
+        setExtraParams,
+    },
 });
 
 export { extraParamsWiring, setExtraParams };

package/js/x-modules/extra-params/wiring.js.map

@@ -1 +1 @@
-{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/extra-params/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring';\nimport { createWiring } from '../../wiring/wiring.utils';\n\n/**\n * WireCommit for {@link ExtraParamsXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('extraParams');\n\n/**\n * Sets the extra params of the {@link ExtraParamsXModule}.\n *\n * @public\n */\nexport const setExtraParams = wireCommit('setParams');\n\n/**\n * Wiring configuration for the {@link ExtraParamsXModule | extraParams module}.\n *\n * @internal\n */\nexport const extraParamsWiring = createWiring({\n  UserChangedExtraParams: {\n    setExtraParams\n  },\n  ExtraParamsProvided: {\n    setExtraParams\n  },\n  ExtraParamsLoadedFromUrl: {\n    setExtraParams\n  }\n});\n"],"names":[],"mappings":";;;;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAEvD;;;;AAIG;MACU,cAAc,GAAG,UAAU,CAAC,WAAW,EAAE;AAEtD;;;;AAIG;AACI,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC5C,IAAA,sBAAsB,EAAE;QACtB,cAAc;AACf,KAAA;AACD,IAAA,mBAAmB,EAAE;QACnB,cAAc;AACf,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,cAAc;AACf,KAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"wiring.js","sources":["../../../../src/x-modules/extra-params/wiring.ts"],"sourcesContent":["import { namespacedWireCommit } from '../../wiring'\nimport { createWiring } from '../../wiring/wiring.utils'\n\n/**\n * WireCommit for {@link ExtraParamsXModule}.\n *\n * @internal\n */\nconst wireCommit = namespacedWireCommit('extraParams')\n\n/**\n * Sets the extra params of the {@link ExtraParamsXModule}.\n *\n * @public\n */\nexport const setExtraParams = wireCommit('setParams')\n\n/**\n * Wiring configuration for the {@link ExtraParamsXModule | extraParams module}.\n *\n * @internal\n */\nexport const extraParamsWiring = createWiring({\n  UserChangedExtraParams: {\n    setExtraParams,\n  },\n  ExtraParamsProvided: {\n    setExtraParams,\n  },\n  ExtraParamsLoadedFromUrl: {\n    setExtraParams,\n  },\n})\n"],"names":[],"mappings":";;;;;AAGA;;;;AAIG;AACH,MAAM,UAAU,GAAG,oBAAoB,CAAC,aAAa,CAAC,CAAA;AAEtD;;;;AAIG;MACU,cAAc,GAAG,UAAU,CAAC,WAAW,EAAC;AAErD;;;;AAIG;AACI,MAAM,iBAAiB,GAAG,YAAY,CAAC;AAC5C,IAAA,sBAAsB,EAAE;QACtB,cAAc;AACf,KAAA;AACD,IAAA,mBAAmB,EAAE;QACnB,cAAc;AACf,KAAA;AACD,IAAA,wBAAwB,EAAE;QACxB,cAAc;AACf,KAAA;AACF,CAAA;;;;"}

package/js/x-modules/extra-params/x-module.js

@@ -10,18 +10,18 @@ import { extraParamsEmitters } from './store/emitters.js';
 import { extraParamsXStoreModule } from './store/module.js';
 import { extraParamsWiring } from './wiring.js';
 
-/**
- * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you
- * import any component from the `extraParams` entry point.
- *
- * @public
- */
-const extraParamsXModule = {
-    name: 'extraParams',
-    storeModule: extraParamsXStoreModule,
-    storeEmitters: extraParamsEmitters,
-    wiring: extraParamsWiring
-};
+/**
+ * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `extraParams` entry point.
+ *
+ * @public
+ */
+const extraParamsXModule = {
+    name: 'extraParams',
+    storeModule: extraParamsXStoreModule,
+    storeEmitters: extraParamsEmitters,
+    wiring: extraParamsWiring,
+};
 XPlugin.registerXModule(extraParamsXModule);
 
 export { extraParamsXModule };

package/js/x-modules/extra-params/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/index';\nimport { extraParamsEmitters } from './store/emitters';\nimport { extraParamsXStoreModule } from './store/module';\nimport { ExtraParamsXStoreModule } from './store/types';\nimport { extraParamsWiring } from './wiring';\n\n/**\n * ExtraParams {@link XModule} alias.\n *\n * @public\n */\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>;\n\n/**\n * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n *\n * @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n  name: 'extraParams',\n  storeModule: extraParamsXStoreModule,\n  storeEmitters: extraParamsEmitters,\n  wiring: extraParamsWiring\n};\n\nXPlugin.registerXModule(extraParamsXModule);\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,WAAW,EAAE,uBAAuB;AACpC,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,MAAM,EAAE,iBAAiB;EACzB;AAEF,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/extra-params/x-module.ts"],"sourcesContent":["import type { XModule } from '../x-modules.types'\nimport type { ExtraParamsXStoreModule } from './store/types'\nimport { XPlugin } from '../../plugins/index'\nimport { extraParamsEmitters } from './store/emitters'\nimport { extraParamsXStoreModule } from './store/module'\nimport { extraParamsWiring } from './wiring'\n\n/**\n * ExtraParams {@link XModule} alias.\n *\n * @public\n */\nexport type ExtraParamsXModule = XModule<ExtraParamsXStoreModule>\n\n/**\n * ExtraParams {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `extraParams` entry point.\n *\n * @public\n */\nexport const extraParamsXModule: ExtraParamsXModule = {\n  name: 'extraParams',\n  storeModule: extraParamsXStoreModule,\n  storeEmitters: extraParamsEmitters,\n  wiring: extraParamsWiring,\n}\n\nXPlugin.registerXModule(extraParamsXModule)\n"],"names":[],"mappings":";;;;;;;;;;;;AAcA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAuB;AACpD,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,WAAW,EAAE,uBAAuB;AACpC,IAAA,aAAa,EAAE,mBAAmB;AAClC,IAAA,MAAM,EAAE,iBAAiB;EAC1B;AAED,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC;;;;"}

package/js/x-modules/facets/components/clear-filters.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selectedFilters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { useFacets } from '../composables/use-facets';\n  import { facetsXModule } from '../x-module';\n\n  /**\n   * Renders a simple button, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearFilters',\n    xModule: facetsXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean\n    },\n    setup: function (props) {\n      const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);\n\n      /**\n       * The events that will be emitted when the button clear filters is clicked.\n       *\n       * @returns The events to be emitted when the button clear filters is clicked.\n       */\n      const events = computed<Partial<XEventsTypes>>(() => ({\n        UserClickedClearAllFilters: props.facetsIds\n      }));\n\n      /**\n       * Dynamic CSS classes to apply to the component.\n       *\n       * @returns The dynamic CSS classes to apply to the component.\n       */\n      const cssClasses = computed<VueCSSClasses>(() => ({\n        'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n        'x-clear-filters--has-selected-filters': hasSelectedFilters.value\n      }));\n\n      return {\n        selectedFilters,\n        hasSelectedFilters,\n        isVisible,\n        events,\n        cssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","cssClasses","hasSelectedFilters","events","_withCtx","_renderSlot","_createCommentVNode"],"mappings":";;;;;AAEmB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AAFnB,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAGU,0BAIEC,EAAAA;AAAAA,IAHR,GAAA,EAAA,CAAA;AAAA,IACC,sBAAWC,CAAkB,0BAAA,EAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAAA,IAC7B,WAAQC,EAAAA,eAAAA;AAAAA,IAAAA,QAAAA,EAAAA,CAAAA,IAAAA,CAAAA,kBAAAA;AANb,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;aAAAC,OAS6C,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,IAAA,CAAA,eAAA,EAAA,EAAA,MAAA;;;;;;AAT7C,OAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,OAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"clear-filters.vue.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\n    }))\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_normalizeClass","_withCtx","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;;AAEU,EAAA,OAAA,IAAA,CAAA,SAAA,IAAAA,SAAA,EAAA,EADRC,WASkB,CAAA,0BAAA,EAAA;AAAA,IAVpB,GAAA,EAAA,CAAA;AAAA,IAGI,KAAA,EAHJC,cAGU,CAAA,CAAA,0BAAA,EAIE,IAAU,CAAA,UAAA,CAAA,CAAA;AAAA,IAHlB,WAAU,EAAA,eAAA;AAAA,IACT,UAAQ,CAAG,IAAA,CAAA,kBAAA;AAAA,IACX,MAAQ,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;AANb,IAAA,OAAA,EAAAC,OAAA,CASI,MAA6F;AAAA,MAA7FC,UAA6F,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAtF,eAAkB,EAAA,IAAA,CAAA,eAAA,IAAzB,MAA6F;AAAA,QATjGC,eAAA;AAAA,UAS8C,iBAAe,GAAAC,eAAA,CAAG,IAAgB,CAAA,eAAA,CAAA,MAAM,CAAG,GAAA,GAAA;AAAA,UAAC,CAAA;AAAA;AAAA,SAAA;AAAA,OAAA,CAAA;;AAT1F,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,EAAA,CAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,OAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/facets/components/clear-filters.vue2.js

@@ -3,48 +3,48 @@ import BaseEventButton from '../../../components/base-event-button.vue.js';
 import { useFacets } from '../composables/use-facets.js';
 import { facetsXModule } from '../x-module.js';
 
-/**
- * Renders a simple button, emitting the needed events when clicked.
- *
- * @public
- */
-var _sfc_main = defineComponent({
-    name: 'ClearFilters',
-    xModule: facetsXModule.name,
-    components: { BaseEventButton },
-    props: {
-        /** Array of facets ids used to get the selected filters for those facets. */
-        facetsIds: Array,
-        /** Flag to render the component even if there are no filters selected. */
-        alwaysVisible: Boolean
-    },
-    setup: function (props) {
-        const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);
-        /**
-         * The events that will be emitted when the button clear filters is clicked.
-         *
-         * @returns The events to be emitted when the button clear filters is clicked.
-         */
-        const events = computed(() => ({
-            UserClickedClearAllFilters: props.facetsIds
-        }));
-        /**
-         * Dynamic CSS classes to apply to the component.
-         *
-         * @returns The dynamic CSS classes to apply to the component.
-         */
-        const cssClasses = computed(() => ({
-            'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,
-            'x-clear-filters--has-selected-filters': hasSelectedFilters.value
-        }));
-        return {
-            selectedFilters,
-            hasSelectedFilters,
-            isVisible,
-            events,
-            cssClasses
-        };
-    }
+/**
+ * Renders a simple button, emitting the needed events when clicked.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'ClearFilters',
+    xModule: facetsXModule.name,
+    components: { BaseEventButton },
+    props: {
+        /** Array of facets ids used to get the selected filters for those facets. */
+        facetsIds: Array,
+        /** Flag to render the component even if there are no filters selected. */
+        alwaysVisible: Boolean,
+    },
+    setup(props) {
+        const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);
+        /**
+         * The events that will be emitted when the button clear filters is clicked.
+         *
+         * @returns The events to be emitted when the button clear filters is clicked.
+         */
+        const events = computed(() => ({
+            UserClickedClearAllFilters: props.facetsIds,
+        }));
+        /**
+         * Dynamic CSS classes to apply to the component.
+         *
+         * @returns The dynamic CSS classes to apply to the component.
+         */
+        const cssClasses = computed(() => ({
+            'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,
+            'x-clear-filters--has-selected-filters': hasSelectedFilters.value,
+        }));
+        return {
+            selectedFilters,
+            hasSelectedFilters,
+            isVisible,
+            events,
+            cssClasses,
+        };
+    },
 });
 
 export { _sfc_main as default };

package/js/x-modules/facets/components/clear-filters.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"clear-filters.vue2.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selectedFilters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import { Facet } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseEventButton from '../../../components/base-event-button.vue';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { useFacets } from '../composables/use-facets';\n  import { facetsXModule } from '../x-module';\n\n  /**\n   * Renders a simple button, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'ClearFilters',\n    xModule: facetsXModule.name,\n    components: { BaseEventButton },\n    props: {\n      /** Array of facets ids used to get the selected filters for those facets. */\n      facetsIds: Array as PropType<Array<Facet['id']>>,\n      /** Flag to render the component even if there are no filters selected. */\n      alwaysVisible: Boolean\n    },\n    setup: function (props) {\n      const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);\n\n      /**\n       * The events that will be emitted when the button clear filters is clicked.\n       *\n       * @returns The events to be emitted when the button clear filters is clicked.\n       */\n      const events = computed<Partial<XEventsTypes>>(() => ({\n        UserClickedClearAllFilters: props.facetsIds\n      }));\n\n      /**\n       * Dynamic CSS classes to apply to the component.\n       *\n       * @returns The dynamic CSS classes to apply to the component.\n       */\n      const cssClasses = computed<VueCSSClasses>(() => ({\n        'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n        'x-clear-filters--has-selected-filters': hasSelectedFilters.value\n      }));\n\n      return {\n        selectedFilters,\n        hasSelectedFilters,\n        isVisible,\n        events,\n        cssClasses\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAsBE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAM;AACtB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB,QAAA,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAU,EAAA,GAAI,SAAS,CAAC,KAAK,CAAC,CAAA;AAE3E;;;;AAIE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO;YACpD,0BAA0B,EAAE,KAAK,CAAC,SAAQ;AAC3C,SAAA,CAAC,CAAC,CAAA;AAEH;;;;AAIE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;AAChD,YAAA,2CAA2C,EAAE,CAAC,kBAAkB,CAAC,KAAK;YACtE,uCAAuC,EAAE,kBAAkB,CAAC,KAAI;AACjE,SAAA,CAAC,CAAC,CAAA;QAEH,OAAO;YACL,eAAe;YACf,kBAAkB;YAClB,SAAS;YACT,MAAM;YACN,UAAS;SACV,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"clear-filters.vue2.js","sources":["../../../../../src/x-modules/facets/components/clear-filters.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-if=\"isVisible\"\n    class=\"x-clear-filters x-button\"\n    data-test=\"clear-filters\"\n    :disabled=\"!hasSelectedFilters\"\n    :events=\"events\"\n    :class=\"cssClasses\"\n  >\n    <slot :selected-filters=\"selectedFilters\">Clear Filters ({{ selectedFilters.length }})</slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { Facet } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { useFacets } from '../composables/use-facets'\nimport { facetsXModule } from '../x-module'\n\n/**\n * Renders a simple button, emitting the needed events when clicked.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'ClearFilters',\n  xModule: facetsXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /** Array of facets ids used to get the selected filters for those facets. */\n    facetsIds: Array as PropType<Array<Facet['id']>>,\n    /** Flag to render the component even if there are no filters selected. */\n    alwaysVisible: Boolean,\n  },\n  setup(props) {\n    const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props)\n\n    /**\n     * The events that will be emitted when the button clear filters is clicked.\n     *\n     * @returns The events to be emitted when the button clear filters is clicked.\n     */\n    const events = computed<Partial<XEventsTypes>>(() => ({\n      UserClickedClearAllFilters: props.facetsIds,\n    }))\n\n    /**\n     * Dynamic CSS classes to apply to the component.\n     *\n     * @returns The dynamic CSS classes to apply to the component.\n     */\n    const cssClasses = computed<VueCSSClasses>(() => ({\n      'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,\n      'x-clear-filters--has-selected-filters': hasSelectedFilters.value,\n    }))\n\n    return {\n      selectedFilters,\n      hasSelectedFilters,\n      isVisible,\n      events,\n      cssClasses,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button to clear a certain facets filter. The event\n  payload is the id of the facets that are going to be cleared.\n- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the button. The event payload is undefined.\n\n## Examples\n\nThis component renders a button, which on clicked emits the `UserClickedClearAllFilters` or\n`UserClickedClearAllFilters` event.\n\n### Basic usage\n\n```vue\n<ClearFilters />\n```\n\n### Customizing its contents\n\nIn this example, show the custom message in button.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n\nIn this example, show the custom message in button with always visible a true and list of facets\nids.\n\n```vue\n<ClearFilters v-slot=\"{ selectedFilters }\" :alwaysVisible=\"true\" :facetsIds=\"facetsIds\">\n  Delete {{ selectedFilters.length }} selected\n</ClearFilters>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuBA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,KAAqC;;AAEhD,QAAA,aAAa,EAAE,OAAO;AACvB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,SAAQ,EAAI,GAAE,SAAS,CAAC,KAAK,CAAA,CAAA;AAE1E;;;;AAIE;AACF,QAAA,MAAM,MAAK,GAAI,QAAQ,CAAwB,OAAO;YACpD,0BAA0B,EAAE,KAAK,CAAC,SAAS;AAC5C,SAAA,CAAC,CAAA,CAAA;AAEF;;;;AAIE;AACF,QAAA,MAAM,UAAW,GAAE,QAAQ,CAAgB,OAAO;AAChD,YAAA,2CAA2C,EAAE,CAAC,kBAAkB,CAAC,KAAK;YACtE,uCAAuC,EAAE,kBAAkB,CAAC,KAAK;AAClE,SAAA,CAAC,CAAA,CAAA;QAEF,OAAO;YACL,eAAe;YACf,kBAAkB;YAClB,SAAS;YACT,MAAM;YACN,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}