@empathyco/x-components 6.0.0-alpha.205 → 6.0.0-alpha.207
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 +336 -872
- package/docs/API-reference/api/x-components.basecolumnpickerdropdown.md +7 -7
- package/docs/API-reference/api/x-components.sortdropdown.md +8 -8
- package/docs/API-reference/api/x-components.sortlist.md +9 -9
- package/docs/API-reference/api/x-components.sortpickerlist.md +9 -9
- package/docs/API-reference/components/search/x-components.sort-list.md +4 -4
- package/docs/API-reference/components/search/x-components.sort-picker-list.md +5 -5
- package/js/components/animations/animate-scale/animate-scale.style.css.js +1 -1
- package/js/components/base-rating.vue3.js +1 -1
- package/js/components/column-picker/base-column-picker-dropdown.vue.js.map +1 -1
- package/js/components/column-picker/base-column-picker-dropdown.vue2.js.map +1 -1
- package/js/components/sliding-panel.vue3.js +1 -1
- package/js/x-modules/facets/components/lists/filters-search.vue3.js +1 -1
- package/js/x-modules/search/components/sort-dropdown.vue.js.map +1 -1
- package/js/x-modules/search/components/sort-dropdown.vue2.js.map +1 -1
- package/js/x-modules/search/components/sort-list.vue.js.map +1 -1
- package/js/x-modules/search/components/sort-list.vue2.js.map +1 -1
- package/js/x-modules/search/components/sort-picker-list.vue.js.map +1 -1
- package/js/x-modules/search/components/sort-picker-list.vue2.js.map +1 -1
- package/package.json +10 -23
- package/report/x-components.api.json +128 -112
- package/report/x-components.api.md +88 -89
- package/types/components/column-picker/base-column-picker-dropdown.vue.d.ts +8 -9
- package/types/components/column-picker/base-column-picker-dropdown.vue.d.ts.map +1 -1
- package/types/views/adapter.d.ts +0 -3
- package/types/views/adapter.d.ts.map +1 -1
- package/types/x-modules/search/components/sort-dropdown.vue.d.ts +9 -10
- package/types/x-modules/search/components/sort-dropdown.vue.d.ts.map +1 -1
- package/types/x-modules/search/components/sort-list.vue.d.ts +10 -11
- package/types/x-modules/search/components/sort-list.vue.d.ts.map +1 -1
- package/types/x-modules/search/components/sort-picker-list.vue.d.ts +10 -11
- package/types/x-modules/search/components/sort-picker-list.vue.d.ts.map +1 -1
- package/types/adapter/e2e-adapter.d.ts +0 -21
- package/types/adapter/e2e-adapter.d.ts.map +0 -1
|
@@ -11,27 +11,27 @@ It emits [XEventsTypes.UserClickedColumnPicker](./x-components.xeventstypes.user
|
|
|
11
11
|
**Signature:**
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
|
-
_default:
|
|
14
|
+
_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
15
|
columns: {
|
|
16
16
|
type: PropType<number[]>;
|
|
17
17
|
required: true;
|
|
18
18
|
};
|
|
19
19
|
modelValue: NumberConstructor;
|
|
20
|
-
animation: PropType<string |
|
|
20
|
+
animation: PropType<string | Component>;
|
|
21
21
|
}>, {
|
|
22
22
|
emitEvents: (column: number) => void;
|
|
23
23
|
hasToggleSlot: boolean;
|
|
24
|
-
selectedColumns:
|
|
25
|
-
}, {}, {}, {},
|
|
24
|
+
selectedColumns: import("vue").Ref<number, number>;
|
|
25
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
26
26
|
columns: {
|
|
27
27
|
type: PropType<number[]>;
|
|
28
28
|
required: true;
|
|
29
29
|
};
|
|
30
30
|
modelValue: NumberConstructor;
|
|
31
|
-
animation: PropType<string |
|
|
31
|
+
animation: PropType<string | Component>;
|
|
32
32
|
}>> & Readonly<{
|
|
33
33
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
34
34
|
}>, {}, {}, {
|
|
35
|
-
BaseDropdown:
|
|
36
|
-
}, {}, string,
|
|
35
|
+
BaseDropdown: import("vue").DefineComponent<{}, {}, any>;
|
|
36
|
+
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
|
|
37
37
|
```
|
|
@@ -9,25 +9,25 @@ The `SortDropdown` component allows user to select the search results order. Thi
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
_default:
|
|
12
|
+
_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
13
13
|
items: {
|
|
14
14
|
type: PropType<Sort[]>;
|
|
15
15
|
required: true;
|
|
16
16
|
};
|
|
17
|
-
animation: PropType<string |
|
|
17
|
+
animation: PropType<string | Component>;
|
|
18
18
|
}>, {
|
|
19
19
|
emitUserClickedASort: (sort: Sort) => void;
|
|
20
|
-
rootRef:
|
|
21
|
-
selectedSort:
|
|
22
|
-
}, {}, {}, {},
|
|
20
|
+
rootRef: import("vue").Ref<import("vue").DefineComponent<{}, {}, any> | undefined, import("vue").DefineComponent<{}, {}, any> | undefined>;
|
|
21
|
+
selectedSort: import("vue").ComputedRef<string>;
|
|
22
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
23
23
|
items: {
|
|
24
24
|
type: PropType<Sort[]>;
|
|
25
25
|
required: true;
|
|
26
26
|
};
|
|
27
|
-
animation: PropType<string |
|
|
27
|
+
animation: PropType<string | Component>;
|
|
28
28
|
}>> & Readonly<{
|
|
29
29
|
onChange?: ((...args: any[]) => any) | undefined;
|
|
30
30
|
}>, {}, {}, {
|
|
31
|
-
BaseDropdown:
|
|
32
|
-
}, {}, string,
|
|
31
|
+
BaseDropdown: import("vue").DefineComponent<{}, {}, any>;
|
|
32
|
+
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
|
|
33
33
|
```
|
|
@@ -9,30 +9,30 @@ The `SortList` component allows user to select the search results order. This co
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
_default:
|
|
12
|
+
_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
13
13
|
items: {
|
|
14
14
|
type: PropType<Sort[]>;
|
|
15
15
|
required: true;
|
|
16
16
|
};
|
|
17
17
|
animation: {
|
|
18
|
-
type: PropType<string |
|
|
18
|
+
type: PropType<string | Component>;
|
|
19
19
|
default: () => string;
|
|
20
20
|
};
|
|
21
21
|
}>, {
|
|
22
|
-
listItems:
|
|
23
|
-
selectedSort:
|
|
24
|
-
}, {}, {}, {},
|
|
22
|
+
listItems: import("vue").ComputedRef<SortListItem[]>;
|
|
23
|
+
selectedSort: import("vue").ComputedRef<string>;
|
|
24
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
25
25
|
items: {
|
|
26
26
|
type: PropType<Sort[]>;
|
|
27
27
|
required: true;
|
|
28
28
|
};
|
|
29
29
|
animation: {
|
|
30
|
-
type: PropType<string |
|
|
30
|
+
type: PropType<string | Component>;
|
|
31
31
|
default: () => string;
|
|
32
32
|
};
|
|
33
33
|
}>> & Readonly<{}>, {
|
|
34
|
-
animation: string |
|
|
34
|
+
animation: string | Component;
|
|
35
35
|
}, {}, {
|
|
36
|
-
BaseEventButton:
|
|
37
|
-
}, {}, string,
|
|
36
|
+
BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
|
|
37
|
+
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
|
|
38
38
|
```
|
|
@@ -9,32 +9,32 @@ The `SortPickerList` component allows user to select the search results order. T
|
|
|
9
9
|
**Signature:**
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
_default:
|
|
12
|
+
_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
13
13
|
items: {
|
|
14
14
|
type: PropType<Sort[]>;
|
|
15
15
|
required: true;
|
|
16
16
|
};
|
|
17
17
|
animation: {
|
|
18
|
-
type: PropType<string |
|
|
18
|
+
type: PropType<string | Component>;
|
|
19
19
|
default: () => string;
|
|
20
20
|
};
|
|
21
21
|
buttonClass: StringConstructor;
|
|
22
22
|
}>, {
|
|
23
|
-
listItems:
|
|
24
|
-
selectedSort:
|
|
25
|
-
}, {}, {}, {},
|
|
23
|
+
listItems: import("vue").ComputedRef<SortPickerItem[]>;
|
|
24
|
+
selectedSort: import("vue").ComputedRef<string>;
|
|
25
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
26
26
|
items: {
|
|
27
27
|
type: PropType<Sort[]>;
|
|
28
28
|
required: true;
|
|
29
29
|
};
|
|
30
30
|
animation: {
|
|
31
|
-
type: PropType<string |
|
|
31
|
+
type: PropType<string | Component>;
|
|
32
32
|
default: () => string;
|
|
33
33
|
};
|
|
34
34
|
buttonClass: StringConstructor;
|
|
35
35
|
}>> & Readonly<{}>, {
|
|
36
|
-
animation: string |
|
|
36
|
+
animation: string | Component;
|
|
37
37
|
}, {}, {
|
|
38
|
-
BaseEventButton:
|
|
39
|
-
}, {}, string,
|
|
38
|
+
BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
|
|
39
|
+
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
|
|
40
40
|
```
|
|
@@ -11,10 +11,10 @@ also allows to change the selected sort programmatically.
|
|
|
11
11
|
|
|
12
12
|
## Props
|
|
13
13
|
|
|
14
|
-
| Name | Description | Type
|
|
15
|
-
| ---------------------- | --------------------------------------------- |
|
|
16
|
-
| <code>items</code> | The list of possible sort values. | <code>Sort[]</code>
|
|
17
|
-
| <code>animation</code> | The transition to use for rendering the list. | <code>string \|
|
|
14
|
+
| Name | Description | Type | Default |
|
|
15
|
+
| ---------------------- | --------------------------------------------- | -------------------------------- | ----------------------- |
|
|
16
|
+
| <code>items</code> | The list of possible sort values. | <code>Sort[]</code> | <code></code> |
|
|
17
|
+
| <code>animation</code> | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'ul'</code> |
|
|
18
18
|
|
|
19
19
|
## Slots
|
|
20
20
|
|
|
@@ -11,11 +11,11 @@ also allows to change the selected sort programmatically.
|
|
|
11
11
|
|
|
12
12
|
## Props
|
|
13
13
|
|
|
14
|
-
| Name | Description | Type
|
|
15
|
-
| ------------------------ | --------------------------------------------- |
|
|
16
|
-
| <code>items</code> | The list of possible sort values. | <code>Sort[]</code>
|
|
17
|
-
| <code>animation</code> | The transition to use for rendering the list. | <code>string \|
|
|
18
|
-
| <code>buttonClass</code> | Class inherited by each sort button. | <code>string</code>
|
|
14
|
+
| Name | Description | Type | Default |
|
|
15
|
+
| ------------------------ | --------------------------------------------- | -------------------------------- | ------------------------ |
|
|
16
|
+
| <code>items</code> | The list of possible sort values. | <code>Sort[]</code> | <code></code> |
|
|
17
|
+
| <code>animation</code> | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'div'</code> |
|
|
18
|
+
| <code>buttonClass</code> | Class inherited by each sort button. | <code>string</code> | <code></code> |
|
|
19
19
|
|
|
20
20
|
## Slots
|
|
21
21
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import injectCss from '../../../../tools/inject-css.js';
|
|
2
2
|
|
|
3
|
-
var css = ".x-animate-scale--enter-active,.x-animate-scale--enter-active *,.x-animate-scale--leave-active,.x-animate-scale--leave-active *{animation-duration:var(--x-duration-animation,.3s);animation-timing-function:linear}.x-animate-scale--enter-active,.x-animate-scale--leave-active{overflow:hidden}.x-animate-scale--enter-active.x-animate-scale--bottom,.x-animate-scale--enter-active.x-animate-scale--bottom-to-top,.x-animate-scale--enter-active.x-animate-scale--top,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom,.x-animate-scale--leave-active.x-animate-scale--bottom,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top,.x-animate-scale--leave-active.x-animate-scale--top,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom{animation-name:containerAnimationY}.x-animate-scale--enter-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--enter-active.x-animate-scale--bottom>*,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--enter-active.x-animate-scale--top>*,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--leave-active.x-animate-scale--bottom>*,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--leave-active.x-animate-scale--top>*{animation-name:contentAnimationY}.x-animate-scale--enter-active.x-animate-scale--left,.x-animate-scale--enter-active.x-animate-scale--left-to-right,.x-animate-scale--enter-active.x-animate-scale--right,.x-animate-scale--enter-active.x-animate-scale--right-to-left,.x-animate-scale--leave-active.x-animate-scale--left,.x-animate-scale--leave-active.x-animate-scale--left-to-right,.x-animate-scale--leave-active.x-animate-scale--right,.x-animate-scale--leave-active.x-animate-scale--right-to-left{animation-name:containerAnimationX}.x-animate-scale--enter-active.x-animate-scale--left-to-right>*,.x-animate-scale--enter-active.x-animate-scale--left>*,.x-animate-scale--enter-active.x-animate-scale--right-to-left>*,.x-animate-scale--enter-active.x-animate-scale--right>*,.x-animate-scale--leave-active.x-animate-scale--left-to-right>*,.x-animate-scale--leave-active.x-animate-scale--left>*,.x-animate-scale--leave-active.x-animate-scale--right-to-left>*,.x-animate-scale--leave-active.x-animate-scale--right>*{animation-name:contentAnimationX}.x-animate-scale--leave-active,.x-animate-scale--leave-active>*{animation-direction:reverse}.x-animate-scale--top.x-animate-scale--enter-active,.x-animate-scale--top.x-animate-scale--enter-active>*,.x-animate-scale--top.x-animate-scale--leave-active,.x-animate-scale--top.x-animate-scale--leave-active>*{transform-origin:top center}.x-animate-scale--bottom.x-animate-scale--enter-active,.x-animate-scale--bottom.x-animate-scale--enter-active>*,.x-animate-scale--bottom.x-animate-scale--leave-active,.x-animate-scale--bottom.x-animate-scale--leave-active>*{transform-origin:bottom center}.x-animate-scale--left.x-animate-scale--enter-active,.x-animate-scale--left.x-animate-scale--enter-active>*,.x-animate-scale--left.x-animate-scale--leave-active,.x-animate-scale--left.x-animate-scale--leave-active>*{transform-origin:left center}.x-animate-scale--right.x-animate-scale--enter-active,.x-animate-scale--right.x-animate-scale--enter-active>*,.x-animate-scale--right.x-animate-scale--leave-active,.x-animate-scale--right.x-animate-scale--leave-active>*{transform-origin:right center}.x-animate-scale--top-to-bottom.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom>.x-animate-scale--enter-active{transform-origin:top center}.x-animate-scale--
|
|
3
|
+
var css = ".x-animate-scale--enter-active,.x-animate-scale--enter-active *,.x-animate-scale--leave-active,.x-animate-scale--leave-active *{animation-duration:var(--x-duration-animation,.3s);animation-timing-function:linear}.x-animate-scale--enter-active,.x-animate-scale--leave-active{overflow:hidden}.x-animate-scale--enter-active.x-animate-scale--bottom,.x-animate-scale--enter-active.x-animate-scale--bottom-to-top,.x-animate-scale--enter-active.x-animate-scale--top,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom,.x-animate-scale--leave-active.x-animate-scale--bottom,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top,.x-animate-scale--leave-active.x-animate-scale--top,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom{animation-name:containerAnimationY}.x-animate-scale--enter-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--enter-active.x-animate-scale--bottom>*,.x-animate-scale--enter-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--enter-active.x-animate-scale--top>*,.x-animate-scale--leave-active.x-animate-scale--bottom-to-top>*,.x-animate-scale--leave-active.x-animate-scale--bottom>*,.x-animate-scale--leave-active.x-animate-scale--top-to-bottom>*,.x-animate-scale--leave-active.x-animate-scale--top>*{animation-name:contentAnimationY}.x-animate-scale--enter-active.x-animate-scale--left,.x-animate-scale--enter-active.x-animate-scale--left-to-right,.x-animate-scale--enter-active.x-animate-scale--right,.x-animate-scale--enter-active.x-animate-scale--right-to-left,.x-animate-scale--leave-active.x-animate-scale--left,.x-animate-scale--leave-active.x-animate-scale--left-to-right,.x-animate-scale--leave-active.x-animate-scale--right,.x-animate-scale--leave-active.x-animate-scale--right-to-left{animation-name:containerAnimationX}.x-animate-scale--enter-active.x-animate-scale--left-to-right>*,.x-animate-scale--enter-active.x-animate-scale--left>*,.x-animate-scale--enter-active.x-animate-scale--right-to-left>*,.x-animate-scale--enter-active.x-animate-scale--right>*,.x-animate-scale--leave-active.x-animate-scale--left-to-right>*,.x-animate-scale--leave-active.x-animate-scale--left>*,.x-animate-scale--leave-active.x-animate-scale--right-to-left>*,.x-animate-scale--leave-active.x-animate-scale--right>*{animation-name:contentAnimationX}.x-animate-scale--leave-active,.x-animate-scale--leave-active>*{animation-direction:reverse}.x-animate-scale--top.x-animate-scale--enter-active,.x-animate-scale--top.x-animate-scale--enter-active>*,.x-animate-scale--top.x-animate-scale--leave-active,.x-animate-scale--top.x-animate-scale--leave-active>*{transform-origin:top center}.x-animate-scale--bottom.x-animate-scale--enter-active,.x-animate-scale--bottom.x-animate-scale--enter-active>*,.x-animate-scale--bottom.x-animate-scale--leave-active,.x-animate-scale--bottom.x-animate-scale--leave-active>*{transform-origin:bottom center}.x-animate-scale--left.x-animate-scale--enter-active,.x-animate-scale--left.x-animate-scale--enter-active>*,.x-animate-scale--left.x-animate-scale--leave-active,.x-animate-scale--left.x-animate-scale--leave-active>*{transform-origin:left center}.x-animate-scale--right.x-animate-scale--enter-active,.x-animate-scale--right.x-animate-scale--enter-active>*,.x-animate-scale--right.x-animate-scale--leave-active,.x-animate-scale--right.x-animate-scale--leave-active>*{transform-origin:right center}.x-animate-scale--top-to-bottom.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom>.x-animate-scale--enter-active{transform-origin:top center}.x-animate-scale--bottom-to-top.x-animate-scale--enter-active,.x-animate-scale--bottom-to-top>.x-animate-scale--enter-active,.x-animate-scale--top-to-bottom.x-animate-scale--leave-active,.x-animate-scale--top-to-bottom>.x-animate-scale--leave-active{transform-origin:bottom center}.x-animate-scale--bottom-to-top.x-animate-scale--leave-active,.x-animate-scale--bottom-to-top>.x-animate-scale--leave-active{transform-origin:top center}.x-animate-scale--left-to-right.x-animate-scale--enter-active,.x-animate-scale--left-to-right>.x-animate-scale--enter-active{transform-origin:left center}.x-animate-scale--left-to-right.x-animate-scale--leave-active,.x-animate-scale--left-to-right>.x-animate-scale--leave-active,.x-animate-scale--right-to-left.x-animate-scale--enter-active,.x-animate-scale--right-to-left>.x-animate-scale--enter-active{transform-origin:right center}.x-animate-scale--right-to-left.x-animate-scale--leave-active,.x-animate-scale--right-to-left>.x-animate-scale--leave-active{transform-origin:left center}@keyframes containerAnimationY{0%{transform:scaleY(0)}5.5555555556%{transform:scaleY(.0000762079)}11.1111111111%{transform:scaleY(.0012193263)}16.6666666667%{transform:scaleY(.0061728395)}22.2222222222%{transform:scaleY(.0195092212)}27.7777777778%{transform:scaleY(.0476299345)}33.3333333333%{transform:scaleY(.0987654321)}38.8888888889%{transform:scaleY(.1829751562)}44.4444444444%{transform:scaleY(.3121475385)}50%{transform:scaleY(.5)}55.5555555556%{transform:scaleY(.6878524615)}61.1111111111%{transform:scaleY(.8170248438)}66.6666666667%{transform:scaleY(.9012345679)}72.2222222222%{transform:scaleY(.9523700655)}77.7777777778%{transform:scaleY(.9804907788)}83.3333333333%{transform:scaleY(.9938271605)}88.8888888889%{transform:scaleY(.9987806737)}94.4444444444%{transform:scaleY(.9999237921)}to{transform:scaleY(1)}}@keyframes contentAnimationY{0%{transform:scaleY(99999999)}5.5555555556%{transform:scaleY(13122)}11.1111111111%{transform:scaleY(820.125)}16.6666666667%{transform:scaleY(162)}22.2222222222%{transform:scaleY(51.2578125)}27.7777777778%{transform:scaleY(20.9952)}33.3333333333%{transform:scaleY(10.125)}38.8888888889%{transform:scaleY(5.4652228238)}44.4444444444%{transform:scaleY(3.2036132813)}50%{transform:scaleY(2)}55.5555555556%{transform:scaleY(1.4538001329)}61.1111111111%{transform:scaleY(1.2239529895)}66.6666666667%{transform:scaleY(1.1095890411)}72.2222222222%{transform:scaleY(1.0500120029)}77.7777777778%{transform:scaleY(1.019897404)}83.3333333333%{transform:scaleY(1.0062111801)}88.8888888889%{transform:scaleY(1.0012208149)}94.4444444444%{transform:scaleY(1.0000762137)}to{transform:scaleY(1)}}@keyframes containerAnimationX{0%{transform:scaleX(0)}5.5555555556%{transform:scaleX(.0000762079)}11.1111111111%{transform:scaleX(.0012193263)}16.6666666667%{transform:scaleX(.0061728395)}22.2222222222%{transform:scaleX(.0195092212)}27.7777777778%{transform:scaleX(.0476299345)}33.3333333333%{transform:scaleX(.0987654321)}38.8888888889%{transform:scaleX(.1829751562)}44.4444444444%{transform:scaleX(.3121475385)}50%{transform:scaleX(.5)}55.5555555556%{transform:scaleX(.6878524615)}61.1111111111%{transform:scaleX(.8170248438)}66.6666666667%{transform:scaleX(.9012345679)}72.2222222222%{transform:scaleX(.9523700655)}77.7777777778%{transform:scaleX(.9804907788)}83.3333333333%{transform:scaleX(.9938271605)}88.8888888889%{transform:scaleX(.9987806737)}94.4444444444%{transform:scaleX(.9999237921)}to{transform:scaleX(1)}}@keyframes contentAnimationX{0%{transform:scaleX(99999999)}5.5555555556%{transform:scaleX(13122)}11.1111111111%{transform:scaleX(820.125)}16.6666666667%{transform:scaleX(162)}22.2222222222%{transform:scaleX(51.2578125)}27.7777777778%{transform:scaleX(20.9952)}33.3333333333%{transform:scaleX(10.125)}38.8888888889%{transform:scaleX(5.4652228238)}44.4444444444%{transform:scaleX(3.2036132813)}50%{transform:scaleX(2)}55.5555555556%{transform:scaleX(1.4538001329)}61.1111111111%{transform:scaleX(1.2239529895)}66.6666666667%{transform:scaleX(1.1095890411)}72.2222222222%{transform:scaleX(1.0500120029)}77.7777777778%{transform:scaleX(1.019897404)}83.3333333333%{transform:scaleX(1.0062111801)}88.8888888889%{transform:scaleX(1.0012208149)}94.4444444444%{transform:scaleX(1.0000762137)}to{transform:scaleX(1)}}";
|
|
4
4
|
injectCss(css);
|
|
5
5
|
|
|
6
6
|
export { css };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import injectCss from '../../tools/inject-css.js';
|
|
2
2
|
|
|
3
|
-
var css = ".x-rating[data-v-f3b7cb68]{display:inline-block;max-width:fit-content;position:relative}.x-rating--empty[data-v-f3b7cb68]{display:flex;flex-flow:row nowrap;overflow:hidden;white-space:nowrap}.x-rating--filled[data-v-f3b7cb68]{
|
|
3
|
+
var css = ".x-rating[data-v-f3b7cb68]{display:inline-block;max-width:fit-content;position:relative}.x-rating--empty[data-v-f3b7cb68],.x-rating--filled[data-v-f3b7cb68]{display:flex;flex-flow:row nowrap;overflow:hidden;white-space:nowrap}.x-rating--filled[data-v-f3b7cb68]{height:100%;left:0;position:absolute;top:0}.x-rating__default-icon[data-v-f3b7cb68]{fill:currentColor;stroke:currentColor}.x-rating__default-icon--empty[data-v-f3b7cb68]{fill:none}";
|
|
4
4
|
injectCss(css);
|
|
5
5
|
|
|
6
6
|
export { css };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n :model-value=\"selectedColumns\"\n :items=\"columns\"\n :animation=\"animation\"\n aria-label=\"Select number of columns\"\n @update:model-value=\"emitEvents\"\n >\n <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n <!--\n @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n button. If not provided, it uses the `item` slot as fallback.\n @binding {string|number|Identifiable} item - The item data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n closed.\n -->\n <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n </template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <!--\n @slot (required) From `BaseDropdown` component: Used to render each one of the items\n content, and as fallback for the toggle button content slot if it is not provided.\n @binding {string|number|Identifiable} item - Item to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"base-column-picker-dropdown.vue.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n :model-value=\"selectedColumns\"\n :items=\"columns\"\n :animation=\"animation\"\n aria-label=\"Select number of columns\"\n @update:model-value=\"emitEvents\"\n >\n <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n <!--\n @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n button. If not provided, it uses the `item` slot as fallback.\n @binding {string|number|Identifiable} item - The item data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n closed.\n -->\n <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n </template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <!--\n @slot (required) From `BaseDropdown` component: Used to render each one of the items\n content, and as fallback for the toggle button content slot if it is not provided.\n @binding {string|number|Identifiable} item - Item to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Component, PropType } from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * Column picker dropdown component renders {@link BaseDropdown} component which\n * options are the different columns you can set for a grid.\n *\n * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n * input.\n *\n * @public\n */\nexport default defineComponent({\n name: 'BaseColumnPickerDropdown',\n components: { BaseDropdown },\n props: {\n /** An array of numbers that represents the number of columns to render. */\n columns: {\n type: Array as PropType<number[]>,\n required: true,\n },\n /** The value of the selected columns number. */\n modelValue: Number,\n /** The transition to use for opening and closing the dropdown. */\n animation: [String, Object] as PropType<string | Component>,\n },\n emits: ['update:modelValue'],\n setup(props, { emit, slots }) {\n const $x = use$x()\n\n const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n const selectedColumns = ref(providedSelectedColumns.value)\n\n /**\n * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n *\n * @param column - Column number provided.\n */\n function emitColumnsNumberProvided(column: number) {\n selectedColumns.value = column\n $x.emit('ColumnsNumberProvided', column)\n }\n\n /**\n * Emits `update:modelValue` with the column selected.\n *\n * @param column - Column number selected.\n */\n function emitUpdateModelValue(column: number) {\n if (props.modelValue !== column) {\n emit('update:modelValue', column)\n }\n }\n\n watch(providedSelectedColumns, emitColumnsNumberProvided)\n watch(selectedColumns, emitUpdateModelValue)\n\n $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n /**\n * Synchronizes the columns number before mounting the component. If the real number of selected\n * columns equals the provided columns, it emits the event to sync it with every other component.\n * If it is not equal it means that the user has already selected a number of columns, so we emit\n * a `update:modelValue` event so developers can sync the provided value.\n */\n onBeforeMount(() => {\n if (selectedColumns.value === providedSelectedColumns.value) {\n emitColumnsNumberProvided(selectedColumns.value)\n } else {\n emitUpdateModelValue(selectedColumns.value)\n }\n })\n\n /**\n * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n * {@link XEventsTypes.ColumnsNumberProvided} events.\n *\n * @param column - Column number payload.\n */\n function emitEvents(column: number) {\n $x.emit('UserClickedColumnPicker', column)\n $x.emit('ColumnsNumberProvided', column)\n }\n\n return {\n emitEvents,\n hasToggleSlot: !!slots.toggle,\n selectedColumns,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks an item in the dropdown. The event payload is the\n number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted on component mount, and whenever the value changes. The event payload is the\n current `selectedColumns` value.\n\n## Examples\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n</script>\n```\n</docs>\n"],"names":["_createBlock","_createSlots","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;;sBACEA,WAAA,CA2Be,uBAAA,EAAA;AAAA,IA1BZ,aAAA,EAAa,IAAA,CAAA,eAAA;AAAA,IACb,KAAA,EAAO,IAAA,CAAA,OAAA;AAAA,IACP,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACZ,YAAA,EAAW,0BAAA;AAAA,IACV,qBAAA,EAAoB,IAAA,CAAA;AAAA,GAAA,EAAAC,WAAA,CAAA;AAYV,IAAA,IAAA,EAAIC,OAAA,CAQb,CAAiE,EARhD,IAAA,EAAM,YAAY,aAAA,EAAa,KAAA;AAAA,MAQhDC,UAAA,CAAiE,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAArC,IAAA,EAAM,UAAA,EAAY,aAAA,EAAa,CAAA,CAAA;AAAA,KAAA,CAAA;;;;AAlB7C,IAAA,IAAA,CAAA,aAAA,GAAA;AAAgB,MAAA,IAAA,EAAA,QAAA;AAAA,MAAA,EAAA,EAAAH,OAAA,CAQ9B,CAAgD,EARR,IAAA,EAAM,MAAA,EAAM,KAAA;AAAA,QAQpDC,UAAA,CAAgD,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAlB,IAAA,EAAM,MAAA,EAAM,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-column-picker-dropdown.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n :model-value=\"selectedColumns\"\n :items=\"columns\"\n :animation=\"animation\"\n aria-label=\"Select number of columns\"\n @update:model-value=\"emitEvents\"\n >\n <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n <!--\n @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n button. If not provided, it uses the `item` slot as fallback.\n @binding {string|number|Identifiable} item - The item data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n closed.\n -->\n <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n </template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <!--\n @slot (required) From `BaseDropdown` component: Used to render each one of the items\n content, and as fallback for the toggle button content slot if it is not provided.\n @binding {string|number|Identifiable} item - Item to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"base-column-picker-dropdown.vue2.js","sources":["../../../../src/components/column-picker/base-column-picker-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n :model-value=\"selectedColumns\"\n :items=\"columns\"\n :animation=\"animation\"\n aria-label=\"Select number of columns\"\n @update:model-value=\"emitEvents\"\n >\n <template v-if=\"hasToggleSlot\" #toggle=\"{ item, isOpen }\">\n <!--\n @slot From `BaseDropdown` component: Used to render the contents of the dropdown toggle\n button. If not provided, it uses the `item` slot as fallback.\n @binding {string|number|Identifiable} item - The item data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is\n closed.\n -->\n <slot name=\"toggle\" v-bind=\"{ item, isOpen }\" />\n </template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <!--\n @slot (required) From `BaseDropdown` component: Used to render each one of the items\n content, and as fallback for the toggle button content slot if it is not provided.\n @binding {string|number|Identifiable} item - Item to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot name=\"item\" v-bind=\"{ item, isSelected, isHighlighted }\" />\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Component, PropType } from 'vue'\nimport { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * Column picker dropdown component renders {@link BaseDropdown} component which\n * options are the different columns you can set for a grid.\n *\n * It emits {@link XEventsTypes.UserClickedColumnPicker} on dropdown\n * input.\n *\n * @public\n */\nexport default defineComponent({\n name: 'BaseColumnPickerDropdown',\n components: { BaseDropdown },\n props: {\n /** An array of numbers that represents the number of columns to render. */\n columns: {\n type: Array as PropType<number[]>,\n required: true,\n },\n /** The value of the selected columns number. */\n modelValue: Number,\n /** The transition to use for opening and closing the dropdown. */\n animation: [String, Object] as PropType<string | Component>,\n },\n emits: ['update:modelValue'],\n setup(props, { emit, slots }) {\n const $x = use$x()\n\n const providedSelectedColumns = computed(() => props.modelValue ?? props.columns[0])\n const selectedColumns = ref(providedSelectedColumns.value)\n\n /**\n * Assigns `selectedColumns` value and emits `ColumnsNumberProvided`.\n *\n * @param column - Column number provided.\n */\n function emitColumnsNumberProvided(column: number) {\n selectedColumns.value = column\n $x.emit('ColumnsNumberProvided', column)\n }\n\n /**\n * Emits `update:modelValue` with the column selected.\n *\n * @param column - Column number selected.\n */\n function emitUpdateModelValue(column: number) {\n if (props.modelValue !== column) {\n emit('update:modelValue', column)\n }\n }\n\n watch(providedSelectedColumns, emitColumnsNumberProvided)\n watch(selectedColumns, emitUpdateModelValue)\n\n $x.on('ColumnsNumberProvided', false).subscribe(column => (selectedColumns.value = column))\n\n /**\n * Synchronizes the columns number before mounting the component. If the real number of selected\n * columns equals the provided columns, it emits the event to sync it with every other component.\n * If it is not equal it means that the user has already selected a number of columns, so we emit\n * a `update:modelValue` event so developers can sync the provided value.\n */\n onBeforeMount(() => {\n if (selectedColumns.value === providedSelectedColumns.value) {\n emitColumnsNumberProvided(selectedColumns.value)\n } else {\n emitUpdateModelValue(selectedColumns.value)\n }\n })\n\n /**\n * Emits a {@link XEventsTypes.UserClickedColumnPicker} and\n * {@link XEventsTypes.ColumnsNumberProvided} events.\n *\n * @param column - Column number payload.\n */\n function emitEvents(column: number) {\n $x.emit('UserClickedColumnPicker', column)\n $x.emit('ColumnsNumberProvided', column)\n }\n\n return {\n emitEvents,\n hasToggleSlot: !!slots.toggle,\n selectedColumns,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nAn event that the component will emit:\n\n- [`UserClickedColumnPicker`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted after the user clicks an item in the dropdown. The event payload is the\n number of columns that the clicked item represents.\n- [`ColumnsNumberProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n the event is emitted on component mount, and whenever the value changes. The event payload is the\n current `selectedColumns` value.\n\n## Examples\n\nColumn picker dropdown component renders a dropdown component which options are the different\ncolumns you can set for a grid.\n\n### Usage\n\nNotice that the slots provided match with the `BaseDropdown` component. The `item` slot is required\nunlike the `toggle`, which renders the same `item` slot defined by default.\n\n#### Default usage\n\n```vue live\n<template>\n <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Customizing toggle button\n\n```vue live\n<template>\n <BaseColumnPickerDropdown v-model=\"selectedColumns\" :columns=\"[2, 4, 6]\">\n <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n\nconst selectedColumns = ref(2)\n</script>\n```\n\n#### Using it without v-model / value\n\nThe component emits an X Event, `UserClickedColumnPicker`, on column change and it also listens to\nthat event from outside, so you don't need to store the current column value to keep it synchronized\nwith other column pickers.\n\n```vue live\n<template>\n <BaseColumnPickerDropdown :columns=\"[2, 4, 6]\">\n <template #toggle=\"{ item, isOpen }\">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n <template #item=\"{ item, isSelected, isHighlighted }\">\n <span v-if=\"isHighlighted\">🟢</span>\n <span v-if=\"isSelected\">✅</span>\n <span>{{ item }}</span>\n </template>\n </BaseColumnPickerDropdown>\n</template>\n\n<script setup>\nimport BaseColumnPickerDropdown from '@empathyco/x-components/js/components/column-picker/base-column-picker-dropdown.vue'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAqCA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,KAA2B;AACjC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,UAAU,EAAE,MAAM;;AAElB,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,mBAAmB,CAAC;AAC5B,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAI,EAAG,EAAA;AAC1B,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AAEjB,QAAA,MAAM,uBAAsB,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,UAAS,IAAK,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QACnF,MAAM,eAAc,GAAI,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAA;AAEzD;;;;AAIE;QACF,SAAS,yBAAyB,CAAC,MAAc,EAAA;AAC/C,YAAA,eAAe,CAAC,KAAI,GAAI,MAAK;AAC7B,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;AAEA;;;;AAIE;QACF,SAAS,oBAAoB,CAAC,MAAc,EAAA;AAC1C,YAAA,IAAI,KAAK,CAAC,UAAS,KAAM,MAAM,EAAE;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAA;YAClC;QACF;AAEA,QAAA,KAAK,CAAC,uBAAuB,EAAE,yBAAyB,CAAA;AACxD,QAAA,KAAK,CAAC,eAAe,EAAE,oBAAoB,CAAA;QAE3C,EAAE,CAAC,EAAE,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,SAAS,CAAC,MAAK,KAAM,eAAe,CAAC,KAAI,GAAI,MAAM,CAAC,CAAA;AAE1F;;;;;AAKE;QACF,aAAa,CAAC,MAAI;YAChB,IAAI,eAAe,CAAC,KAAI,KAAM,uBAAuB,CAAC,KAAK,EAAE;AAC3D,gBAAA,yBAAyB,CAAC,eAAe,CAAC,KAAK,CAAA;YACjD;iBAAO;AACL,gBAAA,oBAAoB,CAAC,eAAe,CAAC,KAAK,CAAA;YAC5C;AACF,QAAA,CAAC,CAAA;AAED;;;;;AAKE;QACF,SAAS,UAAU,CAAC,MAAc,EAAA;AAChC,YAAA,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAA;AACzC,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,MAAM,CAAA;QACzC;QAEA,OAAO;YACL,UAAU;AACV,YAAA,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM;YAC7B,eAAe;SACjB;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import injectCss from '../../tools/inject-css.js';
|
|
2
2
|
|
|
3
|
-
var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel-button-right[data-v-9402d5ce]{right:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-
|
|
3
|
+
var css = ".x-sliding-panel[data-v-9402d5ce]{align-items:center;display:flex;flex-flow:row nowrap;position:relative}.x-sliding-panel__button[data-v-9402d5ce]{opacity:0;pointer-events:none;position:absolute;transition:all .2s ease-out;z-index:2}.x-sliding-panel-button-left[data-v-9402d5ce]{left:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel-button-right[data-v-9402d5ce]{right:var(--x-sliding-panel-buttons-distance,0)}.x-sliding-panel__scroll[data-v-9402d5ce]{-ms-overflow-style:none;display:flex;flex:100%;flex-flow:row nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.x-sliding-panel__scroll[data-v-9402d5ce]::-webkit-scrollbar{display:none}.x-sliding-panel__scroll[data-v-9402d5ce]>*{flex:0 0 auto}.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-end) .x-sliding-panel-button-right[data-v-9402d5ce],.x-sliding-panel:not(.x-sliding-panel-show-buttons-on-hover):not(.x-sliding-panel-at-start) .x-sliding-panel-button-left[data-v-9402d5ce]{opacity:1;pointer-events:all}";
|
|
4
4
|
injectCss(css);
|
|
5
5
|
|
|
6
6
|
export { css };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import injectCss from '../../../../../tools/inject-css.js';
|
|
2
2
|
|
|
3
|
-
var css = ".x-filters-search[data-v-4979a051]{display:flex;flex-flow:column nowrap}.x-filters-search__input[data-v-4979a051]::-ms-clear
|
|
3
|
+
var css = ".x-filters-search[data-v-4979a051]{display:flex;flex-flow:column nowrap}.x-filters-search__input[data-v-4979a051]::-ms-clear,.x-filters-search__input[data-v-4979a051]::-ms-reveal{display:none;height:0;width:0}.x-filters-search__input[data-v-4979a051]::-webkit-search-cancel-button,.x-filters-search__input[data-v-4979a051]::-webkit-search-decoration,.x-filters-search__input[data-v-4979a051]::-webkit-search-results-button,.x-filters-search__input[data-v-4979a051]::-webkit-search-results-decoration{display:none}";
|
|
4
4
|
injectCss(css);
|
|
5
5
|
|
|
6
6
|
export { css };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /** The transition to use for opening and closing the dropdown. */\n animation: [String, Object] as PropType<string | Component>,\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n const rootRef = ref<typeof BaseDropdown>()\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /**\n * Emits the events related to the selection of a sort value.\n *\n * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n *\n * @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n emit('change', sort)\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;;sBACEA,WAAA,CA6Be,uBAAA,EAAA;AAAA,IA5Bb,GAAA,EAAI,SAAA;AAAA,IACH,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACP,aAAA,EAAa,IAAA,CAAA,YAAA;AAAA,IACb,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACZ,KAAA,EAAM,iBAAA;AAAA,IACN,WAAA,EAAU,eAAA;AAAA,IACV,YAAA,EAAW,gBAAA;AAAA,IACV,qBAAA,EAAoB,IAAA,CAAA;AAAA,GAAA,EAAA;AAEV,IAAA,MAAA,EAAMC,OAAA,CAOf,CAA+D,EAP5C,MAAA,EAAQ,IAAA,EAAI,KAAA;AAAA,MAO/BC,UAAA,CAA+D,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAA/C,MAAA,EAAQ,IAAA,MAAxB,MAA+D;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;AAE5C,IAAA,IAAA,EAAIJ,OAAA,CAQb,CAAgF,EAR/D,IAAA,EAAM,eAAe,UAAA,EAAU,KAAA;AAAA,MAQhDC,WAAgF,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAhE,IAAA,EAAM,aAAA,EAAe,UAAA,MAArC,MAAgF;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport
|
|
1
|
+
{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-dropdown.vue"],"sourcesContent":["<template>\n <BaseDropdown\n ref=\"rootRef\"\n :items=\"items\"\n :model-value=\"selectedSort\"\n :animation=\"animation\"\n class=\"x-sort-dropdown\"\n data-test=\"sort-dropdown\"\n aria-label=\"Select sorting\"\n @update:model-value=\"emitUserClickedASort\"\n >\n <template #toggle=\"{ isOpen, item }\">\n <!--\n @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n the item slot as fallback.\n @binding {Sort} item - The sort data to render.\n @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n -->\n <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n </template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <!--\n @slot (required) Used to render each one of the items content, and as fallback\n for the toggle button content slot if it is not provided.\n @binding {Sort} item - Sort to render\n @binding {boolean} isHighlighted - True when the item has the focus.\n @binding {boolean} isSelected - True when the item is selected.\n -->\n <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n </template>\n </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport { defineComponent, ref, watch } from 'vue'\n\nimport BaseDropdown from '../../../components/base-dropdown.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortDropdown',\n xModule: searchXModule.name,\n components: { BaseDropdown },\n props: {\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /** The transition to use for opening and closing the dropdown. */\n animation: [String, Object] as PropType<string | Component>,\n },\n emits: ['change'],\n setup(_, { emit }) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n const rootRef = ref<typeof BaseDropdown>()\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /**\n * Emits the events related to the selection of a sort value.\n *\n * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n *\n * @param sort - The selected sort.\n */\n function emitUserClickedASort(sort: Sort) {\n $x.emit('UserClickedASort', sort, { target: (rootRef.value as any)?.$el })\n emit('change', sort)\n }\n\n return {\n emitUserClickedASort,\n rootRef,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortDropdown :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n <template #item=\"{ item, isHighlighted, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n <span v-if=\"isHighlighted\">🟢</span>\n {{ item }}\n </template>\n </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AA2CA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AAC5D,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,IAAG,EAAG,EAAA;AACf,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAChD,QAAA,MAAM,OAAM,GAAI,GAAG,EAAsB;AAEzC,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,KAAK,CAAA;AACzE,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA;QACrB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;YACP,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type
|
|
1
|
+
{"version":3,"file":"sort-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /** The transition to use for rendering the list. */\n animation: {\n type: [String, Object] as PropType<string | Component>,\n default: () => 'ul',\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortListItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-sort-list__item--is-selected': item === selectedSort.value,\n 'x-option-list__item--is-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAiBYC,wBAjBI,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAE,GAAA,EAAI,IAAA;AAAA,IAAK,KAAA,EAAM,2BAAA;AAAA,IAA4B,WAAA,EAAU;AAAA,GAAA,EAAA;qBAE5E,MAAgD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADlDG,kBAAA;AAAA,QAeKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAdmC,IAAA,CAAA,SAAA,EAAS,CAAA,EAAtC,IAAA,EAAM,UAAA,EAAY,KAAA,EAAK,KAAA;AADlC,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAeK,IAAA;AAAA,YAAA;AAAA,cAbF,GAAA,EAAK,IAAA;AAAA,cACL,KAAA,EAAKG,cAAA,CAAA,CAAE,UAAA,EACF,uCAAuC,CAAA;AAAA,aAAA;;cAE7CC,WAAA,CAQkB,0BAAA,EAAA;AAAA,gBAPhB,KAAA,EAAM,8BAAA;AAAA,gBACN,WAAA,EAAU,eAAA;AAAA,gBACT,MAAA,EAAQ;AAAA,eAAA,EAAA;iCAET,MAEO;AAAA,kBAFPC,UAAA,CAEO,wBAFPC,UAAA,CAEO,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAA,EAAc,IAAA,KAAS,IAAA,CAAA,YAAA,EAAY,CAAA,EAAvD,MAEO;AAAA,oBAAAC,eAAA;sCADF,IAAI,CAAA;AAAA,sBAAA;AAAA;AAAA;AAAA,mBAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type
|
|
1
|
+
{"version":3,"file":"sort-list.vue2.js","sources":["../../../../../src/x-modules/search/components/sort-list.vue"],"sourcesContent":["<template>\n <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n <li\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"cssClasses\"\n class=\"x-option-list__item x-sort-list__item\"\n >\n <BaseEventButton\n class=\"x-sort-list__button x-button\"\n data-test=\"x-sort-button\"\n :events=\"event\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </li>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n item: Sort\n cssClasses: VueCSSClasses\n event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /** The transition to use for rendering the list. */\n animation: {\n type: [String, Object] as PropType<string | Component>,\n default: () => 'ul',\n },\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortListItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-sort-list__item--is-selected': item === selectedSort.value,\n 'x-option-list__item--is-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortList :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAyCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;;AAEL,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;;AAED,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;AACtD,YAAA,OAAO,EAAE,MAAM,IAAI;AACpB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;QAEjB,MAAM,EAAE,IAAI,EAAE,YAAW,KAAM,QAAQ,CAAC,QAAQ,CAAA;AAEhD,QAAA,KAAK,CAAC,YAAY,EAAE,CAAC,KAAW,KAAK,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;AAC3E,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAA;AAED;;;;AAIE;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAiB,MACzC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAG,KAAM;YACvB,IAAI;AACJ,YAAA,UAAU,EAAE;AACV,gBAAA,gCAAgC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAC7D,gBAAA,kCAAkC,EAAE,IAAG,KAAM,YAAY,CAAC,KAAK;AAChE,aAAA;AACD,YAAA,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAG,EAAG;SAClC,CAAC,CAAC,CACL;QAEA,OAAO;YACL,SAAS;YACT,YAAY;SACd;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort || null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport type
|
|
1
|
+
{"version":3,"file":"sort-picker-list.vue.js","sources":["../../../../../src/x-modules/search/components/sort-picker-list.vue"],"sourcesContent":["<template>\n <component\n :is=\"animation\"\n tag=\"div\"\n class=\"x-sort-picker-list\"\n data-test=\"sort-picker\"\n role=\"list\"\n >\n <BaseEventButton\n v-for=\"{ item, cssClasses, event } in listItems\"\n :key=\"item\"\n :class=\"[cssClasses, buttonClass]\"\n data-test=\"sort-picker-button\"\n :events=\"event\"\n :aria-pressed=\"item === selectedSort || null\"\n role=\"listitem\"\n >\n <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n {{ item }}\n </slot>\n </BaseEventButton>\n </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { SortPickerItem } from './sort-picker-list.types'\nimport { computed, defineComponent, watch } from 'vue'\nimport BaseEventButton from '../../../components/base-event-button.vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { searchXModule } from '../x-module'\n\n/**\n * The `SortPickerList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n name: 'SortPickerList',\n xModule: searchXModule.name,\n components: { BaseEventButton },\n props: {\n /** The list of possible sort values. */\n items: {\n type: Array as PropType<Sort[]>,\n required: true,\n },\n /** The transition to use for rendering the list. */\n animation: {\n type: [String, Object] as PropType<string | Component>,\n default: () => 'div',\n },\n /** Class inherited by each sort button. */\n buttonClass: String,\n },\n setup(props) {\n const $x = use$x()\n\n const { sort: selectedSort } = useState('search')\n\n watch(selectedSort, (value: Sort) => $x.emit('SelectedSortProvided', value), {\n immediate: true,\n })\n\n /**\n * Sort list items.\n *\n * @returns A list of items with their css class and the event associate to it.\n */\n const listItems = computed<SortPickerItem[]>(() =>\n props.items.map(item => ({\n item,\n cssClasses: {\n 'x-selected': item === selectedSort.value,\n },\n event: { UserClickedASort: item },\n })),\n )\n\n return {\n listItems,\n selectedSort,\n }\n },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Picker List\n\nThe `SortPickerList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n To sync the selected sort with the store state value. This event is emitted as soon as the list of\n items is received, whenever this list changes if there is no provided value, and when the provided\n value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n <SortPickerList v-model=\"selectedSort\" :items=\"sortValues\">\n <template #default=\"{ item, isSelected }\">\n <span v-if=\"isSelected\">✅</span>\n {{ item }}\n </template>\n </SortPickerList>\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Customizing the items with classes\n\nThe `buttonClass` prop can be used to add classes to the sort items.\n\n```vue\n<template>\n <SortPickerList :items=\"sortValues\" buttonClass=\"x-button-outlined\" />\n</template>\n\n<script setup>\nimport { SortPickerList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAoBYC,wBAnBL,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IACd,GAAA,EAAI,KAAA;AAAA,IACJ,KAAA,EAAM,oBAAA;AAAA,IACN,WAAA,EAAU,aAAA;AAAA,IACV,IAAA,EAAK;AAAA,GAAA,EAAA;qBAGH,MAAgD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADlDG,kBAAA;AAAA,QAYkBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAXsB,IAAA,CAAA,SAAA,EAAS,CAAA,EAAtC,IAAA,EAAM,UAAA,EAAY,KAAA,EAAK,KAAA;8BADlCJ,WAAA,CAYkB,0BAAA,EAAA;AAAA,YAVf,GAAA,EAAK,IAAA;AAAA,YACL,KAAA,EAAKK,cAAA,CAAA,CAAG,UAAA,EAAY,IAAA,CAAA,WAAW,CAAA,CAAA;AAAA,YAChC,WAAA,EAAU,oBAAA;AAAA,YACT,MAAA,EAAQ,KAAA;AAAA,YACR,cAAA,EAAc,SAAS,IAAA,CAAA,YAAA,IAAY,IAAA;AAAA,YACpC,IAAA,EAAK;AAAA,WAAA,EAAA;6BAEL,MAEO;AAAA,cAFPC,UAAA,CAEO,wBAFPC,UAAA,CAEO,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAA,EAAc,IAAA,KAAS,IAAA,CAAA,YAAA,EAAY,CAAA,EAAvD,MAEO;AAAA,gBAAAC,eAAA;kCADF,IAAI,CAAA;AAAA,kBAAA;AAAA;AAAA;AAAA,eAAA;;;;;;;;;;;;;;;;;;"}
|