@empathyco/x-components 3.0.0-alpha.138 → 3.0.0-alpha.139

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 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.139](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.138...@empathyco/x-components@3.0.0-alpha.139) (2022-07-22)
+
+### Features
+
+- **history-queries:** disable `MyHistory` without confirmation when the `history queries` list is
+  empty (#615)
+  ([8b0b1d6](https://github.com/empathyco/x/commit/8b0b1d6e818557eba9482dcd149ed3882ca6c854)),
+  closes [EX-6696](https://searchbroker.atlassian.net/browse/EX-6696)
+
+# 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.138](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.137...@empathyco/x-components@3.0.0-alpha.138) (2022-07-22)
 
 **Note:** Version bump only for package @empathyco/x-components

package/design-system/full-theme.css

@@ -3925,6 +3925,156 @@
   --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
   --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
 }
+[dir="ltr"] .x-tag {
+  border-left-width: var(--x-size-border-width-left-tag-default);
+}
+[dir="rtl"] .x-tag {
+  border-right-width: var(--x-size-border-width-left-tag-default);
+}
+[dir="ltr"] .x-tag {
+  border-right-width: var(--x-size-border-width-right-tag-default);
+}
+[dir="rtl"] .x-tag {
+  border-left-width: var(--x-size-border-width-right-tag-default);
+}
+[dir="ltr"] .x-tag {
+  padding-left: var(--x-size-padding-left-tag-default);
+}
+[dir="rtl"] .x-tag {
+  padding-right: var(--x-size-padding-left-tag-default);
+}
+[dir="ltr"] .x-tag {
+  padding-right: var(--x-size-padding-right-tag-default);
+}
+[dir="rtl"] .x-tag {
+  padding-left: var(--x-size-padding-right-tag-default);
+}
+.x-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-tag-default);
+  border-bottom-width: var(--x-size-border-width-bottom-tag-default);
+  border-radius: var(--x-size-border-radius-top-left-tag-default) var(--x-size-border-radius-top-right-tag-default) var(--x-size-border-radius-bottom-right-tag-default) var(--x-size-border-radius-bottom-left-tag-default);
+  background-color: var(--x-color-background-tag-default);
+  border-color: var(--x-color-border-tag-default);
+  color: var(--x-color-text-tag-default);
+  line-height: var(--x-size-line-height-tag-default);
+  font-family: var(--x-font-family-tag-default);
+  font-size: var(--x-size-font-tag-default);
+  font-weight: var(--x-number-font-weight-tag-default);
+  gap: var(--x-size-gap-tag-default);
+  min-height: var(--x-size-height-tag-default);
+  min-width: calc(3 * var(--x-size-line-height-tag-default));
+  cursor: pointer;
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-tag {
+    gap: 0;
+  }
+  .x-tag > *:not(:last-child) {
+    margin-right: var(--x-size-gap-tag-default);
+  }
+}
+.x-tag.x-suggestion {
+  --x-color-background-suggestion-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-default: 0;
+  --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-default: 0;
+  --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-suggestion-group {
+  --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
+  --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
+  --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
+  --x-size-padding-top-suggestion-group-default: 0;
+  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-suggestion-group-default: 0;
+  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
+  --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
+  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
+  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
+  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
+  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
+  --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
+  --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
+  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
+  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default);
+}
+.x-tag.x-filter {
+  --x-color-background-filter-default: transparent;
+  --x-size-border-width-filter-default: 0;
+  --x-color-text-filter-default: var(--x-color-text-tag-default);
+  --x-size-padding-top-filter-default: 0;
+  --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
+  --x-size-padding-bottom-filter-default: 0;
+  --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
+  --x-size-gap-filter-default: var(--x-size-gap-tag-default);
+  --x-font-family-filter-default: var(--x-font-family-tag-default);
+  --x-size-font-filter-default: var(--x-size-font-tag-default);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
+  --x-size-line-height-filter-default: var(--x-size-line-height-tag-default);
+}
+.x-tag.x-tag.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated);
+  border-color: var(--x-color-border-tag-default-curated);
+  color: var(--x-color-text-tag-default-curated);
+  line-height: var(--x-size-line-height-tag-default-curated);
+  font-family: var(--x-font-family-tag-default-curated);
+  font-size: var(--x-size-font-tag-default-curated);
+  font-weight: var(--x-number-font-weight-tag-default-curated);
+}
+.x-tag.x-tag.x-tag--is-selected {
+  background-color: var(--x-color-background-tag-default-selected);
+  border-color: var(--x-color-border-tag-default-selected);
+  color: var(--x-color-text-tag-default-selected);
+  line-height: var(--x-size-line-height-tag-default-selected);
+  font-family: var(--x-font-family-tag-default-selected);
+  font-size: var(--x-size-font-tag-default-selected);
+  font-weight: var(--x-number-font-weight-tag-default-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
+  background-color: var(--x-color-background-tag-default-curated-selected);
+  border-color: var(--x-color-border-tag-default-curated-selected);
+  color: var(--x-color-text-tag-default-curated-selected);
+  line-height: var(--x-size-line-height-tag-default-curated-selected);
+  font-family: var(--x-font-family-tag-default-curated-selected);
+  font-size: var(--x-size-font-tag-default-curated-selected);
+  font-weight: var(--x-number-font-weight-tag-default-curated-selected);
+}
+.x-tag.x-tag.x-tag--is-selected.x-filter {
+  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
+  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
+  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-tag-default-selected
+  );
+  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
+}
 :root {
   --x-color-background-tag-default: var(--x-color-base-neutral-100);
   --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -7463,154 +7613,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-[dir="ltr"] .x-tag {
-  border-left-width: var(--x-size-border-width-left-tag-default);
-}
-[dir="rtl"] .x-tag {
-  border-right-width: var(--x-size-border-width-left-tag-default);
-}
-[dir="ltr"] .x-tag {
-  border-right-width: var(--x-size-border-width-right-tag-default);
-}
-[dir="rtl"] .x-tag {
-  border-left-width: var(--x-size-border-width-right-tag-default);
-}
-[dir="ltr"] .x-tag {
-  padding-left: var(--x-size-padding-left-tag-default);
-}
-[dir="rtl"] .x-tag {
-  padding-right: var(--x-size-padding-left-tag-default);
-}
-[dir="ltr"] .x-tag {
-  padding-right: var(--x-size-padding-right-tag-default);
-}
-[dir="rtl"] .x-tag {
-  padding-left: var(--x-size-padding-right-tag-default);
-}
-.x-tag {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  box-sizing: border-box;
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-tag-default);
-  border-bottom-width: var(--x-size-border-width-bottom-tag-default);
-  border-radius: var(--x-size-border-radius-top-left-tag-default) var(--x-size-border-radius-top-right-tag-default) var(--x-size-border-radius-bottom-right-tag-default) var(--x-size-border-radius-bottom-left-tag-default);
-  background-color: var(--x-color-background-tag-default);
-  border-color: var(--x-color-border-tag-default);
-  color: var(--x-color-text-tag-default);
-  line-height: var(--x-size-line-height-tag-default);
-  font-family: var(--x-font-family-tag-default);
-  font-size: var(--x-size-font-tag-default);
-  font-weight: var(--x-number-font-weight-tag-default);
-  gap: var(--x-size-gap-tag-default);
-  min-height: var(--x-size-height-tag-default);
-  min-width: calc(3 * var(--x-size-line-height-tag-default));
-  cursor: pointer;
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-tag {
-    gap: 0;
-  }
-  .x-tag > *:not(:last-child) {
-    margin-right: var(--x-size-gap-tag-default);
-  }
-}
-.x-tag.x-suggestion {
-  --x-color-background-suggestion-default: var(--x-color-background-tag-default);
-  --x-color-text-suggestion-default: var(--x-color-text-tag-default);
-  --x-color-border-suggestion-default: var(--x-color-border-tag-default);
-  --x-size-padding-top-suggestion-default: 0;
-  --x-size-padding-right-suggestion-default: var(--x-size-padding-right-tag-default);
-  --x-size-padding-bottom-suggestion-default: 0;
-  --x-size-padding-left-suggestion-default: var(--x-size-padding-left-tag-default);
-  --x-size-gap-suggestion-default: var(--x-size-gap-tag-default);
-  --x-size-border-width-suggestion-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-top-suggestion-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-suggestion-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-suggestion-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-bottom-right-tag-default);
-  --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-bottom-leftt-tag-default);
-  --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-top-right-tag-default);
-  --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-top-left-tag-default);
-  --x-font-family-suggestion-default: var(--x-font-family-tag-default);
-  --x-size-font-suggestion-default: var(--x-size-font-tag-default);
-  --x-size-line-height-suggestion-default: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-suggestion-default: var(--x-number-font-weight-tag-default);
-}
-.x-tag.x-suggestion-group {
-  --x-color-background-suggestion-group-default: var(--x-color-background-tag-default);
-  --x-color-text-suggestion-group-default: var(--x-color-text-tag-default);
-  --x-color-border-suggestion-group-default: var(--x-color-border-tag-default);
-  --x-size-padding-top-suggestion-group-default: 0;
-  --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-tag-default);
-  --x-size-padding-bottom-suggestion-group-default: 0;
-  --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-tag-default);
-  --x-size-gap-suggestion-group-default: var(--x-size-gap-tag-default);
-  --x-size-border-width-suggestion-group-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-tag-default);
-  --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-tag-default);
-  --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-bottom-right-tag-default);
-  --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-bottom-leftt-tag-default);
-  --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-top-right-tag-default);
-  --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-top-left-tag-default);
-  --x-font-family-suggestion-group-default: var(--x-font-family-tag-default);
-  --x-size-font-suggestion-group-default: var(--x-size-font-tag-default);
-  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-tag-default);
-  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-tag-default);
-}
-.x-tag.x-filter {
-  --x-color-background-filter-default: transparent;
-  --x-size-border-width-filter-default: 0;
-  --x-color-text-filter-default: var(--x-color-text-tag-default);
-  --x-size-padding-top-filter-default: 0;
-  --x-size-padding-right-filter-default: var(--x-size-padding-right-tag-default);
-  --x-size-padding-bottom-filter-default: 0;
-  --x-size-padding-left-filter-default: var(--x-size-padding-left-tag-default);
-  --x-size-gap-filter-default: var(--x-size-gap-tag-default);
-  --x-font-family-filter-default: var(--x-font-family-tag-default);
-  --x-size-font-filter-default: var(--x-size-font-tag-default);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-tag-default);
-  --x-size-line-height-filter-default: var(--x-size-line-height-tag-default);
-}
-.x-tag.x-tag.x-tag--is-curated {
-  background-color: var(--x-color-background-tag-default-curated);
-  border-color: var(--x-color-border-tag-default-curated);
-  color: var(--x-color-text-tag-default-curated);
-  line-height: var(--x-size-line-height-tag-default-curated);
-  font-family: var(--x-font-family-tag-default-curated);
-  font-size: var(--x-size-font-tag-default-curated);
-  font-weight: var(--x-number-font-weight-tag-default-curated);
-}
-.x-tag.x-tag.x-tag--is-selected {
-  background-color: var(--x-color-background-tag-default-selected);
-  border-color: var(--x-color-border-tag-default-selected);
-  color: var(--x-color-text-tag-default-selected);
-  line-height: var(--x-size-line-height-tag-default-selected);
-  font-family: var(--x-font-family-tag-default-selected);
-  font-size: var(--x-size-font-tag-default-selected);
-  font-weight: var(--x-number-font-weight-tag-default-selected);
-}
-.x-tag.x-tag.x-tag--is-selected.x-tag--is-curated {
-  background-color: var(--x-color-background-tag-default-curated-selected);
-  border-color: var(--x-color-border-tag-default-curated-selected);
-  color: var(--x-color-text-tag-default-curated-selected);
-  line-height: var(--x-size-line-height-tag-default-curated-selected);
-  font-family: var(--x-font-family-tag-default-curated-selected);
-  font-size: var(--x-size-font-tag-default-curated-selected);
-  font-weight: var(--x-number-font-weight-tag-default-curated-selected);
-}
-.x-tag.x-tag.x-tag--is-selected.x-filter {
-  --x-color-text-filter-default-selected: var(--x-color-text-tag-default-selected);
-  --x-font-family-filter-default-selected: var(--x-font-family-tag-default-selected);
-  --x-size-font-filter-default-selected: var(--x-size-font-tag-default-selected);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-tag-default-selected
-  );
-  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
-}

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) &gt; [hasHistoryQueries](./x-components.historyqueriesswitch.hashistoryqueries.md)
+
+## HistoryQueriesSwitch.hasHistoryQueries property
+
+Checks if there are history queries.
+
+<b>Signature:</b>
+
+```typescript
+protected get hasHistoryQueries(): boolean;
+```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) &gt; [historyQueries](./x-components.historyqueriesswitch.historyqueries.md)
+
+## HistoryQueriesSwitch.historyQueries property
+
+The history queries from the state.
+
+<b>Signature:</b>
+
+```typescript
+historyQueries: HistoryQuery[];
+```

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

@@ -13,3 +13,10 @@ export default class HistoryQueriesSwitch extends Vue
 ```
 <b>Extends:</b> Vue
 
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [hasHistoryQueries](./x-components.historyqueriesswitch.hashistoryqueries.md) |  | boolean | Checks if there are history queries. |
+|  [historyQueries](./x-components.historyqueriesswitch.historyqueries.md) |  | HistoryQuery\[\] | The history queries from the state. |
+

package/docs/API-reference/components/history-queries/x-components.history-queries-switch.md

@@ -16,7 +16,11 @@ A list of events that the component will emit:
 - [`UserClickedEnableHistoryQueries`](x-components.historyqueriesxevents.userclickedenablehistoryqueries.md): the event is emitted
   whenever the user clicks the switch and the history queries are disabled.
 - [`UserClickedDisableHistoryQueries`](x-components.historyqueriesxevents.userclickeddisablehistoryqueries.md): the event is emitted
-  whenever the user clicks the switch and the history queries are enabled.
+  whenever the user clicks the switch when the history queries are enabled and the list of history
+  queries is not empty.
+- [`UserClickedConfirmDisableHistoryQueries`](x-components.historyqueriesxevents.userclickedconfirmdisablehistoryqueries.md): the event is
+  emitted whenever the user clicks the switch when the history queries are enabled and the list of
+  history queries is empty.
 
 ## See it in action
 

package/js/x-modules/history-queries/components/history-queries-switch.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { historyQueriesXModule } from '../x-module';\n\n  /**\n   * History Queries Switch is a component to enable or disable the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { BaseSwitch }\n  })\n  export default class HistoryQueriesSwitch extends Vue {\n    /**\n     * A boolean with the isEnabled value coming from the store state.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'isEnabled')\n    public isEnabled!: boolean;\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$x.emit(\n        this.isEnabled ? 'UserClickedDisableHistoryQueries' : 'UserClickedEnableHistoryQueries'\n      );\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`]\n  (x-components.historyqueriesxevents.userclickedenablehistoryqueries.md): the event is emitted\n  whenever the user clicks the switch and the history queries are disabled.\n- [`UserClickedDisableHistoryQueries`]\n  (x-components.historyqueriesxevents.userclickeddisablehistoryqueries.md): the event is emitted\n  whenever the user clicks the switch and the history queries are enabled.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"history-queries-switch.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue"],"sourcesContent":["<template>\n  <BaseSwitch @change=\"toggle\" :value=\"isEnabled\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { HistoryQuery } from '@empathyco/x-types';\n  import BaseSwitch from '../../../components/base-switch.vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { historyQueriesXModule } from '../x-module';\n  import { isArrayEmpty } from '../../../utils/array';\n\n  /**\n   * History Queries Switch is a component to enable or disable the history queries.\n   * This component emits events depending on the `isEnabled` value.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(historyQueriesXModule)],\n    components: { BaseSwitch }\n  })\n  export default class HistoryQueriesSwitch extends Vue {\n    /**\n     * A boolean with the isEnabled value coming from the store state.\n     *\n     * @internal\n     */\n    @State('historyQueries', 'isEnabled')\n    public isEnabled!: boolean;\n\n    /**\n     * The history queries from the state.\n     */\n    @State('historyQueries', 'historyQueries')\n    public historyQueries!: HistoryQuery[];\n\n    /**\n     * Checks if there are history queries.\n     *\n     * @returns True if there are history queries; false otherwise.\n     */\n    protected get hasHistoryQueries(): boolean {\n      return !isArrayEmpty(this.historyQueries);\n    }\n\n    /**\n     * Emits an event based on the switch state.\n     *\n     * @internal\n     */\n    protected toggle(): void {\n      this.$x.emit(\n        this.isEnabled\n          ? this.hasHistoryQueries\n            ? 'UserClickedDisableHistoryQueries'\n            : 'UserClickedConfirmDisableHistoryQueries'\n          : 'UserClickedEnableHistoryQueries'\n      );\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserClickedEnableHistoryQueries`]\n  (x-components.historyqueriesxevents.userclickedenablehistoryqueries.md): the event is emitted\n  whenever the user clicks the switch and the history queries are disabled.\n- [`UserClickedDisableHistoryQueries`]\n  (x-components.historyqueriesxevents.userclickeddisablehistoryqueries.md): the event is emitted\n  whenever the user clicks the switch when the history queries are enabled and the list of history\n  queries is not empty.\n- [`UserClickedConfirmDisableHistoryQueries`]\n  (x-components.historyqueriesxevents.userclickedconfirmdisablehistoryqueries.md): the event is\n  emitted whenever the user clicks the switch when the history queries are enabled and the list of\n  history queries is empty.\n\n## See it in action\n\nHere you have a basic example of how the switch is rendered.\n\n_Try clicking it to see how it changes its state_\n\n```vue live\n<template>\n  <HistoryQueriesSwitch />\n</template>\n\n<script>\n  import { HistoryQueriesSwitch } from '@empathyco/x-components';\n\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      HistoryQueriesSwitch\n    }\n  };\n</script>\n```\n\nHere you have a more complex example.\n\n```vue live\n<template>\n  <div>\n    <div>\n      <SearchInput :instant=\"false\" />\n      <SearchButton>Search</SearchButton>\n    </div>\n    <label>\n      History queries:\n      <HistoryQueriesSwitch />\n      <HistoryQueries />\n      <BaseEventsModal :eventsToOpenModal=\"eventsToOpenModal\">\n        <BaseEventButton :events=\"disableEvents\">Disable</BaseEventButton>\n        <BaseEventButton :events=\"cancelEvents\">Cancel</BaseEventButton>\n      </BaseEventsModal>\n    </label>\n  </div>\n</template>\n\n<script>\n  import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components';\n  import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries';\n  import { SearchInput, SearchButton } from '@empathyco/x-components/search';\n  export default {\n    name: 'HistoryQueriesSwitchDemo',\n    components: {\n      BaseEventButton,\n      BaseEventsModal,\n      HistoryQueriesSwitch,\n      HistoryQueries,\n      SearchInput,\n      SearchButton\n    },\n    data() {\n      return {\n        eventsToOpenModal: ['UserClickedDisableHistoryQueries'],\n        disableEvents: {\n          UserClickedConfirmDisableHistoryQueries: undefined,\n          UserClickedCloseEventsModal: undefined\n        },\n        cancelEvents: {\n          UserClickedCloseEventsModal: undefined\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/history-queries/components/history-queries-switch.vue_rollup-plugin-vue_script.vue.js

@@ -5,6 +5,7 @@ import __vue_component__ from '../../../components/base-switch.vue.js';
 import { State } from '../../../components/decorators/store.decorators.js';
 import { xComponentMixin } from '../../../components/x-component.mixin.js';
 import { historyQueriesXModule } from '../x-module.js';
+import { isArrayEmpty } from '../../../utils/array.js';
 
 /**
  * History Queries Switch is a component to enable or disable the history queries.
@@ -13,18 +14,33 @@ import { historyQueriesXModule } from '../x-module.js';
  * @public
  */
 let HistoryQueriesSwitch = class HistoryQueriesSwitch extends Vue {
+    /**
+     * Checks if there are history queries.
+     *
+     * @returns True if there are history queries; false otherwise.
+     */
+    get hasHistoryQueries() {
+        return !isArrayEmpty(this.historyQueries);
+    }
     /**
      * Emits an event based on the switch state.
      *
      * @internal
      */
     toggle() {
-        this.$x.emit(this.isEnabled ? 'UserClickedDisableHistoryQueries' : 'UserClickedEnableHistoryQueries');
+        this.$x.emit(this.isEnabled
+            ? this.hasHistoryQueries
+                ? 'UserClickedDisableHistoryQueries'
+                : 'UserClickedConfirmDisableHistoryQueries'
+            : 'UserClickedEnableHistoryQueries');
     }
 };
 __decorate([
     State('historyQueries', 'isEnabled')
 ], HistoryQueriesSwitch.prototype, "isEnabled", void 0);
+__decorate([
+    State('historyQueries', 'historyQueries')
+], HistoryQueriesSwitch.prototype, "historyQueries", void 0);
 HistoryQueriesSwitch = __decorate([
     Component({
         mixins: [xComponentMixin(historyQueriesXModule)],

package/js/x-modules/history-queries/components/history-queries-switch.vue_rollup-plugin-vue_script.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport BaseSwitch from '../../../components/base-switch.vue';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { historyQueriesXModule } from '../x-module';\n\n/**\n * History Queries Switch is a component to enable or disable the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(historyQueriesXModule)],\n  components: { BaseSwitch }\n})\nexport default class HistoryQueriesSwitch extends Vue {\n  /**\n   * A boolean with the isEnabled value coming from the store state.\n   *\n   * @internal\n   */\n  @State('historyQueries', 'isEnabled')\n  public isEnabled!: boolean;\n\n  /**\n   * Emits an event based on the switch state.\n   *\n   * @internal\n   */\n  protected toggle(): void {\n    this.$x.emit(\n      this.isEnabled ? 'UserClickedDisableHistoryQueries' : 'UserClickedEnableHistoryQueries'\n    );\n  }\n}\n"],"names":["BaseSwitch"],"mappings":";;;;;;;;AAYA;;;;;;AAUA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,GAAG;;;;;;IAczC,MAAM;QACd,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,SAAS,GAAG,kCAAkC,GAAG,iCAAiC,CACxF,CAAC;KACH;CACF,CAAA;AAZC;IADC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC;uDACV;AAPR,oBAAoB;IAJxC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;QAChD,UAAU,EAAE,cAAEA,iBAAU,EAAE;KAC3B,CAAC;GACmB,oBAAoB,CAmBxC;aAnBoB,oBAAoB;;;;"}
+{"version":3,"file":"history-queries-switch.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\nimport Vue from 'vue';\nimport { Component } from 'vue-property-decorator';\nimport { HistoryQuery } from '@empathyco/x-types';\nimport BaseSwitch from '../../../components/base-switch.vue';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { historyQueriesXModule } from '../x-module';\nimport { isArrayEmpty } from '../../../utils/array';\n\n/**\n * History Queries Switch is a component to enable or disable the history queries.\n * This component emits events depending on the `isEnabled` value.\n *\n * @public\n */\n@Component({\n  mixins: [xComponentMixin(historyQueriesXModule)],\n  components: { BaseSwitch }\n})\nexport default class HistoryQueriesSwitch extends Vue {\n  /**\n   * A boolean with the isEnabled value coming from the store state.\n   *\n   * @internal\n   */\n  @State('historyQueries', 'isEnabled')\n  public isEnabled!: boolean;\n\n  /**\n   * The history queries from the state.\n   */\n  @State('historyQueries', 'historyQueries')\n  public historyQueries!: HistoryQuery[];\n\n  /**\n   * Checks if there are history queries.\n   *\n   * @returns True if there are history queries; false otherwise.\n   */\n  protected get hasHistoryQueries(): boolean {\n    return !isArrayEmpty(this.historyQueries);\n  }\n\n  /**\n   * Emits an event based on the switch state.\n   *\n   * @internal\n   */\n  protected toggle(): void {\n    this.$x.emit(\n      this.isEnabled\n        ? this.hasHistoryQueries\n          ? 'UserClickedDisableHistoryQueries'\n          : 'UserClickedConfirmDisableHistoryQueries'\n        : 'UserClickedEnableHistoryQueries'\n    );\n  }\n}\n"],"names":["BaseSwitch"],"mappings":";;;;;;;;;AAcA;;;;;;AAUA,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,GAAG;;;;;;IAoBnD,IAAc,iBAAiB;QAC7B,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3C;;;;;;IAOS,MAAM;QACd,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,SAAS;cACV,IAAI,CAAC,iBAAiB;kBACpB,kCAAkC;kBAClC,yCAAyC;cAC3C,iCAAiC,CACtC,CAAC;KACH;CACF,CAAA;AA/BC;IADC,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC;uDACV;AAM3B;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;4DACH;AAbpB,oBAAoB;IAJxC,SAAS,CAAC;QACT,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;QAChD,UAAU,EAAE,cAAEA,iBAAU,EAAE;KAC3B,CAAC;GACmB,oBAAoB,CAsCxC;aAtCoB,oBAAoB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.138",
+  "version": "3.0.0-alpha.139",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -125,5 +125,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "354abe8e415744c9b62a59a7bfb7e21e051d5dc7"
+  "gitHead": "a09e6ff5149bd33c0ee0ebb88e5bde22058c4fe7"
 }

package/report/x-components.api.json

@@ -19957,7 +19957,67 @@
           ],
           "releaseTag": "Public",
           "name": "HistoryQueriesSwitch",
-          "members": [],
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!HistoryQueriesSwitch#hasHistoryQueries:member",
+              "docComment": "/**\n * Checks if there are history queries.\n *\n * @returns True if there are history queries; false otherwise.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "protected get hasHistoryQueries(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "boolean"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "hasHistoryQueries",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false
+            },
+            {
+              "kind": "Property",
+              "canonicalReference": "@empathyco/x-components!HistoryQueriesSwitch#historyQueries:member",
+              "docComment": "/**\n * The history queries from the state.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "historyQueries: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "HistoryQuery",
+                  "canonicalReference": "@empathyco/x-components!HistoryQuery:interface"
+                },
+                {
+                  "kind": "Content",
+                  "text": "[]"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "historyQueries",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "isStatic": false
+            }
+          ],
           "extendsTokenRange": {
             "startIndex": 1,
             "endIndex": 3

package/report/x-components.api.md

@@ -1925,6 +1925,8 @@ export interface HistoryQueriesState extends QueryState {
 
 // @public
 export class HistoryQueriesSwitch extends Vue_2 {
+    protected get hasHistoryQueries(): boolean;
+    historyQueries: HistoryQuery_2[];
     // @internal
     isEnabled: boolean;
     // @internal

package/types/x-modules/history-queries/components/history-queries-switch.vue.d.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { HistoryQuery } from '@empathyco/x-types';
 /**
  * History Queries Switch is a component to enable or disable the history queries.
  * This component emits events depending on the `isEnabled` value.
@@ -12,6 +13,16 @@ export default class HistoryQueriesSwitch extends Vue {
      * @internal
      */
     isEnabled: boolean;
+    /**
+     * The history queries from the state.
+     */
+    historyQueries: HistoryQuery[];
+    /**
+     * Checks if there are history queries.
+     *
+     * @returns True if there are history queries; false otherwise.
+     */
+    protected get hasHistoryQueries(): boolean;
     /**
      * Emits an event based on the switch state.
      *

package/types/x-modules/history-queries/components/history-queries-switch.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"history-queries-switch.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAKA,OAAO,GAAG,MAAM,KAAK,CAAC;AAOtB;;;;;GAKG;AAKH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,GAAG;IACnD;;;;OAIG;IAEI,SAAS,EAAG,OAAO,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;CAKzB"}
+{"version":3,"file":"history-queries-switch.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/history-queries/components/history-queries-switch.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAKA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAOlD;;;;;GAKG;AAKH,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,GAAG;IACnD;;;;OAIG;IAEI,SAAS,EAAG,OAAO,CAAC;IAE3B;;OAEG;IAEI,cAAc,EAAG,YAAY,EAAE,CAAC;IAEvC;;;;OAIG;IACH,SAAS,KAAK,iBAAiB,IAAI,OAAO,CAEzC;IAED;;;;OAIG;IACH,SAAS,CAAC,MAAM,IAAI,IAAI;CASzB"}