@empathyco/x-components 3.0.0-alpha.205 → 3.0.0-alpha.207

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,31 @@
3
3
  All notable changes to this project will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [3.0.0-alpha.207](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.206...@empathyco/x-components@3.0.0-alpha.207) (2022-11-02)
7
+
8
+ ### Bug Fixes
9
+
10
+ - type empathize events and replace UserPressedEnter with UserPressedEnterKey
11
+ ([98055c4](https://github.com/empathyco/x/commit/98055c44e165b06013e63c9829fd363f5e50c87a))
12
+
13
+ # Change Log
14
+
15
+ All notable changes to this project will be documented in this file. See
16
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
17
+
18
+ ## [3.0.0-alpha.206](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.205...@empathyco/x-components@3.0.0-alpha.206) (2022-10-31)
19
+
20
+ ### Features
21
+
22
+ - add `dynamic-props` mixin (#798)
23
+ ([defafbb](https://github.com/empathyco/x/commit/defafbb2c40f51e3c44474b469b353472a91a828)),
24
+ closes [EX-7220](https://searchbroker.atlassian.net/browse/EX-7220)
25
+
26
+ # Change Log
27
+
28
+ All notable changes to this project will be documented in this file. See
29
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
30
+
6
31
  ## [3.0.0-alpha.205](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.204...@empathyco/x-components@3.0.0-alpha.205) (2022-10-31)
7
32
 
8
33
  ### Features
@@ -11,11 +11,11 @@ to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpa
11
11
 
12
12
  ## Props
13
13
 
14
- | Name | Description | Type | Default |
15
- | ----------------------------------- | --------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
16
- | <code>animation</code> | Animation component that will be used to animate the empathize. | <code>Vue</code> | <code>() => NoElement</code> |
17
- | <code>eventsToOpenEmpathize</code> | Array of {@link XEvent \| xEvents} to open the empathize. | <code>Array</code> | <code>() => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']</code> |
18
- | <code>eventsToCloseEmpathize</code> | Array of {@link XEvent \| xEvents} to close the empathize. | <code>Array</code> | <code>() => [<br /> 'UserClosedEmpathize',<br /> 'UserSelectedASuggestion',<br /> 'UserPressedEnter',<br /> 'UserBlurredSearchBox'<br />]</code> |
14
+ | Name | Description | Type | Default |
15
+ | ----------------------------------- | --------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
16
+ | <code>animation</code> | Animation component that will be used to animate the empathize. | <code>Vue</code> | <code>() => NoElement</code> |
17
+ | <code>eventsToOpenEmpathize</code> | Array of {@link XEvent \| xEvents} to open the empathize. | <code>Array</code> | <code>() => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']</code> |
18
+ | <code>eventsToCloseEmpathize</code> | Array of {@link XEvent \| xEvents} to close the empathize. | <code>Array</code> | <code>(): XEvent[] => [<br /> 'UserClosedEmpathize',<br /> 'UserSelectedASuggestion',<br /> 'UserPressedEnterKey',<br /> 'UserBlurredSearchBox'<br />]</code> |
19
19
 
20
20
  ## Slots
21
21
 
@@ -1 +1 @@
1
- {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-if=\"isOpen\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import Component from 'vue-class-component';\n import { Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { Debounce } from '../../../components/decorators/debounce.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata, XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n\n /**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(empathizeXModule)]\n })\n export default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n `true`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n `false`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"empathize.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue"],"sourcesContent":["<template>\n <component :is=\"animation\">\n <div\n v-if=\"isOpen\"\n @mousedown.prevent\n @focusin=\"open\"\n @focusout=\"close\"\n class=\"x-empathize\"\n data-test=\"empathize\"\n >\n <!-- @slot (Required) Modal container content -->\n <slot />\n </div>\n </component>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import Component from 'vue-class-component';\n import { Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { Debounce } from '../../../components/decorators/debounce.decorators';\n import { NoElement } from '../../../components/no-element';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { WireMetadata, XEvent } from '../../../wiring';\n import { empathizeXModule } from '../x-module';\n\n /**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n @Component({\n mixins: [xComponentMixin(empathizeXModule)]\n })\n export default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: (): XEvent[] => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component will listen to the configured events in `eventsToOpenEmpathize` and\n`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values\nare:\n\n- Open: `UserFocusedSearchBox`, `'`UserIsTypingAQuery`, `'`UserClickedSearchBox` and\n- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,\n 'UserBlurredSearchBox`\n\n### Basic examples\n\nThe component rendering the query suggestions, popular searches and history queries with keyboard\nnavigation.\n\n```vue\n<Empathize>\n <template #default>\n <BaseKeyboardNavigation>\n <QuerySuggestions/>\n <PopularSearches/>\n <HistoryQueries/>\n </BaseKeyboardNavigation>\n </template>\n</Empathize>\n```\n\nDefining custom values for the events to open and close the Empathize. For example opening it when\nthe search box loses the focus and closing it when the search box receives the focus:\n\n```vue\n<Empathize\n :eventsToOpenEmpathize=\"['UserBlurredSearchBox']\"\n :eventsToCloseEmpathize=\"['UserFocusedSearchBox']\"\n>\n <template #default>\n Please, type a query in the Search Box.\n </template>\n</Empathize>\n```\n\nAn animation can be used for the opening and closing using the `animation` prop. The animation, must\nbe a Component with a `Transition` with a slot inside:\n\n```vue\n<Empathize :animation=\"collapseFromTop\">\n <template #default>\n <PopularSearches/>\n </template>\n</Empathize>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `EmpathizeOpened`: the event is emitted after receiving an event to change the state `isOpen` to\n `true`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n- `EmpathizeClosed`: the event is emitted after receiving an event to change the state `isOpen` to\n `false`. The event payload is undefined and can have a metadata with the module and the element\n that emitted it.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -80,7 +80,7 @@ __decorate([
80
80
  default: () => [
81
81
  'UserClosedEmpathize',
82
82
  'UserSelectedASuggestion',
83
- 'UserPressedEnter',
83
+ 'UserPressedEnterKey',
84
84
  'UserBlurredSearchBox'
85
85
  ]
86
86
  })
@@ -1 +1 @@
1
- {"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: () => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnter',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAM;YACb,qBAAqB;YACrB,yBAAyB;YACzB,kBAAkB;YAClB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}
1
+ {"version":3,"file":"empathize.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/empathize/components/empathize.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { Debounce } from '../../../components/decorators/debounce.decorators';\nimport { NoElement } from '../../../components/no-element';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { WireMetadata, XEvent } from '../../../wiring';\nimport { empathizeXModule } from '../x-module';\n\n/**\n * Component containing the empathize. It has a required slot to define its content and two props\n * to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.\n *\n * @public\n */\n@Component({\n mixins: [xComponentMixin(empathizeXModule)]\n})\nexport default class Empathize extends Vue {\n /**\n * Animation component that will be used to animate the empathize.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n protected animation!: Vue;\n\n /**\n * Array of {@link XEvent | xEvents} to open the empathize.\n *\n * @public\n */\n @Prop({ default: () => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox'] })\n protected eventsToOpenEmpathize!: XEvent[];\n\n /**\n * Array of {@link XEvent | xEvents} to close the empathize.\n *\n * @public\n */\n @Prop({\n default: (): XEvent[] => [\n 'UserClosedEmpathize',\n 'UserSelectedASuggestion',\n 'UserPressedEnterKey',\n 'UserBlurredSearchBox'\n ]\n })\n protected eventsToCloseEmpathize!: XEvent[];\n\n /**\n * The modal container is open.\n *\n * @internal\n */\n protected isOpen = false;\n\n /**\n * Open empathize. This method will be executed on any event in\n * {@link Empathize.eventsToOpenEmpathize} and on DOM event `focusin` on Empathize root element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToOpenEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n open(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(true, metadata);\n }\n\n /**\n * Close empathize. This method will be executed on any event in\n * {@link Empathize.eventsToCloseEmpathize} and on DOM event `focusout` on Empathize root\n * element.\n *\n * @param payload - The payload of the {@link XEvent}, that is unused in this case.\n * @param metadata - The {@link WireMetadata} of the event, used to emit the Empathize XEvents.\n *\n * @internal\n */\n @XOn(component => (component as Empathize).eventsToCloseEmpathize)\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n close(payload: unknown, metadata: WireMetadata): void {\n this.changeOpenState(false, metadata);\n }\n\n /**\n * Changes the state of {@link Empathize.isOpen} assigning to it the value of `newOpenState`\n * parameter. Also emits the {@link XEvent | XEvents} `EmpathizeOpened` or `EmpathizeClosed` if\n * the state really changes.\n *\n * @param newOpenState - The new state to assign to {@link Empathize.isOpen}.\n * @param metadata - The {@link WireMetadata} to emit the {@link XEvent | XEvents}. If is\n * undefined, a this component is used as source of info for the metadata.\n *\n * @internal\n */\n @Debounce(0)\n changeOpenState(newOpenState: boolean, metadata: WireMetadata): void {\n if (this.isOpen !== newOpenState) {\n this.isOpen = newOpenState;\n this.$x.emit(\n this.isOpen ? 'EmpathizeOpened' : 'EmpathizeClosed',\n undefined,\n metadata ?? { moduleName: 'empathize', target: this.$el }\n );\n }\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;;;;AASA,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,GAAG;IAA1C;;;;;;;QAqCY,WAAM,GAAG,KAAK,CAAC;KAuD1B;;;;;;;;;;;IA1CC,IAAI,CAAC,OAAgB,EAAE,QAAsB;QAC3C,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KACtC;;;;;;;;;;;;IAcD,KAAK,CAAC,OAAgB,EAAE,QAAsB;QAC5C,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;KACvC;;;;;;;;;;;;IAcD,eAAe,CAAC,YAAqB,EAAE,QAAsB;QAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,YAAY,EAAE;YAChC,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;YAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,iBAAiB,EACnD,SAAS,EACT,QAAQ,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,CAC1D,CAAC;SACH;KACF;CACF,CAAA;AArFC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;4CACT;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAE,oBAAoB,EAAE,sBAAsB,CAAC,EAAE,CAAC;wDACrD;AAe3C;IARC,IAAI,CAAC;QACJ,OAAO,EAAE,MAAgB;YACvB,qBAAqB;YACrB,yBAAyB;YACzB,qBAAqB;YACrB,sBAAsB;SACvB;KACF,CAAC;yDAC0C;AAoB5C;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,qBAAqB,CAAC;qCAIhE;AAcD;IAFC,GAAG,CAAC,SAAS,IAAK,SAAuB,CAAC,sBAAsB,CAAC;sCAIjE;AAcD;IADC,QAAQ,CAAC,CAAC,CAAC;gDAUX;AA3FkB,SAAS;IAH7B,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;KAC5C,CAAC;GACmB,SAAS,CA4F7B;aA5FoB,SAAS;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@empathyco/x-components",
3
- "version": "3.0.0-alpha.205",
3
+ "version": "3.0.0-alpha.207",
4
4
  "description": "Empathy X Components",
5
5
  "author": "Empathy Systems Corporation S.L.",
6
6
  "license": "Apache-2.0",
@@ -136,5 +136,5 @@
136
136
  "access": "public",
137
137
  "directory": "dist"
138
138
  },
139
- "gitHead": "d87a97b291ad2b8ec0d61045e09a183f2f503de9"
139
+ "gitHead": "2bcaeda77fd3a5ba53c3da9f3150ac7118fffc54"
140
140
  }
@@ -0,0 +1,23 @@
1
+ import Vue from 'vue';
2
+ import { ExtendedVue } from 'vue/types/vue';
3
+ /**
4
+ * Mixin that creates a string prop in the component for each element
5
+ * within the array passed as `propNames` argument.
6
+ *
7
+ * @param propNames - Array with the names of the props to create.
8
+ * @example
9
+ * ```typescript
10
+ *
11
+ * @Component({
12
+ * components: { RelatedTag },
13
+ * mixins: [xComponentMixin(relatedTagsXModule)]
14
+ * })
15
+ * export default class RelatedTags extends Mixins(dynamicPropsMixin(['list', 'li', 'tag'])) {
16
+ * // This component will have available 3 props: 'list', 'li' and 'tag'
17
+ * }
18
+ * ```
19
+ * @returns Mixin for the component.
20
+ *
21
+ */
22
+ export declare function dynamicPropsMixin<PropNames extends string>(propNames: PropNames[]): ExtendedVue<Vue, unknown, unknown, unknown, Partial<Record<PropNames, string>>>;
23
+ //# sourceMappingURL=dynamic-props.mixin.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dynamic-props.mixin.d.ts","sourceRoot":"","sources":["../../../src/components/dynamic-props.mixin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,SAAS,MAAM,EACxD,SAAS,EAAE,SAAS,EAAE,GACrB,WAAW,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAOjF"}