npm - @empathyco/x-components - Versions diffs - 3.0.0-alpha.190 → 3.0.0-alpha.192 - Mend

@empathyco/x-components 3.0.0-alpha.190 → 3.0.0-alpha.192

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.

Files changed (22) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,33 @@
 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.192](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.191...@empathyco/x-components@3.0.0-alpha.192) (2022-10-14)
+### Continuous Integration
+- update `runners` version (#740)
+  ([38f246c](https://github.com/empathyco/x/commit/38f246c306dac40c4afbcdea08336052981ca9b8))
+# 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.191](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.190...@empathyco/x-components@3.0.0-alpha.191) (2022-10-13)
+### Features
+- Add directional origins for translate animations (#773)
+  ([9f4a0b0](https://github.com/empathyco/x/commit/9f4a0b03c675291672081388e42fcec725ab594d))
+- Add search input hover events (#772)
+  ([393cc87](https://github.com/empathyco/x/commit/393cc877457f618396a5b71a7a826e6e8d139c3a)),
+  closes [EX-7177](https://searchbroker.atlassian.net/browse/EX-7177)
+# 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.190](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.189...@empathyco/x-components@3.0.0-alpha.190) (2022-10-12)
 ### Features

package/design-system/default-theme.css CHANGED Viewed

@@ -47,16 +47,6 @@
 .x-badge-container {
   position: relative;
 }
-:root {
-  --x-color-background-badge-default: var(--x-color-base-neutral-10);
-  --x-color-text-badge-default: var(--x-color-base-neutral-100);
-  --x-color-border-badge-default: var(--x-color-base-neutral-10);
-  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
-  --x-size-border-width-badge-default: 0;
-  --x-size-width-badge-default: 1.5em;
-  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
-  --x-size-font-badge-default: var(--x-size-font-base-xs);
-}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -143,27 +133,14 @@
   }
 }
 :root {
-  --x-color-background-button-default: var(--x-color-base-lead);
-  --x-color-border-button-default: var(--x-color-background-button-default);
-  --x-color-text-button-default: var(--x-color-base-neutral-100);
-  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-width-button-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-height-button-default: var(--x-size-base-08);
-  --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-left-button-default: var(--x-size-base-05);
-  --x-size-gap-button-default: var(--x-size-base-03);
-  --x-font-family-button-default: var(--x-font-family-text);
-  --x-size-font-button-default: var(--x-size-font-text);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text);
+  --x-color-background-badge-default: var(--x-color-base-neutral-10);
+  --x-color-text-badge-default: var(--x-color-base-neutral-100);
+  --x-color-border-badge-default: var(--x-color-base-neutral-10);
+  --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
+  --x-size-border-width-badge-default: 0;
+  --x-size-width-badge-default: 1.5em;
+  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
+  --x-size-font-badge-default: var(--x-size-font-base-xs);
 }
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
@@ -607,6 +584,29 @@
 .x-facet > *:first-child .x-icon:last-child:not(:first-child), .x-facet__header .x-icon:last-child:not(:first-child) {
   margin-left: auto;
 }
+:root {
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --x-font-family-button-default: var(--x-font-family-text);
+  --x-size-font-button-default: var(--x-size-font-text);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -1421,27 +1421,6 @@
 .x-message > p {
   margin: 0;
 }
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -1714,6 +1693,27 @@
   --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
   --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
 }
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
 :root {
   --x-size-border-radius-picture-default: 0;
   --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
@@ -2046,56 +2046,6 @@
   --x-color-background-scroll-bar-hover: transparent;
   --x-color-thumb-scroll-bar-hover: var(--x-color-base-neutral-70);
 }
-.x-sliding-panel {
-  z-index: 0;
-  background-color: var(--x-color-background-sliding-panel);
-}
-.x-sliding-panel__button.x-button {
-  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
-  pointer-events: none;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
-  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
-  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
-  opacity: 0;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
-  opacity: 1;
-  pointer-events: all;
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
-}
-.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
-  -webkit-mask: none;
-          mask: none;
-}
-.x-sliding-panel__scroll > * {
-  flex: 0 0 auto;
-}
-.x-sliding-panel__scroll > .x-list {
-  --x-string-flow-list: row nowrap;
-}
 :root {
   --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
   --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
@@ -2227,6 +2177,56 @@
   --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
   --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
 }
+.x-sliding-panel {
+  z-index: 0;
+  background-color: var(--x-color-background-sliding-panel);
+}
+.x-sliding-panel__button.x-button {
+  --x-size-padding-button: var(--x-size-padding-sliding-panel-button);
+  pointer-events: none;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button {
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-left {
+  transform: translateX(calc(-100% - var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--buttons-overflow .x-sliding-panel__button-right {
+  transform: translateX(calc(100% + var(--x-size-horizontal-margin-sliding-panel-button-overflow)));
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover .x-sliding-panel__button {
+  opacity: 0;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-start):hover .x-sliding-panel__button-left {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel.x-sliding-panel--show-buttons-on-hover:not(.x-sliding-panel--at-end):hover .x-sliding-panel__button-right {
+  opacity: 1;
+  pointer-events: all;
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient) .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient), rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--x-size-width-sliding-panel-gradient)), transparent calc(100% - 0.43 * var(--x-size-width-sliding-panel-gradient)));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to left, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+          mask: linear-gradient(to right, transparent calc(0.43 * var(--x-size-width-sliding-panel-gradient)), rgba(0, 0, 0, 0.8) calc(0.67 * var(--x-size-width-sliding-panel-gradient)), black var(--x-size-width-sliding-panel-gradient));
+}
+.x-sliding-panel:not(.x-sliding-panel--no-gradient).x-sliding-panel--at-start.x-sliding-panel--at-end .x-sliding-panel__scroll {
+  -webkit-mask: none;
+          mask: none;
+}
+.x-sliding-panel__scroll > * {
+  flex: 0 0 auto;
+}
+.x-sliding-panel__scroll > .x-list {
+  --x-string-flow-list: row nowrap;
+}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);

package/design-system/full-theme.css CHANGED Viewed

@@ -2987,12 +2987,6 @@
 .x-picture--colored.x-picture .x-picture--placeholder {
   --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
 }
-:root {
-  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
-  --x-mix-blend-mode-picture-colored: multiply;
-  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
-  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
-}
 .x-picture--cover.x-picture {
   position: relative;
 }
@@ -7479,3 +7473,10 @@
 .x-normal-case {
   text-transform: none;
 }
+:root {
+  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
+  --x-mix-blend-mode-picture-colored: multiply;
+  --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
+  --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
+}

package/docs/API-reference/api/x-components.searchboxxevents.md CHANGED Viewed

@@ -21,6 +21,8 @@ export interface SearchBoxXEvents
 |  [UserClearedQuery](./x-components.searchboxxevents.userclearedquery.md) | string | The user cleared the search-box query in any way, typing or pressing a button that clears it. The payload is usually an empty string. \* Payload: string. |
 |  [UserClickedSearchBox](./x-components.searchboxxevents.userclickedsearchbox.md) | void | The user clicked on the search-box input. \* Payload: none. |
 |  [UserFocusedSearchBox](./x-components.searchboxxevents.userfocusedsearchbox.md) | void | The user focused the search-box \* Payload: none. |
+|  [UserHoveredInSearchBox](./x-components.searchboxxevents.userhoveredinsearchbox.md) | void | The user hovered in the search-box. \* Payload: none. |
+|  [UserHoveredOutSearchBox](./x-components.searchboxxevents.userhoveredoutsearchbox.md) | void | The user hovered out the search-box. \* Payload: none. |
 |  [UserIsTypingAQuery](./x-components.searchboxxevents.useristypingaquery.md) | string | The user is typing/pasting a query \* Payload: the partial query that the user is typing. |
 |  [UserPressedClearSearchBoxButton](./x-components.searchboxxevents.userpressedclearsearchboxbutton.md) | void | The user triggered the button that clears the search-box \* Payload: none. |
 |  [UserPressedEnterKey](./x-components.searchboxxevents.userpressedenterkey.md) | string | The user pressed the enter key with the focus on the search-box \* Payload: the new query of the search-box. |

package/docs/API-reference/api/x-components.searchboxxevents.userhoveredinsearchbox.md ADDED Viewed

@@ -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; [SearchBoxXEvents](./x-components.searchboxxevents.md) &gt; [UserHoveredInSearchBox](./x-components.searchboxxevents.userhoveredinsearchbox.md)
+## SearchBoxXEvents.UserHoveredInSearchBox property
+The user hovered in the search-box. \* Payload: none.
+<b>Signature:</b>
+```typescript
+UserHoveredInSearchBox: void;
+```

package/docs/API-reference/api/x-components.searchboxxevents.userhoveredoutsearchbox.md ADDED Viewed

@@ -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; [SearchBoxXEvents](./x-components.searchboxxevents.md) &gt; [UserHoveredOutSearchBox](./x-components.searchboxxevents.userhoveredoutsearchbox.md)
+## SearchBoxXEvents.UserHoveredOutSearchBox property
+The user hovered out the search-box. \* Payload: none.
+<b>Signature:</b>
+```typescript
+UserHoveredOutSearchBox: void;
+```

package/js/components/animations/animate-translate/animate-translate.style.scss.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-active {\n  transition: transform var(--x-duration-animation, 0.3s) ease-out;\n}\n.x-animate-translate--enter.x-animate-translate--top, .x-animate-translate--leave-to.x-animate-translate--top {\n  transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom, .x-animate-translate--leave-to.x-animate-translate--bottom {\n  transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left, .x-animate-translate--leave-to.x-animate-translate--left {\n  transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right, .x-animate-translate--leave-to.x-animate-translate--right {\n  transform: translateX(100%);\n}";
+var css = ".x-animate-translate--enter-active, .x-animate-translate--leave-active {\n  transition: transform var(--x-duration-animation, 0.3s) ease-out;\n}\n.x-animate-translate--enter.x-animate-translate--top, .x-animate-translate--leave-to.x-animate-translate--top {\n  transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom, .x-animate-translate--leave-to.x-animate-translate--bottom {\n  transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left, .x-animate-translate--leave-to.x-animate-translate--left {\n  transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right, .x-animate-translate--leave-to.x-animate-translate--right {\n  transform: translateX(100%);\n}\n.x-animate-translate--enter.x-animate-translate--top-to-bottom {\n  transform: translateY(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--bottom-to-top {\n  transform: translateY(100%);\n}\n.x-animate-translate--enter.x-animate-translate--left-to-right {\n  transform: translateX(-100%);\n}\n.x-animate-translate--enter.x-animate-translate--right-to-left {\n  transform: translateX(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--top-to-bottom {\n  transform: translateY(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--bottom-to-top {\n  transform: translateY(-100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--left-to-right {\n  transform: translateX(100%);\n}\n.x-animate-translate--leave-to.x-animate-translate--right-to-left {\n  transform: translateX(-100%);\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/js/components/animations/create-directional-animation-factory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/*\n Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n \n @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n \n @internal\n */\nexport function createDirectionalAnimationFactory(\n animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n return (animationOrigin = 'top') => {\n return Vue.extend({\n name: `transition-${animationName}-${animationOrigin}`,\n inheritAttrs: false,\n render(h) {\n return h(\n 'transition',\n {\n props: {\n name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n ...this.$attrs\n },\n on: this.$listeners\n },\n this.$slots.default\n );\n }\n });\n };\n}\n\nexport type AnimationOrigin = 'top' \| 'bottom' \| 'left' \| 'right';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,YAAY,EAAE,KAAK;YACnB,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG;wBAClE,GAAG,IAAI,CAAC,MAAM;qBACf;oBACD,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}
1	+ {"version":3,"file":"create-directional-animation-factory.js","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"sourcesContent":["import Vue, { VueConstructor } from 'vue';\n\n/*\n Abstract Factory to create animations Factory. The returned animation factory uses the\n * `animationName` parameter to create a Transition Component with that name.\n \n @param animationName - The name to use in the Transition Component of animation.\n * @returns The animation factory configured.\n \n @internal\n */\nexport function createDirectionalAnimationFactory(\n animationName: string\n): (animationOrigin?: AnimationOrigin) => VueConstructor {\n return (animationOrigin = 'top') => {\n return Vue.extend({\n name: `transition-${animationName}-${animationOrigin}`,\n inheritAttrs: false,\n render(h) {\n return h(\n 'transition',\n {\n props: {\n name: `x-${animationName}--${animationOrigin} x-${animationName}-`,\n ...this.$attrs\n },\n on: this.$listeners\n },\n this.$slots.default\n );\n }\n });\n };\n}\n\nexport type AnimationOrigin =\n \| 'top'\n \| 'bottom'\n \| 'left'\n \| 'right'\n \| 'top-to-bottom'\n \| 'bottom-to-top'\n \| 'left-to-right'\n \| 'right-to-left';\n"],"names":[],"mappings":";;AAEA;;;;;;;;;SASgB,iCAAiC,CAC/C,aAAqB;IAErB,OAAO,CAAC,eAAe,GAAG,KAAK;QAC7B,OAAO,GAAG,CAAC,MAAM,CAAC;YAChB,IAAI,EAAE,cAAc,aAAa,IAAI,eAAe,EAAE;YACtD,YAAY,EAAE,KAAK;YACnB,MAAM,CAAC,CAAC;gBACN,OAAO,CAAC,CACN,YAAY,EACZ;oBACE,KAAK,EAAE;wBACL,IAAI,EAAE,KAAK,aAAa,KAAK,eAAe,MAAM,aAAa,GAAG;wBAClE,GAAG,IAAI,CAAC,MAAM;qBACf;oBACD,EAAE,EAAE,IAAI,CAAC,UAAU;iBACpB,EACD,IAAI,CAAC,MAAM,CAAC,OAAO,CACpB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,CAAC;AACJ;;;;"}

package/js/x-modules/search-box/components/search-input.vue.js CHANGED Viewed

@@ -26,6 +26,8 @@ var __vue_render__ = function () {
         },
         domProps: { value: _vm.query },
         on: {
+          mouseenter: _vm.emitUserHoveredInSearchBox,
+          mouseleave: _vm.emitUserHoveredOutSearchBox,
           blur: _vm.emitUserBlurredSearchBox,
           click: _vm.emitUserClickedSearchBox,
           focus: _vm.emitUserFocusedSearchBox,
@@ -71,7 +73,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-513330ca";
+  const __vue_scope_id__ = "data-v-2c03251b";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/x-modules/search-box/components/search-input.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n v-on=\"$listeners\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /\n Maximum characters allowed in the input search.\n /\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /\n Allows input autofocus when the search field is rendered.\n /\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /\n Enables the auto-accept query after debounce.\n /\n @Prop({ default: true })\n protected instant!: boolean;\n\n /\n Debounce time for the instant.\n /\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /\n Keyboard keys to accept the autocomplete suggestion.\n /\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /\n Event that retrieves the autocomplete suggestion.\n /\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n /\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n */\n protected preventSpecialKey(event: InputEvent): void {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault();\n }\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"search-input.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue"],"sourcesContent":["<template>\n <input\n ref=\"input\"\n @mouseenter=\"emitUserHoveredInSearchBox\"\n @mouseleave=\"emitUserHoveredOutSearchBox\"\n @blur=\"emitUserBlurredSearchBox\"\n @click=\"emitUserClickedSearchBox\"\n @focus=\"emitUserFocusedSearchBox\"\n @input=\"emitUserIsTypingAQueryEvents\"\n @keydown.enter=\"emitUserPressedEnterKey\"\n @keydown.up.down.prevent=\"emitUserPressedArrowKey\"\n @beforeinput=\"preventSpecialKey\"\n v-on=\"$listeners\"\n :maxlength=\"maxLength\"\n :value=\"query\"\n autocomplete=\"off\"\n class=\"x-input x-search-input\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n type=\"search\"\n data-test=\"search-input\"\n :aria-label=\"searchInputMessage\"\n />\n</template>\n\n<script lang=\"ts\">\n import { Suggestion } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { XOn } from '../../../components/decorators/bus.decorators';\n import { State } from '../../../components/decorators/store.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { ArrowKey, PropsWithType } from '../../../utils';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils/types';\n import { XEventsTypes } from '../../../wiring/events.types';\n import { WireMetadata } from '../../../wiring/wiring.types';\n import { searchBoxXModule } from '../x-module';\n\n /*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\n @Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n })\n export default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /\n Maximum characters allowed in the input search.\n /\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /\n Allows input autofocus when the search field is rendered.\n /\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /\n Enables the auto-accept query after debounce.\n /\n @Prop({ default: true })\n protected instant!: boolean;\n\n /\n Debounce time for the instant.\n /\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /\n Keyboard keys to accept the autocomplete suggestion.\n /\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /\n Event that retrieves the autocomplete suggestion.\n /\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n /\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n protected emitUserHoveredInSearchBox(): void {\n this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n protected emitUserHoveredOutSearchBox(): void {\n this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n */\n protected preventSpecialKey(event: InputEvent): void {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault();\n }\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-search-input::-webkit-search-decoration,\n .x-search-input::-webkit-search-cancel-button,\n .x-search-input::-webkit-search-results-button,\n .x-search-input::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserBlurredSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserFocusedSearchBox`](./../../api/x-components.searchboxxevents.md)\n- [`UserIsTypingAQuery`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedEnterKey`](./../../api/x-components.searchboxxevents.md)\n- [`UserPressedArrowKey`](./../../api/x-components.xeventstypes.md)\n- [`UserAcceptedAQuery`](./../../api/x-components.xeventstypes.md)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nTo use this component, the Search service must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you have a basic example of how the search input is rendered.\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <SearchInput />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the search input has been limited to accept a maximum of 5 characters, including\nspaces, it won't take the focus when it is rendered, and it will emit the `UserAcceptedAQuery` event\nafter 1000 milliseconds without typing.\n\n_Type a term with more than 5 characters to try it out!_\n\n```vue live\n<template>\n <SearchInput :maxLength=\"5\" :autofocus=\"false\" :instant=\"true\" :instantDebounceInMs=\"1000\" />\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n }\n };\n</script>\n```\n\n### Play with events\n\nIn this example, a message has been added below the search input to illustrate the action performed.\nFor example, if you select the search input box, the message “focus” appears. When you start to\nenter a search term, the message “typing” appears. If you press Enter after typing a search term,\nthe message “enter” appears.\n\n<!-- prettier-ignore-start -->\n:::warning X Events are only emitted from the root X Component.\nAt the moment, X Events are only emitted from the root X Component. This means that if you wrap\nthe `SearchInput` with another component of another module like the `MainScroll`, you should add\nthe listeners to the `MainScroll` instead of the `SearchInput`. If you need to subscribe to these\nevents, it is recommended to use the [`GlobalXBus`](../common/x-components.global-x-bus.md)\ncomponent instead.\n:::\n<!-- prettier-ignore-end -->\n\n_Type any term in the input field to try it out!_\n\n```vue live\n<template>\n <div>\n <SearchInput\n @UserPressedEnterKey=\"value = 'enter'\"\n @UserFocusedSearchBox=\"hasFocus = true\"\n @UserBlurredSearchBox=\"hasFocus = false\"\n @UserIsTypingAQuery=\"value = 'typing'\"\n />\n <strong>{{ value }}</strong>\n <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>\n </div>\n</template>\n\n<script>\n import { SearchInput } from '@empathyco/x-components/search-box';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput\n },\n data() {\n return {\n value: '',\n hasFocus: false\n };\n }\n };\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `SearchInput` component\ncommunicates with the [`SearchButton`](x-components.search-button.md) and the\n[`ClearSearchInput`](x-components.clear-search-input.md) to offer a full query entry experience.\nFurthermore, you can use it together with the [`QuerySuggestions`](query-suggestions.md) component\nto autocomplete the typed search term.\n\n_Type “trousers” or another fashion term in the input field and then click the clear icon to try it\nout!_\n\n```vue live\n<template>\n <div>\n <div style=\"display: flex; flex-flow: row nowrap;\">\n <SearchInput />\n <ClearSearchInput>\n <img src=\"/assets/icons/cross.svg\" />\n </ClearSearchInput>\n <SearchButton>Search</SearchButton>\n </div>\n <QuerySuggestions />\n </div>\n</template>\n\n<script>\n import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box';\n import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n\n export default {\n name: 'SearchInputDemo',\n components: {\n SearchInput,\n ClearSearchInput,\n SearchButton,\n QuerySuggestions\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue_script.vue.js CHANGED Viewed

@@ -70,6 +70,22 @@ let SearchInput = class SearchInput extends Vue {
             feature: 'search_box'
         };
     }
+    /**
+     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
+     *
+     * @internal
+     */
+    emitUserHoveredInSearchBox() {
+        this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });
+    }
+    /**
+     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
+     *
+     * @internal
+     */
+    emitUserHoveredOutSearchBox() {
+        this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });
+    }
     /**
      * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
      *

package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue_script.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /\n Maximum characters allowed in the input search.\n /\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /\n Allows input autofocus when the search field is rendered.\n /\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /\n Enables the auto-accept query after debounce.\n /\n @Prop({ default: true })\n protected instant!: boolean;\n\n /\n Debounce time for the instant.\n /\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /\n Keyboard keys to accept the autocomplete suggestion.\n /\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /\n Event that retrieves the autocomplete suggestion.\n /\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n /\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n */\n protected preventSpecialKey(event: InputEvent): void {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault();\n }\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"search-input.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { Suggestion } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { XOn } from '../../../components/decorators/bus.decorators';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { ArrowKey, PropsWithType } from '../../../utils';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils/types';\nimport { XEventsTypes } from '../../../wiring/events.types';\nimport { WireMetadata } from '../../../wiring/wiring.types';\nimport { searchBoxXModule } from '../x-module';\n\n/*\n This component renders an input field that allows the user to type a query. It also reacts to\n * query changes through event listening.\n \n @public\n /\n@Component({\n mixins: [xComponentMixin(searchBoxXModule)]\n})\nexport default class SearchInput extends Vue {\n public $refs!: { input: HTMLInputElement };\n\n protected searchInputMessage = 'type your query here';\n\n /\n Maximum characters allowed in the input search.\n /\n @Prop({ default: 64 })\n protected maxLength!: number;\n\n /\n Allows input autofocus when the search field is rendered.\n /\n @Prop({ default: true })\n protected autofocus!: boolean;\n\n /\n Enables the auto-accept query after debounce.\n /\n @Prop({ default: true })\n protected instant!: boolean;\n\n /\n Debounce time for the instant.\n /\n @Prop({ default: 500 })\n protected instantDebounceInMs!: number;\n\n /\n Keyboard keys to accept the autocomplete suggestion.\n /\n @Prop({ default: () => ['ArrowRight'] })\n protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/\n\n /\n Event that retrieves the autocomplete suggestion.\n /\n @Prop({ default: 'QuerySuggestionsChanged' })\n protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;\n\n @State('searchBox', 'query')\n public query!: string;\n\n /\n When event {@link XEventsTypes.UserReachedEmpathizeTop} or\n * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}\n * are emitted the search input is focused.\n \n @internal\n /\n @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])\n focusInput(): void {\n this.$refs.input?.focus();\n }\n\n protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;\n\n /\n When event {@link XEventsTypes.UserAcceptedAQuery} or\n * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit\n * {@link XEvent} `UserAcceptedAQuery` is canceled.\n \n @internal\n /\n @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])\n cancelDebouncedUserAcceptedAQuery(): void {\n this.debouncedUserAcceptedAQuery?.cancel();\n }\n\n mounted(): void {\n if (this.autofocus) {\n this.focusInput();\n }\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in\n * `instantDebounceInMs` prop.\n \n @internal\n * @param query - The query that will be emitted.\n /\n emitDebouncedUserAcceptedAQuery(query: string): void {\n if (this.instant) {\n if (!this.debouncedUserAcceptedAQuery) {\n this.debouncedUserAcceptedAQuery = debounce(\n this.emitUserAcceptedAQuery.bind(this),\n this.instantDebounceInMs\n );\n }\n this.debouncedUserAcceptedAQuery(query);\n }\n }\n\n /\n Generates the {@link WireMetadata \| event metadata} object omitting the moduleName.\n \n @returns The {@link WireMetadata} object omitting the moduleName.\n * @internal\n /\n protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n return {\n target: this.$refs.input,\n feature: 'search_box'\n };\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.\n \n @internal\n /\n protected emitUserHoveredInSearchBox(): void {\n this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.\n \n @internal\n /\n protected emitUserHoveredOutSearchBox(): void {\n this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.\n \n @internal\n /\n protected emitUserBlurredSearchBox(): void {\n this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks the search input.\n \n @internal\n /\n protected emitUserClickedSearchBox(): void {\n this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.\n \n @internal\n /\n protected emitUserFocusedSearchBox(): void {\n this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });\n }\n\n /\n Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something\n * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user\n * removes all characters in the search-box.\n \n @internal\n /\n protected emitUserIsTypingAQueryEvents(): void {\n const query = this.$refs.input.value;\n this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });\n if (query.trim()) {\n this.emitDebouncedUserAcceptedAQuery(query);\n } else {\n this.cancelDebouncedUserAcceptedAQuery();\n }\n }\n\n /\n Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.\n \n @param event - The keyboard event with the arrow key pressed.\n * @internal\n /\n protected emitUserPressedArrowKey(event: KeyboardEvent): void {\n this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());\n }\n\n /\n Emits multiple events when the user pressed the enter key.\n \n @remarks\n * Emitted events are:\n * {@link SearchBoxXEvents.UserPressedEnterKey}\n * {@link XEventsTypes.UserAcceptedAQuery}\n \n @internal\n /\n protected emitUserPressedEnterKey(): void {\n const query = this.$refs.input.value.trim();\n if (query.length > 0) {\n this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());\n this.emitUserAcceptedAQuery(query);\n }\n this.$refs.input?.blur();\n }\n\n /\n Emits {@link XEventsTypes.UserAcceptedAQuery} event.\n \n @remarks It is necessary in a separated method to use it as the parameter of debounce in\n * emitDebouncedUserAcceptedAQuery method.\n * @internal\n * @param query - The query that will be emitted.\n /\n protected emitUserAcceptedAQuery(query: string): void {\n this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());\n }\n\n /\n Prevents the user from either typing or pasting special characters in the input field.\n \n @internal\n * @param event - The event that will be checked for special characters.\n */\n protected preventSpecialKey(event: InputEvent): void {\n if (/[<>]/.test(event.data ?? '')) {\n event.preventDefault();\n }\n }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/search-box/components/search-input.vue_rollup-plugin-vue_styles.0.vue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
-var css = ".x-search-input[data-v-513330ca]::-webkit-search-decoration,\n.x-search-input[data-v-513330ca]::-webkit-search-cancel-button,\n.x-search-input[data-v-513330ca]::-webkit-search-results-button,\n.x-search-input[data-v-513330ca]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}";
+var css = ".x-search-input[data-v-2c03251b]::-webkit-search-decoration,\n.x-search-input[data-v-2c03251b]::-webkit-search-cancel-button,\n.x-search-input[data-v-2c03251b]::-webkit-search-results-button,\n.x-search-input[data-v-2c03251b]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}";
            const isBrowser = /*#__PURE__*/ (function () {
              return (
                 Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.190",
+  "version": "3.0.0-alpha.192",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -39,6 +39,9 @@
     "url": "https://github.com/empathyco/x.git",
     "directory": "packages/x-components"
   },
+  "engines": {
+    "node": "16"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "ts-node --project ./build/tsconfig.json ./build/build.ts",
@@ -60,12 +63,12 @@
     "cypress:open:component": "cypress open-ct"
   },
   "dependencies": {
-    "@empathyco/x-adapter": "^8.0.0-alpha.10",
-    "@empathyco/x-deep-merge": "^1.3.0-alpha.23",
-    "@empathyco/x-logger": "^1.2.0-alpha.3",
-    "@empathyco/x-storage-service": "^2.0.0-alpha.3",
-    "@empathyco/x-types": "^10.0.0-alpha.37",
-    "@empathyco/x-utils": "^1.0.0-alpha.9",
+    "@empathyco/x-adapter": "^8.0.0-alpha.11",
+    "@empathyco/x-deep-merge": "^1.3.0-alpha.24",
+    "@empathyco/x-logger": "^1.2.0-alpha.4",
+    "@empathyco/x-storage-service": "^2.0.0-alpha.4",
+    "@empathyco/x-types": "^10.0.0-alpha.38",
+    "@empathyco/x-utils": "^1.0.0-alpha.10",
     "@types/resize-observer-browser": "~0.1.5",
     "@vue/devtools-api": "~6.2.1",
     "rxjs": "~7.4.0",
@@ -82,8 +85,8 @@
   "devDependencies": {
     "@cypress/vue": "~2.2.4",
     "@cypress/webpack-dev-server": "~1.8.4",
-    "@empathyco/x-adapter-platform": "^1.0.0-alpha.36",
-    "@empathyco/x-tailwindcss": "^0.2.0-alpha.19",
+    "@empathyco/x-adapter-platform": "^1.0.0-alpha.37",
+    "@empathyco/x-tailwindcss": "^0.2.0-alpha.20",
     "@microsoft/api-documenter": "~7.15.3",
     "@microsoft/api-extractor": "~7.19.4",
     "@rollup/plugin-commonjs": "~21.0.1",
@@ -133,5 +136,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "7cae134cd8ce6d88f7e002a515d7a414edca80f2"
+  "gitHead": "17d5671eee5423faac83cdb48fdd38723a7dbbc6"
 }

package/report/x-components.api.json CHANGED Viewed

@@ -40320,6 +40320,58 @@
                 "endIndex": 2
               }
             },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!SearchBoxXEvents#UserHoveredInSearchBox:member",
+              "docComment": "/**\n * The user hovered in the search-box. * Payload: none.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "UserHoveredInSearchBox: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "UserHoveredInSearchBox",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "kind": "PropertySignature",
+              "canonicalReference": "@empathyco/x-components!SearchBoxXEvents#UserHoveredOutSearchBox:member",
+              "docComment": "/**\n * The user hovered out the search-box. * Payload: none.\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "UserHoveredOutSearchBox: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "UserHoveredOutSearchBox",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
             {
               "kind": "PropertySignature",
               "canonicalReference": "@empathyco/x-components!SearchBoxXEvents#UserIsTypingAQuery:member",

package/report/x-components.api.md CHANGED Viewed

@@ -3860,6 +3860,8 @@ export interface SearchBoxXEvents {
     UserClearedQuery: string;
     UserClickedSearchBox: void;
     UserFocusedSearchBox: void;
+    UserHoveredInSearchBox: void;
+    UserHoveredOutSearchBox: void;
     UserIsTypingAQuery: string;
     UserPressedClearSearchBoxButton: void;
     UserPressedEnterKey: string;
@@ -3953,6 +3955,10 @@ export class SearchInput extends Vue_2 {
     // @internal
     protected emitUserFocusedSearchBox(): void;
     // @internal
+    protected emitUserHoveredInSearchBox(): void;
+    // @internal
+    protected emitUserHoveredOutSearchBox(): void;
+    // @internal
     protected emitUserIsTypingAQueryEvents(): void;
     // @internal
     protected emitUserPressedArrowKey(event: KeyboardEvent): void;

package/types/components/animations/create-directional-animation-factory.d.ts CHANGED Viewed

@@ -9,5 +9,5 @@ import { VueConstructor } from 'vue';
  * @internal
  */
 export declare function createDirectionalAnimationFactory(animationName: string): (animationOrigin?: AnimationOrigin) => VueConstructor;
-export declare type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right';
+export declare type AnimationOrigin = 'top' | 'bottom' | 'left' | 'right' | 'top-to-bottom' | 'bottom-to-top' | 'left-to-right' | 'right-to-left';
 //# sourceMappingURL=create-directional-animation-factory.d.ts.map

package/types/components/animations/create-directional-animation-factory.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-directional-animation-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,iCAAiC,CAC/C,aAAa,EAAE,MAAM,GACpB,CAAC,eAAe,CAAC,EAAE,eAAe,KAAK,cAAc,CAoBvD;AAED,oBAAY,eAAe,~~GAAG~~,KAAK,~~GAAG~~,QAAQ,~~GAAG~~,MAAM,~~GAAG~~,OAAO,CAAC"}
1	+ {"version":3,"file":"create-directional-animation-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/animations/create-directional-animation-factory.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C;;;;;;;;GAQG;AACH,wBAAgB,iCAAiC,CAC/C,aAAa,EAAE,MAAM,GACpB,CAAC,eAAe,CAAC,EAAE,eAAe,KAAK,cAAc,CAoBvD;AAED,oBAAY,eAAe,GACvB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,CAAC"}

package/types/x-modules/search-box/components/search-input.vue.d.ts CHANGED Viewed

@@ -73,6 +73,18 @@ export default class SearchInput extends Vue {
      * @internal
      */
     protected createEventMetadata(): Omit<WireMetadata, 'moduleName'>;
+    /**
+     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
+     *
+     * @internal
+     */
+    protected emitUserHoveredInSearchBox(): void;
+    /**
+     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
+     *
+     * @internal
+     */
+    protected emitUserHoveredOutSearchBox(): void;
     /**
      * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
      *

package/types/x-modules/search-box/components/search-input.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"search-input.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"~~AAwBA~~,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAY,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;GAKG;AAIH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IACnC,KAAK,EAAG;QAAE,KAAK,EAAE,gBAAgB,CAAA;KAAE,CAAC;IAE3C,SAAS,CAAC,kBAAkB,SAA0B;IAEtD;;OAEG;IAEH,SAAS,CAAC,SAAS,EAAG,MAAM,CAAC;IAE7B;;OAEG;IAEH,SAAS,CAAC,SAAS,EAAG,OAAO,CAAC;IAE9B;;OAEG;IAEH,SAAS,CAAC,OAAO,EAAG,OAAO,CAAC;IAE5B;;OAEG;IAEH,SAAS,CAAC,mBAAmB,EAAG,MAAM,CAAC;IAEvC;;OAEG;IAEH,SAAS,CAAC,wBAAwB,EAAG,MAAM,EAAE,CAAC;IAE9C;;OAEG;IAEH,SAAS,CAAC,4BAA4B,EAAG,aAAa,CAAC,YAAY,EAAE,UAAU,EAAE,CAAC,CAAC;IAG5E,KAAK,EAAG,MAAM,CAAC;IAEtB;;;;;;OAMG;IAEH,UAAU,IAAI,IAAI;IAIlB,SAAS,CAAC,2BAA2B,EAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpE;;;;;;OAMG;IAEH,iCAAiC,IAAI,IAAI;IAIzC,OAAO,IAAI,IAAI;IAMf;;;;;;OAMG;IACH,+BAA+B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAYpD;;;;;OAKG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC;IAOjE;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;;;OAMG;IACH,SAAS,CAAC,4BAA4B,IAAI,IAAI;IAU9C;;;;;OAKG;IACH,SAAS,CAAC,uBAAuB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAI7D;;;;;;;;;OASG;IACH,SAAS,CAAC,uBAAuB,IAAI,IAAI;IASzC;;;;;;;OAOG;IACH,SAAS,CAAC,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrD;;;;;OAKG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAKrD"}
1	+ {"version":3,"file":"search-input.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/search-box/components/search-input.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AA0BA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,MAAM,KAAK,CAAC;AAKtB,OAAO,EAAY,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D;;;;;GAKG;AAIH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,GAAG;IACnC,KAAK,EAAG;QAAE,KAAK,EAAE,gBAAgB,CAAA;KAAE,CAAC;IAE3C,SAAS,CAAC,kBAAkB,SAA0B;IAEtD;;OAEG;IAEH,SAAS,CAAC,SAAS,EAAG,MAAM,CAAC;IAE7B;;OAEG;IAEH,SAAS,CAAC,SAAS,EAAG,OAAO,CAAC;IAE9B;;OAEG;IAEH,SAAS,CAAC,OAAO,EAAG,OAAO,CAAC;IAE5B;;OAEG;IAEH,SAAS,CAAC,mBAAmB,EAAG,MAAM,CAAC;IAEvC;;OAEG;IAEH,SAAS,CAAC,wBAAwB,EAAG,MAAM,EAAE,CAAC;IAE9C;;OAEG;IAEH,SAAS,CAAC,4BAA4B,EAAG,aAAa,CAAC,YAAY,EAAE,UAAU,EAAE,CAAC,CAAC;IAG5E,KAAK,EAAG,MAAM,CAAC;IAEtB;;;;;;OAMG;IAEH,UAAU,IAAI,IAAI;IAIlB,SAAS,CAAC,2BAA2B,EAAG,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAEpE;;;;;;OAMG;IAEH,iCAAiC,IAAI,IAAI;IAIzC,OAAO,IAAI,IAAI;IAMf;;;;;;OAMG;IACH,+BAA+B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAYpD;;;;;OAKG;IACH,SAAS,CAAC,mBAAmB,IAAI,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC;IAOjE;;;;OAIG;IACH,SAAS,CAAC,0BAA0B,IAAI,IAAI;IAI5C;;;;OAIG;IACH,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAI7C;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;OAIG;IACH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;;;;;OAMG;IACH,SAAS,CAAC,4BAA4B,IAAI,IAAI;IAU9C;;;;;OAKG;IACH,SAAS,CAAC,uBAAuB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAI7D;;;;;;;;;OASG;IACH,SAAS,CAAC,uBAAuB,IAAI,IAAI;IASzC;;;;;;;OAOG;IACH,SAAS,CAAC,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIrD;;;;;OAKG;IACH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAKrD"}

package/types/x-modules/search-box/events.types.d.ts CHANGED Viewed

@@ -10,6 +10,16 @@ export interface SearchBoxXEvents {
      * * Payload: The new search-box query.
      */
     SearchBoxQueryChanged: string;
+    /**
+     * The user hovered in the search-box.
+     * * Payload: none.
+     */
+    UserHoveredInSearchBox: void;
+    /**
+     * The user hovered out the search-box.
+     * * Payload: none.
+     */
+    UserHoveredOutSearchBox: void;
     /**
      * The user removed the focus from the search-box.
      * * Payload: none.

package/types/x-modules/search-box/events.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/search-box/events.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,+BAA+B,EAAE,IAAI,CAAC;IACtC;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB"}
1	+ {"version":3,"file":"events.types.d.ts","sourceRoot":"","sources":["../../../../src/x-modules/search-box/events.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,EAAE,IAAI,CAAC;IAC7B;;;OAGG;IACH,uBAAuB,EAAE,IAAI,CAAC;IAC9B;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH;;;;OAIG;IACH,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH,oBAAoB,EAAE,IAAI,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,+BAA+B,EAAE,IAAI,CAAC;IACtC;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB"}