@empathyco/x-components 3.0.0-alpha.142 → 3.0.0-alpha.143

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.143](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.142...@empathyco/x-components@3.0.0-alpha.143) (2022-08-01)
+
+### Features
+
+- **components:** make `BaseIdModalClose` rendering configurable (#627)
+  ([4bf97af](https://github.com/empathyco/x/commit/4bf97af19ac5f2fd1b08b6e4097dec45eef00679)),
+  closes [EX-6726](https://searchbroker.atlassian.net/browse/EX-6726)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.142](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.141...@empathyco/x-components@3.0.0-alpha.142) (2022-07-29)
 
 ### Features

package/design-system/default-theme.css

@@ -2858,6 +2858,19 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
+:root {
+  --x-color-base-lead: #36515b;
+  --x-color-base-auxiliary: #667981;
+  --x-color-base-neutral-10: #1a1a1a;
+  --x-color-base-neutral-35: #595959;
+  --x-color-base-neutral-70: #b3b3b3;
+  --x-color-base-neutral-95: #f2f2f2;
+  --x-color-base-neutral-100: #ffffff;
+  --x-color-base-accent: #b90276;
+  --x-color-base-enable: #00705c;
+  --x-color-base-disable: #e11f26;
+  --x-color-base-transparent: transparent;
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -2893,17 +2906,4 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
-}
-:root {
-  --x-color-base-lead: #36515b;
-  --x-color-base-auxiliary: #667981;
-  --x-color-base-neutral-10: #1a1a1a;
-  --x-color-base-neutral-35: #595959;
-  --x-color-base-neutral-70: #b3b3b3;
-  --x-color-base-neutral-95: #f2f2f2;
-  --x-color-base-neutral-100: #ffffff;
-  --x-color-base-accent: #b90276;
-  --x-color-base-enable: #00705c;
-  --x-color-base-disable: #e11f26;
-  --x-color-base-transparent: transparent;
 }

package/design-system/full-theme.css

@@ -925,78 +925,6 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
-[dir="ltr"] .x-filter {
-  padding-left: var(--x-size-padding-left-filter-default);
-}
-[dir="rtl"] .x-filter {
-  padding-right: var(--x-size-padding-left-filter-default);
-}
-[dir="ltr"] .x-filter {
-  padding-right: var(--x-size-padding-right-filter-default);
-}
-[dir="rtl"] .x-filter {
-  padding-left: var(--x-size-padding-right-filter-default);
-}
-[dir="ltr"] .x-filter {
-  border-right-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="rtl"] .x-filter {
-  border-left-width: var(--x-size-border-width-right-filter-default);
-}
-[dir="ltr"] .x-filter {
-  border-left-width: var(--x-size-border-width-left-filter-default);
-}
-[dir="rtl"] .x-filter {
-  border-right-width: var(--x-size-border-width-left-filter-default);
-}
-.x-filter {
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  box-sizing: border-box;
-  text-align: left;
-  gap: var(--x-size-gap-filter-default);
-  padding-top: var(--x-size-padding-top-filter-default);
-  padding-bottom: var(--x-size-padding-bottom-filter-default);
-  background-color: var(--x-color-background-filter-default);
-  border-color: var(--x-color-border-filter-default);
-  color: var(--x-color-text-filter-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-filter-default);
-  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
-  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
-  font-family: var(--x-font-family-filter-default);
-  font-size: var(--x-size-font-filter-default);
-  font-weight: var(--x-number-font-weight-filter-default);
-  line-height: var(--x-size-line-height-filter-default);
-  cursor: pointer;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-filter {
-    gap: 0;
-  }
-  .x-filter > *:not(:last-child) {
-    margin-right: var(--x-size-gap-filter-default);
-  }
-}
-.x-filter > * {
-  flex: 0 0 auto;
-}
-.x-filter__label {
-  flex: 0 1 auto;
-}
-.x-filter__count {
-  font-weight: var(--x-number-font-weight-filter-count-default);
-}
-.x-filter--is-selected {
-  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
-  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
-  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
-  --x-number-font-weight-filter-count-default: var(
-    --x-number-font-weight-filter-count-default-selected
-  );
-}
 :root {
   --x-color-background-filter-default: transparent;
   --x-color-border-filter-default: var(--x-color-background-filter-default);
@@ -6468,6 +6396,49 @@
 .x-self-baseline {
   align-self: baseline !important;
 }
+.x-font-color--lead {
+  color: var(--x-color-base-lead) !important;
+}
+
+.x-font-color--auxiliary {
+  color: var(--x-color-base-auxiliary) !important;
+}
+
+.x-font-color--neutral-10 {
+  color: var(--x-color-base-neutral-10) !important;
+}
+
+.x-font-color--neutral-35 {
+  color: var(--x-color-base-neutral-35) !important;
+}
+
+.x-font-color--neutral-70 {
+  color: var(--x-color-base-neutral-70) !important;
+}
+
+.x-font-color--neutral-95 {
+  color: var(--x-color-base-neutral-95) !important;
+}
+
+.x-font-color--neutral-100 {
+  color: var(--x-color-base-neutral-100) !important;
+}
+
+.x-font-color--accent {
+  color: var(--x-color-base-accent) !important;
+}
+
+.x-font-color--enable {
+  color: var(--x-color-base-enable) !important;
+}
+
+.x-font-color--disable {
+  color: var(--x-color-base-disable) !important;
+}
+
+.x-font-color--transparent {
+  color: var(--x-color-base-transparent) !important;
+}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -6614,49 +6585,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-.x-font-color--lead {
-  color: var(--x-color-base-lead) !important;
-}
-
-.x-font-color--auxiliary {
-  color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-font-color--neutral-10 {
-  color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-font-color--neutral-35 {
-  color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-font-color--neutral-70 {
-  color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-font-color--neutral-95 {
-  color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-font-color--neutral-100 {
-  color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-font-color--accent {
-  color: var(--x-color-base-accent) !important;
-}
-
-.x-font-color--enable {
-  color: var(--x-color-base-enable) !important;
-}
-
-.x-font-color--disable {
-  color: var(--x-color-base-disable) !important;
-}
-
-.x-font-color--transparent {
-  color: var(--x-color-base-transparent) !important;
-}
 .x-margin--auto {
   margin: auto !important;
 }
@@ -7613,3 +7541,76 @@
 .x-normal-case {
   text-transform: none;
 }
+
+[dir="ltr"] .x-filter {
+  padding-left: var(--x-size-padding-left-filter-default);
+}
+[dir="rtl"] .x-filter {
+  padding-right: var(--x-size-padding-left-filter-default);
+}
+[dir="ltr"] .x-filter {
+  padding-right: var(--x-size-padding-right-filter-default);
+}
+[dir="rtl"] .x-filter {
+  padding-left: var(--x-size-padding-right-filter-default);
+}
+[dir="ltr"] .x-filter {
+  border-right-width: var(--x-size-border-width-right-filter-default);
+}
+[dir="rtl"] .x-filter {
+  border-left-width: var(--x-size-border-width-right-filter-default);
+}
+[dir="ltr"] .x-filter {
+  border-left-width: var(--x-size-border-width-left-filter-default);
+}
+[dir="rtl"] .x-filter {
+  border-right-width: var(--x-size-border-width-left-filter-default);
+}
+.x-filter {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  box-sizing: border-box;
+  text-align: left;
+  gap: var(--x-size-gap-filter-default);
+  padding-top: var(--x-size-padding-top-filter-default);
+  padding-bottom: var(--x-size-padding-bottom-filter-default);
+  background-color: var(--x-color-background-filter-default);
+  border-color: var(--x-color-border-filter-default);
+  color: var(--x-color-text-filter-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-filter-default);
+  border-bottom-width: var(--x-size-border-width-bottom-filter-default);
+  border-radius: var(--x-size-border-radius-top-left-filter-default) var(--x-size-border-radius-top-right-filter-default) var(--x-size-border-radius-bottom-right-filter-default) var(--x-size-border-radius-bottom-left-filter-default);
+  font-family: var(--x-font-family-filter-default);
+  font-size: var(--x-size-font-filter-default);
+  font-weight: var(--x-number-font-weight-filter-default);
+  line-height: var(--x-size-line-height-filter-default);
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-filter {
+    gap: 0;
+  }
+  .x-filter > *:not(:last-child) {
+    margin-right: var(--x-size-gap-filter-default);
+  }
+}
+.x-filter > * {
+  flex: 0 0 auto;
+}
+.x-filter__label {
+  flex: 0 1 auto;
+}
+.x-filter__count {
+  font-weight: var(--x-number-font-weight-filter-count-default);
+}
+.x-filter--is-selected {
+  --x-color-background-filter-default: var(--x-color-background-filter-default-selected);
+  --x-color-border-filter-default: var(--x-color-border-filter-default-selected);
+  --x-color-text-filter-default: var(--x-color-text-filter-default-selected);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-filter-default-selected);
+  --x-number-font-weight-filter-count-default: var(
+    --x-number-font-weight-filter-count-default-selected
+  );
+}

package/docs/API-reference/api/{x-components.baseidmodalclose.events.md → x-components.baseidmodalclose.emitclosemodalevent.md}

@@ -1,11 +1,15 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseIdModalClose](./x-components.baseidmodalclose.md) &gt; [events](./x-components.baseidmodalclose.events.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseIdModalClose](./x-components.baseidmodalclose.md) &gt; [emitCloseModalEvent](./x-components.baseidmodalclose.emitclosemodalevent.md)
 
-## BaseIdModalClose.events property
+## BaseIdModalClose.emitCloseModalEvent() method
 
 <b>Signature:</b>
 
 ```typescript
-protected get events(): Partial<XEventsTypes>;
+protected emitCloseModalEvent(): void;
 ```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.baseidmodalclose.md

@@ -4,7 +4,7 @@
 
 ## BaseIdModalClose class
 
-Component containing an event button that emits [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents.
+Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It's fully customizable as it exposes the closing event but by default it renders a customizable button.
 
 <b>Signature:</b>
 
@@ -17,6 +17,11 @@ export default class BaseIdModalClose extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [events](./x-components.baseidmodalclose.events.md) |  | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; |  |
 |  [modalId](./x-components.baseidmodalclose.modalid.md) |  | string |  |
 
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [emitCloseModalEvent()](./x-components.baseidmodalclose.emitclosemodalevent.md) |  |  |
+

package/docs/API-reference/api/x-components.md

@@ -28,7 +28,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseGrid](./x-components.basegrid.md) | Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the <code>items</code> to render; and an optional one: the number <code>columns</code> the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit. |
 |  [BaseHeaderTogglePanel](./x-components.baseheadertogglepanel.md) | Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel. |
 |  [BaseIdModal](./x-components.baseidmodal.md) | Component containing a modal expecting a required prop, named <code>modalId</code>. It reacts to <code>UserClickedOpenModal</code>, <code>UserClickedCloseModal</code> and <code>UserClickedOutOfModal</code> events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content. |
-|  [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component containing an event button that emits [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents. |
+|  [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It's fully customizable as it exposes the closing event but by default it renders a customizable button. |
 |  [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component containing an event button that emits [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents. |
 |  [BaseIdTogglePanel](./x-components.baseidtogglepanel.md) | Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named <code>panelId</code>, which are responsible of rendering default slot inside a configurable transition.<!-- -->It reacts to <code>UserClickedPanelToggleButton</code> event, when their payload matches the component's 'panelId' prop, to handle its open/close state.<!-- -->The default slot offers the possibility to customise the modal content. |
 |  [BaseIdTogglePanelButton](./x-components.baseidtogglepanelbutton.md) | Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.<!-- -->It has a default slot to customize its contents. |

package/docs/API-reference/components/common/modals/x-components.base-id-modal-close.md

@@ -6,8 +6,9 @@ title: BaseIdModalClose
 
 # BaseIdModalClose
 
-Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when
-clicked with the modalId as payload. It has a default slot to customize its contents.
+Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
+It's fully customizable as it exposes the closing event but by default it renders a
+customizable button.
 
 ## Props
 
@@ -17,19 +18,21 @@ clicked with the modalId as payload. It has a default slot to customize its cont
 
 ## Slots
 
-| Name                 | Description                                            | Bindings<br />(name - type - description) |
-| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
-| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
+| Name                         | Description                                                                   | Bindings<br />(name - type - description)                               |
+| ---------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| <code>closing-element</code> | closing-element. It's the element that will trigger the modal closing. It's a | **closeModal** <code>Function</code> - The function to close the modal. |
+| <code>default</code>         |                                                                               | None                                                                    |
 
 ## Examples
 
 Component containing an event button that emits `UserClickedCloseModal` when clicked with the
-modalId as payload. It has a default slot to customize its contents.
+modalId as payload. It has a default slot to customize its contents and can also be fully
+customized, replacing the default button with any other element.
 
 ### Basic example
 
-The component renders whatever is passed to it in the default slot and closing the modal with
-modalId `my-modal`.
+The component renders whatever is passed to it in the default slot inside the button and closes the
+modal with modalId `my-modal`.
 
 ```vue
 <template>
@@ -50,6 +53,35 @@ export default {
 </script>
 ```
 
+### Replacing the default button
+
+The component renders whatever element is passed, replacing the default button and exposing the
+function to close the modal with modalId `my-modal`.
+
+```vue
+<template>
+  <BaseIdModalClose modalId="my-modal">
+    <template #closing-element="{ closeModal }">
+      <ul>
+        <li @click="closeModal">Close here</li>
+        <li>Not here</li>
+      </ul>
+    </template>
+  </BaseIdModalClose>
+</template>
+
+<script>
+import { BaseIdModalClose } from "@empathyco/x-components";
+
+export default {
+  name: "BaseIdModalCloseTest",
+  components: {
+    BaseIdModalClose
+  }
+};
+</script>
+```
+
 ## Events
 
 A list of events that the component will emit:

package/js/components/modals/base-id-modal-close.vue.js

@@ -10,15 +10,27 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c(
-    "BaseEventButton",
-    _vm._g(
-      {
-        staticClass: "x-button x-events-modal-id-close-button",
-        attrs: { events: _vm.events, "data-test": "close-modal-id" },
-      },
-      _vm.$listeners
-    ),
-    [_vm._t("default")],
+    "NoElement",
+    _vm._g({ attrs: { "data-test": "close-modal-id" } }, _vm.$listeners),
+    [
+      _vm._t(
+        "closing-element",
+        function () {
+          return [
+            _c(
+              "button",
+              {
+                staticClass: "x-button x-events-modal-id-close-button",
+                on: { click: _vm.emitCloseModalEvent },
+              },
+              [_vm._t("default")],
+              2
+            ),
+          ]
+        },
+        { closeModal: _vm.emitCloseModalEvent }
+      ),
+    ],
     2
   )
 };

package/js/components/modals/base-id-modal-close.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    v-on=\"$listeners\"\n    :events=\"events\"\n    class=\"x-button x-events-modal-id-close-button\"\n    data-test=\"close-modal-id\"\n  >\n    <!-- @slot (Required) Button content with a text, an icon or both -->\n    <slot />\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { XEventsTypes } from '../../wiring/events.types';\n  import BaseEventButton from '../base-event-button.vue';\n\n  /**\n   * Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when\n   * clicked with the modalId as payload. It has a default slot to customize its contents.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton }\n  })\n  export default class BaseIdModalClose extends Vue {\n    @Prop({ required: true })\n    protected modalId!: string;\n\n    protected get events(): Partial<XEventsTypes> {\n      return { UserClickedCloseModal: this.modalId };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot and closing the modal with\nmodalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload\n  is the id of the modal that is going to be closed.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"base-id-modal-close.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue"],"sourcesContent":["<template>\n  <NoElement v-on=\"$listeners\" data-test=\"close-modal-id\">\n    <!--\n      @slot closing-element. It's the element that will trigger the modal closing. It's a\n      button by default.\n        @binding {Function} closeModal - The function to close the modal.\n    -->\n    <slot :closeModal=\"emitCloseModalEvent\" name=\"closing-element\">\n      <button @click=\"emitCloseModalEvent\" class=\"x-button x-events-modal-id-close-button\">\n        <slot />\n      </button>\n    </slot>\n  </NoElement>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import BaseEventButton from '../base-event-button.vue';\n  import { NoElement } from '../no-element';\n\n  /**\n   * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n   * It's fully customizable as it exposes the closing event but by default it renders a\n   * customizable button.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseEventButton, NoElement }\n  })\n  export default class BaseIdModalClose extends Vue {\n    @Prop({ required: true })\n    protected modalId!: string;\n\n    protected emitCloseModalEvent(): void {\n      this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el as HTMLElement });\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nComponent containing an event button that emits `UserClickedCloseModal` when clicked with the\nmodalId as payload. It has a default slot to customize its contents and can also be fully\ncustomized, replacing the default button with any other element.\n\n### Basic example\n\nThe component renders whatever is passed to it in the default slot inside the button and closes the\nmodal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <img src=\"./close-button-icon.svg\" />\n  </BaseIdModalClose>\n</template>\n\n<script>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\n</script>\n```\n\n### Replacing the default button\n\nThe component renders whatever element is passed, replacing the default button and exposing the\nfunction to close the modal with modalId `my-modal`.\n\n```vue\n<template>\n  <BaseIdModalClose modalId=\"my-modal\">\n    <template #closing-element=\"{ closeModal }\">\n      <ul>\n        <li @click=\"closeModal\">Close here</li>\n        <li>Not here</li>\n      </ul>\n    </template>\n  </BaseIdModalClose>\n</template>\n\n<script>\n  import { BaseIdModalClose } from '@empathyco/x-components';\n\n  export default {\n    name: 'BaseIdModalCloseTest',\n    components: {\n      BaseIdModalClose\n    }\n  };\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserClickedCloseModal`: the event is emitted after the user clicks the button. The event payload\n  is the id of the modal that is going to be closed.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/components/modals/base-id-modal-close.vue_rollup-plugin-vue_script.vue.js

@@ -2,16 +2,18 @@ import { __decorate } from 'tslib';
 import Vue from 'vue';
 import { Prop, Component } from 'vue-property-decorator';
 import __vue_component__ from '../base-event-button.vue.js';
+import { NoElement } from '../no-element.js';
 
 /**
- * Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when
- * clicked with the modalId as payload. It has a default slot to customize its contents.
+ * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
+ * It's fully customizable as it exposes the closing event but by default it renders a
+ * customizable button.
  *
  * @public
  */
 let BaseIdModalClose = class BaseIdModalClose extends Vue {
-    get events() {
-        return { UserClickedCloseModal: this.modalId };
+    emitCloseModalEvent() {
+        this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el });
     }
 };
 __decorate([
@@ -19,7 +21,7 @@ __decorate([
 ], BaseIdModalClose.prototype, "modalId", void 0);
 BaseIdModalClose = __decorate([
     Component({
-        components: { BaseEventButton: __vue_component__ }
+        components: { BaseEventButton: __vue_component__, NoElement }
     })
 ], BaseIdModalClose);
 var script = BaseIdModalClose;

package/js/components/modals/base-id-modal-close.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-close.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XEventsTypes } from '../../wiring/events.types';\nimport BaseEventButton from '../base-event-button.vue';\n\n/**\n * Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when\n * clicked with the modalId as payload. It has a default slot to customize its contents.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton }\n})\nexport default class BaseIdModalClose extends Vue {\n  @Prop({ required: true })\n  protected modalId!: string;\n\n  protected get events(): Partial<XEventsTypes> {\n    return { UserClickedCloseModal: this.modalId };\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;AAkBA;;;;;;AASA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;IAI/C,IAAc,MAAM;QAClB,OAAO,EAAE,qBAAqB,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;KAChD;CACF,CAAA;AALC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACE;AAFR,gBAAgB;IAHpC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE;KAChC,CAAC;GACmB,gBAAgB,CAOpC;aAPoB,gBAAgB;;;;"}
+{"version":3,"file":"base-id-modal-close.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport BaseEventButton from '../base-event-button.vue';\nimport { NoElement } from '../no-element';\n\n/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.\n * It's fully customizable as it exposes the closing event but by default it renders a\n * customizable button.\n *\n * @public\n */\n@Component({\n  components: { BaseEventButton, NoElement }\n})\nexport default class BaseIdModalClose extends Vue {\n  @Prop({ required: true })\n  protected modalId!: string;\n\n  protected emitCloseModalEvent(): void {\n    this.$x.emit('UserClickedCloseModal', this.modalId, { target: this.$el as HTMLElement });\n  }\n}\n"],"names":["BaseEventButton"],"mappings":";;;;;;AAqBA;;;;;;;AAUA,IAAqB,gBAAgB,GAArC,MAAqB,gBAAiB,SAAQ,GAAG;IAIrC,mBAAmB;QAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAkB,EAAE,CAAC,CAAC;KAC1F;CACF,CAAA;AALC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;iDACE;AAFR,gBAAgB;IAHpC,SAAS,CAAC;QACT,UAAU,EAAE,mBAAEA,iBAAe,EAAE,SAAS,EAAE;KAC3C,CAAC;GACmB,gBAAgB,CAOpC;aAPoB,gBAAgB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.142",
+  "version": "3.0.0-alpha.143",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "e9cc9a0b4467dfef61680a9f7214d01cfea3986b"
+  "gitHead": "0a4ffde06d515171513348ccfafbafbffcd8fb11"
 }

package/report/x-components.api.json

@@ -3702,7 +3702,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@empathyco/x-components!BaseIdModalClose:class",
-          "docComment": "/**\n * Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when clicked with the modalId as payload. It has a default slot to customize its contents.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}. It's fully customizable as it exposes the closing event but by default it renders a customizable button.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -3722,31 +3722,17 @@
           "name": "BaseIdModalClose",
           "members": [
             {
-              "kind": "Property",
-              "canonicalReference": "@empathyco/x-components!BaseIdModalClose#events:member",
+              "kind": "Method",
+              "canonicalReference": "@empathyco/x-components!BaseIdModalClose#emitCloseModalEvent:member(1)",
               "docComment": "",
               "excerptTokens": [
                 {
                   "kind": "Content",
-                  "text": "protected get events(): "
-                },
-                {
-                  "kind": "Reference",
-                  "text": "Partial",
-                  "canonicalReference": "!Partial:type"
-                },
-                {
-                  "kind": "Content",
-                  "text": "<"
-                },
-                {
-                  "kind": "Reference",
-                  "text": "XEventsTypes",
-                  "canonicalReference": "@empathyco/x-components!XEventsTypes:interface"
+                  "text": "protected emitCloseModalEvent(): "
                 },
                 {
                   "kind": "Content",
-                  "text": ">"
+                  "text": "void"
                 },
                 {
                   "kind": "Content",
@@ -3754,13 +3740,15 @@
                 }
               ],
               "isOptional": false,
-              "releaseTag": "Public",
-              "name": "events",
-              "propertyTypeTokenRange": {
+              "isStatic": false,
+              "returnTypeTokenRange": {
                 "startIndex": 1,
-                "endIndex": 5
+                "endIndex": 2
               },
-              "isStatic": false
+              "releaseTag": "Public",
+              "overloadIndex": 1,
+              "parameters": [],
+              "name": "emitCloseModalEvent"
             },
             {
               "kind": "Property",

package/report/x-components.api.md

@@ -385,7 +385,7 @@ export class BaseIdModal extends Vue_2 {
 // @public
 export class BaseIdModalClose extends Vue_2 {
     // (undocumented)
-    protected get events(): Partial<XEventsTypes>;
+    protected emitCloseModalEvent(): void;
     // (undocumented)
     protected modalId: string;
 }

package/types/components/modals/base-id-modal-close.vue.d.ts

@@ -1,13 +1,13 @@
 import Vue from 'vue';
-import { XEventsTypes } from '../../wiring/events.types';
 /**
- * Component containing an event button that emits {@link XEventsTypes.UserClickedCloseModal} when
- * clicked with the modalId as payload. It has a default slot to customize its contents.
+ * Component that allows to close a modal by emitting {@link XEventsTypes.UserClickedCloseModal}.
+ * It's fully customizable as it exposes the closing event but by default it renders a
+ * customizable button.
  *
  * @public
  */
 export default class BaseIdModalClose extends Vue {
     protected modalId: string;
-    protected get events(): Partial<XEventsTypes>;
+    protected emitCloseModalEvent(): void;
 }
 //# sourceMappingURL=base-id-modal-close.vue?rollup-plugin-vue=script.d.ts.map

package/types/components/modals/base-id-modal-close.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-id-modal-close.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAaA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGzD;;;;;GAKG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAE/C,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B,SAAS,KAAK,MAAM,IAAI,OAAO,CAAC,YAAY,CAAC,CAE5C;CACF"}
+{"version":3,"file":"base-id-modal-close.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/base-id-modal-close.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgBA,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB;;;;;;GAMG;AAIH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,GAAG;IAE/C,SAAS,CAAC,OAAO,EAAG,MAAM,CAAC;IAE3B,SAAS,CAAC,mBAAmB,IAAI,IAAI;CAGtC"}