@empathyco/x-components 3.0.0-alpha.167 → 3.0.0-alpha.168
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 +13 -0
- package/design-system/full-theme.css +16 -16
- package/docs/API-reference/api/x-components.baseresultimage.md +0 -10
- package/docs/API-reference/components/common/result/x-components.base-result-image.md +5 -5
- package/js/components/animations/cross-fade.vue.js +2 -2
- package/js/components/animations/cross-fade.vue.js.map +1 -1
- package/js/components/animations/cross-fade.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/js/components/result/base-result-image.vue.js +21 -34
- package/js/components/result/base-result-image.vue.js.map +1 -1
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js +24 -69
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/js/components/result/base-result-image.vue_rollup-plugin-vue_styles.0.vue.js +1 -1
- package/package.json +2 -2
- package/report/x-components.api.json +0 -146
- package/report/x-components.api.md +1 -11
- package/types/components/result/base-result-image.vue.d.ts +10 -50
- package/types/components/result/base-result-image.vue.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.baseresultimage._refs.md +0 -15
- package/docs/API-reference/api/x-components.baseresultimage.failedimages.md +0 -13
- package/docs/API-reference/api/x-components.baseresultimage.hasenteredview.md +0 -13
- package/docs/API-reference/api/x-components.baseresultimage.hasimageloaded.md +0 -13
- package/docs/API-reference/api/x-components.baseresultimage.mounted.md +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
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.168](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.167...@empathyco/x-components@3.0.0-alpha.168) (2022-09-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **components:** Fix the error on console in `BaseResultImage` with `CrossFade` Animation. (#688)
|
|
11
|
+
([3bcf6e1](https://github.com/empathyco/x/commit/3bcf6e120918b4257f38ddb5078adfe39a7c8a3f)),
|
|
12
|
+
closes [EX-6924](https://searchbroker.atlassian.net/browse/EX-6924)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
6
19
|
## [3.0.0-alpha.167](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.166...@empathyco/x-components@3.0.0-alpha.167) (2022-09-06)
|
|
7
20
|
|
|
8
21
|
### Features
|
|
@@ -1403,6 +1403,22 @@
|
|
|
1403
1403
|
--x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
|
|
1404
1404
|
--x-size-border-width-left-input-group-line: 0;
|
|
1405
1405
|
}
|
|
1406
|
+
.x-input-group--pill.x-input-group,
|
|
1407
|
+
.x-input-group--pill .x-input-group {
|
|
1408
|
+
--x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
|
|
1409
|
+
--x-size-border-radius-top-left-input-group-default: var(
|
|
1410
|
+
--x-size-border-radius-top-left-input-group-pill
|
|
1411
|
+
);
|
|
1412
|
+
--x-size-border-radius-top-right-input-group-default: var(
|
|
1413
|
+
--x-size-border-radius-top-right-input-group-pill
|
|
1414
|
+
);
|
|
1415
|
+
--x-size-border-radius-bottom-right-input-group-default: var(
|
|
1416
|
+
--x-size-border-radius-bottom-right-input-group-pill
|
|
1417
|
+
);
|
|
1418
|
+
--x-size-border-radius-bottom-left-input-group-default: var(
|
|
1419
|
+
--x-size-border-radius-bottom-left-input-group-pill
|
|
1420
|
+
);
|
|
1421
|
+
}
|
|
1406
1422
|
:root {
|
|
1407
1423
|
--x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
|
|
1408
1424
|
--x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
|
|
@@ -1487,22 +1503,6 @@
|
|
|
1487
1503
|
font-weight: var(--x-number-font-weight-input-placeholder-default);
|
|
1488
1504
|
line-height: var(--x-size-line-height-input-placeholder-default);
|
|
1489
1505
|
}
|
|
1490
|
-
.x-input-group--pill.x-input-group,
|
|
1491
|
-
.x-input-group--pill .x-input-group {
|
|
1492
|
-
--x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
|
|
1493
|
-
--x-size-border-radius-top-left-input-group-default: var(
|
|
1494
|
-
--x-size-border-radius-top-left-input-group-pill
|
|
1495
|
-
);
|
|
1496
|
-
--x-size-border-radius-top-right-input-group-default: var(
|
|
1497
|
-
--x-size-border-radius-top-right-input-group-pill
|
|
1498
|
-
);
|
|
1499
|
-
--x-size-border-radius-bottom-right-input-group-default: var(
|
|
1500
|
-
--x-size-border-radius-bottom-right-input-group-pill
|
|
1501
|
-
);
|
|
1502
|
-
--x-size-border-radius-bottom-left-input-group-default: var(
|
|
1503
|
-
--x-size-border-radius-bottom-left-input-group-pill
|
|
1504
|
-
);
|
|
1505
|
-
}
|
|
1506
1506
|
:root {
|
|
1507
1507
|
--x-color-background-input-default: var(--x-color-base-neutral-100);
|
|
1508
1508
|
--x-color-border-input-default: var(--x-color-base-neutral-70);
|
|
@@ -17,16 +17,6 @@ export default class BaseResultImage extends Vue
|
|
|
17
17
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
|
-
| [$refs](./x-components.baseresultimage._refs.md) | | { image: HTMLElement; } | HTMLElement that references the picture element. |
|
|
21
20
|
| [animation](./x-components.baseresultimage.animation.md) | | string \| typeof Vue | Animation to use when switching between the placeholder, the loaded image, or the failed image fallback. |
|
|
22
|
-
| [failedImages](./x-components.baseresultimage.failedimages.md) | | string\[\] | An array of images that failed to load. |
|
|
23
|
-
| [hasEnteredView](./x-components.baseresultimage.hasenteredview.md) | | boolean | The image has entered in the port view. |
|
|
24
|
-
| [hasImageLoaded](./x-components.baseresultimage.hasimageloaded.md) | | boolean | Indicates if the result image is loaded. |
|
|
25
21
|
| [result](./x-components.baseresultimage.result.md) | | Result | (Required) The [result](./x-types.result.md) information. |
|
|
26
22
|
|
|
27
|
-
## Methods
|
|
28
|
-
|
|
29
|
-
| Method | Modifiers | Description |
|
|
30
|
-
| --- | --- | --- |
|
|
31
|
-
| [mounted()](./x-components.baseresultimage.mounted.md) | | |
|
|
32
|
-
|
|
@@ -12,15 +12,15 @@ Component to be reused that renders an `<img>`.
|
|
|
12
12
|
|
|
13
13
|
| Name | Description | Type | Default |
|
|
14
14
|
| ---------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------- |
|
|
15
|
-
| <code>animation</code> | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>union</code> | <code>() => NoElement</code> |
|
|
16
15
|
| <code>result</code> | (Required) The {@link @empathyco/x-types#Result \| result} information. | <code>Result</code> | <code></code> |
|
|
16
|
+
| <code>animation</code> | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>union</code> | <code>() => NoElement</code> |
|
|
17
17
|
|
|
18
18
|
## Slots
|
|
19
19
|
|
|
20
|
-
| Name | Description
|
|
21
|
-
| ------------------------ |
|
|
22
|
-
| <code>
|
|
23
|
-
| <code>
|
|
20
|
+
| Name | Description | Bindings<br />(name - type - description) |
|
|
21
|
+
| ------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------- |
|
|
22
|
+
| <code>fallback</code> | Fallback image content. It will be rendered when all the images failed | None |
|
|
23
|
+
| <code>placeholder</code> | Loading image content. It will be rendered while the real image is not loaded | None |
|
|
24
24
|
|
|
25
25
|
## Examples
|
|
26
26
|
|
|
@@ -13,7 +13,7 @@ var __vue_render__ = function () {
|
|
|
13
13
|
"transition",
|
|
14
14
|
_vm._g(
|
|
15
15
|
_vm._b(
|
|
16
|
-
{ attrs: { appear: "", name: "x-cross-fade-"
|
|
16
|
+
{ attrs: { appear: "", name: "x-cross-fade-" } },
|
|
17
17
|
"transition",
|
|
18
18
|
_vm.$attrs,
|
|
19
19
|
false
|
|
@@ -30,7 +30,7 @@ __vue_render__._withStripped = true;
|
|
|
30
30
|
/* style */
|
|
31
31
|
const __vue_inject_styles__ = undefined;
|
|
32
32
|
/* scoped */
|
|
33
|
-
const __vue_scope_id__ = "data-v-
|
|
33
|
+
const __vue_scope_id__ = "data-v-320d8fb0";
|
|
34
34
|
/* module identifier */
|
|
35
35
|
const __vue_module_identifier__ = undefined;
|
|
36
36
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\"
|
|
1
|
+
{"version":3,"file":"cross-fade.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n <transition v-on=\"$listeners\" appear name=\"x-cross-fade-\" v-bind=\"$attrs\">\n <!-- @slot (Required) to add content to the transition -->\n <slot />\n </transition>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component } from 'vue-property-decorator';\n\n /**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\n @Component({\n inheritAttrs: false\n })\n export default class CrossFade extends Vue {}\n</script>\n\n<style lang=\"scss\" scoped>\n .x-cross-fade {\n &--enter-active,\n &--leave-active {\n transition: opacity 0.25s ease-in-out;\n mix-blend-mode: multiply;\n }\n\n &--leave-active {\n position: absolute;\n }\n\n &--leave-to,\n &--enter {\n opacity: 0;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `CrossFade` component is intended to be used as animation to wrap an element with v-if or v-show\nand animate it. The animation fades the new element into the previous one.\n\nWrapping a component:\n\n```vue\n<CrossFade>\n <ComponentOrElement v-if=\"open\"/>\n</CrossFade>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-cross-fade--enter-active[data-v-
|
|
3
|
+
var css = ".x-cross-fade--enter-active[data-v-320d8fb0], .x-cross-fade--leave-active[data-v-320d8fb0] {\n transition: opacity 0.25s ease-in-out;\n mix-blend-mode: multiply;\n}\n.x-cross-fade--leave-active[data-v-320d8fb0] {\n position: absolute;\n}\n.x-cross-fade--leave-to[data-v-320d8fb0], .x-cross-fade--enter[data-v-320d8fb0] {\n opacity: 0;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
|
@@ -17,51 +17,38 @@ var __vue_render__ = function () {
|
|
|
17
17
|
attrs: { "data-test": "result-picture" },
|
|
18
18
|
},
|
|
19
19
|
[
|
|
20
|
-
!_vm.hasImageLoaded &&
|
|
21
|
-
? _c(
|
|
22
|
-
_vm.
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
!_vm.hasImageLoaded && _vm.imageSrc
|
|
21
|
+
? _c("img", {
|
|
22
|
+
style: _vm.loaderStyles,
|
|
23
|
+
attrs: {
|
|
24
|
+
loading: "lazy",
|
|
25
|
+
src: _vm.imageSrc,
|
|
26
|
+
"data-test": "result-picture-loader",
|
|
27
|
+
alt: "",
|
|
28
|
+
role: "presentation",
|
|
27
29
|
},
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
)
|
|
30
|
+
on: { error: _vm.flagImageAsFailed, load: _vm.flagImageLoaded },
|
|
31
|
+
})
|
|
31
32
|
: _vm._e(),
|
|
32
33
|
_vm._v(" "),
|
|
33
34
|
_c(
|
|
34
35
|
_vm.animation,
|
|
35
|
-
{ tag: "component" },
|
|
36
|
+
{ tag: "component", staticClass: "x-picture__image" },
|
|
36
37
|
[
|
|
37
|
-
_vm.imageSrc
|
|
38
|
-
?
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
value: _vm.hasImageLoaded,
|
|
44
|
-
expression: "hasImageLoaded",
|
|
45
|
-
},
|
|
46
|
-
],
|
|
47
|
-
staticClass: "x-picture__image x-result-picture-image",
|
|
38
|
+
!_vm.imageSrc
|
|
39
|
+
? _vm._t("fallback")
|
|
40
|
+
: !_vm.hasImageLoaded
|
|
41
|
+
? _vm._t("placeholder")
|
|
42
|
+
: _c("img", {
|
|
43
|
+
staticClass: "x-picture__image x-result-picture__image",
|
|
48
44
|
attrs: {
|
|
49
45
|
alt: _vm.result.name,
|
|
50
46
|
src: _vm.imageSrc,
|
|
51
47
|
"data-test": "result-picture-image",
|
|
52
48
|
},
|
|
53
|
-
|
|
54
|
-
})
|
|
55
|
-
: _vm.hasAllImagesFailed
|
|
56
|
-
? _c(
|
|
57
|
-
"NoElement",
|
|
58
|
-
{ staticClass: "x-picture__image x-picture__image--fallback" },
|
|
59
|
-
[_vm._t("fallback")],
|
|
60
|
-
2
|
|
61
|
-
)
|
|
62
|
-
: _vm._e(),
|
|
49
|
+
}),
|
|
63
50
|
],
|
|
64
|
-
|
|
51
|
+
2
|
|
65
52
|
),
|
|
66
53
|
],
|
|
67
54
|
1
|
|
@@ -73,7 +60,7 @@ __vue_render__._withStripped = true;
|
|
|
73
60
|
/* style */
|
|
74
61
|
const __vue_inject_styles__ = undefined;
|
|
75
62
|
/* scoped */
|
|
76
|
-
const __vue_scope_id__ = "data-v-
|
|
63
|
+
const __vue_scope_id__ = "data-v-236590f6";
|
|
77
64
|
/* module identifier */
|
|
78
65
|
const __vue_module_identifier__ = undefined;
|
|
79
66
|
/* functional template */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n <
|
|
1
|
+
{"version":3,"file":"base-result-image.vue.js","sources":["../../../../src/components/result/base-result-image.vue"],"sourcesContent":["<template>\n <picture ref=\"image\" class=\"x-picture x-result-picture\" data-test=\"result-picture\">\n <img\n v-if=\"!hasImageLoaded && imageSrc\"\n @error=\"flagImageAsFailed\"\n @load=\"flagImageLoaded\"\n loading=\"lazy\"\n :src=\"imageSrc\"\n :style=\"loaderStyles\"\n data-test=\"result-picture-loader\"\n alt=\"\"\n role=\"presentation\"\n />\n <component :is=\"animation\" class=\"x-picture__image\">\n <!-- @slot Fallback image content. It will be rendered when all the images failed -->\n <slot v-if=\"!imageSrc\" name=\"fallback\" />\n\n <!-- @slot Loading image content. It will be rendered while the real image is not loaded -->\n <slot v-else-if=\"!hasImageLoaded\" name=\"placeholder\" />\n\n <img\n v-else\n :alt=\"result.name\"\n :src=\"imageSrc\"\n class=\"x-picture__image x-result-picture__image\"\n data-test=\"result-picture-image\"\n />\n </component>\n </picture>\n</template>\n\n<script lang=\"ts\">\n import { Result } from '@empathyco/x-types';\n import Vue from 'vue';\n import { Component, Prop } from 'vue-property-decorator';\n import { NoElement } from '../no-element';\n\n /**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n }\n })\n export default class BaseResultImage extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * An array of images that failed to load.\n *\n * @internal\n */\n protected failedImages: string[] = [];\n\n /**\n * Indicates if the result image is loaded.\n *\n * @internal\n */\n protected hasImageLoaded = false;\n\n /**.\n * Styles to use inline in the image loader, to prevent override from CSS\n *\n * @internal\n */\n protected loaderStyles: Partial<CSSStyleDeclaration> = {\n position: 'absolute !important',\n top: '0 !important',\n left: '0 !important',\n width: '100% !important',\n height: '100% !important',\n pointerEvents: 'none !important',\n visibility: 'hidden !important'\n };\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n const image = this.result.images?.find(image => !this.failedImages.includes(image));\n return image ?? '';\n }\n\n /**\n * Sets an image as failed.\n *\n * @internal\n */\n protected flagImageAsFailed(): void {\n if (this.imageSrc !== '') {\n this.failedImages.push(this.imageSrc);\n }\n }\n\n /**\n * Marks an image as loaded.\n *\n * @internal\n */\n protected flagImageLoaded(): void {\n this.hasImageLoaded = true;\n }\n }\n</script>\n\n<style lang=\"scss\" scoped>\n .x-result-picture {\n min-width: 1px;\n min-height: 1px;\n position: relative;\n\n &__image {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n }\n }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThis component is for the result image. It may be part of the search result page, recommendations or\nother section which needs to include results.\n\nThe result prop is required. It will render a `<img/>` with the result image:\n\n```vue\n<BaseResultImage :result=\"result\" />\n```\n\n### Customizing slots content\n\nFallback and placeholder contents can be customized.\n\nThe fallback slot allows you to replace the content of the fallback image.\n\nThe other slot is called `placeholder`, and allows you to set the image that its going to be\ndisplayed while the real one is loaded.\n\n```vue\n<BaseResultImage :result=\"result\">\n <template #placeholder>\n <img class=\"x-result-picture-placeholder\" src=\"./placeholder-image.svg\"/>\n </template>\n <template #fallback>\n <img class=\"x-result-picture-fallback\" src=\"./fallback-image.svg\"/>\n </template>\n</BaseResultImage>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,40 +11,32 @@ import { NoElement } from '../no-element.js';
|
|
|
11
11
|
let BaseResultImage = class BaseResultImage extends Vue {
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
|
-
/**
|
|
15
|
-
* The image has entered in the port view.
|
|
16
|
-
*
|
|
17
|
-
* @public
|
|
18
|
-
*/
|
|
19
|
-
this.hasEnteredView = false;
|
|
20
14
|
/**
|
|
21
15
|
* An array of images that failed to load.
|
|
22
16
|
*
|
|
23
|
-
* @
|
|
17
|
+
* @internal
|
|
24
18
|
*/
|
|
25
19
|
this.failedImages = [];
|
|
26
20
|
/**
|
|
27
21
|
* Indicates if the result image is loaded.
|
|
28
22
|
*
|
|
29
|
-
* @
|
|
23
|
+
* @internal
|
|
30
24
|
*/
|
|
31
25
|
this.hasImageLoaded = false;
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
this.createObserver();
|
|
47
|
-
}
|
|
26
|
+
/**.
|
|
27
|
+
* Styles to use inline in the image loader, to prevent override from CSS
|
|
28
|
+
*
|
|
29
|
+
* @internal
|
|
30
|
+
*/
|
|
31
|
+
this.loaderStyles = {
|
|
32
|
+
position: 'absolute !important',
|
|
33
|
+
top: '0 !important',
|
|
34
|
+
left: '0 !important',
|
|
35
|
+
width: '100% !important',
|
|
36
|
+
height: '100% !important',
|
|
37
|
+
pointerEvents: 'none !important',
|
|
38
|
+
visibility: 'hidden !important'
|
|
39
|
+
};
|
|
48
40
|
}
|
|
49
41
|
/**
|
|
50
42
|
* Gets the src from the result image.
|
|
@@ -54,37 +46,8 @@ let BaseResultImage = class BaseResultImage extends Vue {
|
|
|
54
46
|
* @internal
|
|
55
47
|
*/
|
|
56
48
|
get imageSrc() {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return image ?? '';
|
|
60
|
-
}
|
|
61
|
-
return '';
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* Creates an intersection observer in the image element.
|
|
65
|
-
*
|
|
66
|
-
* @internal
|
|
67
|
-
*/
|
|
68
|
-
createObserver() {
|
|
69
|
-
const image = this.$refs.image;
|
|
70
|
-
const observer = new IntersectionObserver(this.observerHandler.bind(this));
|
|
71
|
-
observer.observe(image);
|
|
72
|
-
}
|
|
73
|
-
/**
|
|
74
|
-
* Observe all the observables items and detects when a element is intersected.
|
|
75
|
-
*
|
|
76
|
-
* @param entries - The observed items.
|
|
77
|
-
* @param observer - The intersection observer object.
|
|
78
|
-
*
|
|
79
|
-
* @internal
|
|
80
|
-
*/
|
|
81
|
-
observerHandler(entries, observer) {
|
|
82
|
-
entries.forEach(entry => {
|
|
83
|
-
if (entry.isIntersecting) {
|
|
84
|
-
this.hasEnteredView = true;
|
|
85
|
-
observer.disconnect();
|
|
86
|
-
}
|
|
87
|
-
});
|
|
49
|
+
const image = this.result.images?.find(image => !this.failedImages.includes(image));
|
|
50
|
+
return image ?? '';
|
|
88
51
|
}
|
|
89
52
|
/**
|
|
90
53
|
* Sets an image as failed.
|
|
@@ -92,17 +55,9 @@ let BaseResultImage = class BaseResultImage extends Vue {
|
|
|
92
55
|
* @internal
|
|
93
56
|
*/
|
|
94
57
|
flagImageAsFailed() {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
* Checks if all the images failed.
|
|
99
|
-
*
|
|
100
|
-
* @returns Boolean.
|
|
101
|
-
*
|
|
102
|
-
* @internal
|
|
103
|
-
*/
|
|
104
|
-
get hasAllImagesFailed() {
|
|
105
|
-
return this.failedImages.length === this.result.images?.length;
|
|
58
|
+
if (this.imageSrc !== '') {
|
|
59
|
+
this.failedImages.push(this.imageSrc);
|
|
60
|
+
}
|
|
106
61
|
}
|
|
107
62
|
/**
|
|
108
63
|
* Marks an image as loaded.
|
|
@@ -113,12 +68,12 @@ let BaseResultImage = class BaseResultImage extends Vue {
|
|
|
113
68
|
this.hasImageLoaded = true;
|
|
114
69
|
}
|
|
115
70
|
};
|
|
116
|
-
__decorate([
|
|
117
|
-
Prop({ default: () => NoElement })
|
|
118
|
-
], BaseResultImage.prototype, "animation", void 0);
|
|
119
71
|
__decorate([
|
|
120
72
|
Prop({ required: true })
|
|
121
73
|
], BaseResultImage.prototype, "result", void 0);
|
|
74
|
+
__decorate([
|
|
75
|
+
Prop({ default: () => NoElement })
|
|
76
|
+
], BaseResultImage.prototype, "animation", void 0);
|
|
122
77
|
BaseResultImage = __decorate([
|
|
123
78
|
Component({
|
|
124
79
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.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\n\n\n\n\n\n\
|
|
1
|
+
{"version":3,"file":"base-result-image.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../src/components/result/base-result-image.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\n\n\n\n\n\n\nimport { Result } from '@empathyco/x-types';\nimport Vue from 'vue';\nimport { Component, Prop } from 'vue-property-decorator';\nimport { NoElement } from '../no-element';\n\n/**\n * Component to be reused that renders an `<img>`.\n *\n * @public\n */\n@Component({\n components: {\n NoElement\n }\n})\nexport default class BaseResultImage extends Vue {\n /**\n * (Required) The {@link @empathyco/x-types#Result | result} information.\n *\n * @public\n */\n @Prop({ required: true })\n protected result!: Result;\n /**\n * Animation to use when switching between the placeholder, the loaded image, or the failed\n * image fallback.\n *\n * @public\n */\n @Prop({ default: () => NoElement })\n public animation!: string | typeof Vue;\n /**\n * An array of images that failed to load.\n *\n * @internal\n */\n protected failedImages: string[] = [];\n\n /**\n * Indicates if the result image is loaded.\n *\n * @internal\n */\n protected hasImageLoaded = false;\n\n /**.\n * Styles to use inline in the image loader, to prevent override from CSS\n *\n * @internal\n */\n protected loaderStyles: Partial<CSSStyleDeclaration> = {\n position: 'absolute !important',\n top: '0 !important',\n left: '0 !important',\n width: '100% !important',\n height: '100% !important',\n pointerEvents: 'none !important',\n visibility: 'hidden !important'\n };\n\n /**\n * Gets the src from the result image.\n *\n * @returns The result image src.\n *\n * @internal\n */\n protected get imageSrc(): string {\n const image = this.result.images?.find(image => !this.failedImages.includes(image));\n return image ?? '';\n }\n\n /**\n * Sets an image as failed.\n *\n * @internal\n */\n protected flagImageAsFailed(): void {\n if (this.imageSrc !== '') {\n this.failedImages.push(this.imageSrc);\n }\n }\n\n /**\n * Marks an image as loaded.\n *\n * @internal\n */\n protected flagImageLoaded(): void {\n this.hasImageLoaded = true;\n }\n}\n"],"names":[],"mappings":";;;;;AAqCA;;;;;AAUA,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,GAAG;IAAhD;;;;;;;QAqBY,iBAAY,GAAa,EAAE,CAAC;;;;;;QAO5B,mBAAc,GAAG,KAAK,CAAC;;;;;;QAOvB,iBAAY,GAAiC;YACrD,QAAQ,EAAE,qBAAqB;YAC/B,GAAG,EAAE,cAAc;YACnB,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,iBAAiB;YACzB,aAAa,EAAE,iBAAiB;YAChC,UAAU,EAAE,mBAAmB;SAChC,CAAC;KAiCH;;;;;;;;IAxBC,IAAc,QAAQ;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QACpF,OAAO,KAAK,IAAI,EAAE,CAAC;KACpB;;;;;;IAOS,iBAAiB;QACzB,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,EAAE;YACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACvC;KACF;;;;;;IAOS,eAAe;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;CACF,CAAA;AArEC;IADC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;+CACC;AAQ1B;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE,CAAC;kDACI;AAfpB,eAAe;IALnC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;KACF,CAAC;GACmB,eAAe,CA4EnC;aA5EoB,eAAe;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
|
|
2
2
|
|
|
3
|
-
var css = ".x-result-picture[data-v-
|
|
3
|
+
var css = ".x-result-picture[data-v-236590f6] {\n min-width: 1px;\n min-height: 1px;\n position: relative;\n}\n.x-result-picture__image[data-v-236590f6] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n}";
|
|
4
4
|
const isBrowser = /*#__PURE__*/ (function () {
|
|
5
5
|
return (
|
|
6
6
|
Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
|
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.168",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"access": "public",
|
|
134
134
|
"directory": "dist"
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "c46a99cf0f4c651f91650073db59d469f03d8485"
|
|
137
137
|
}
|
|
@@ -5360,42 +5360,6 @@
|
|
|
5360
5360
|
"releaseTag": "Public",
|
|
5361
5361
|
"name": "BaseResultImage",
|
|
5362
5362
|
"members": [
|
|
5363
|
-
{
|
|
5364
|
-
"kind": "Property",
|
|
5365
|
-
"canonicalReference": "@empathyco/x-components!BaseResultImage#$refs:member",
|
|
5366
|
-
"docComment": "/**\n * HTMLElement that references the picture element.\n *\n * @public\n */\n",
|
|
5367
|
-
"excerptTokens": [
|
|
5368
|
-
{
|
|
5369
|
-
"kind": "Content",
|
|
5370
|
-
"text": "$refs: "
|
|
5371
|
-
},
|
|
5372
|
-
{
|
|
5373
|
-
"kind": "Content",
|
|
5374
|
-
"text": "{\n image: "
|
|
5375
|
-
},
|
|
5376
|
-
{
|
|
5377
|
-
"kind": "Reference",
|
|
5378
|
-
"text": "HTMLElement",
|
|
5379
|
-
"canonicalReference": "!HTMLElement:interface"
|
|
5380
|
-
},
|
|
5381
|
-
{
|
|
5382
|
-
"kind": "Content",
|
|
5383
|
-
"text": ";\n }"
|
|
5384
|
-
},
|
|
5385
|
-
{
|
|
5386
|
-
"kind": "Content",
|
|
5387
|
-
"text": ";"
|
|
5388
|
-
}
|
|
5389
|
-
],
|
|
5390
|
-
"isOptional": false,
|
|
5391
|
-
"releaseTag": "Public",
|
|
5392
|
-
"name": "$refs",
|
|
5393
|
-
"propertyTypeTokenRange": {
|
|
5394
|
-
"startIndex": 1,
|
|
5395
|
-
"endIndex": 4
|
|
5396
|
-
},
|
|
5397
|
-
"isStatic": false
|
|
5398
|
-
},
|
|
5399
5363
|
{
|
|
5400
5364
|
"kind": "Property",
|
|
5401
5365
|
"canonicalReference": "@empathyco/x-components!BaseResultImage#animation:member",
|
|
@@ -5428,116 +5392,6 @@
|
|
|
5428
5392
|
},
|
|
5429
5393
|
"isStatic": false
|
|
5430
5394
|
},
|
|
5431
|
-
{
|
|
5432
|
-
"kind": "Property",
|
|
5433
|
-
"canonicalReference": "@empathyco/x-components!BaseResultImage#failedImages:member",
|
|
5434
|
-
"docComment": "/**\n * An array of images that failed to load.\n *\n * @public\n */\n",
|
|
5435
|
-
"excerptTokens": [
|
|
5436
|
-
{
|
|
5437
|
-
"kind": "Content",
|
|
5438
|
-
"text": "protected failedImages: "
|
|
5439
|
-
},
|
|
5440
|
-
{
|
|
5441
|
-
"kind": "Content",
|
|
5442
|
-
"text": "string[]"
|
|
5443
|
-
},
|
|
5444
|
-
{
|
|
5445
|
-
"kind": "Content",
|
|
5446
|
-
"text": ";"
|
|
5447
|
-
}
|
|
5448
|
-
],
|
|
5449
|
-
"isOptional": false,
|
|
5450
|
-
"releaseTag": "Public",
|
|
5451
|
-
"name": "failedImages",
|
|
5452
|
-
"propertyTypeTokenRange": {
|
|
5453
|
-
"startIndex": 1,
|
|
5454
|
-
"endIndex": 2
|
|
5455
|
-
},
|
|
5456
|
-
"isStatic": false
|
|
5457
|
-
},
|
|
5458
|
-
{
|
|
5459
|
-
"kind": "Property",
|
|
5460
|
-
"canonicalReference": "@empathyco/x-components!BaseResultImage#hasEnteredView:member",
|
|
5461
|
-
"docComment": "/**\n * The image has entered in the port view.\n *\n * @public\n */\n",
|
|
5462
|
-
"excerptTokens": [
|
|
5463
|
-
{
|
|
5464
|
-
"kind": "Content",
|
|
5465
|
-
"text": "protected hasEnteredView: "
|
|
5466
|
-
},
|
|
5467
|
-
{
|
|
5468
|
-
"kind": "Content",
|
|
5469
|
-
"text": "boolean"
|
|
5470
|
-
},
|
|
5471
|
-
{
|
|
5472
|
-
"kind": "Content",
|
|
5473
|
-
"text": ";"
|
|
5474
|
-
}
|
|
5475
|
-
],
|
|
5476
|
-
"isOptional": false,
|
|
5477
|
-
"releaseTag": "Public",
|
|
5478
|
-
"name": "hasEnteredView",
|
|
5479
|
-
"propertyTypeTokenRange": {
|
|
5480
|
-
"startIndex": 1,
|
|
5481
|
-
"endIndex": 2
|
|
5482
|
-
},
|
|
5483
|
-
"isStatic": false
|
|
5484
|
-
},
|
|
5485
|
-
{
|
|
5486
|
-
"kind": "Property",
|
|
5487
|
-
"canonicalReference": "@empathyco/x-components!BaseResultImage#hasImageLoaded:member",
|
|
5488
|
-
"docComment": "/**\n * Indicates if the result image is loaded.\n *\n * @public\n */\n",
|
|
5489
|
-
"excerptTokens": [
|
|
5490
|
-
{
|
|
5491
|
-
"kind": "Content",
|
|
5492
|
-
"text": "protected hasImageLoaded: "
|
|
5493
|
-
},
|
|
5494
|
-
{
|
|
5495
|
-
"kind": "Content",
|
|
5496
|
-
"text": "boolean"
|
|
5497
|
-
},
|
|
5498
|
-
{
|
|
5499
|
-
"kind": "Content",
|
|
5500
|
-
"text": ";"
|
|
5501
|
-
}
|
|
5502
|
-
],
|
|
5503
|
-
"isOptional": false,
|
|
5504
|
-
"releaseTag": "Public",
|
|
5505
|
-
"name": "hasImageLoaded",
|
|
5506
|
-
"propertyTypeTokenRange": {
|
|
5507
|
-
"startIndex": 1,
|
|
5508
|
-
"endIndex": 2
|
|
5509
|
-
},
|
|
5510
|
-
"isStatic": false
|
|
5511
|
-
},
|
|
5512
|
-
{
|
|
5513
|
-
"kind": "Method",
|
|
5514
|
-
"canonicalReference": "@empathyco/x-components!BaseResultImage#mounted:member(1)",
|
|
5515
|
-
"docComment": "",
|
|
5516
|
-
"excerptTokens": [
|
|
5517
|
-
{
|
|
5518
|
-
"kind": "Content",
|
|
5519
|
-
"text": "mounted(): "
|
|
5520
|
-
},
|
|
5521
|
-
{
|
|
5522
|
-
"kind": "Content",
|
|
5523
|
-
"text": "void"
|
|
5524
|
-
},
|
|
5525
|
-
{
|
|
5526
|
-
"kind": "Content",
|
|
5527
|
-
"text": ";"
|
|
5528
|
-
}
|
|
5529
|
-
],
|
|
5530
|
-
"isOptional": false,
|
|
5531
|
-
"isStatic": false,
|
|
5532
|
-
"returnTypeTokenRange": {
|
|
5533
|
-
"startIndex": 1,
|
|
5534
|
-
"endIndex": 2
|
|
5535
|
-
},
|
|
5536
|
-
"releaseTag": "Public",
|
|
5537
|
-
"overloadIndex": 1,
|
|
5538
|
-
"parameters": [],
|
|
5539
|
-
"name": "mounted"
|
|
5540
|
-
},
|
|
5541
5395
|
{
|
|
5542
5396
|
"kind": "Property",
|
|
5543
5397
|
"canonicalReference": "@empathyco/x-components!BaseResultImage#result:member",
|
|
@@ -503,29 +503,19 @@ export class BaseResultCurrentPrice extends Vue_2 {
|
|
|
503
503
|
|
|
504
504
|
// @public
|
|
505
505
|
export class BaseResultImage extends Vue_2 {
|
|
506
|
-
$refs: {
|
|
507
|
-
image: HTMLElement;
|
|
508
|
-
};
|
|
509
506
|
animation: string | typeof Vue_2;
|
|
510
507
|
// @internal
|
|
511
|
-
protected createObserver(): void;
|
|
512
508
|
protected failedImages: string[];
|
|
513
509
|
// @internal
|
|
514
510
|
protected flagImageAsFailed(): void;
|
|
515
511
|
// @internal
|
|
516
512
|
protected flagImageLoaded(): void;
|
|
517
513
|
// @internal
|
|
518
|
-
protected get hasAllImagesFailed(): boolean;
|
|
519
|
-
protected hasEnteredView: boolean;
|
|
520
514
|
protected hasImageLoaded: boolean;
|
|
521
515
|
// @internal
|
|
522
516
|
protected get imageSrc(): string;
|
|
523
517
|
// @internal
|
|
524
|
-
protected
|
|
525
|
-
// (undocumented)
|
|
526
|
-
mounted(): void;
|
|
527
|
-
// @internal
|
|
528
|
-
protected observerHandler(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
|
|
518
|
+
protected loaderStyles: Partial<CSSStyleDeclaration>;
|
|
529
519
|
protected result: Result;
|
|
530
520
|
}
|
|
531
521
|
|
|
@@ -7,53 +7,36 @@ import Vue from 'vue';
|
|
|
7
7
|
*/
|
|
8
8
|
export default class BaseResultImage extends Vue {
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
* image fallback.
|
|
10
|
+
* (Required) The {@link @empathyco/x-types#Result | result} information.
|
|
12
11
|
*
|
|
13
12
|
* @public
|
|
14
13
|
*/
|
|
15
|
-
|
|
14
|
+
protected result: Result;
|
|
16
15
|
/**
|
|
17
|
-
*
|
|
16
|
+
* Animation to use when switching between the placeholder, the loaded image, or the failed
|
|
17
|
+
* image fallback.
|
|
18
18
|
*
|
|
19
19
|
* @public
|
|
20
20
|
*/
|
|
21
|
-
|
|
21
|
+
animation: string | typeof Vue;
|
|
22
22
|
/**
|
|
23
23
|
* An array of images that failed to load.
|
|
24
24
|
*
|
|
25
|
-
* @
|
|
25
|
+
* @internal
|
|
26
26
|
*/
|
|
27
27
|
protected failedImages: string[];
|
|
28
|
-
/**
|
|
29
|
-
* HTMLElement that references the picture element.
|
|
30
|
-
*
|
|
31
|
-
* @public
|
|
32
|
-
*/
|
|
33
|
-
$refs: {
|
|
34
|
-
image: HTMLElement;
|
|
35
|
-
};
|
|
36
28
|
/**
|
|
37
29
|
* Indicates if the result image is loaded.
|
|
38
30
|
*
|
|
39
|
-
* @
|
|
31
|
+
* @internal
|
|
40
32
|
*/
|
|
41
33
|
protected hasImageLoaded: boolean;
|
|
42
|
-
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
* @public
|
|
46
|
-
*/
|
|
47
|
-
protected result: Result;
|
|
48
|
-
/**
|
|
49
|
-
* Checks if intersection observer is available in window object.
|
|
50
|
-
*
|
|
51
|
-
* @returns Boolean.
|
|
34
|
+
/**.
|
|
35
|
+
* Styles to use inline in the image loader, to prevent override from CSS
|
|
52
36
|
*
|
|
53
37
|
* @internal
|
|
54
38
|
*/
|
|
55
|
-
protected
|
|
56
|
-
mounted(): void;
|
|
39
|
+
protected loaderStyles: Partial<CSSStyleDeclaration>;
|
|
57
40
|
/**
|
|
58
41
|
* Gets the src from the result image.
|
|
59
42
|
*
|
|
@@ -62,35 +45,12 @@ export default class BaseResultImage extends Vue {
|
|
|
62
45
|
* @internal
|
|
63
46
|
*/
|
|
64
47
|
protected get imageSrc(): string;
|
|
65
|
-
/**
|
|
66
|
-
* Creates an intersection observer in the image element.
|
|
67
|
-
*
|
|
68
|
-
* @internal
|
|
69
|
-
*/
|
|
70
|
-
protected createObserver(): void;
|
|
71
|
-
/**
|
|
72
|
-
* Observe all the observables items and detects when a element is intersected.
|
|
73
|
-
*
|
|
74
|
-
* @param entries - The observed items.
|
|
75
|
-
* @param observer - The intersection observer object.
|
|
76
|
-
*
|
|
77
|
-
* @internal
|
|
78
|
-
*/
|
|
79
|
-
protected observerHandler(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
|
|
80
48
|
/**
|
|
81
49
|
* Sets an image as failed.
|
|
82
50
|
*
|
|
83
51
|
* @internal
|
|
84
52
|
*/
|
|
85
53
|
protected flagImageAsFailed(): void;
|
|
86
|
-
/**
|
|
87
|
-
* Checks if all the images failed.
|
|
88
|
-
*
|
|
89
|
-
* @returns Boolean.
|
|
90
|
-
*
|
|
91
|
-
* @internal
|
|
92
|
-
*/
|
|
93
|
-
protected get hasAllImagesFailed(): boolean;
|
|
94
54
|
/**
|
|
95
55
|
* Marks an image as loaded.
|
|
96
56
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-result-image.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-result-image.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../src/components/result/base-result-image.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,GAAG,MAAM,KAAK,CAAC;AAItB;;;;GAIG;AAMH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,GAAG;IAC9C;;;;OAIG;IAEH,SAAS,CAAC,MAAM,EAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IAEI,SAAS,EAAG,MAAM,GAAG,OAAO,GAAG,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,EAAE,CAAM;IAEtC;;;;OAIG;IACH,SAAS,CAAC,cAAc,UAAS;IAEjC;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAQlD;IAEF;;;;;;OAMG;IACH,SAAS,KAAK,QAAQ,IAAI,MAAM,CAG/B;IAED;;;;OAIG;IACH,SAAS,CAAC,iBAAiB,IAAI,IAAI;IAMnC;;;;OAIG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;CAGlC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md) > [$refs](./x-components.baseresultimage._refs.md)
|
|
4
|
-
|
|
5
|
-
## BaseResultImage.$refs property
|
|
6
|
-
|
|
7
|
-
HTMLElement that references the picture element.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
$refs: {
|
|
13
|
-
image: HTMLElement;
|
|
14
|
-
};
|
|
15
|
-
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md) > [failedImages](./x-components.baseresultimage.failedimages.md)
|
|
4
|
-
|
|
5
|
-
## BaseResultImage.failedImages property
|
|
6
|
-
|
|
7
|
-
An array of images that failed to load.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
protected failedImages: string[];
|
|
13
|
-
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md) > [hasEnteredView](./x-components.baseresultimage.hasenteredview.md)
|
|
4
|
-
|
|
5
|
-
## BaseResultImage.hasEnteredView property
|
|
6
|
-
|
|
7
|
-
The image has entered in the port view.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
protected hasEnteredView: boolean;
|
|
13
|
-
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md) > [hasImageLoaded](./x-components.baseresultimage.hasimageloaded.md)
|
|
4
|
-
|
|
5
|
-
## BaseResultImage.hasImageLoaded property
|
|
6
|
-
|
|
7
|
-
Indicates if the result image is loaded.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
protected hasImageLoaded: boolean;
|
|
13
|
-
```
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md) > [mounted](./x-components.baseresultimage.mounted.md)
|
|
4
|
-
|
|
5
|
-
## BaseResultImage.mounted() method
|
|
6
|
-
|
|
7
|
-
<b>Signature:</b>
|
|
8
|
-
|
|
9
|
-
```typescript
|
|
10
|
-
mounted(): void;
|
|
11
|
-
```
|
|
12
|
-
<b>Returns:</b>
|
|
13
|
-
|
|
14
|
-
void
|
|
15
|
-
|