@empathyco/x-components 6.0.0-alpha.9 → 6.0.0-alpha.90

package/js/components/currency/base-currency.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-currency.vue2.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, inject } from 'vue';\n  import { currencyFormatter } from '../../utils/currency-formatter';\n\n  /**\n   * Renders the value received as a property which always must be a JavaScript number, with the\n   * proper format provided as a string property or by injection. The rendered tag is a span in\n   * order to render a default inline HTML element.\n   *\n   * Regarding the format or mask to be defined as string:\n   * - Use 'i' to define integer numbers.\n   * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n   * format doesn't include decimals, it is filled with zeros until reach the length defined with\n   * 'd's.\n   * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n   * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n   * than one character.\n   * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n   * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n   * - Set whatever you need around the integers and decimals marks.\n   * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n   *\n   * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n   * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n   * part, it deletes significant digits.\n   *\n   * Basic example:\n   *\n   * ```vue\n   * <BaseCurrency\n   *   :value=\"123456.789\"\n   *   format=\"i.iiii,dddd €\"\n   * />\n   * ```\n   *\n   * It will render: `123.456,7890 €`.\n   *\n   * See docs below for more examples.\n   *\n   * @public\n   */\n  export default defineComponent({\n    props: {\n      /**\n       * Numeric value to be formatted.\n       *\n       * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n       * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n       *\n       * @public\n       */\n      value: {\n        type: Number,\n        required: true\n      },\n\n      /**\n       * The format as string.\n       *\n       * @public\n       */\n      format: {\n        type: String\n      }\n    },\n\n    setup(props) {\n      /**\n       * The injected format as string.\n       *\n       * @public\n       */\n      const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd');\n\n      /**\n       * A format which can be passed through prop or injected.\n       *\n       * @returns A format as string.\n       *\n       * @internal\n       */\n      const renderedFormat = computed<string>(() => props.format ?? injectedFormat);\n\n      /**\n       * Returns the formatted result as string.\n       *\n       * @returns Formatted number.\n       *\n       * @internal\n       */\n      const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value));\n\n      return {\n        currency\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\n  import { BaseCurrency } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseCurrencyDemo',\n    components: {\n      BaseCurrency\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAQE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAK;AACb,SAAA;AACD,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAM,CAAS,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEnE;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAS,MAAM,KAAK,CAAC,MAAK,IAAK,cAAc,CAAC,CAAA;AAE7E;;;;;;AAME;AACF,QAAA,MAAM,WAAW,QAAQ,CAAS,MAAM,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;QAE7F,OAAO;YACL,QAAO;SACR,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-currency.vue2.js","sources":["../../../../src/components/currency/base-currency.vue"],"sourcesContent":["<template>\n  <span v-if=\"value !== undefined\" class=\"x-currency\">{{ currency }}</span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject } from 'vue'\nimport { currencyFormatter } from '../../utils/currency-formatter'\n\n/**\n * Renders the value received as a property which always must be a JavaScript number, with the\n * proper format provided as a string property or by injection. The rendered tag is a span in\n * order to render a default inline HTML element.\n *\n * Regarding the format or mask to be defined as string:\n * - Use 'i' to define integer numbers.\n * - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the\n * format doesn't include decimals, it is filled with zeros until reach the length defined with\n * 'd's.\n * - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.\n * - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more\n * than one character.\n * - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the\n * decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).\n * - Set whatever you need around the integers and decimals marks.\n * - Default mask: 'i.iii,dd' which returns '1.345,67'.\n *\n * @remarks The number of 'd', which is the maximum decimal length, MUST matches with the length\n * of decimals provided from the adapter. Otherwise, when the component truncate the decimal\n * part, it deletes significant digits.\n *\n * Basic example:\n *\n * ```vue\n * <BaseCurrency\n *   :value=\"123456.789\"\n *   format=\"i.iiii,dddd €\"\n * />\n * ```\n *\n * It will render: `123.456,7890 €`.\n *\n * See docs below for more examples.\n *\n * @public\n */\nexport default defineComponent({\n  props: {\n    /**\n     * Numeric value to be formatted.\n     *\n     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.\n     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.\n     *\n     * @public\n     */\n    value: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The format as string.\n     *\n     * @public\n     */\n    format: {\n      type: String,\n    },\n  },\n\n  setup(props) {\n    /**\n     * The injected format as string.\n     *\n     * @public\n     */\n    const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd')\n\n    /**\n     * A format which can be passed through prop or injected.\n     *\n     * @returns A format as string.\n     *\n     * @internal\n     */\n    const renderedFormat = computed<string>(() => props.format ?? injectedFormat)\n\n    /**\n     * Returns the formatted result as string.\n     *\n     * @returns Formatted number.\n     *\n     * @internal\n     */\n    const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value))\n\n    return {\n      currency,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders the value received as a property, which always must be a JavaScript number, with the proper\nformat provided as string property. The rendered tag is a span in order to render a default inline\nHTML element.\n\n### Basic usage\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" />\n  <!-- output: '12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678,876 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,ddd? €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$ i.iii,dd\" />\n  <!-- output: '$ 12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"$i.iii,dd\" />\n  <!-- output: '$12.345.678,87' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd€\" />\n  <!-- output: '12.345.678,87€' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i,iii.dd €\" />\n  <!-- output: '12,345,678.87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii.dd €\" />\n  <!-- output: '12 345 678.87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i iii - dd €\" />\n  <!-- output: '12 345 678 - 87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,876543 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,870000 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678\" format=\"i.iii,dddddd €\" />\n  <!-- output: '12.345.678,000000 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii,dd €\" />\n  <!-- output: '12.345.678,87 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n\n```vue\n<template>\n  <BaseCurrency :value=\"12345678.87654321\" format=\"i.iii €\" />\n  <!-- output: '12.345.678 €' -->\n</template>\n\n<script>\nimport { BaseCurrency } from '@empathyco/x-components'\n\nexport default {\n  name: 'BaseCurrencyDemo',\n  components: {\n    BaseCurrency,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE;AACL;;;;;;;AAOE;AACF,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACF,KAAA;AAED,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,cAAa,GAAI,MAAM,CAAS,gBAAgB,EAAE,UAAU,CAAA,CAAA;AAElE;;;;;;AAME;AACF,QAAA,MAAM,cAAe,GAAE,QAAQ,CAAS,MAAM,KAAK,CAAC,MAAO,IAAG,cAAc,CAAA,CAAA;AAE5E;;;;;;AAME;AACF,QAAA,MAAM,WAAW,QAAQ,CAAS,MAAM,iBAAiB,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,CAAA,CAAA;QAE5F,OAAO;YACL,QAAQ;SACV,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/decorators/injection.consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import { Result, ResultVariant } from '@empathyco/x-types';\nimport { ListItem } from '../../utils/types';\n\n/**\n * Type of the key passed to `provide` and `inject` to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `inject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * It's used to identify the provided and injected `disable-animations`.\n *\n * @internal\n */\nexport const DISABLE_ANIMATIONS_KEY: XInjectKey<boolean | undefined> = 'disable-animations';\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems';\n\n/**\n * It's used to identify the provided and injected `query`.\n *\n * @internal\n */\nexport const QUERY_KEY: XInjectKey<string | undefined> = 'query';\n\n/**\n * It's used to identify the provided and injected `hasMoreItems`.\n *\n * @internal\n */\nexport const HAS_MORE_ITEMS_KEY: XInjectKey<boolean | undefined> = 'hasMoreItems';\n\n/**\n * It's used to identify the provided and injected `result`.\n *\n * @internal\n */\nexport const RESULT_WITH_VARIANTS_KEY: XInjectKey<Result> = 'resultWithVariants';\n\n/**\n * It's used to identify the provided and injected `selectedVariants` of a result.\n *\n * @internal\n */\nexport const SELECTED_VARIANTS_KEY: XInjectKey<ResultVariant[]> = 'selectedVariants';\n\n/**\n * It's used to identify the provided and injected `selectResultVariant` callback.\n *\n * @internal\n */\nexport const SELECT_RESULT_VARIANT_KEY: XInjectKey<\n  (variant: ResultVariant, level?: number) => void\n> = 'selectResultVariant';\n"],"names":[],"mappings":"AAgBA;;;;AAIG;AACI,MAAM,sBAAsB,GAAoC,qBAAqB;AAE5F;;;;AAIG;AACI,MAAM,cAAc,GAAuC,YAAY;AAE9E;;;;AAIG;AACI,MAAM,SAAS,GAAmC,QAAQ;AAEjE;;;;AAIG;AACI,MAAM,kBAAkB,GAAoC,eAAe;AAElF;;;;AAIG;AACI,MAAM,wBAAwB,GAAuB,qBAAqB;AAEjF;;;;AAIG;AACI,MAAM,qBAAqB,GAAgC,mBAAmB;AAErF;;;;AAIG;AACI,MAAM,yBAAyB,GAElC;;;;"}
+{"version":3,"file":"injection.consts.js","sources":["../../../../src/components/decorators/injection.consts.ts"],"sourcesContent":["import type { Result, ResultVariant } from '@empathyco/x-types'\nimport type { ListItem } from '../../utils/types'\n\n/**\n * Type of the key passed to `provide` and `inject` to be type-safe. With this type\n * you can declare the type of the injected value directly in the injection key.\n *\n * @example\n * `const myKey: XInjectKey<Filter> = 'myFilter';`\n * `inject(myKey)`\n *\n * @public\n */\n// eslint-disable-next-line unused-imports/no-unused-vars,ts/no-wrapper-object-types\nexport interface XInjectKey<Type> extends String {}\n\n/**\n * It's used to identify the provided and injected `disable-animations`.\n *\n * @internal\n */\nexport const DISABLE_ANIMATIONS_KEY: XInjectKey<boolean | undefined> = 'disable-animations'\n\n/**\n * It's used to identify the provided and injected `items`.\n *\n * @internal\n */\nexport const LIST_ITEMS_KEY: XInjectKey<ListItem[] | undefined> = 'listItems'\n\n/**\n * It's used to identify the provided and injected `query`.\n *\n * @internal\n */\nexport const QUERY_KEY: XInjectKey<string | undefined> = 'query'\n\n/**\n * It's used to identify the provided and injected `hasMoreItems`.\n *\n * @internal\n */\nexport const HAS_MORE_ITEMS_KEY: XInjectKey<boolean | undefined> = 'hasMoreItems'\n\n/**\n * It's used to identify the provided and injected `result`.\n *\n * @internal\n */\nexport const RESULT_WITH_VARIANTS_KEY: XInjectKey<Result> = 'resultWithVariants'\n\n/**\n * It's used to identify the provided and injected `selectedVariants` of a result.\n *\n * @internal\n */\nexport const SELECTED_VARIANTS_KEY: XInjectKey<ResultVariant[]> = 'selectedVariants'\n\n/**\n * It's used to identify the provided and injected `selectResultVariant` callback.\n *\n * @internal\n */\nexport const SELECT_RESULT_VARIANT_KEY: XInjectKey<\n  (variant: ResultVariant, level?: number) => void\n> = 'selectResultVariant'\n"],"names":[],"mappings":"AAgBA;;;;AAIG;AACI,MAAM,sBAAsB,GAAoC,qBAAoB;AAE3F;;;;AAIG;AACI,MAAM,cAAc,GAAuC,YAAW;AAE7E;;;;AAIG;AACI,MAAM,SAAS,GAAmC,QAAO;AAEhE;;;;AAIG;AACI,MAAM,kBAAkB,GAAoC,eAAc;AAEjF;;;;AAIG;AACI,MAAM,wBAAwB,GAAuB,qBAAoB;AAEhF;;;;AAIG;AACI,MAAM,qBAAqB,GAAgC,mBAAkB;AAEpF;;;;AAIG;AACI,MAAM,yBAAyB,GAElC;;;;"}

package/js/components/display-click-provider.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent, computed, provide } from 'vue';
+import '../composables/create-use-device.js';
+import { use$x } from '../composables/use-_x.js';
+import '@vue/devtools-api';
+import '../plugins/devtools/timeline.devtools.js';
+import '@empathyco/x-utils';
+import 'rxjs/operators';
+import 'rxjs';
+import '../plugins/devtools/colors.utils.js';
+import '../plugins/x-bus.js';
+import '../plugins/x-plugin.js';
+import 'vuex';
+import '@vueuse/core';
+
+var _sfc_main = defineComponent({
+    name: 'DisplayClickProvider',
+    props: {
+        resultFeature: {
+            type: String,
+            required: true,
+        },
+        ignoreResultClickEvent: {
+            type: Boolean,
+            default: false,
+        },
+        toolingDisplayTagging: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+        toolingAdd2CartTagging: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+        queryTagging: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+    },
+    setup(props, { slots }) {
+        const x = use$x();
+        const displayClickMetadata = computed(() => ({
+            displayOriginalQuery: x.query.search,
+            feature: props.resultFeature,
+            queryTagging: props.queryTagging,
+            toolingTagging: props.toolingDisplayTagging,
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging,
+        }));
+        provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart']);
+        provide('resultAddToCartExtraEventsMetadata', {
+            toolingAdd2CartTagging: props.toolingAdd2CartTagging,
+        });
+        provide('resultClickExtraEvents', [
+            'UserClickedARelatedPromptResult',
+            'UserClickedADisplayResult',
+        ]);
+        provide('resultLinkMetadataPerEvent', {
+            UserClickedARelatedPromptResult: displayClickMetadata.value,
+            UserClickedADisplayResult: displayClickMetadata.value,
+            ...(props.ignoreResultClickEvent && {
+                UserClickedAResult: {
+                    ignoreInModules: ['tagging'],
+                },
+            }),
+        });
+        return () => slots.default?.()[0] ?? '';
+    },
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=display-click-provider.vue.js.map

package/js/components/display-click-provider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-click-provider.vue.js","sources":["../../../src/components/display-click-provider.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\n\nimport type { ResultFeature } from '../types/index'\nimport type { DisplayWireMetadata } from '../wiring/index'\nimport { computed, defineComponent, provide } from 'vue'\nimport { use$x } from '../composables/index'\n\nexport default defineComponent({\n  name: 'DisplayClickProvider',\n  props: {\n    resultFeature: {\n      type: String as PropType<ResultFeature>,\n      required: true,\n    },\n    ignoreResultClickEvent: {\n      type: Boolean,\n      default: false,\n    },\n    toolingDisplayTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    toolingAdd2CartTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n    queryTagging: {\n      type: Object as PropType<TaggingRequest>,\n      required: false,\n      default: undefined,\n    },\n  },\n  setup(props, { slots }) {\n    const x = use$x()\n\n    const displayClickMetadata = computed<Partial<DisplayWireMetadata>>(() => ({\n      displayOriginalQuery: x.query.search,\n      feature: props.resultFeature,\n      queryTagging: props.queryTagging,\n      toolingTagging: props.toolingDisplayTagging,\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    }))\n\n    provide('resultAddToCartExtraEvents', ['UserClickedARelatedPromptAdd2Cart'])\n    provide('resultAddToCartExtraEventsMetadata', {\n      toolingAdd2CartTagging: props.toolingAdd2CartTagging,\n    })\n\n    provide('resultClickExtraEvents', [\n      'UserClickedARelatedPromptResult',\n      'UserClickedADisplayResult',\n    ])\n    provide('resultLinkMetadataPerEvent', {\n      UserClickedARelatedPromptResult: displayClickMetadata.value,\n      UserClickedADisplayResult: displayClickMetadata.value,\n      ...(props.ignoreResultClickEvent && {\n        UserClickedAResult: {\n          ignoreInModules: ['tagging'],\n        },\n      }),\n    })\n\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACD,QAAA,qBAAqB,EAAE;AACrB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,sBAAsB,EAAE;AACtB,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,SAAS;AACnB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,MAAM,CAAA,GAAI,KAAK,EAAC,CAAA;AAEhB,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAA+B,OAAO;AACzE,YAAA,oBAAoB,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YACpC,OAAO,EAAE,KAAK,CAAC,aAAa;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,qBAAqB;YAC3C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAC,CAAA,CAAA;AAEF,QAAA,OAAO,CAAC,4BAA4B,EAAE,CAAC,mCAAmC,CAAC,CAAA,CAAA;QAC3E,OAAO,CAAC,oCAAoC,EAAE;YAC5C,sBAAsB,EAAE,KAAK,CAAC,sBAAsB;AACrD,SAAA,CAAA,CAAA;QAED,OAAO,CAAC,wBAAwB,EAAE;YAChC,iCAAiC;YACjC,2BAA2B;AAC5B,SAAA,CAAA,CAAA;QACD,OAAO,CAAC,4BAA4B,EAAE;YACpC,+BAA+B,EAAE,oBAAoB,CAAC,KAAK;YAC3D,yBAAyB,EAAE,oBAAoB,CAAC,KAAK;AACrD,YAAA,IAAI,KAAK,CAAC,sBAAqB,IAAK;AAClC,gBAAA,kBAAkB,EAAE;oBAClB,eAAe,EAAE,CAAC,SAAS,CAAC;AAC7B,iBAAA;aACF;AACF,SAAA,CAAA,CAAA;AAED,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

package/js/components/display-click-provider.vue2.js

@@ -0,0 +1,6 @@
+import _sfc_main from './display-click-provider.vue.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=display-click-provider.vue2.js.map

package/js/components/display-click-provider.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-click-provider.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/display-emitter.vue.js

@@ -8,12 +8,12 @@ var _sfc_main = defineComponent({
         /** The payload for the display event emit. */
         payload: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Optional event metadata. */
         eventMetadata: {
-            type: Object
-        }
+            type: Object,
+        },
     },
     setup(props, { slots }) {
         let unwatchDisplay;
@@ -23,7 +23,7 @@ var _sfc_main = defineComponent({
                 unwatchDisplay = useEmitDisplayEvent({
                     element,
                     taggingRequest: props.payload,
-                    ...(props.eventMetadata && { eventMetadata: props.eventMetadata })
+                    ...(props.eventMetadata && { eventMetadata: props.eventMetadata }),
                 }).unwatchDisplay;
             }
         });
@@ -37,7 +37,7 @@ var _sfc_main = defineComponent({
          * retrieve the HTML element in both versions.
          */
         return () => slots.default?.()[0] ?? '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/display-emitter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-emitter.vue.js","sources":["../../../src/components/display-emitter.vue"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    defineComponent,\n    getCurrentInstance,\n    onMounted,\n    onUnmounted,\n    PropType,\n    WatchStopHandle\n  } from 'vue';\n  import { TaggingRequest } from '@empathyco/x-types';\n  import { useEmitDisplayEvent } from '../composables/use-on-display';\n  import { WireMetadata } from '../wiring';\n\n  /** A component that emits a display event when it first appears in the viewport. */\n  export default defineComponent({\n    name: 'DisplayEmitter',\n    props: {\n      /** The payload for the display event emit. */\n      payload: {\n        type: Object as PropType<TaggingRequest>,\n        required: true\n      },\n      /** Optional event metadata. */\n      eventMetadata: {\n        type: Object as PropType<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>\n      }\n    },\n    setup(props, { slots }) {\n      let unwatchDisplay: WatchStopHandle | undefined;\n\n      onMounted(() => {\n        const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;\n        if (element) {\n          unwatchDisplay = useEmitDisplayEvent({\n            element,\n            taggingRequest: props.payload,\n            ...(props.eventMetadata && { eventMetadata: props.eventMetadata })\n          }).unwatchDisplay;\n        }\n      });\n\n      onUnmounted(() => {\n        unwatchDisplay?.();\n      });\n\n      /*\n       * Obtains the vNodes array of the default slot and renders only the first one.\n       * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n       * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n       * retrieve the HTML element in both versions.\n       */\n      return () => slots.default?.()[0] ?? '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)\n\n## See it in action\n\nIn this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when\nthe div inside first appears in the viewport.\n\n```vue\n<template>\n  <DisplayEmitter :payload=\"{ url: 'tagging/url', params: {} }\">\n    <div>I'm displaying</div>\n  </DisplayEmitter>\n</template>\n<script>\n  import { DisplayEmitter } from '@empathyco/x-components';\n  export default {\n    name: 'DisplayEmitterDemo',\n    components: {\n      DisplayEmitter\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAaE;AACA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAA2E;AACnF,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,IAAI,cAA2C,CAAA;QAE/C,SAAS,CAAC,MAAM;YACd,MAAM,OAAQ,GAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,GAA8B,CAAA;AAC3E,YAAA,IAAI,OAAO,EAAE;gBACX,cAAa,GAAI,mBAAmB,CAAC;oBACnC,OAAO;oBACP,cAAc,EAAE,KAAK,CAAC,OAAO;AAC7B,oBAAA,IAAI,KAAK,CAAC,aAAc,IAAG,EAAE,aAAa,EAAE,KAAK,CAAC,aAAY,EAAG;iBAClE,CAAC,CAAC,cAAc,CAAA;AACnB,aAAA;AACF,SAAC,CAAC,CAAA;QAEF,WAAW,CAAC,MAAM;YAChB,cAAc,IAAI,CAAA;AACpB,SAAC,CAAC,CAAA;AAEF;;;;;AAKE;AACF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAA,IAAK,EAAE,CAAA;KACzC;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"display-emitter.vue.js","sources":["../../../src/components/display-emitter.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { TaggingRequest } from '@empathyco/x-types'\nimport type { PropType, WatchStopHandle } from 'vue'\nimport type { WireMetadata } from '../wiring'\nimport { defineComponent, getCurrentInstance, onMounted, onUnmounted } from 'vue'\nimport { useEmitDisplayEvent } from '../composables/use-on-display'\n\n/** A component that emits a display event when it first appears in the viewport. */\nexport default defineComponent({\n  name: 'DisplayEmitter',\n  props: {\n    /** The payload for the display event emit. */\n    payload: {\n      type: Object as PropType<TaggingRequest>,\n      required: true,\n    },\n    /** Optional event metadata. */\n    eventMetadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName' | 'origin' | 'location'>>,\n    },\n  },\n  setup(props, { slots }) {\n    let unwatchDisplay: WatchStopHandle | undefined\n\n    onMounted(() => {\n      const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined\n      if (element) {\n        unwatchDisplay = useEmitDisplayEvent({\n          element,\n          taggingRequest: props.payload,\n          ...(props.eventMetadata && { eventMetadata: props.eventMetadata }),\n        }).unwatchDisplay\n      }\n    })\n\n    onUnmounted(() => {\n      unwatchDisplay?.()\n    })\n\n    /*\n     * Obtains the vNodes array of the default slot and renders only the first one.\n     * It avoids to render a `Fragment` with the vNodes in Vue3 and the same behaviour in Vue2\n     * because Vue2 only allows a single root node. Then, `getCurrentInstance()?.proxy?.$el` to\n     * retrieve the HTML element in both versions.\n     */\n    return () => slots.default?.()[0] ?? ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`TrackableElementDisplayed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts)\n\n## See it in action\n\nIn this example, the `DisplayEmitter` component will emit the `TrackableElementDisplayed` event when\nthe div inside first appears in the viewport.\n\n```vue\n<template>\n  <DisplayEmitter :payload=\"{ url: 'tagging/url', params: {} }\">\n    <div>I'm displaying</div>\n  </DisplayEmitter>\n</template>\n<script>\nimport { DisplayEmitter } from '@empathyco/x-components'\nexport default {\n  name: 'DisplayEmitterDemo',\n  components: {\n    DisplayEmitter,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAOA;AACA,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAkC;AACxC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,aAAa,EAAE;AACb,YAAA,IAAI,EAAE,MAA4E;AACnF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAI,EAAG,EAAA;AACpB,QAAA,IAAI,cAA0C,CAAA;QAE9C,SAAS,CAAC,MAAM;YACd,MAAM,OAAQ,GAAE,kBAAkB,EAAE,EAAE,KAAK,EAAE,GAA6B,CAAA;AAC1E,YAAA,IAAI,OAAO,EAAE;gBACX,cAAa,GAAI,mBAAmB,CAAC;oBACnC,OAAO;oBACP,cAAc,EAAE,KAAK,CAAC,OAAO;AAC7B,oBAAA,IAAI,KAAK,CAAC,aAAc,IAAG,EAAE,aAAa,EAAE,KAAK,CAAC,aAAc,EAAC;iBAClE,CAAC,CAAC,cAAa,CAAA;AAClB,aAAA;AACF,SAAC,CAAA,CAAA;QAED,WAAW,CAAC,MAAM;YAChB,cAAc,IAAG,CAAA;AACnB,SAAC,CAAA,CAAA;AAED;;;;;AAKE;AACF,QAAA,OAAO,MAAM,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAE,IAAG,EAAC,CAAA;KACvC;AACF,CAAA,CAAA;;;;"}

package/js/components/filters/labels/base-price-filter-label.vue.js

@@ -13,11 +13,11 @@ var _sfc_main = defineComponent({
         /** The filter data for get min and max value. */
         filter: {
             type: Object,
-            required: true
+            required: true,
         },
         /** Configuration for show the label. */
         format: {
-            type: String
+            type: String,
         },
         /**
          * Message shown when the filter hasn't got the min value defined.
@@ -26,7 +26,7 @@ var _sfc_main = defineComponent({
          */
         lessThan: {
             type: String,
-            required: true
+            required: true,
         },
         /**
          * Message shown when the filter has both the min and max values defined.
@@ -35,7 +35,7 @@ var _sfc_main = defineComponent({
          */
         fromTo: {
             type: String,
-            required: true
+            required: true,
         },
         /**
          * Message shown when the filter hasn't got max value defined.
@@ -44,8 +44,8 @@ var _sfc_main = defineComponent({
          */
         from: {
             type: String,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         /**
@@ -62,25 +62,25 @@ var _sfc_main = defineComponent({
                     : props.fromTo;
         });
         return () => {
-            const labelParts = label.value.split(/({min}|{max})/);
+            const labelParts = label.value.split(/(\{min\}|\{max\})/);
             const children = labelParts.map(partMessage => {
                 if (partMessage === '{min}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.min,
-                        format: props.format
+                        format: props.format,
                     });
                 }
                 else if (partMessage === '{max}') {
                     return h(BaseCurrency, {
                         value: props.filter.range.max,
-                        format: props.format
+                        format: props.format,
                     });
                 }
                 return partMessage;
             });
             return h('span', { class: 'x-price-filter-label' }, children);
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/filters/labels/base-price-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, h, PropType } from 'vue';\n  import { RangeValue } from '@empathyco/x-types';\n  import BaseCurrency from '../../currency/base-currency.vue';\n\n  /**\n   * Renders a label for a price filter, allowing to select different messages depending on the\n   * value of the filter.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: { BaseCurrency },\n    props: {\n      /** The filter data for get min and max value. */\n      filter: {\n        type: Object as PropType<{ range: RangeValue }>,\n        required: true\n      },\n      /** Configuration for show the label. */\n      format: {\n        type: String\n      },\n      /**\n       * Message shown when the filter hasn't got the min value defined.\n       *\n       * @public\n       */\n      lessThan: {\n        type: String,\n        required: true\n      },\n      /**\n       * Message shown when the filter has both the min and max values defined.\n       *\n       * @public\n       */\n      fromTo: {\n        type: String,\n        required: true\n      },\n      /**\n       * Message shown when the filter hasn't got max value defined.\n       *\n       * @public\n       */\n      from: {\n        type: String,\n        required: true\n      }\n    },\n    setup(props) {\n      /**\n       * The active label, retrieved from the provided props.\n       * It depends on the min and max values of the filter.\n       *\n       * @returns The active label to be formatted with the min and max values of the filter.\n       */\n      const label = computed<string>(() => {\n        return props.filter.range.min === null\n          ? props.lessThan\n          : props.filter.range.max === null\n          ? props.from\n          : props.fromTo;\n      });\n\n      return () => {\n        const labelParts = label.value.split(/({min}|{max})/);\n\n        const children = labelParts.map(partMessage => {\n          if (partMessage === '{min}') {\n            return h(BaseCurrency, {\n              value: props.filter.range.min as number,\n              format: props.format\n            });\n          } else if (partMessage === '{max}') {\n            return h(BaseCurrency, {\n              value: props.filter.range.max as number,\n              format: props.format\n            });\n          }\n          return partMessage;\n        });\n\n        return h('span', { class: 'x-price-filter-label' }, children);\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\n  import { BasePriceFilterLabel } from '@empathyco/x-components';\n  import { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'MyFacets',\n    components: {\n      Facets,\n      Filters,\n      NumberRangeFilter,\n      BasePriceFilterLabel\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAKE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAK;AACZ,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;YACnC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM,IAAG;kBACjC,KAAK,CAAC,QAAO;kBACb,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,KAAI,IAAG;sBAC9B,KAAK,CAAC,IAAG;AACX,sBAAE,KAAK,CAAC,MAAM,CAAA;AAClB,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM;YACX,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;YAErD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAK;gBAC7C,IAAI,WAAY,KAAI,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAK;AACpB,qBAAA,CAAC,CAAA;AACJ,iBAAA;qBAAO,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAK;AACpB,qBAAA,CAAC,CAAA;AACJ,iBAAA;AACA,gBAAA,OAAO,WAAW,CAAA;AACpB,aAAC,CAAC,CAAA;AAEF,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAC,CAAA;AAC/D,SAAC,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-price-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-price-filter-label.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { RangeValue } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, h } from 'vue'\nimport BaseCurrency from '../../currency/base-currency.vue'\n\n/**\n * Renders a label for a price filter, allowing to select different messages depending on the\n * value of the filter.\n *\n * @public\n */\nexport default defineComponent({\n  components: { BaseCurrency },\n  props: {\n    /** The filter data for get min and max value. */\n    filter: {\n      type: Object as PropType<{ range: RangeValue }>,\n      required: true,\n    },\n    /** Configuration for show the label. */\n    format: {\n      type: String,\n    },\n    /**\n     * Message shown when the filter hasn't got the min value defined.\n     *\n     * @public\n     */\n    lessThan: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter has both the min and max values defined.\n     *\n     * @public\n     */\n    fromTo: {\n      type: String,\n      required: true,\n    },\n    /**\n     * Message shown when the filter hasn't got max value defined.\n     *\n     * @public\n     */\n    from: {\n      type: String,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * The active label, retrieved from the provided props.\n     * It depends on the min and max values of the filter.\n     *\n     * @returns The active label to be formatted with the min and max values of the filter.\n     */\n    const label = computed<string>(() => {\n      return props.filter.range.min === null\n        ? props.lessThan\n        : props.filter.range.max === null\n          ? props.from\n          : props.fromTo\n    })\n\n    return () => {\n      const labelParts = label.value.split(/(\\{min\\}|\\{max\\})/)\n\n      const children = labelParts.map(partMessage => {\n        if (partMessage === '{min}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.min as number,\n            format: props.format,\n          })\n        } else if (partMessage === '{max}') {\n          return h(BaseCurrency, {\n            value: props.filter.range.max as number,\n            format: props.format,\n          })\n        }\n        return partMessage\n      })\n\n      return h('span', { class: 'x-price-filter-label' }, children)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a price filter, allowing to select different messages depending on the value of\nthe filter.\n\n- When the `min` value property isn't defined in the filter, you can show a message like\n  `Less than $10` by using the `lessThan` prop, combined with the `{max}` placeholder.\n- When the `max` value property isn't defined in the filter, you can show a message like\n  `More than $300` by using the `from` prop, combined with the `{min}` placeholder.\n- If both the `min` and `max` values of the filter are defined, you can show a message like\n  `$10 - $300` by using the `fromTo` prop.\n\nThis component uses internally the `BaseCurrency` one, so you can pass the same props to configure\nhow the price should look like.\n\n### Basic usage\n\n```vue\n<template>\n  <Facets>\n    <template #price=\"{ facet }\">\n      <Filters v-slot=\"{ filter }\" :filters=\"facet.filters\">\n        <NumberRangeFilter :filter=\"filter\" v-slot=\"{ filter }\">\n          <BasePriceFilterLabel\n            :filter=\"filter\"\n            format=\"$i\"\n            lessThan=\"Less than {max}\"\n            fromTo=\"From {min} to {max}\"\n            from=\"More than {min}\"\n          />\n        </NumberRangeFilter>\n      </Filters>\n    </template>\n  </Facets>\n</template>\n\n<script>\nimport { BasePriceFilterLabel } from '@empathyco/x-components'\nimport { Filters, Facets, NumberRangeFilter } from '@empathyco/x-components/facets'\n\nexport default {\n  name: 'MyFacets',\n  components: {\n    Facets,\n    Filters,\n    NumberRangeFilter,\n    BasePriceFilterLabel,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAMA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;IAC7B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAyC;AAC/C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;AAKE;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;YACnC,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAE,KAAM,IAAG;kBACjC,KAAK,CAAC,QAAO;kBACb,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAI,KAAI,IAAG;sBAC5B,KAAK,CAAC,IAAG;AACX,sBAAE,KAAK,CAAC,MAAK,CAAA;AACnB,SAAC,CAAA,CAAA;AAED,QAAA,OAAO,MAAM;YACX,MAAM,UAAS,GAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAA,CAAA;YAExD,MAAM,WAAW,UAAU,CAAC,GAAG,CAAC,WAAU,IAAK;gBAC7C,IAAI,WAAY,KAAI,OAAO,EAAE;oBAC3B,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA,CAAA;AACH,iBAAA;qBAAO,IAAI,WAAU,KAAM,OAAO,EAAE;oBAClC,OAAO,CAAC,CAAC,YAAY,EAAE;AACrB,wBAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAa;wBACvC,MAAM,EAAE,KAAK,CAAC,MAAM;AACrB,qBAAA,CAAA,CAAA;AACH,iBAAA;AACA,gBAAA,OAAO,WAAU,CAAA;AACnB,aAAC,CAAA,CAAA;AAED,YAAA,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,sBAAqB,EAAG,EAAE,QAAQ,CAAA,CAAA;AAC9D,SAAA,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-rating-filter-label.vue2.js';
-import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, renderSlot } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -11,11 +11,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     max: _ctx.max
   }, {
     "filled-icon": withCtx(() => [
-      createCommentVNode("\n       @slot Filled icon content\n     "),
       renderSlot(_ctx.$slots, "rating-icon-filled")
     ]),
     "empty-icon": withCtx(() => [
-      createCommentVNode("\n       @slot Empty icon content\n     "),
       renderSlot(_ctx.$slots, "rating-icon-empty")
     ]),
     _: 3

package/js/components/filters/labels/base-rating-filter-label.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;AAIyB,IAAA,aAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,2CAAA,CAAA;AAEzB,MAAAC,UAAA,CAAU,IAGjB,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;AAC+B,IAAA,YAAA,EAAAF,OAAA,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,0CAAA,CAAA;AAZvC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","value","_renderSlot"],"mappings":";;;;;gCACEA,gBAaa,CAAA,YAAA,CAAA,CAAA;AAb6B,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,qBAAA,EAAA;AAAA,IAAE,KAAOC,EAAAA,uBAAAA;AAAAA,IAAQ,WAAQ,EAAA,cAAA;AAAA,IAAA,KAAA,EAAA,IAAA,CAAA,KAAA;AAC9E,IAAA,GAAA,EAAA,IAAA,CAAA,GAAA;AAAA,GAAA,EAAA;;AAMA,MAAAC,UAAA,CAAU,IAIc,CAAA,MAAA,EAAA,oBAAA,CAAA;AAAA,KAAA,CAAA;;AAZvC,MAAAA,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,mBAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/filters/labels/base-rating-filter-label.vue2.js

@@ -9,7 +9,7 @@ import BaseRating from '../../base-rating.vue.js';
  */
 var _sfc_main = defineComponent({
     components: {
-        BaseRating
+        BaseRating,
     },
     props: {
         /**
@@ -19,7 +19,7 @@ var _sfc_main = defineComponent({
          */
         filter: {
             type: Object,
-            required: true
+            required: true,
         },
         /**
          * Maximum number of elements to paint.
@@ -28,8 +28,8 @@ var _sfc_main = defineComponent({
          */
         max: {
             type: Number,
-            default: 5
-        }
+            default: 5,
+        },
     },
     setup(props) {
         /**
@@ -40,13 +40,13 @@ var _sfc_main = defineComponent({
          * @internal
          */
         const value = computed(() => {
-            const x = parseFloat(props.filter.label) ?? 0;
+            const x = Number.parseFloat(props.filter.label) ?? 0;
             return Number.isNaN(x) ? 0 : x;
         });
         return {
-            value
+            value,
         };
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/filters/labels/base-rating-filter-label.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-rating-filter-label.vue2.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\n  import { BooleanFilter } from '@empathyco/x-types';\n  import { computed, defineComponent, PropType } from 'vue';\n  import BaseRating from '../../base-rating.vue';\n\n  /**\n   * Renders a label for a rating filter, allowing to override the elements used to paint\n   * the rating.\n   *\n   * @public\n   */\n  export default defineComponent({\n    components: {\n      BaseRating\n    },\n    props: {\n      /**\n       * The filter data to render.\n       *\n       * @public\n       */\n      filter: {\n        type: Object as PropType<BooleanFilter>,\n        required: true\n      },\n      /**\n       * Maximum number of elements to paint.\n       *\n       * @public\n       */\n      max: {\n        type: Number,\n        default: 5\n      }\n    },\n    setup(props) {\n      /**\n       * Converts the label string into a number.\n       *\n       * @returns The label as number or 0 if it is not a valid number.\n       *\n       * @internal\n       */\n      const value = computed<number>(() => {\n        const x = parseFloat(props.filter.label) ?? 0;\n        return Number.isNaN(x) ? 0 : x;\n      });\n\n      return {\n        value\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":[],"mappings":";;;AAsBE;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAA;AACX,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;AACnC,YAAA,MAAM,CAAA,GAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAE,IAAG,CAAC,CAAA;AAC7C,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAE,GAAE,CAAE,GAAE,CAAC,CAAA;AAChC,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,KAAI;SACL,CAAA;KACH;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"base-rating-filter-label.vue2.js","sources":["../../../../../src/components/filters/labels/base-rating-filter-label.vue"],"sourcesContent":["<template>\n  <BaseRating class=\"x-rating-filter-label\" data-test=\"rating-label\" :value=\"value\" :max=\"max\">\n    <template #filled-icon>\n      <!--\n       @slot Filled icon content\n     -->\n      <slot name=\"rating-icon-filled\" />\n    </template>\n    <template #empty-icon>\n      <!--\n       @slot Empty icon content\n     -->\n      <slot name=\"rating-icon-empty\" />\n    </template>\n  </BaseRating>\n</template>\n\n<script lang=\"ts\">\nimport type { BooleanFilter } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport BaseRating from '../../base-rating.vue'\n\n/**\n * Renders a label for a rating filter, allowing to override the elements used to paint\n * the rating.\n *\n * @public\n */\nexport default defineComponent({\n  components: {\n    BaseRating,\n  },\n  props: {\n    /**\n     * The filter data to render.\n     *\n     * @public\n     */\n    filter: {\n      type: Object as PropType<BooleanFilter>,\n      required: true,\n    },\n    /**\n     * Maximum number of elements to paint.\n     *\n     * @public\n     */\n    max: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Converts the label string into a number.\n     *\n     * @returns The label as number or 0 if it is not a valid number.\n     *\n     * @internal\n     */\n    const value = computed<number>(() => {\n      const x = Number.parseFloat(props.filter.label) ?? 0\n      return Number.isNaN(x) ? 0 : x\n    })\n\n    return {\n      value,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Example\n\nRenders a label for a rating filter, allowing to override the elements used to paint the rating. The\nfilter label must be a valid number string. For example: '3', '2.5', '0.25'\n\n### Basic usage\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" />\n```\n\n### Customizing color\n\nIts possible to change the default color directly with color CSS attribute. For more elaborated\nstyles it's possible to style the inner svg icons.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" style=\"color: gold\" />\n```\n\n### Customizing its contents\n\nThe `max` prop can be used to set the max rating number. It will render as many icons as the this\n`max` value.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\" />\n```\n\nThe default icons can be changed using the `rating-icon-filled` and `rating-icon-empty` icons, to\nrepresent the filled empty and empty icon in the rating component.\n\n```vue\n<BaseRatingFilterLabel :filter=\"filter\" :max=\"max\">\n  <template #rating-icon-filled>♥</template>\n  <template #rating-icon-empty>♡</template>\n</BaseRatingFilterLabel>\n```\n</docs>\n"],"names":[],"mappings":";;;AAuBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,KAAM,GAAE,QAAQ,CAAS,MAAM;AACnC,YAAA,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA,IAAK,CAAA,CAAA;AACnD,YAAA,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA,GAAI,CAAA,GAAI,CAAA,CAAA;AAC/B,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;SACP,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/components/global-x-bus.vue.js

@@ -12,8 +12,8 @@ var _sfc_main = defineComponent({
     props: {
         listeners: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     setup(props) {
         const xBus = useXBus();
@@ -27,7 +27,7 @@ var _sfc_main = defineComponent({
             });
         });
         return () => '';
-    }
+    },
 });
 
 export { _sfc_main as default };

package/js/components/global-x-bus.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"global-x-bus.vue.js","sources":["../../../src/components/global-x-bus.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { XEventListeners } from '../x-installer/api/api.types';\n  import { XEvent } from '../wiring/events.types';\n  import { useXBus } from '../composables/use-x-bus';\n\n  /**\n   * This component helps to subscribe to any {@link XEvent} with custom callbacks using Vue\n   * listeners API.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'GlobalXBus',\n    props: {\n      listeners: {\n        type: Object as PropType<XEventListeners>,\n        required: true\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * Handles a subscription to all the events provided in the listeners with the function that\n       * will execute the callback.\n       */\n      Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {\n        xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {\n          callback(eventPayload as never, metadata);\n        });\n      });\n\n      return () => '';\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no own events, but you can subscribe to any X Event using Vue listeners\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to facilitate listening to any X\nEvent by using the prop `listeners`\n\n```vue\n<template>\n  <GlobalXBus :listeners=\"{ UserAcceptedAQuery: printQuery }\" />\n</template>\n\n<script>\n  import { GlobalXBus } from '@empathyco/x-components';\n  export default {\n    name: 'GlobalXBusTest',\n    components: {\n      GlobalXBus\n    },\n    methods: {\n      printQuery(query, metadata) {\n        console.log('My new query is:', query);\n        console.log('And has been triggered by this DOM element:', metadata.target);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAME;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;AAGE;AACF,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK;AACpF,YAAA,IAAI,CAAC,EAAE,CAAC,SAAmB,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAO,EAAG,KAAK;AAC3E,gBAAA,QAAQ,CAAC,YAAqB,EAAE,QAAQ,CAAC,CAAA;AAC3C,aAAC,CAAC,CAAA;AACJ,SAAC,CAAC,CAAA;AAEF,QAAA,OAAO,MAAM,EAAE,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}
+{"version":3,"file":"global-x-bus.vue.js","sources":["../../../src/components/global-x-bus.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEvent } from '../wiring/events.types'\nimport type { XEventListeners } from '../x-installer/api/api.types'\nimport { defineComponent } from 'vue'\nimport { useXBus } from '../composables/use-x-bus'\n\n/**\n * This component helps to subscribe to any {@link XEvent} with custom callbacks using Vue\n * listeners API.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'GlobalXBus',\n  props: {\n    listeners: {\n      type: Object as PropType<XEventListeners>,\n      required: true,\n    },\n  },\n  setup(props) {\n    const xBus = useXBus()\n\n    /**\n     * Handles a subscription to all the events provided in the listeners with the function that\n     * will execute the callback.\n     */\n    Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {\n      xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {\n        callback(eventPayload as never, metadata)\n      })\n    })\n\n    return () => ''\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no own events, but you can subscribe to any X Event using Vue listeners\n\n## See it in action\n\nThis component does not render anything. Its only responsibility is to facilitate listening to any X\nEvent by using the prop `listeners`\n\n```vue\n<template>\n  <GlobalXBus :listeners=\"{ UserAcceptedAQuery: printQuery }\" />\n</template>\n\n<script>\nimport { GlobalXBus } from '@empathyco/x-components'\nexport default {\n  name: 'GlobalXBusTest',\n  components: {\n    GlobalXBus,\n  },\n  methods: {\n    printQuery(query, metadata) {\n      console.log('My new query is:', query)\n      console.log('And has been triggered by this DOM element:', metadata.target)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAOA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,KAAK,EAAE;AACL,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAC,CAAA;AAErB;;;AAGE;AACF,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,SAA4B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK;AACpF,YAAA,IAAI,CAAC,EAAE,CAAC,SAAmB,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,YAAY,EAAE,QAAO,EAAG,KAAK;AAC3E,gBAAA,QAAQ,CAAC,YAAqB,EAAE,QAAQ,CAAA,CAAA;AAC1C,aAAC,CAAA,CAAA;AACH,SAAC,CAAA,CAAA;AAED,QAAA,OAAO,MAAM,EAAC,CAAA;KACf;AACF,CAAA,CAAA;;;;"}

package/js/components/highlight.vue.js

@@ -14,21 +14,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     [
       _ctx.matchParts.start ? (openBlock(), createElementBlock("span", {
         key: 0,
-        textContent: toDisplayString(_ctx.matchParts.start),
         class: "x-highlight__text",
-        "data-test": "highlight-start"
+        "data-test": "highlight-start",
+        textContent: toDisplayString(_ctx.matchParts.start)
       }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
       _ctx.hasMatch ? (openBlock(), createElementBlock("span", {
         key: 1,
-        textContent: toDisplayString(_ctx.matchParts.match),
         class: normalizeClass(["x-highlight__text x-highlight-text-match", _ctx.matchingPartClass]),
-        "data-test": "matching-part"
+        "data-test": "matching-part",
+        textContent: toDisplayString(_ctx.matchParts.match)
       }, null, 10, _hoisted_2)) : createCommentVNode("v-if", true),
       _ctx.matchParts.end ? (openBlock(), createElementBlock("span", {
         key: 2,
-        textContent: toDisplayString(_ctx.matchParts.end),
         class: "x-highlight__text",
-        "data-test": "highlight-end"
+        "data-test": "highlight-end",
+        textContent: toDisplayString(_ctx.matchParts.end)
       }, null, 8, _hoisted_3)) : createCommentVNode("v-if", true)
     ],
     2

package/js/components/highlight.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      v-text=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      v-text=\"matchParts.match\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      v-text=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent } from 'vue';\n  import { normalizeString } from '../utils';\n\n  /**\n   * Highlights the given part of the text. The component is smart enough to do matches\n   * between special characters like tilde, cedilla, eñe, capital letters...\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Highlight',\n    props: {\n      /** The text to highlight some part of it. */\n      text: {\n        type: String,\n        default: ''\n      },\n      /** The part of the text to be highlighted. */\n      highlight: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the `text` string contains the `highlight` string. */\n      matchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n      noMatchClass: {\n        type: String,\n        default: ''\n      },\n      /** CSS Class to add to the matching text. */\n      matchingPartClass: {\n        type: String,\n        default: ''\n      }\n    },\n    setup(props, { slots }) {\n      /**\n       * Splits the label in three parts based on two indexes.\n       *\n       * @param label - The string that will be divided in three parts.\n       * @param start - The first index that the label will be divided by.\n       * @param end - The second index that the label will be divided by.\n       *\n       * @returns The three parts of the divided label.\n       */\n      function splitAt(label: string, start: number, end: number) {\n        return {\n          start: label.substring(0, start),\n          match: label.substring(start, end),\n          end: label.substring(end)\n        };\n      }\n\n      /**\n       * Splits the text to highlight into 3 parts: a starting part, the matching part\n       * and the ending part. If there is no match between the text and the highlight, the `start`\n       * property will contain the whole text.\n       *\n       * @returns An object containing the different parts of the text.\n       */\n      const matchParts = computed(() => {\n        const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));\n        return matcherIndex !== -1 && props.highlight\n          ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n          : { start: props.text, match: '', end: '' };\n      });\n\n      /**\n       * Checks if the normalized suggestion query matches with the module's query, so it has a\n       * matching part.\n       *\n       * @returns True if there is a match between the text and the highlight strings.\n       */\n      const hasMatch = computed(() => !!matchParts.value.match);\n\n      /**\n       * CSS classes to add depending on the component state.\n       *\n       * @remarks\n       * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n       * `[matchClass]`: When there is a match between the text and\n       * the part to highlight.\n       * `[noMatchClass]`: when there is no match between the text to highlight.\n       * @returns The CSS classes.\n       */\n      const dynamicCSSClasses = computed(() => {\n        const classes = {\n          'x-highlight--has-match': hasMatch.value,\n          'x-highlight-text': hasMatch.value,\n          [props.matchClass]: hasMatch.value\n        };\n        if (props.noMatchClass) {\n          classes[props.noMatchClass] = !hasMatch.value;\n        }\n        return classes;\n      });\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          text: props.text,\n          hasMatch: hasMatch.value,\n          ...matchParts.value\n        };\n        return slots.default?.(slotProps)[0];\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: ''\n      };\n    }\n  };\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\n  import { Highlight } from '@empathyco/x-components';\n\n  export default {\n    name: 'HighlightDemo',\n    components: {\n      Highlight\n    },\n    data() {\n      return {\n        highlight: 'entran'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["dynamicCSSClasses","matchParts","_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode","_normalizeClass"],"mappings":";;;;AAAA,MAAA,UAAA,GAAA,CAAA,aAAA,CAAA,CAAA;;;SACa,WADb,CAAA,IAAA,EAAA,MAAA,EACc,QAAsBA,MAAiB,EAAA,KAAA,EAAA,QAAA,EAAA;;;;aAEzCC,cAAgB,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,KAAA;;AAH5B,MAAA,IAAA,CAAA,UAAA,CAAA,KAAA,IAAAC,SAAA,EAAA,EAIMC,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QACL,aAAUG,eAAiB,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,QAAA,KAAA,EAAA,mBAAA;AANjC,QAAA,WAAA,EAAA,iBAAA;AAAA,kBASoB,UADhB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CARJ,yBAUMF,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QAEL,aAAUG,eAAe,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,QAb/B,KAAA,EAAAE,cAAA,CAAA,CAAA,0CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAAA,mBAgB0B,UADtB,CAAA,IAAAD,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CAfJ,+BAiBMF,kBAAQF,CAAAA,MAAAA,EAAAA;AAAAA,QACR,GAAK,EAAA,CAAA;AAAA,QACL,aAAUG,eAAe,CAAA,IAAA,CAAA,UAAA,CAAA,GAAA,CAAA;AAAA,QAAA,KAAA,EAAA,mBAAA;AAnB/B,QAAA,WAAA,EAAA,eAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;"}
+{"version":3,"file":"highlight.vue.js","sources":["../../../src/components/highlight.vue"],"sourcesContent":["<template>\n  <span class=\"x-highlight\" :class=\"dynamicCSSClasses\">\n    <span\n      v-if=\"matchParts.start\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-start\"\n      v-text=\"matchParts.start\"\n    />\n    <span\n      v-if=\"hasMatch\"\n      class=\"x-highlight__text x-highlight-text-match\"\n      :class=\"matchingPartClass\"\n      data-test=\"matching-part\"\n      v-text=\"matchParts.match\"\n    />\n    <span\n      v-if=\"matchParts.end\"\n      class=\"x-highlight__text\"\n      data-test=\"highlight-end\"\n      v-text=\"matchParts.end\"\n    />\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { normalizeString } from '../utils'\n\n/**\n * Highlights the given part of the text. The component is smart enough to do matches\n * between special characters like tilde, cedilla, eñe, capital letters...\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Highlight',\n  props: {\n    /** The text to highlight some part of it. */\n    text: {\n      type: String,\n      default: '',\n    },\n    /** The part of the text to be highlighted. */\n    highlight: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the `text` string contains the `highlight` string. */\n    matchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */\n    noMatchClass: {\n      type: String,\n      default: '',\n    },\n    /** CSS Class to add to the matching text. */\n    matchingPartClass: {\n      type: String,\n      default: '',\n    },\n  },\n  setup(props, { slots }) {\n    /**\n     * Splits the label in three parts based on two indexes.\n     *\n     * @param label - The string that will be divided in three parts.\n     * @param start - The first index that the label will be divided by.\n     * @param end - The second index that the label will be divided by.\n     *\n     * @returns The three parts of the divided label.\n     */\n    function splitAt(label: string, start: number, end: number) {\n      return {\n        start: label.substring(0, start),\n        match: label.substring(start, end),\n        end: label.substring(end),\n      }\n    }\n\n    /**\n     * Splits the text to highlight into 3 parts: a starting part, the matching part\n     * and the ending part. If there is no match between the text and the highlight, the `start`\n     * property will contain the whole text.\n     *\n     * @returns An object containing the different parts of the text.\n     */\n    const matchParts = computed(() => {\n      const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight))\n      return matcherIndex !== -1 && props.highlight\n        ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)\n        : { start: props.text, match: '', end: '' }\n    })\n\n    /**\n     * Checks if the normalized suggestion query matches with the module's query, so it has a\n     * matching part.\n     *\n     * @returns True if there is a match between the text and the highlight strings.\n     */\n    const hasMatch = computed(() => !!matchParts.value.match)\n\n    /**\n     * CSS classes to add depending on the component state.\n     *\n     * @remarks\n     * `x-highlight--has-match`: When there is a match between the text and the part to highlight.\n     * `[matchClass]`: When there is a match between the text and\n     * the part to highlight.\n     * `[noMatchClass]`: when there is no match between the text to highlight.\n     * @returns The CSS classes.\n     */\n    const dynamicCSSClasses = computed(() => {\n      const classes = {\n        'x-highlight--has-match': hasMatch.value,\n        'x-highlight-text': hasMatch.value,\n        [props.matchClass]: hasMatch.value,\n      }\n      if (props.noMatchClass) {\n        classes[props.noMatchClass] = !hasMatch.value\n      }\n      return classes\n    })\n\n    /**\n     * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n     * first `vNode` to avoid Fragments and Text root nodes.\n     *\n     * @remarks `slotProps` must be values without Vue reactivity and located inside the\n     * render-function to update the binding data properly.\n     *\n     * @returns The root `vNode` of the `default` slot.\n     */\n    function renderDefaultSlot() {\n      const slotProps = {\n        text: props.text,\n        hasMatch: hasMatch.value,\n        ...matchParts.value,\n      }\n      return slots.default?.(slotProps)[0]\n    }\n\n    /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n    const componentProps = { hasMatch, matchParts, dynamicCSSClasses }\n    return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\nHere you have a basic example of how the highlight component is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight :highlight=\"highlight\" text=\"milanesa\" />\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: '',\n    }\n  },\n}\n</script>\n```\n\n### Customise the layout\n\nThis component allows to customise the whole layout. Be careful as due to Vue 2 limitations you can\nonly render a single root element.\n\n```vue live\n<template>\n  <div>\n    <input v-model=\"highlight\" />\n    <Highlight\n      :highlight=\"highlight\"\n      text=\"Entraña\"\n      #default=\"{ hasMatch, start, match, end, text }\"\n    >\n      <span class=\"custom-layout\" v-if=\"hasMatch\">\n        <strong>{{ start }}</strong>\n        {{ match }}\n        <strong>{{ end }}</strong>\n      </span>\n      <span v-else>{{ text }}</span>\n    </Highlight>\n  </div>\n</template>\n\n<script>\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'HighlightDemo',\n  components: {\n    Highlight,\n  },\n  data() {\n    return {\n      highlight: 'entran',\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["dynamicCSSClasses","matchParts","_openBlock","_createElementBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;;AAAA,MAAA,UAAA,GAAA,CAAA,aAAA,CAAA,CAAA;;;SACa,WADb,CAAA,IAAA,EAAA,MAAA,EACc,QAAsBA,MAAiB,EAAA,KAAA,EAAA,QAAA,EAAA;;;;aAEzCC,cAAgB,CAAA,CAAA,aAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,KAAA;;AAH5B,MAAA,IAAA,CAAA,UAAA,CAAA,KAAA,IAAAC,SAAA,EAI+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,QACzB,GAAA,EAAA,CAAA;AAAA,QALN,KAAA,EAAA,mBAAA;AAAA,QAAA,WAAA,EAAA,iBAAA;AAAA,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,kBASoB,UADhB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CARJ,QAUY,IAAAH,SAAA,EAAA,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,QAEN,GAAA,EAAA,CAAA;AAAA,QAZN,sBAaM,CAAwB,0CAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,CAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAb9B,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,KAAA,CAAA;AAAA,mBAgB0B,UADtB,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,MAAA,IAAA,CAfJ,6BAiB+B,EAAAF,kBAAA,CAAA,MAAA,EAAA;AAAA,QACzB,GAAA,EAAA,CAAA;AAAA,QAlBN,KAAA,EAAA,mBAAA;AAAA,QAAA,WAAA,EAAA,eAAA;AAAA,QAAA,WAAA,EAAAC,eAAA,CAAA,IAAA,CAAA,UAAA,CAAA,GAAA,CAAA;AAAA,OAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;;;;;;;;;;"}