@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.34

package/docs/build-search-ui/web-use-x-components-guide.md

@@ -0,0 +1,165 @@
+---
+title: Use & configure Interface X Components in your project
+tags:
+  - configuration
+  - x configuration
+  - x component configuration
+---
+
+# Use and configure Interface X Components in your project
+
+Interface X Components are like building blocks that you pick up and mix to craft your
+search UI experiences. The goal of using components is to include only the components you want,
+wherever you want. So, **just import the components, register, and go!**
+
+Once you’ve installed the
+[dependencies and the xPlugin](web-x-components-integration-guide.md#_1-install-the-dependencies),
+you’re ready to use X Components in your project.
+
+## 1. Import and register the X Components
+
+Many of the X Components are distributed into modules to make them easier to manage. So you
+need to indicate from which module you’re importing each component as appropriate.
+
+For example, the `search-box` module contains the `SearchInput`, `SearchButton`, and
+`ClearSearchInput` components.
+
+### Import and register components from a module
+
+When importing the components, you can register each component **locally for each Vue instance** as
+you go.
+
+```typescript
+//Import each component you'd like to use, before you register it.
+import { ComponentA } from './Module1';
+import { ComponentB } from './Module1';
+import { ComponentC } from './Module1';
+
+//Locally register each component.
+export default {
+  components: {
+    ComponentA,
+    ComponentB,
+    ComponentC
+  }
+  // ...
+};
+
+//The components are now ready to be used inside your template.
+```
+
+### Import and register components globally
+
+Alternatively, you can **globally** register components in Vue directly in the `main.js` file if you
+plan on using a component more than once in your app. By registering the components globally, you
+can use them in the template of any root Vue instance you create afterwards.
+
+::: develop Although you can register components globally, it should be done with caution as **it
+may impact future performance**. Remember if you register the components globally, the entire
+X Component module is loaded and registered each time this code line is run. :::
+
+```typescript
+import { ComponentA, ComponentB, ComponentC } from './ModuleA';
+
+Vue.component('ComponentAName', ComponentA);
+Vue.component('ComponentBName', ComponentB);
+Vue.component('ComponentCName', ComponentC);
+```
+
+## 2. Configure the X Components
+
+You can configure some behaviors for each component to customize the search experience.
+
+To provide different project-specific behaviors, you can use:
+
+- **Props**: custom attributes to pass data into a component. It modifies the behavior or the
+  properties in a component.
+
+```vue
+//Configure a component with props.
+<SearchInput :maxLength="5" :autofocus="false" :instant="true" :instantDebounceInMs="1000" />
+```
+
+- **Scoped slots**: a slot exposes data from a child component to create your own custom
+  implementation.
+
+```vue
+//Configure a component with slots.
+<ClearSearchInput>Clear</ClearSearchInput>
+```
+
+You can pass the configuration attributes documented in the
+[UI Reference](/develop-empathy-platform/ui-reference/) for the Interface&nbsp;X&nbsp;Components.
+
+You can combine components at your ease and use resource modules such as modals, panels, and
+animations. You can also use base components, i.e. standard Vue components that don’t have any
+dependencies with the X&nbsp;Components. Use them as a foundation to build other components.
+
+Your components are ready to go, but you can provide your search UI with a friendly and fancy style
+and layout. For more information, see
+[Design tokens](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md).
+
+<!--If you want to support multiple languages, you can use the [x-translation](https://github.com/empathyco/x/tree/main/packages/x-translations) library to manage localization options.-->
+
+## Example: Using the search box components
+
+To build your search UI, you need to provide at least a search field that allows users to input a
+query. Additionally, you can include a button to trigger the search and a button to delete the input
+query.
+
+The search-box module contains these components:
+
+- `SearchInput`
+- `SearchButton`
+- `ClearSearchInput`
+
+::: interact Learn more about the
+[Search Box UI](/explore-empathy-platform/experience-search-&-discovery/search-box.md) :::
+
+### Importing the components from the search-box module
+
+For this purpose, you need to import the `SearchInput`, `SearchButton`, and `ClearSearchInput`
+components from the `search-box` module to the desired app component. Then, register them and
+include them in the template.
+
+First, import and locally register the components.
+
+```vue
+//Import the components from the corresponding module.
+<script>
+  import { SearchInput, SearchButton, ClearSearchInput } from '@empathyco/x-components/search-box';
+
+  //Locally register each component.
+  export default {
+    components: { SearchInput, SearchButton, ClearSearchInput }
+  };
+</script>
+```
+
+Now, you’re ready to start using the component wherever you want in your template.
+
+```vue
+<template>
+  <div>
+    <SearchInput />
+    <SearchButton />
+    <ClearSearchInput />
+  </div>
+</template>
+```
+
+### Configuring the SearchInput component
+
+Next, you want to configure the behavior of the `SearchInput` component. Here you use the
+`maxLength` prop to limit the maximum length to 20 characters.
+
+```vue
+<SearchInput
+  :maxLength="20"
+  :autofocus="false"
+  :instant="true"
+  :instantDebounceInMs="1000"
+  :autocompleteKeyboardKeys="['ArrowDown']"
+  :autocompleteSuggestionsEvent="'NextQueriesChanged'"
+/>
+```

package/docs/build-search-ui/web-x-components-integration-guide.md

@@ -0,0 +1,192 @@
+---
+title: Integrate Interface X Components in your Vue application
+tags:
+  - integration
+  - interface x components integration
+  - web integration
+  - x integration
+  - interface x
+---
+
+# Integrate Interface X Components in your Vue application
+
+In this tutorial, you’ll learn the basics to integrate the Interface X Components library
+in your own project to craft enticing Vue search experiences for your shop in a matter of minutes.
+
+::: interact If you are looking to use the ready-to-go project Interface X Archetype as
+your starting point, see
+**[Integrate Interface X Archetype project](/develop-empathy-platform/build-search-ui/web-archetype-integration-guide.md)**.
+:::
+
+For this tutorial, the Empathy Search API is used, but you can use any search API. This step-by-step
+guide requires a knowledge of **JavaScript** and **Vue.js**.
+
+You can find the X Components library in the
+[Interface X open source project in GitHub](https://github.com/empathyco/x).
+
+::: note Before you begin
+
+To integrate the X Components in a frontend UI, you need:
+
+- **Empathy Search API** to retrieve search data (or any other search API)
+- A **search adapter** to communicate with the search API. You can use the Empathy Adapter and
+  configure it with the `EmpathyAdapterBuilder`
+
+:::
+
+##### Steps to integrate the X Components in your project:
+
+1. Install **project dependencies**.
+2. Configure the **search adapter**.
+3. Configure the **xPlugin**.
+4. Install and **initialize the xPlugin**.
+
+## 1. Install the dependencies
+
+To build your search and discovery UI, the following project dependencies are required:
+
+- **x-components** library
+  ([`@empathyco/x-components`](https://github.com/empathyco/x/tree/main/packages/x-components)):
+  Interface X Components Vue.js library to implement out-of-the-box search UI components
+  in a couple of minutes.
+
+- **x-adapter**
+  ([`@empathyco/x-adapter`](https://github.com/empathyco/x/tree/main/packages/search-adapter)): A
+  search adapter connector that tells the app how to communicate with the Empathy Search API you’re
+  using, translating the response into understandable information for X Components. If you are
+  not using the Empathy Search API, you need to build your own search adapter.
+
+- **x-types**
+  ([`@empathyco/x-types`](https://github.com/empathyco/x/tree/main/packages/search-types)): The data
+  model used in the X Components to define types.
+
+- **reflect-metadata**: Polyfill that allows the internal decorators of X Components to be
+  used. This is only required if you use the Empathy search adapter (`x-adapter`).
+
+Install the project dependencies via `npm` as follows:
+
+```batch
+//Install the dependencies via npm.
+npm install --save @empathyco/x-components @empathyco/x-types @empathyco/x-adapter reflect-metadata
+```
+
+## 2. Configure the search adapter
+
+::: warning If you are using the Empathy search API and the Empathy Search Adapter (`x-adapter`),
+make sure you have imported the `reflect-metadata` polyfill before executing any code of the search
+adapter. :::
+
+Next, construct the search adapter. You will need the search adapter in the
+[xPlugin configuration](#_3-configure-the-xplugin).
+
+Empathy Search Adapter is a library for making it easier to consume search APIs. The project
+contains two main parts: an **implementation** to consume the Empathy Search API, and an
+**interface** that you can use to build your own adapter for other APIs.
+
+It contains a specific builder that helps you to configure the Empathy Search Adapter. If you are
+using Empathy Search API, you need to only configure the values for `instance`, `language`, `scope`,
+and `endpoint` properties in the `empathy-adapter.config.ts` file.
+
+```typescript
+// Import the search adapter and metadata
+import 'reflect-metadata';
+import { EmpathyAdapterBuilder } from '@empathyco/x-adapter';
+
+// Construct the EmpathyAdapterBuilder
+export const adapter = new EmpathyAdapterBuilder()
+  .withConfiguration({ instance: 'my-instance-id' })
+  .setLang('es')
+  .setScope('demo')
+  .setFeatureConfig('search', { endpoint: 'http://my-search-API-url' })
+  .build();
+```
+
+::: warning If you do not use the Empathy Search API, you need to build your own adapter. :::
+
+For more information, see
+[Using the Empathy Search Adapter](https://github.com/empathyco/x/tree/main/packages/search-adapter).
+
+## 3. Configure the plugin
+
+Plugins are self-contained code that usually add global-level functionality to Vue projects. They’re
+specifically objects that expose an `install` method, allowing you to keep your components clear and
+small.
+
+The xPlugin is designed to connect the X Components to the Vue components in your project.
+
+**Import** the xPlugin in your Vue instance.
+
+```typescript
+import Vue from 'vue';
+import { xPlugin } from '@empathyco/x-components';
+import { adapter } from './my-adapter';
+import { store } from './my-store';
+```
+
+Then, **configure** the xPlugin. It has two key options you need to configure:
+
+1. **Adapter**: A search adapter is required to connect and communicate with the search API. Here
+   you’re using the `EmpathyAdapterBuilder` to communicate specifically with the Empathy Search API.
+   If you are not using the Empathy Search API, you need to build your own adapter. See
+   [Configure the search adapter](#_2-configure-the-search-adapter).
+
+::: develop
+
+When using your own adapter, remember to configure the `instance`, `language`, `scope`, and
+`endpoint` methods.
+
+:::
+
+2. **Store**: The Vuex store. If you use a store for Vuex, you need to provide the store you’re
+   currently using for your project to the Vue instance.
+
+::: warning
+
+If you don’t provide any parameters for the `store`, a default store is created automatically. Leave
+the `store` blank **only if you’re not using any store** for Vuex.
+
+:::
+
+## 4. Install and initialize the plugin
+
+Finally, the last step is to install and initialize the xPlugin. You need to do this in the
+`main.ts` or `main.js file` of the project.
+
+```typescript
+//Initialize the plugin. Pass the search adapter and the store you use as parameters.
+Vue.use(xPlugin, { adapter, store });
+```
+
+---
+
+### Next steps
+
+Watch how our frontend Team Lead, [Iván Tajes](https://github.com/tajespasarela), integrates the
+Interface X Components in a project from scratch.
+
+<VideoContent 
+title="Want to learn more?"
+source="/assets/media/videos/How-to-use-X-components-in-a-real-project.mp4" 
+poster="/assets/media/videos/How-to-use-X-components-in-a-real-project.jpeg"
+:links="[
+  {
+    title:'Architecture',
+    path:'/develop-empathy-platform/build-search-ui/x-architecture/'
+  },
+  {
+    title:'UI reference',
+    path:'/develop-empathy-platform/ui-reference/'
+  }
+]">
+
+Once you have integrated the Interface&nbsp;X&nbsp;Components in your project, you're ready to start
+building your search and discovery UI:
+
+- Change the configuration of the [X Components](web-use-x-components-guide.md) or create new ones.
+- Adapt the
+  [design system](https://github.com/empathyco/x/blob/main/packages/x-components/contributing/design-system.md)
+  to your branding.
+
+</VideoContent>
+
+<!-- Manage [internationalization options](https://github.com/empathyco/x/tree/main/packages/x-translations) to support different languages.-->

package/docs/build-search-ui/x-architecture/README.md

@@ -0,0 +1,128 @@
+---
+title: How Interface X works
+tags:
+  - x components
+  - interface x
+  - x architecture
+  - architecture
+---
+
+# How Interface X works
+
+<img :src="$withBase('/assets/media/interfacex-architecture.svg')" alt="Interface X architecture">
+
+<FootNote>
+
+Data journey: The frontend components collect user interactions or events. The wiring orchestrates
+the UI events by emitting actions for the client API through the adapter. The API returns the
+required data, travelling to the Vuex store through actions that can modify the app data state in
+the Vuex store with mutation objects. The UI components are bound to the data state, so that they
+render the new state to the user.
+
+</FootNote>
+
+## Understand how the pieces work together
+
+The Interface&nbsp;X architecture is designed into separate tiers and elements:
+
+1.  **Presentation tier**. Mainly represented by the UI **components**, responsible for determining
+    how to display the data. It not only presents data in an understandable manner to users, but
+    also monitors user interactions, emitting events to the Interface&nbsp;X application.
+
+    Components can be customised according to client requirements, even allowing custom CSS styles.
+
+2.  **Orchestration tier**. The x-factor in charge of orchestrating all the event wiring. When an
+    event is emitted, other components are listening to it to react. This behavioural connection
+    between components through events is the **wiring**. Then, the wiring decides what happens when
+    an event is emitted in the Presentation layer.
+
+    The wiring is customisable and flexible to meet client requirements. The behaviour can change
+    without modifying the entire application. The event-driven operators in charge of the wiring
+    routing logic enable different wiring configurations per event.
+
+3.  **Business logic tier**. The heart of the app in charge of keeping all the data processing,
+    where:
+    - UI events emit **actions** for the client API. These actions can modify the state of the
+      store.
+    - The **store** holds all the app data that should be presented to the user at any given time.
+      It acts as a single source of truth, providing great performance and reactivity.
+
+The Interface&nbsp;X app needs an **adapter** to handle all client API communications. The API
+adapter mainly translates the related app data and use models to the client API and vice versa,
+solving any incompatibility issues. It is the entry point for all external data into the
+application.
+
+The API adapter can be customised and extended to meet the client requirements. It’s a plug-in
+element that can be changed and adjusted to the specific client API, even when using other search
+services not based on the Empathy search API.
+
+::: note Architecture patterns  
+If you’re already experienced in the Vue universe, you’ll find the Interface&nbsp;X architecture
+somewhat familiar. Although the [ViewModel layer](https://012.vuejs.org/guide/#Introduction) of the
+**MVVM pattern** sprinkles traces all over the presentation tier, the Interface X architecture is
+basically inspired by the
+[**Flux pattern**](https://vuex.vuejs.org/#what-is-a-state-management-pattern) behind the state. As
+the X&nbsp;Components emit events that dispatch actions in the business logic tier, these actions
+can commit mutations to modify the state of the store.  
+To sum up, the design of Interface&nbsp;X takes advantage of the MVVM and Flux patterns to design,
+develop, and configure each tier separately and independently. :::
+
+## Technical stack
+
+- [Vue.js](https://vuejs.org/) framework
+- JavaScript + [TypeScript](https://www.typescriptlang.org/) languages
+- [RxJS](https://rxjs.dev/) for the wiring configuration logic
+
+**The story so far**  
+Not long ago, exploring alternative options for the architecture design and technical stack became a
+must. There were several design challenges that needed to be overcome to make the frontend service
+easier to configure:
+
+- Improve reusability and performance that were hindered by the logic in components and the bundle
+  size
+- Facilitate setup by solving synchronicity and extendability problems
+- Provide easier maintenance over time, reducing regression issues
+
+After studying different approaches to build fast and reusable components, **Vue.js** (also Vue)
+seemed to be the best fit for the technical requirements and the level of abstraction required.
+
+Revamping the architecture and technical stack has helped the former frontend services to evolve
+into the latest Interface&nbsp;X application. Now, all the required **attributes and design
+principles** are combined to make the solution easy to implement, change, test, and reuse:
+
+- **Flexible**. Make changes to any element without impacting the rest of the app. For example, you
+  can modify a visual component without impacting the business logic.
+- **Customizable & extensible**. Add new custom components andor features.
+- **Lightweight**. The bundle includes only the modules you want. You’ll get only the code you
+  really need.
+- **Incremental**. The modules interact and communicate automatically with each other. The more
+  modules you use, the more features you get.
+- **Easy-to-integrate**. Install the library as an NPM dependency in Vue and React projects.
+  Interface X can be used in any webpage, as long as it is integrated as an isolated search layer.
+
+**Why Vue?**  
+Due to the flexibility required, using a library for the presentation layer instead of a
+full-fledged framework is the best choice. Among the state-of-the-art technologies available for
+building component-based UIs, Vue meets all the requirements:
+
+- Lightweight, flexible, and stand-alone library
+- Easy to learn and use with a user-friendly template syntax
+- Smooth dynamic components and composition creation
+- Outperformance with reactive approach, proxies, and interceptors
+- Out-of-the-box solution, allowing you to focus just on developing features
+- Small bundle size with no dependencies
+
+**How does Vue meet the design challenges?**
+
+- Stateless components. Centralised management through the Vuex library reduces the logic in
+  components.
+- Smooth setups. Dynamic component creation helps to track the modified data and re-render only the
+  required components.
+- Improved performance out of the box
+- Seamless maintenance. Framework or library-agnostic
+
+::: note  
+Interface&nbsp;X can potentially be integrated in commerce shops built with React. In any case,
+Interface&nbsp;X can be used in any webpage, as long as it is integrated as an isolated search
+layer.  
+:::

package/identifier-results/index.js

@@ -7,7 +7,7 @@ export { identifierHighlightRegexp } from '../js/x-modules/identifier-results/st
 export { identifierResultsRequest } from '../js/x-modules/identifier-results/store/getters/identifier-results-request.getter.js';
 export { identifierResultsXStoreModule } from '../js/x-modules/identifier-results/store/module.js';
 export { identifierResultsEmitters } from '../js/x-modules/identifier-results/store/emitters.js';
-export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsQuery } from '../js/x-modules/identifier-results/wiring.js';
+export { cancelFetchAndSaveIdentifierResultsWire, clearIdentifierResultsQuery, fetchAndSaveIdentifierResultsWire, identifierResultsWiring, saveIdentifierResultsOriginWire, setIdentifierResultsExtraParams, setIdentifierResultsQuery } from '../js/x-modules/identifier-results/wiring.js';
 export { identifierResultsXModule } from '../js/x-modules/identifier-results/x-module.js';
 export { default as IdentifierResult } from '../js/x-modules/identifier-results/components/identifier-result.vue.js';
 export { default as IdentifierResults } from '../js/x-modules/identifier-results/components/identifier-results.vue.js';

package/js/components/animations/animate-width.vue.js

@@ -6,7 +6,7 @@ import __vue_create_injector__ from 'vue-runtime-helpers/dist/inject-style/brows
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/animations/collapse-from-top.vue.js

@@ -6,7 +6,7 @@ import script from './collapse-from-top.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/animations/collapse-height.vue.js

@@ -6,7 +6,7 @@ import script from './collapse-height.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -18,8 +18,8 @@ var __vue_render__ = function() {
         on: {
           enter: _vm.expand,
           "after-enter": _vm.cleanUpAnimationStyles,
-          leave: _vm.collapse
-        }
+          leave: _vm.collapse,
+        },
       },
       _vm.$listeners
     ),

package/js/components/animations/collapse-width.vue.js

@@ -6,7 +6,7 @@ import script from './collapse-width.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -18,8 +18,8 @@ var __vue_render__ = function() {
         on: {
           enter: _vm.expand,
           "after-enter": _vm.cleanUpAnimationStyles,
-          leave: _vm.collapse
-        }
+          leave: _vm.collapse,
+        },
       },
       _vm.$listeners
     ),

package/js/components/animations/cross-fade.vue.js

@@ -6,7 +6,7 @@ import script from './cross-fade.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/animations/fade-and-slide.vue.js

@@ -6,7 +6,7 @@ import script from './fade-and-slide.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,7 +15,7 @@ var __vue_render__ = function() {
     _vm._g(
       {
         staticClass: "x-fade-and-slide",
-        attrs: { appear: "", name: "x-fade-and-slide-", tag: _vm.tag }
+        attrs: { appear: "", name: "x-fade-and-slide-", tag: _vm.tag },
       },
       _vm.$listeners
     ),

package/js/components/animations/staggered-fade-and-slide.vue.js

@@ -6,7 +6,7 @@ import script from './staggered-fade-and-slide.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -16,7 +16,7 @@ var __vue_render__ = function() {
       _vm._b(
         {
           staticClass: "x-staggered-fade-and-slide",
-          attrs: { appear: "", name: "x-staggered-fade-and-slide-" }
+          attrs: { appear: "", name: "x-staggered-fade-and-slide-" },
         },
         "staggering-transition-group",
         _vm.$attrs,

package/js/components/animations/translate-from-left.vue.js

@@ -6,7 +6,7 @@ import script from './translate-from-left.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/animations/translate-from-right.vue.js

@@ -6,7 +6,7 @@ import script from './translate-from-right.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;

package/js/components/auto-progress-bar.vue.js

@@ -6,7 +6,7 @@ import script from './auto-progress-bar.vue_rollup-plugin-vue=script.js';
 var __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function() {
+var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -15,15 +15,14 @@ var __vue_render__ = function() {
         "div",
         {
           staticClass: "x-progress-bar",
-          attrs: { "data-test": "progress-bar", role: "progressbar" }
+          attrs: { "data-test": "progress-bar", role: "progressbar" },
         },
         [
           _c("div", {
             staticClass: "x-progress-bar__line",
             style: _vm.cssStyles,
-            attrs: { "data-test": "progress-bar-line" }
-          })
-        ]
+            attrs: { "data-test": "progress-bar-line" },
+          }) ]
       )
     : _vm._e()
 };

package/js/components/auto-progress-bar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar__line\" :style=\"cssStyles\" data-test=\"progress-bar-line\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * An auto progress bar component.\n   *\n   * @public\n   */\n  @Component\n  export default class AutoProgressBar extends Vue {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public isLoading!: boolean;\n\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    public durationInSeconds!: number;\n\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    protected get cssStyles(): Partial<CSSStyleDeclaration> {\n      return { animationDuration: `${this.durationInSeconds}s` };\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: var(--x-color-background-progress-bar-default, #b3b3b3);\n    border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n\n    &__line {\n      height: var(--x-size-height-progress-bar-line-default, 4px);\n      width: var(--x-size-width-progress-bar-line-default, 272px);\n      background-color: var(--x-color-background-progress-bar-line-default, #1a1a1a);\n      border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n      animation: slide linear;\n      transform-origin: left;\n    }\n  }\n  @keyframes slide {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"delayInSeconds\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo',\n    data() {\n      return {\n        isLoading: true,\n        durationInSeconds: 100\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo'\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"auto-progress-bar.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"x-progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"x-progress-bar__line\" :style=\"cssStyles\" data-test=\"progress-bar-line\"></div>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n\n  /**\n   * An auto progress bar component.\n   *\n   * @public\n   */\n  @Component\n  export default class AutoProgressBar extends Vue {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    @Prop({ default: true })\n    public isLoading!: boolean;\n\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    @Prop({ default: 5 })\n    public durationInSeconds!: number;\n\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    protected get cssStyles(): Partial<CSSStyleDeclaration> {\n      return { animationDuration: `${this.durationInSeconds}s` };\n    }\n  }\n</script>\n\n<style lang=\"scss\">\n  .x-progress-bar {\n    display: inline-block;\n    overflow: hidden;\n    background-color: var(--x-color-background-progress-bar-default, #b3b3b3);\n    border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n\n    &__line {\n      height: var(--x-size-height-progress-bar-line-default, 4px);\n      width: var(--x-size-width-progress-bar-line-default, 272px);\n      background-color: var(--x-color-background-progress-bar-line-default, #1a1a1a);\n      border-radius: var(--x-size-border-radius-progress-bar-default, 24px);\n      animation: slide linear;\n      transform-origin: left;\n    }\n  }\n  @keyframes slide {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"delayInSeconds\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo',\n    data() {\n      return {\n        isLoading: true,\n        durationInSeconds: 100\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script>\n  export default {\n    name: 'AutoProgressBarDemo'\n  };\n</script>\n```\n\n## Events\n\nThis component emits the following events:\n\n- `UserClickedARedirection` after the user clicks the redirection button.\n- `UserClickedAbortARedirection` after the user clicks the abort redirection button.\n</docs>\n"],"names":["const"],"mappings":";;;;;AAEAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}