@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/x-modules/facets/components/filters/editable-number-range-filter.vue3.js

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../../tools/inject-css.js';
 
-var css = ".x-editable-number-range-filter--error .x-editable-number-range-filter__input {\n  border-color: red;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/facets/components/filters/editable-number-range-filter.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-editable-number-range-filter--error .x-editable-number-range-filter__input[data-v-b0178d47]{border-color:red}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=editable-number-range-filter.vue3.js.map

package/js/x-modules/facets/components/filters/editable-number-range-filter.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-number-range-filter.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"editable-number-range-filter.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue.js

@@ -1,174 +1,78 @@
-import script from './hierarchical-filter.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './hierarchical-filter.vue2.js';
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeClass, createTextVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "div",
-    {
-      staticClass: "x-hierarchical-filter-container",
-      attrs: { "data-test": "hierarchical-filter-container" },
-    },
-    [
-      _c("RenderlessFilter", {
-        staticClass: "x-hierarchical-filter",
-        class: _vm.cssClasses,
-        attrs: { clickEvents: _vm._clickEvents, filter: _vm.filter },
-        scopedSlots: _vm._u(
-          [
-            {
-              key: "default",
-              fn: function (ref) {
-                var filter = ref.filter;
-                var clickFilter = ref.clickFilter;
-                var cssClasses = ref.cssClasses;
-                var isDisabled = ref.isDisabled;
-                return [
-                  _vm._t(
-                    "default",
-                    function () {
-                      return [
-                        _c(
-                          "button",
-                          {
-                            class: [cssClasses, _vm.filterItemClass],
-                            attrs: {
-                              "aria-checked": filter.selected.toString(),
-                              disabled: isDisabled,
-                              "data-test": "filter",
-                              role: "checkbox",
-                            },
-                            on: { click: clickFilter },
-                          },
-                          [
-                            _vm._t(
-                              "label",
-                              function () {
-                                return [_vm._v(_vm._s(filter.label))]
-                              },
-                              { filter: filter }
-                            ),
-                          ],
-                          2
-                        ),
-                      ]
-                    },
-                    null,
-                    {
-                      filter: filter,
-                      clickFilter: clickFilter,
-                      cssClasses: cssClasses,
-                      isDisabled: isDisabled,
-                    }
-                  ),
-                ]
-              },
-            },
-          ],
-          null,
-          true
-        ),
-      }),
-      _c("FiltersList", {
-        staticClass: "x-hierarchical-filter__children",
-        class: _vm.childrenFiltersClass,
-        attrs: {
-          animation: _vm.childrenAnimation,
-          filters: _vm.renderedChildrenFilters,
-          "parent-id": _vm.filter.id,
-          "data-test": "children-filters",
-        },
-        scopedSlots: _vm._u([
-          {
-            key: "default",
-            fn: function (ref) {
-              var childFilter = ref.filter;
-              return [
-                _c("HierarchicalFilter", {
-                  attrs: {
-                    childrenAnimation: _vm.childrenAnimation,
-                    filter: childFilter,
-                    clickEvents: _vm.getChildFilterClickEvents(childFilter),
-                    childrenFiltersClass: _vm.childrenFiltersClass,
-                    filterItemClass: _vm.filterItemClass,
-                  },
-                  scopedSlots: _vm._u(
-                    [
-                      {
-                        key: "default",
-                        fn: function (ref) {
-                          var filter = ref.filter;
-                          var clickFilter = ref.clickFilter;
-                          var cssClasses = ref.cssClasses;
-                          var isDisabled = ref.isDisabled;
-                          return [
-                            _vm._t("default", null, null, {
-                              filter: filter,
-                              clickFilter: clickFilter,
-                              cssClasses: cssClasses,
-                              isDisabled: isDisabled,
-                            }),
-                          ]
-                        },
-                      },
-                      {
-                        key: "label",
-                        fn: function (ref) {
-                          var filter = ref.filter;
-                          return [_vm._t("label", null, { filter: filter })]
-                        },
-                      },
-                    ],
-                    null,
-                    true
-                  ),
-                }),
-              ]
-            },
-          },
-        ]),
-      }),
-    ],
-    1
-  )
+const _hoisted_1 = {
+  class: "x-hierarchical-filter-container",
+  "data-test": "hierarchical-filter-container"
 };
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
+const _hoisted_2 = ["onClick", "aria-checked", "disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RenderlessFilter = resolveComponent("RenderlessFilter");
+  const _component_HierarchicalFilter = resolveComponent("HierarchicalFilter", true);
+  const _component_FiltersList = resolveComponent("FiltersList");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_RenderlessFilter, {
+      filter: _ctx.filter,
+      clickEvents: _ctx.innerClickEvents,
+      cssClasses: _ctx.innerCssClasses
+    }, {
+      default: withCtx(({ filter, clickFilter, cssClasses, isDisabled }) => [
+        createCommentVNode("\n        @slot The content to render inside the button.\n            @binding {Filter} filter - The filter data.\n            @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n            @binding {VueCssClasses} cssClasses - The CSS classes.\n            @binding {boolean} isDisabled - Flag determining the disabled state.\n      "),
+        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ filter, clickFilter, cssClasses, isDisabled })), () => [
+          createElementVNode("button", {
+            onClick: clickFilter,
+            "aria-checked": filter.selected.toString(),
+            class: normalizeClass([cssClasses, _ctx.filterItemClass]),
+            disabled: isDisabled,
+            "data-test": "filter",
+            role: "checkbox"
+          }, [
+            createCommentVNode("\n            @slot The content to render inside the button.\n               @binding {Filter} filter - The filter data.\n          "),
+            renderSlot(_ctx.$slots, "label", { filter }, () => [
+              createTextVNode(
+                toDisplayString(filter.label),
+                1
+                /* TEXT */
+              )
+            ])
+          ], 10, _hoisted_2)
+        ])
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["filter", "clickEvents", "cssClasses"]),
+    createVNode(_component_FiltersList, {
+      animation: _ctx.childrenAnimation,
+      filters: _ctx.renderedChildrenFilters,
+      "parent-id": _ctx.filter.id,
+      class: normalizeClass(["x-hierarchical-filter__children", _ctx.childrenFiltersClass]),
+      "data-test": "children-filters"
+    }, {
+      default: withCtx(({ filter: childFilter }) => [
+        createVNode(_component_HierarchicalFilter, {
+          childrenAnimation: _ctx.childrenAnimation,
+          filter: childFilter,
+          clickEvents: _ctx.getChildFilterClickEvents(childFilter),
+          childrenFiltersClass: _ctx.childrenFiltersClass,
+          filterItemClass: _ctx.filterItemClass
+        }, {
+          default: withCtx(({ filter, clickFilter, cssClasses, isDisabled }) => [
+            renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ filter, clickFilter, cssClasses, isDisabled })))
+          ]),
+          label: withCtx(({ filter }) => [
+            renderSlot(_ctx.$slots, "label", { filter })
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, 1032, ["childrenAnimation", "filter", "clickEvents", "childrenFiltersClass", "filterItemClass"])
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["animation", "filters", "parent-id", "class"])
+  ]);
+}
+var hierarchicalFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { __vue_component__ as default };
+export { hierarchicalFilter as default };
 //# sourceMappingURL=hierarchical-filter.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n  <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n    <RenderlessFilter\n      v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n      :class=\"cssClasses\"\n      :clickEvents=\"_clickEvents\"\n      :filter=\"filter\"\n      class=\"x-hierarchical-filter\"\n    >\n      <!--\n        @slot The content to render inside the button.\n            @binding {Filter} filter - The filter data.\n            @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n            @binding {VueCssClasses} cssClasses - The CSS classes.\n            @binding {boolean} isDisabled - Flag determining the disabled state.\n      -->\n      <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n        <button\n          @click=\"clickFilter\"\n          :aria-checked=\"filter.selected.toString()\"\n          :class=\"[cssClasses, filterItemClass]\"\n          :disabled=\"isDisabled\"\n          data-test=\"filter\"\n          role=\"checkbox\"\n        >\n          <!--\n            @slot The content to render inside the button.\n               @binding {Filter} filter - The filter data.\n          -->\n          <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n        </button>\n      </slot>\n    </RenderlessFilter>\n    <FiltersList\n      v-slot=\"{ filter: childFilter }\"\n      :animation=\"childrenAnimation\"\n      :filters=\"renderedChildrenFilters\"\n      :parent-id=\"filter.id\"\n      class=\"x-hierarchical-filter__children\"\n      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\n      >\n        <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n          <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n        </template>\n        <template #label=\"{ filter }\">\n          <slot name=\"label\" :filter=\"filter\" />\n        </template>\n      </HierarchicalFilter>\n    </FiltersList>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import {\n    Filter,\n    HierarchicalFilter as HierarchicalFilterModel,\n    isHierarchicalFilter\n  } from '@empathyco/x-types';\n  import { isObject } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    name: 'HierarchicalFilter',\n    components: { FiltersList, RenderlessFilter },\n    mixins: [\n      xComponentMixin(facetsXModule),\n      dynamicPropsMixin(['childrenFiltersClass', 'filterItemClass'])\n    ]\n  })\n  export default class HierarchicalFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: HierarchicalFilterModel;\n\n    /** The animation component to use for the children filters. */\n    @Prop()\n    public childrenAnimation?: Vue | string;\n\n    /**\n     * Additional events, with their payload, to emit when the filter is clicked.\n     *\n     * @public\n     */\n    @Prop()\n    public clickEvents!: Partial<XEventsTypes>;\n\n    /**\n     * The {@link XEventsTypes} to emit.\n     *\n     * @returns The events to emit when clicked.\n     * @internal\n     */\n    protected get _clickEvents(): Partial<XEventsTypes> {\n      return {\n        UserClickedAHierarchicalFilter: this.filter,\n        ...this.clickEvents\n      };\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     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n        'x-hierarchical-filter--is-selected': this.filter.selected,\n        'x-facet-filter--is-partially-selected': this.isPartiallySelected\n      };\n    }\n\n    /**\n     * Gets the child filter click events, converting the payload of the events that have a\n     * {@link HierarchicalFilter} as payload to the corresponding child filter.\n     *\n     * @param childFilter - The child filter.\n     * @returns The events to emit when clicking a child.\n     * @internal\n     */\n    protected getChildFilterClickEvents(\n      childFilter: HierarchicalFilterModel\n    ): Partial<XEventsTypes> {\n      return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n        return {\n          ...clickEvents,\n          [event]:\n            isObject(payload) &&\n            isHierarchicalFilter(payload as unknown as Filter) &&\n            childFilter !== (payload as unknown as HierarchicalFilterModel)\n              ? childFilter\n              : payload\n        };\n      }, {} as Partial<XEventsTypes>);\n    }\n\n    /**\n     * Returns if the filter is partially selected, which means having more than one child filter\n     * selected, but not every of them, or having at least one child filter partially selected.\n     *\n     * @returns True if the filter is partially selected. False otherwise.\n     * @internal\n     */\n    protected get isPartiallySelected(): boolean {\n      return this.isFilterPartiallySelected(this.filter);\n    }\n\n    /**\n     * List of filters to render, in case that the children's array\n     * is empty it will return an empty array instead of inject the ones from the parent.\n     *\n     * @returns A list of filters.\n     * @internal\n     */\n    protected get renderedChildrenFilters(): Filter[] {\n      return this.filter.children ?? [];\n    }\n\n    protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n      const selectedChildren = filter.children?.filter(filter => filter.selected);\n      const filterChildrenLength = filter.children?.length ?? 0;\n      return (\n        !!selectedChildren &&\n        ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n          // eslint-disable-next-line @typescript-eslint/unbound-method\n          selectedChildren.some(this.isFilterPartiallySelected))\n      );\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](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, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](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, using the `filter` prop as its payload.\n  filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n  <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n    <label :class=\"slotCSSClasses\">\n      <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n      {{ filter.label }}\n    </label>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\">\n    <template #label :filter=\"filter\">\n      <span class=\"custom-class\">{{ filter.label }}</span>\n    </template>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"hierarchical-filter.vue.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n  <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n    <RenderlessFilter\n      v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n      :filter=\"filter\"\n      :clickEvents=\"innerClickEvents\"\n      :cssClasses=\"innerCssClasses\"\n    >\n      <!--\n        @slot The content to render inside the button.\n            @binding {Filter} filter - The filter data.\n            @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n            @binding {VueCssClasses} cssClasses - The CSS classes.\n            @binding {boolean} isDisabled - Flag determining the disabled state.\n      -->\n      <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n        <button\n          @click=\"clickFilter\"\n          :aria-checked=\"filter.selected.toString()\"\n          :class=\"[cssClasses, filterItemClass]\"\n          :disabled=\"isDisabled\"\n          data-test=\"filter\"\n          role=\"checkbox\"\n        >\n          <!--\n            @slot The content to render inside the button.\n               @binding {Filter} filter - The filter data.\n          -->\n          <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n        </button>\n      </slot>\n    </RenderlessFilter>\n    <FiltersList\n      v-slot=\"{ filter: childFilter }\"\n      :animation=\"childrenAnimation\"\n      :filters=\"renderedChildrenFilters\"\n      :parent-id=\"filter.id\"\n      class=\"x-hierarchical-filter__children\"\n      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\n      >\n        <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n          <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n        </template>\n        <template #label=\"{ filter }\">\n          <slot name=\"label\" :filter=\"filter\" />\n        </template>\n      </HierarchicalFilter>\n    </FiltersList>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import {\n    Filter,\n    HierarchicalFilter as HierarchicalFilterModel,\n    isHierarchicalFilter\n  } from '@empathyco/x-types';\n  import { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\n        );\n      };\n\n      /**\n       * Returns if the filter is partially selected, which means having more than one child filter\n       * selected, but not every of them, or having at least one child filter partially selected.\n       *\n       * @returns True if the filter is partially selected. False otherwise.\n       * @internal\n       */\n      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\n\n      /**\n       * Dynamic CSS classes to apply to the component.\n       *\n       * @returns The dynamic CSS classes to apply to the component.\n       * @internal\n       */\n      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link HierarchicalFilter} as payload to the corresponding child filter.\n       *\n       * @param childFilter - The child filter.\n       * @returns The events to emit when clicking a child.\n       * @internal\n       */\n      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).reduce((clickEvents, [event, payload]) => {\n          return {\n            ...clickEvents,\n            [event]:\n              isObject(payload) &&\n              isHierarchicalFilter(payload as unknown as Filter) &&\n              childFilter !== (payload as unknown as HierarchicalFilterModel)\n                ? childFilter\n                : payload\n          };\n        }, {} as Partial<XEventsTypes>);\n      };\n\n      /**\n       * List of filters to render, in case that the children's array\n       * is empty it will return an empty array instead of inject the ones from the parent.\n       *\n       * @returns A list of filters.\n       * @internal\n       */\n      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](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, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](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, using the `filter` prop as its payload.\n  filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n  <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n    <label :class=\"slotCSSClasses\">\n      <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n      {{ filter.label }}\n    </label>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\">\n    <template #label :filter=\"filter\">\n      <span class=\"custom-class\">{{ filter.label }}</span>\n    </template>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createElementBlock","_createVNode","innerCssClasses","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_toDisplayString","childrenAnimation","renderedChildrenFilters","filter","getChildFilterClickEvents","filterItemClass"],"mappings":";;;;MAC+C,UAAU,GAAA;AAAA,EAAA,KAAA,EAAA,iCAAA;;;;;;;iCAAvDA,gBAuDM,CAAA,aAAA,CAAA,CAAA;AApDD,EAAA,OAAAC,SAAA,EAAc,EAAAC,kBAAA,CAAA,KAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,WAAA,CACH,2BAAkB,EAAA;AAAA,MAC7B,MAAYC,EAAAA,IAAAA,CAAAA,MAAAA;AAAAA,MAAAA,WAAAA,EAAAA,IAAAA,CAAAA,gBAAAA;AANnB,MAAA,UAAA,EAAA,IAAA,CAAA,eAAA;AAAA,KAAA,EAAA;AAeM,MAAA,OAAA,EAAAC,OAAA,CAeO,CA9Bb,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,KAAA;AAAA,QAAAC,kBAAA,CAgBQ,gXAaS,CAAA;AAAA,QAAAC,UAAA,CAZD,KAAE,MAAW,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,UAAAC,kBAAA,CACJ,QAAO,EAAA;AAAA,YACrB,OAnBX,EAAA,WAAA;AAAA,YAoBW,gBAAU,MAAU,CAAA,QAAA,CAAA,QAAA,EAAA;AAAA,YACrB,KAAkB,EAAAC,cAAA,CAAA,CAAA,UAAA,EAAA,IAAA,CAAA,eAAA,CAAA,CAAA;AAAA,YAClB,QAAK,EAAA,UAAA;AAAA,YAAA,WAAA,EAAA,QAAA;AAEL,YAAA,IAAA,EAAA,UAAA;AAAA,WAIA,EAAA;AAAA,YAAAL,kBAAA,CA5BV,sIA4B6D,CAAA;AAAA,YAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,EAAA,MAAA;;AA5B7D,gBAAAK,eAAA,CAAA,MAAA,CAAA,KAAA,CAAA;AAAA,gBAAA,CAAA;AAAA;AAAA,eAAA;AAAA,aAAA,CAAA;;AAAA,SAAA,CAAA;AAAA,OAAA,CAAA;AAgCI,MAAA,CAAA,EAAA,CAAA;AAAA;AAAA,KAAA,EAEG,GAAWC,CAAiB,QAAA,EAAA,aAAA,EAAA,YAAA,CAAA,CAAA;AAAA,IACnBC,WAAAA,CAAAA,sBAAAA,EAAAA;AAAAA,MACT,WAAS,IAAEC,CAAAA,iBAAAA;AAAAA,MACZ,OArCN,EAAA,IAAA,CAAA,uBAAA;AAAA,MAuCM,WAAU,EAAA,IAAA,CAAA,MAAA,CAAA,EAAA;AAAA,MAAA,KAAA,EAAAJ,cAAA,CAAA,CAAA,iCAAA,EAAA,IAAA,CAAA,oBAAA,CAAA,CAAA;AAvChB,MAAA,WAAA,EAAA,kBAAA;AAAA,KAAA,EAAA;AA0CS,MAAA,OAAA,EAAAN,OAAA,CAAA,CAAA,EAAiB,QAAEQ,WAAiB,EAAA,KAAA;AAAA,QAAAV,WAAA,CAC5B,6BAAW,EAAA;AAAA,UACnB,iBAAaa,EAAAA,IAAAA,CAAAA,iBAAAA;AAAAA,UACb,MAAA,EAAA,WAAA;AAAA,UACA,kBAAiBC,yBAAe,CAAA,WAAA,CAAA;AAAA,UAAA,oBAAA,EAAA,IAAA,CAAA,oBAAA;AAEtB,UAAA,eAAA,EAAO,IAAI,CAAA,eAAA;AAAA,SAAA,EAAA;;AAGX,YAAAV,UAAA,CAAK,KAAI,MAAM,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,MAAA,EAAA,WAAA,EAAA,UAAA,EAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;AAnDlC,YAAAF,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,CAAA;AAAA,WAAA,CAAA;;;AAAA,SAAA,EAAA,IAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,iBAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;"}

package/js/x-modules/facets/components/filters/hierarchical-filter.vue2.js

@@ -1,114 +1,120 @@
-import { __decorate } from 'tslib';
 import { isHierarchicalFilter } from '@empathyco/x-types';
 import { isObject } from '@empathyco/x-utils';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin.js';
-import { xComponentMixin } from '../../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
 import { facetsXModule } from '../../x-module.js';
-import __vue_component__ from '../lists/filters-list.vue.js';
-import __vue_component__$1 from './renderless-filter.vue.js';
+import FiltersList from '../lists/filters-list.vue.js';
+import { AnimationProp } from '../../../../types/animation-prop.js';
+import _sfc_main$1 from './renderless-filter.vue.js';
 
 /**
  * Renders a hierarchical filter recursively, emitting the needed events when clicked.
  *
  * @public
  */
-let HierarchicalFilter = class HierarchicalFilter extends Vue {
-    /**
-     * The {@link XEventsTypes} to emit.
-     *
-     * @returns The events to emit when clicked.
-     * @internal
-     */
-    get _clickEvents() {
-        return {
-            UserClickedAHierarchicalFilter: this.filter,
-            ...this.clickEvents
+var _sfc_main = defineComponent({
+    name: 'HierarchicalFilter',
+    xModule: facetsXModule.name,
+    components: { FiltersList, RenderlessFilter: _sfc_main$1 },
+    props: {
+        /** The filter data to render. */
+        filter: {
+            type: Object,
+            required: true
+        },
+        /** The animation component to use for the children filters. */
+        childrenAnimation: AnimationProp,
+        /**
+         * Additional events, with their payload, to emit when the filter is clicked.
+         *
+         * @public
+         */
+        clickEvents: Object,
+        /** Inheritance CSS classes. */
+        cssClasses: {
+            type: Array,
+            default: () => []
+        },
+        /** Class inherited by content element. */
+        childrenFiltersClass: String,
+        /** Class inherited by content element. */
+        filterItemClass: String
+    },
+    setup: function (props) {
+        /**
+         * The {@link XEventsTypes} to emit.
+         *
+         * @returns The events to emit when clicked.
+         * @internal
+         */
+        const innerClickEvents = computed(() => ({
+            UserClickedAHierarchicalFilter: props.filter,
+            ...props.clickEvents
+        }));
+        const isFilterPartiallySelected = (filter) => {
+            const selectedChildren = filter.children?.filter(filter => filter.selected);
+            const filterChildrenLength = filter.children?.length ?? 0;
+            return (!!selectedChildren &&
+                ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||
+                    // eslint-disable-next-line @typescript-eslint/unbound-method
+                    selectedChildren.some(isFilterPartiallySelected)));
         };
-    }
-    /**
-     * Dynamic CSS classes to apply to the component.
-     *
-     * @returns The dynamic CSS classes to apply to the component.
-     * @internal
-     */
-    get cssClasses() {
+        /**
+         * Returns if the filter is partially selected, which means having more than one child filter
+         * selected, but not every of them, or having at least one child filter partially selected.
+         *
+         * @returns True if the filter is partially selected. False otherwise.
+         * @internal
+         */
+        const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));
+        /**
+         * Dynamic CSS classes to apply to the component.
+         *
+         * @returns The dynamic CSS classes to apply to the component.
+         * @internal
+         */
+        const innerCssClasses = computed(() => [
+            'x-hierarchical-filter',
+            { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },
+            { 'x-hierarchical-filter--is-selected': props.filter.selected },
+            { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },
+            ...props.cssClasses
+        ]);
+        /**
+         * Gets the child filter click events, converting the payload of the events that have a
+         * {@link HierarchicalFilter} as payload to the corresponding child filter.
+         *
+         * @param childFilter - The child filter.
+         * @returns The events to emit when clicking a child.
+         * @internal
+         */
+        const getChildFilterClickEvents = (childFilter) => {
+            return Object.entries(innerClickEvents.value).reduce((clickEvents, [event, payload]) => {
+                return {
+                    ...clickEvents,
+                    [event]: isObject(payload) &&
+                        isHierarchicalFilter(payload) &&
+                        childFilter !== payload
+                        ? childFilter
+                        : payload
+                };
+            }, {});
+        };
+        /**
+         * List of filters to render, in case that the children's array
+         * is empty it will return an empty array instead of inject the ones from the parent.
+         *
+         * @returns A list of filters.
+         * @internal
+         */
+        const renderedChildrenFilters = computed(() => props.filter.children ?? []);
         return {
-            'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,
-            'x-hierarchical-filter--is-selected': this.filter.selected,
-            'x-facet-filter--is-partially-selected': this.isPartiallySelected
+            innerClickEvents,
+            innerCssClasses,
+            renderedChildrenFilters,
+            getChildFilterClickEvents
         };
     }
-    /**
-     * Gets the child filter click events, converting the payload of the events that have a
-     * {@link HierarchicalFilter} as payload to the corresponding child filter.
-     *
-     * @param childFilter - The child filter.
-     * @returns The events to emit when clicking a child.
-     * @internal
-     */
-    getChildFilterClickEvents(childFilter) {
-        return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {
-            return {
-                ...clickEvents,
-                [event]: isObject(payload) &&
-                    isHierarchicalFilter(payload) &&
-                    childFilter !== payload
-                    ? childFilter
-                    : payload
-            };
-        }, {});
-    }
-    /**
-     * Returns if the filter is partially selected, which means having more than one child filter
-     * selected, but not every of them, or having at least one child filter partially selected.
-     *
-     * @returns True if the filter is partially selected. False otherwise.
-     * @internal
-     */
-    get isPartiallySelected() {
-        return this.isFilterPartiallySelected(this.filter);
-    }
-    /**
-     * List of filters to render, in case that the children's array
-     * is empty it will return an empty array instead of inject the ones from the parent.
-     *
-     * @returns A list of filters.
-     * @internal
-     */
-    get renderedChildrenFilters() {
-        return this.filter.children ?? [];
-    }
-    isFilterPartiallySelected(filter) {
-        const selectedChildren = filter.children?.filter(filter => filter.selected);
-        const filterChildrenLength = filter.children?.length ?? 0;
-        return (!!selectedChildren &&
-            ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||
-                // eslint-disable-next-line @typescript-eslint/unbound-method
-                selectedChildren.some(this.isFilterPartiallySelected)));
-    }
-};
-__decorate([
-    Prop({ required: true })
-], HierarchicalFilter.prototype, "filter", void 0);
-__decorate([
-    Prop()
-], HierarchicalFilter.prototype, "childrenAnimation", void 0);
-__decorate([
-    Prop()
-], HierarchicalFilter.prototype, "clickEvents", void 0);
-HierarchicalFilter = __decorate([
-    Component({
-        name: 'HierarchicalFilter',
-        components: { FiltersList: __vue_component__, RenderlessFilter: __vue_component__$1 },
-        mixins: [
-            xComponentMixin(facetsXModule),
-            dynamicPropsMixin(['childrenFiltersClass', 'filterItemClass'])
-        ]
-    })
-], HierarchicalFilter);
-var script = HierarchicalFilter;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=hierarchical-filter.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"hierarchical-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import {\n    Filter,\n    HierarchicalFilter as HierarchicalFilterModel,\n    isHierarchicalFilter\n  } from '@empathyco/x-types';\n  import { isObject } from '@empathyco/x-utils';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';\n  import { xComponentMixin } from '../../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../../utils/types';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  @Component({\n    name: 'HierarchicalFilter',\n    components: { FiltersList, RenderlessFilter },\n    mixins: [\n      xComponentMixin(facetsXModule),\n      dynamicPropsMixin(['childrenFiltersClass', 'filterItemClass'])\n    ]\n  })\n  export default class HierarchicalFilter extends Vue {\n    /** The filter data to render. */\n    @Prop({ required: true })\n    public filter!: HierarchicalFilterModel;\n\n    /** The animation component to use for the children filters. */\n    @Prop()\n    public childrenAnimation?: Vue | string;\n\n    /**\n     * Additional events, with their payload, to emit when the filter is clicked.\n     *\n     * @public\n     */\n    @Prop()\n    public clickEvents!: Partial<XEventsTypes>;\n\n    /**\n     * The {@link XEventsTypes} to emit.\n     *\n     * @returns The events to emit when clicked.\n     * @internal\n     */\n    protected get _clickEvents(): Partial<XEventsTypes> {\n      return {\n        UserClickedAHierarchicalFilter: this.filter,\n        ...this.clickEvents\n      };\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     * @internal\n     */\n    protected get cssClasses(): VueCSSClasses {\n      return {\n        'x-hierarchical-filter--is-partially-selected': this.isPartiallySelected,\n        'x-hierarchical-filter--is-selected': this.filter.selected,\n        'x-facet-filter--is-partially-selected': this.isPartiallySelected\n      };\n    }\n\n    /**\n     * Gets the child filter click events, converting the payload of the events that have a\n     * {@link HierarchicalFilter} as payload to the corresponding child filter.\n     *\n     * @param childFilter - The child filter.\n     * @returns The events to emit when clicking a child.\n     * @internal\n     */\n    protected getChildFilterClickEvents(\n      childFilter: HierarchicalFilterModel\n    ): Partial<XEventsTypes> {\n      return Object.entries(this._clickEvents).reduce((clickEvents, [event, payload]) => {\n        return {\n          ...clickEvents,\n          [event]:\n            isObject(payload) &&\n            isHierarchicalFilter(payload as unknown as Filter) &&\n            childFilter !== (payload as unknown as HierarchicalFilterModel)\n              ? childFilter\n              : payload\n        };\n      }, {} as Partial<XEventsTypes>);\n    }\n\n    /**\n     * Returns if the filter is partially selected, which means having more than one child filter\n     * selected, but not every of them, or having at least one child filter partially selected.\n     *\n     * @returns True if the filter is partially selected. False otherwise.\n     * @internal\n     */\n    protected get isPartiallySelected(): boolean {\n      return this.isFilterPartiallySelected(this.filter);\n    }\n\n    /**\n     * List of filters to render, in case that the children's array\n     * is empty it will return an empty array instead of inject the ones from the parent.\n     *\n     * @returns A list of filters.\n     * @internal\n     */\n    protected get renderedChildrenFilters(): Filter[] {\n      return this.filter.children ?? [];\n    }\n\n    protected isFilterPartiallySelected(filter: HierarchicalFilterModel): boolean {\n      const selectedChildren = filter.children?.filter(filter => filter.selected);\n      const filterChildrenLength = filter.children?.length ?? 0;\n      return (\n        !!selectedChildren &&\n        ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n          // eslint-disable-next-line @typescript-eslint/unbound-method\n          selectedChildren.some(this.isFilterPartiallySelected))\n      );\n    }\n  }\n"],"names":["FiltersList","RenderlessFilter"],"mappings":";;;;;;;;;;;AA6EE;;;;AAIG;AASY,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,GAAG,CAAA;AAiBjD;;;;;AAKG;AACH,IAAA,IAAc,YAAY,GAAA;QACxB,OAAO;YACL,8BAA8B,EAAE,IAAI,CAAC,MAAM;YAC3C,GAAG,IAAI,CAAC,WAAW;SACpB,CAAC;KACH;AAED;;;;;AAKG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO;YACL,8CAA8C,EAAE,IAAI,CAAC,mBAAmB;AACxE,YAAA,oCAAoC,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ;YAC1D,uCAAuC,EAAE,IAAI,CAAC,mBAAmB;SAClE,CAAC;KACH;AAED;;;;;;;AAOG;AACO,IAAA,yBAAyB,CACjC,WAAoC,EAAA;QAEpC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAI;YAChF,OAAO;AACL,gBAAA,GAAG,WAAW;AACd,gBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO,CAAC;oBACjB,oBAAoB,CAAC,OAA4B,CAAC;AAClD,oBAAA,WAAW,KAAM,OAA8C;AAC7D,sBAAE,WAAW;AACb,sBAAE,OAAO;aACd,CAAC;SACH,EAAE,EAA2B,CAAC,CAAC;KACjC;AAED;;;;;;AAMG;AACH,IAAA,IAAc,mBAAmB,GAAA;QAC/B,OAAO,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;AAED;;;;;;AAMG;AACH,IAAA,IAAc,uBAAuB,GAAA;AACnC,QAAA,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC;KACnC;AAES,IAAA,yBAAyB,CAAC,MAA+B,EAAA;AACjE,QAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC5E,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,CAAC;QAC1D,QACE,CAAC,CAAC,gBAAgB;AAClB,aAAC,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IAAI,gBAAgB,CAAC,MAAM,GAAG,oBAAoB;;gBAE7E,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,EACxD;KACH;CACF,CAAA;AAjGC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACe,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIxC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACiC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQxC,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACoC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAfxB,kBAAkB,GAAA,UAAA,CAAA;AARtC,IAAA,SAAS,CAAC;AACT,QAAA,IAAI,EAAE,oBAAoB;AAC1B,QAAA,UAAU,EAAE,eAAEA,iBAAW,oBAAEC,mBAAgB,EAAE;AAC7C,QAAA,MAAM,EAAE;YACN,eAAe,CAAC,aAAa,CAAC;AAC9B,YAAA,iBAAiB,CAAC,CAAC,sBAAsB,EAAE,iBAAiB,CAAC,CAAC;AAC/D,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,kBAAkB,CAoGtC,CAAA;aApGoB,kBAAkB;;;;"}
+{"version":3,"file":"hierarchical-filter.vue2.js","sources":["../../../../../../src/x-modules/facets/components/filters/hierarchical-filter.vue"],"sourcesContent":["<template>\n  <div class=\"x-hierarchical-filter-container\" data-test=\"hierarchical-filter-container\">\n    <RenderlessFilter\n      v-slot=\"{ filter, clickFilter, cssClasses, isDisabled }\"\n      :filter=\"filter\"\n      :clickEvents=\"innerClickEvents\"\n      :cssClasses=\"innerCssClasses\"\n    >\n      <!--\n        @slot The content to render inside the button.\n            @binding {Filter} filter - The filter data.\n            @binding {Function} clickFilter - The handler to invoke when clicking the filter.\n            @binding {VueCssClasses} cssClasses - The CSS classes.\n            @binding {boolean} isDisabled - Flag determining the disabled state.\n      -->\n      <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n        <button\n          @click=\"clickFilter\"\n          :aria-checked=\"filter.selected.toString()\"\n          :class=\"[cssClasses, filterItemClass]\"\n          :disabled=\"isDisabled\"\n          data-test=\"filter\"\n          role=\"checkbox\"\n        >\n          <!--\n            @slot The content to render inside the button.\n               @binding {Filter} filter - The filter data.\n          -->\n          <slot name=\"label\" :filter=\"filter\">{{ filter.label }}</slot>\n        </button>\n      </slot>\n    </RenderlessFilter>\n    <FiltersList\n      v-slot=\"{ filter: childFilter }\"\n      :animation=\"childrenAnimation\"\n      :filters=\"renderedChildrenFilters\"\n      :parent-id=\"filter.id\"\n      class=\"x-hierarchical-filter__children\"\n      :class=\"childrenFiltersClass\"\n      data-test=\"children-filters\"\n    >\n      <HierarchicalFilter\n        :childrenAnimation=\"childrenAnimation\"\n        :filter=\"childFilter\"\n        :clickEvents=\"getChildFilterClickEvents(childFilter)\"\n        :childrenFiltersClass=\"childrenFiltersClass\"\n        :filterItemClass=\"filterItemClass\"\n      >\n        <template #default=\"{ filter, clickFilter, cssClasses, isDisabled }\">\n          <slot v-bind=\"{ filter, clickFilter, cssClasses, isDisabled }\" />\n        </template>\n        <template #label=\"{ filter }\">\n          <slot name=\"label\" :filter=\"filter\" />\n        </template>\n      </HierarchicalFilter>\n    </FiltersList>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import {\n    Filter,\n    HierarchicalFilter as HierarchicalFilterModel,\n    isHierarchicalFilter\n  } from '@empathyco/x-types';\n  import { Dictionary, isObject } from '@empathyco/x-utils';\n  import { computed, defineComponent, PropType } from 'vue';\n  import { XEventsTypes } from '../../../../wiring/events.types';\n  import { facetsXModule } from '../../x-module';\n  import FiltersList from '../lists/filters-list.vue';\n  import { AnimationProp } from '../../../../types';\n  import RenderlessFilter from './renderless-filter.vue';\n\n  /**\n   * Renders a hierarchical filter recursively, emitting the needed events when clicked.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'HierarchicalFilter',\n    xModule: facetsXModule.name,\n    components: { FiltersList, RenderlessFilter },\n    props: {\n      /** The filter data to render. */\n      filter: {\n        type: Object as PropType<HierarchicalFilterModel>,\n        required: true\n      },\n      /** The animation component to use for the children filters. */\n      childrenAnimation: AnimationProp,\n      /**\n       * Additional events, with their payload, to emit when the filter is clicked.\n       *\n       * @public\n       */\n      clickEvents: Object as PropType<Partial<XEventsTypes>>,\n      /** Inheritance CSS classes. */\n      cssClasses: {\n        type: Array as PropType<(string | Dictionary<boolean>)[]>,\n        default: () => []\n      },\n      /** Class inherited by content element. */\n      childrenFiltersClass: String,\n      /** Class inherited by content element. */\n      filterItemClass: String\n    },\n    setup: function (props) {\n      /**\n       * The {@link XEventsTypes} to emit.\n       *\n       * @returns The events to emit when clicked.\n       * @internal\n       */\n      const innerClickEvents = computed(() => ({\n        UserClickedAHierarchicalFilter: props.filter,\n        ...props.clickEvents\n      }));\n\n      const isFilterPartiallySelected = (filter: HierarchicalFilterModel) => {\n        const selectedChildren = filter.children?.filter(filter => filter.selected);\n        const filterChildrenLength = filter.children?.length ?? 0;\n        return (\n          !!selectedChildren &&\n          ((selectedChildren.length > 0 && selectedChildren.length < filterChildrenLength) ||\n            // eslint-disable-next-line @typescript-eslint/unbound-method\n            selectedChildren.some(isFilterPartiallySelected))\n        );\n      };\n\n      /**\n       * Returns if the filter is partially selected, which means having more than one child filter\n       * selected, but not every of them, or having at least one child filter partially selected.\n       *\n       * @returns True if the filter is partially selected. False otherwise.\n       * @internal\n       */\n      const isPartiallySelected = computed(() => isFilterPartiallySelected(props.filter));\n\n      /**\n       * Dynamic CSS classes to apply to the component.\n       *\n       * @returns The dynamic CSS classes to apply to the component.\n       * @internal\n       */\n      const innerCssClasses = computed(() => [\n        'x-hierarchical-filter',\n        { 'x-hierarchical-filter--is-partially-selected': isPartiallySelected.value },\n        { 'x-hierarchical-filter--is-selected': props.filter.selected },\n        { 'x-facet-filter--is-partially-selected': isPartiallySelected.value },\n        ...props.cssClasses\n      ]);\n\n      /**\n       * Gets the child filter click events, converting the payload of the events that have a\n       * {@link HierarchicalFilter} as payload to the corresponding child filter.\n       *\n       * @param childFilter - The child filter.\n       * @returns The events to emit when clicking a child.\n       * @internal\n       */\n      const getChildFilterClickEvents = (childFilter: HierarchicalFilterModel) => {\n        return Object.entries(innerClickEvents.value).reduce((clickEvents, [event, payload]) => {\n          return {\n            ...clickEvents,\n            [event]:\n              isObject(payload) &&\n              isHierarchicalFilter(payload as unknown as Filter) &&\n              childFilter !== (payload as unknown as HierarchicalFilterModel)\n                ? childFilter\n                : payload\n          };\n        }, {} as Partial<XEventsTypes>);\n      };\n\n      /**\n       * List of filters to render, in case that the children's array\n       * is empty it will return an empty array instead of inject the ones from the parent.\n       *\n       * @returns A list of filters.\n       * @internal\n       */\n      const renderedChildrenFilters = computed(() => props.filter.children ?? []);\n\n      return {\n        innerClickEvents,\n        innerCssClasses,\n        renderedChildrenFilters,\n        getChildFilterClickEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedAFilter`](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, using the `filter` prop as its payload.\n- [`UserClickedAHierarchicalFilter`](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, using the `filter` prop as its payload.\n  filter.\n\n## See it in action\n\nThis component renders a button, which on clicked emits the `UserClickedAFilter` and\n`UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.\nIf the provided filter has children filters, this component will render them recursively. Changing\nthe slot content will change it for all of the children.\n\nThe `filter` prop is required. The `clickEvents` prop is optional and allows configuring the events\nto emit on click.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Playing with props\n\nConfiguring the events to emit when the filter is clicked.\n\n```vue\n<template>\n  <HierarchicalFilter :clickEvents=\"{ UserClickedAHierarchicalFilter: filter }\" :filter=\"filter\" />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the default slot content\n\nIn this example, the child filters will also include the label and checkbox.\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\" v-slot=\"{ filter, clickFilter, slotCSSClasses, isDisabled }\">\n    <label :class=\"slotCSSClasses\">\n      <input @change=\"clickFilter\" :disabled=\"isDisabled\" />\n      {{ filter.label }}\n    </label>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the label slot content\n\n```vue\n<template>\n  <HierarchicalFilter :filter=\"filter\">\n    <template #label :filter=\"filter\">\n      <span class=\"custom-class\">{{ filter.label }}</span>\n    </template>\n  </HierarchicalFilter>\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Customizing the content with classes\n\nThe `childrenFiltersClass` prop can be used to add classes to the inner filters lists. This is\nuseful to set the indent of the children filters.\n\nThe `filterItemClass` prop can be used to add classes to the filter element itself.\n\n```vue\n<template>\n  <HierarchicalFilter\n    :filter=\"filter\"\n    childrenFiltersClass=\"x-custom-class\"\n    filterItemClass=\"x-custom-filter\"\n  />\n</template>\n\n<script>\n  import { HierarchicalFilter } from '@empathyco/x-components/facets';\n\n  export default {\n    name: 'HierarchicalFilterTest',\n    components: {\n      HierarchicalFilter\n    },\n    date() {\n      return {\n        filter: {\n          id: `categories:men`,\n          modelName: 'HierarchicalFilter',\n          label: `men`,\n          facetId: 'categories',\n          parentId: null,\n          totalResults: 10,\n          children: [],\n          selected: false\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["RenderlessFilter"],"mappings":";;;;;;;;AAyEE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,aAAa,CAAC,IAAI;AAC3B,IAAA,UAAU,EAAE,EAAE,WAAW,oBAAEA,aAAkB;AAC7C,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA2C;AACjD,YAAA,QAAQ,EAAE,IAAG;AACd,SAAA;;AAED,QAAA,iBAAiB,EAAE,aAAa;AAChC;;;;AAIE;AACF,QAAA,WAAW,EAAE,MAAyC;;AAEtD,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,KAAmD;AACzD,YAAA,OAAO,EAAE,MAAM,EAAC;AACjB,SAAA;;AAED,QAAA,oBAAoB,EAAE,MAAM;;AAE5B,QAAA,eAAe,EAAE,MAAK;AACvB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;;AAKE;AACF,QAAA,MAAM,gBAAiB,GAAE,QAAQ,CAAC,OAAO;YACvC,8BAA8B,EAAE,KAAK,CAAC,MAAM;YAC5C,GAAG,KAAK,CAAC,WAAU;AACpB,SAAA,CAAC,CAAC,CAAA;AAEH,QAAA,MAAM,4BAA4B,CAAC,MAA+B,KAAK;AACrE,YAAA,MAAM,gBAAe,GAAI,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAO,IAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;YAC3E,MAAM,oBAAqB,GAAE,MAAM,CAAC,QAAQ,EAAE,MAAK,IAAK,CAAC,CAAA;YACzD,QACE,CAAC,CAAC;AACF,iBAAC,CAAC,gBAAgB,CAAC,SAAS,CAAA,IAAK,gBAAgB,CAAC,MAAO,GAAE,oBAAoB;;AAE7E,oBAAA,gBAAgB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA,EACnD;AACH,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,mBAAkB,GAAI,QAAQ,CAAC,MAAM,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;AAEnF;;;;;AAKE;AACF,QAAA,MAAM,eAAgB,GAAE,QAAQ,CAAC,MAAM;YACrC,uBAAuB;AACvB,YAAA,EAAE,8CAA8C,EAAE,mBAAmB,CAAC,OAAO;AAC7E,YAAA,EAAE,oCAAoC,EAAE,KAAK,CAAC,MAAM,CAAC,QAAO,EAAG;AAC/D,YAAA,EAAE,uCAAuC,EAAE,mBAAmB,CAAC,OAAO;YACtE,GAAG,KAAK,CAAC,UAAS;AACnB,SAAA,CAAC,CAAA;AAEF;;;;;;;AAOE;AACF,QAAA,MAAM,yBAAwB,GAAI,CAAC,WAAoC,KAAK;YAC1E,OAAO,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACtF,OAAO;AACL,oBAAA,GAAG,WAAW;AACd,oBAAA,CAAC,KAAK,GACJ,QAAQ,CAAC,OAAO;wBAChB,oBAAoB,CAAC,OAA4B,CAAA;AACjD,wBAAA,WAAU,KAAO,OAA6C;AAC5D,0BAAE,WAAU;AACZ,0BAAE,OAAM;iBACb,CAAA;aACF,EAAE,EAA2B,CAAC,CAAA;AACjC,SAAC,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,uBAAwB,GAAE,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAS,IAAG,EAAE,CAAC,CAAA;QAE3E,OAAO;YACL,gBAAgB;YAChB,eAAe;YACf,uBAAuB;YACvB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}