@empathyco/x-components 3.0.0-alpha.69 → 3.0.0-alpha.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/design-system/full-theme.css +13 -12
- package/js/components/suggestions/base-suggestion.vue.js.map +1 -1
- package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js +1 -1
- package/js/components/suggestions/base-suggestion.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,27 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.71](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.70...@empathyco/x-components@3.0.0-alpha.71) (2022-03-23)
|
|
7
|
+
|
|
8
|
+
### Testing
|
|
9
|
+
|
|
10
|
+
- E2E tests maintenance (#371) [[EX-5618](https://searchbroker.atlassian.net/browse/EX-5618)]
|
|
11
|
+
([e12ca33](https://github.com/empathyco/x/commit/e12ca335235c654f5e1e9ae608950bf527954448))
|
|
12
|
+
|
|
13
|
+
# Change Log
|
|
14
|
+
|
|
15
|
+
All notable changes to this project will be documented in this file. See
|
|
16
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
17
|
+
|
|
18
|
+
## [3.0.0-alpha.70](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.69...@empathyco/x-components@3.0.0-alpha.70) (2022-03-21)
|
|
19
|
+
|
|
20
|
+
**Note:** Version bump only for package @empathyco/x-components
|
|
21
|
+
|
|
22
|
+
# Change Log
|
|
23
|
+
|
|
24
|
+
All notable changes to this project will be documented in this file. See
|
|
25
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
26
|
+
|
|
6
27
|
## [3.0.0-alpha.69](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.68...@empathyco/x-components@3.0.0-alpha.69) (2022-03-18)
|
|
7
28
|
|
|
8
29
|
### Features
|
|
@@ -1422,18 +1422,6 @@
|
|
|
1422
1422
|
--x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
1423
1423
|
--x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
1424
1424
|
}
|
|
1425
|
-
.x-input--card.x-input,
|
|
1426
|
-
.x-input--card .x-input {
|
|
1427
|
-
--x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
|
|
1428
|
-
--x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
|
|
1429
|
-
--x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
|
|
1430
|
-
--x-size-border-radius-bottom-right-input-default: var(
|
|
1431
|
-
--x-size-border-radius-bottom-right-input-card
|
|
1432
|
-
);
|
|
1433
|
-
--x-size-border-radius-bottom-left-input-default: var(
|
|
1434
|
-
--x-size-border-radius-bottom-left-input-card
|
|
1435
|
-
);
|
|
1436
|
-
}
|
|
1437
1425
|
:root {
|
|
1438
1426
|
--x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
|
|
1439
1427
|
--x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
|
|
@@ -7566,3 +7554,16 @@
|
|
|
7566
7554
|
.x-normal-case {
|
|
7567
7555
|
text-transform: none;
|
|
7568
7556
|
}
|
|
7557
|
+
|
|
7558
|
+
.x-input--card.x-input,
|
|
7559
|
+
.x-input--card .x-input {
|
|
7560
|
+
--x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
|
|
7561
|
+
--x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
|
|
7562
|
+
--x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
|
|
7563
|
+
--x-size-border-radius-bottom-right-input-default: var(
|
|
7564
|
+
--x-size-border-radius-bottom-right-input-card
|
|
7565
|
+
);
|
|
7566
|
+
--x-size-border-radius-bottom-left-input-default: var(
|
|
7567
|
+
--x-size-border-radius-bottom-left-input-card
|
|
7568
|
+
);
|
|
7569
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ suggestion, queryHTML }\">\n <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n </slot>\n </button>\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 { QueryFeature } from '../../types/origin';\n import { forEach } from '../../utils/object';\n import { normalizeString } from '../../utils/normalize';\n import { sanitize } from '../../utils/sanitize';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n\n /**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n @Component\n export default class BaseSuggestion extends Vue {\n /**\n * The normalized query of the module using this component.\n *\n * @public\n */\n @Prop({ default: '' })\n protected query!: string;\n\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /**\n * The feature from which the events will be emitted.\n *\n * @public\n */\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /**\n * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /**\n * Indicates if the curated suggestion should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * The event handler that will be triggered when clicking on a suggestion.\n *\n * @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /**\n * Emits the events when the button is clicked.\n *\n * @public\n */\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\n\n /**\n * Checks if the normalized suggestion query matches with the module's query so it has a\n * matching part.\n *\n * @returns If the query has a matching part or not.\n * @internal\n */\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /**\n * Checks if the suggestion is curated and if it should be highlighted.\n *\n * @returns True if the suggestion is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /**\n * Generates css classes dynamically.\n *\n * @remarks\n * 'x-suggestion--matching added when the query should be matched.\n *\n * @returns The {@link VueCSSClasses} classes.\n * @public\n */\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated
|
|
1
|
+
{"version":3,"file":"base-suggestion.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue"],"sourcesContent":["<template>\n <button @click=\"emitEvents\" :class=\"dynamicCSSClasses\" class=\"x-suggestion\">\n <!-- eslint-disable max-len -->\n <!--\n @slot Button content\n @binding {Suggestion} suggestion - Suggestion data\n @binding {string} queryHTML - Suggestion's query with the matching part inside a `<span>` tag\n -->\n <!-- eslint-enable max-len -->\n <slot v-bind=\"{ suggestion, queryHTML }\">\n <span v-html=\"queryHTML\" :aria-label=\"suggestion.query\" class=\"x-suggestion__query\" />\n </slot>\n </button>\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 { QueryFeature } from '../../types/origin';\n import { forEach } from '../../utils/object';\n import { normalizeString } from '../../utils/normalize';\n import { sanitize } from '../../utils/sanitize';\n import { VueCSSClasses } from '../../utils/types';\n import { XEventsTypes } from '../../wiring/events.types';\n\n /**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n @Component\n export default class BaseSuggestion extends Vue {\n /**\n * The normalized query of the module using this component.\n *\n * @public\n */\n @Prop({ default: '' })\n protected query!: string;\n\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /**\n * The feature from which the events will be emitted.\n *\n * @public\n */\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /**\n * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /**\n * Indicates if the curated suggestion should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * The event handler that will be triggered when clicking on a suggestion.\n *\n * @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /**\n * Emits the events when the button is clicked.\n *\n * @public\n */\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\n\n /**\n * Checks if the normalized suggestion query matches with the module's query so it has a\n * matching part.\n *\n * @returns If the query has a matching part or not.\n * @internal\n */\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /**\n * Checks if the suggestion is curated and if it should be highlighted.\n *\n * @returns True if the suggestion is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /**\n * Generates css classes dynamically.\n *\n * @remarks\n * 'x-suggestion--matching added when the query should be matched.\n *\n * @returns The {@link VueCSSClasses} classes.\n * @public\n */\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated\n };\n }\n\n /**\n * Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n *\n * @remarks\n * The query prop should be normalized.\n *\n * @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\n }\n\n /**\n * Splits the label in three parts based on two indexes.\n *\n * @param label - The string that will be divided in three parts.\n * @param start - The first index that the label will be divided by.\n * @param skip - The second index that the label will be divided by.\n *\n * @returns The three parts of the divided label.\n * @internal\n */\n protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n }\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis default suggestion component expects a suggestion to render and pass to its default slot, a\nnormalized query to compare with the suggestion's query and highlight its matching parts and events\nto emit when the suggestion is selected.\n\n### Default usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\" />\n```\n\n### Customized usage\n\n```vue\n<BaseSuggestion v-bind=\"{ query, suggestion, suggestionSelectedEvents }\">\n <template #default=\"{ suggestion, queryHTML }\">\n <span\n class=\"my-suggestion\"\n v-html=\"queryHTML\"\n :aria-label=\"suggestion.query\"\n />\n </template>\n</BaseSuggestion>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQuery`: the event is emitted after the user clicks the button. The event payload is\n the suggestion query data.\n- `UserSelectedASuggestion`: the event is emitted after the user clicks the button. The event\n payload is the suggestion data.\n- The component can emit more events on click using the `suggestionSelectedEvents` prop.\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -78,7 +78,7 @@ let BaseSuggestion = class BaseSuggestion extends Vue {
|
|
|
78
78
|
get dynamicCSSClasses() {
|
|
79
79
|
return {
|
|
80
80
|
'x-suggestion--matching': this.hasMatchingQuery,
|
|
81
|
-
'x-suggestion--is-curated': this.shouldHighlightCurated
|
|
81
|
+
'x-suggestion--is-curated': this.shouldHighlightCurated
|
|
82
82
|
};
|
|
83
83
|
}
|
|
84
84
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n@Component\nexport default class BaseSuggestion extends Vue {\n /**\n * The normalized query of the module using this component.\n *\n * @public\n */\n @Prop({ default: '' })\n protected query!: string;\n\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /**\n * The feature from which the events will be emitted.\n *\n * @public\n */\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /**\n * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /**\n * Indicates if the curated suggestion should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * The event handler that will be triggered when clicking on a suggestion.\n *\n * @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /**\n * Emits the events when the button is clicked.\n *\n * @public\n */\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\n\n /**\n * Checks if the normalized suggestion query matches with the module's query so it has a\n * matching part.\n *\n * @returns If the query has a matching part or not.\n * @internal\n */\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /**\n * Checks if the suggestion is curated and if it should be highlighted.\n *\n * @returns True if the suggestion is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /**\n * Generates css classes dynamically.\n *\n * @remarks\n * 'x-suggestion--matching added when the query should be matched.\n *\n * @returns The {@link VueCSSClasses} classes.\n * @public\n */\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated
|
|
1
|
+
{"version":3,"file":"base-suggestion.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/suggestions/base-suggestion.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\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 { QueryFeature } from '../../types/origin';\nimport { forEach } from '../../utils/object';\nimport { normalizeString } from '../../utils/normalize';\nimport { sanitize } from '../../utils/sanitize';\nimport { VueCSSClasses } from '../../utils/types';\nimport { XEventsTypes } from '../../wiring/events.types';\n\n/**\n * Renders a button with a default slot. It receives a query, which should be the query of the\n * module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted\n * on click with a given feature.\n *\n * The default slot receives the suggestion and the matched query has props.\n *\n * @public\n */\n@Component\nexport default class BaseSuggestion extends Vue {\n /**\n * The normalized query of the module using this component.\n *\n * @public\n */\n @Prop({ default: '' })\n protected query!: string;\n\n /**\n * The suggestion to render and use in the default slot.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestion!: Suggestion;\n\n /**\n * The feature from which the events will be emitted.\n *\n * @public\n */\n @Prop() //TODO: set to true when the suggestions components pass it.\n protected feature?: QueryFeature;\n\n /**\n * The {@link XEvent | XEvents} that will be emitted when selecting a suggestion.\n *\n * @public\n */\n @Prop({ required: true })\n protected suggestionSelectedEvents!: Partial<XEventsTypes>;\n\n /**\n * Indicates if the curated suggestion should be highlighted.\n *\n * @public\n */\n @Prop({ default: false, type: Boolean })\n protected highlightCurated!: boolean;\n\n /**\n * The event handler that will be triggered when clicking on a suggestion.\n *\n * @remarks\n * * UserAcceptedAQuery: suggestion.query\n * * UserSelectedASuggestion: suggestion\n * * Merges the events defined in the suggestionSelectedEvents prop and also emits them\n *\n * @returns The {@link XEvent | XEvents} to emit.\n * @public\n */\n protected get events(): Partial<XEventsTypes> {\n return {\n UserAcceptedAQuery: this.suggestion.query,\n UserSelectedASuggestion: this.suggestion,\n ...this.suggestionSelectedEvents\n };\n }\n\n /**\n * Emits the events when the button is clicked.\n *\n * @public\n */\n protected emitEvents(): void {\n forEach(this.events, (event, payload) => {\n this.$x.emit(event, payload, {\n target: this.$el as HTMLElement,\n feature: this.feature\n });\n });\n }\n\n /**\n * Checks if the normalized suggestion query matches with the module's query so it has a\n * matching part.\n *\n * @returns If the query has a matching part or not.\n * @internal\n */\n protected get hasMatchingQuery(): boolean {\n return !!this.query && normalizeString(this.suggestion.query).includes(this.query);\n }\n\n /**\n * Checks if the suggestion is curated and if it should be highlighted.\n *\n * @returns True if the suggestion is curated and should be highlighted.\n *\n * @internal\n */\n protected get shouldHighlightCurated(): boolean {\n return this.highlightCurated && !!this.suggestion.isCurated;\n }\n\n /**\n * Generates css classes dynamically.\n *\n * @remarks\n * 'x-suggestion--matching added when the query should be matched.\n *\n * @returns The {@link VueCSSClasses} classes.\n * @public\n */\n protected get dynamicCSSClasses(): VueCSSClasses {\n return {\n 'x-suggestion--matching': this.hasMatchingQuery,\n 'x-suggestion--is-curated': this.shouldHighlightCurated\n };\n }\n\n /**\n * Highlights the matching part of the suggestion query with the query passed as prop of the\n * component putting it inside a `<span>` tag.\n *\n * @remarks\n * The query prop should be normalized.\n *\n * @returns The suggestion's query with the matching part inside a `<span>` tag.\n * @public\n */\n protected get queryHTML(): string {\n if (this.hasMatchingQuery) {\n const matcherIndex = normalizeString(this.suggestion.query).indexOf(this.query);\n\n const [beginning, matching, end] = this.splitAt(\n this.suggestion.query,\n matcherIndex,\n this.query.length\n );\n\n const attrsMatching = 'data-test=\"matching-part\" class=\"x-suggestion__matching-part\"';\n return `${beginning}<span ${attrsMatching}>${matching}</span>${end}`;\n }\n\n return sanitize(this.suggestion.query);\n }\n\n /**\n * Splits the label in three parts based on two indexes.\n *\n * @param label - The string that will be divided in three parts.\n * @param start - The first index that the label will be divided by.\n * @param skip - The second index that the label will be divided by.\n *\n * @returns The three parts of the divided label.\n * @internal\n */\n protected splitAt(label: string, start: number, skip: number): [string, string, string] {\n const startPart = label.substr(0, start);\n const matchingPart = label.substr(start, skip);\n const endPart = label.substr(start + skip);\n\n return [sanitize(startPart), sanitize(matchingPart), sanitize(endPart)];\n }\n}\n"],"names":[],"mappings":";;;;;;;AA0BA;;;;;;;;;AAUA,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,GAAG;;;;;;;;;;;;IAoD7C,IAAc,MAAM;QAClB,OAAO;YACL,kBAAkB,EAAE,IAAI,CAAC,UAAU,CAAC,KAAK;YACzC,uBAAuB,EAAE,IAAI,CAAC,UAAU;YACxC,GAAG,IAAI,CAAC,wBAAwB;SACjC,CAAC;KACH;;;;;;IAOS,UAAU;QAClB,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO;YAClC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE;gBAC3B,MAAM,EAAE,IAAI,CAAC,GAAkB;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;SACJ,CAAC,CAAC;KACJ;;;;;;;;IASD,IAAc,gBAAgB;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpF;;;;;;;;IASD,IAAc,sBAAsB;QAClC,OAAO,IAAI,CAAC,gBAAgB,IAAI,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;KAC7D;;;;;;;;;;IAWD,IAAc,iBAAiB;QAC7B,OAAO;YACL,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;YAC/C,0BAA0B,EAAE,IAAI,CAAC,sBAAsB;SACxD,CAAC;KACH;;;;;;;;;;;IAYD,IAAc,SAAS;QACrB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,MAAM,YAAY,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhF,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAC7C,IAAI,CAAC,UAAU,CAAC,KAAK,EACrB,YAAY,EACZ,IAAI,CAAC,KAAK,CAAC,MAAM,CAClB,CAAC;YAEF,MAAM,aAAa,GAAG,+DAA+D,CAAC;YACtF,OAAO,GAAG,SAAS,SAAS,aAAa,IAAI,QAAQ,UAAU,GAAG,EAAE,CAAC;SACtE;QAED,OAAO,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;;;;;;IAYS,OAAO,CAAC,KAAa,EAAE,KAAa,EAAE,IAAY;QAC1D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;QAE3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;KACzE;CACF,CAAA;AArJC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;6CACG;AAQzB;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;kDACS;AAQlC;IADC,IAAI,EAAE;+CAC0B;AAQjC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gEACkC;AAQ3D;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACH;AAvClB,cAAc;IADlC,SAAS;GACW,cAAc,CA4JlC;aA5JoB,cAAc;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.71",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -127,5 +127,5 @@
|
|
|
127
127
|
"access": "public",
|
|
128
128
|
"directory": "dist"
|
|
129
129
|
},
|
|
130
|
-
"gitHead": "
|
|
130
|
+
"gitHead": "ac37295739cb8d1184fb2ce04cdd6ca2354a4db1"
|
|
131
131
|
}
|