@coveo/atomic 3.64.0 → 3.64.1
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/custom-elements.json +8906 -8896
- package/dist/cjs/components/common/atomic-focus-trap/atomic-focus-trap.cjs +11 -1
- package/dist/cjs/components/common/atomic-layout-section/layout.cjs +6 -2
- package/dist/cjs/components/common/facets/facet-common.cjs +21 -2
- package/dist/cjs/components/search/atomic-facet-manager/atomic-facet-manager.cjs +7 -3
- package/dist/cjs/components/search/atomic-popover/atomic-popover.cjs +1 -2
- package/dist/cjs/components/search/atomic-search-layout/atomic-search-layout.tw.css.cjs +12 -2
- package/dist/cjs/global/environment.cjs +1 -1
- package/dist/cjs/versions.cjs +1 -1
- package/dist/esm/components/common/atomic-focus-trap/atomic-focus-trap.js +11 -1
- package/dist/esm/components/common/atomic-layout-section/layout.js +6 -2
- package/dist/esm/components/common/facets/facet-common.js +16 -3
- package/dist/esm/components/search/atomic-facet-manager/atomic-facet-manager.js +8 -4
- package/dist/esm/components/search/atomic-popover/atomic-popover.js +1 -2
- package/dist/esm/components/search/atomic-search-layout/atomic-search-layout.tw.css.js +1 -1
- package/dist/esm/global/environment.js +1 -1
- package/dist/esm/versions.js +1 -1
- package/dist/types/components/common/atomic-focus-trap/atomic-focus-trap.d.ts +1 -0
- package/dist/types/components/common/facets/facet-common.d.ts +2 -0
- package/dist/types/components/search/atomic-facet-manager/atomic-facet-manager.d.ts +6 -1
- package/package.json +12 -9
|
@@ -60,6 +60,10 @@ class AtomicFocusTrap extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(e
|
|
|
60
60
|
if (element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || 'atomic-aria-live' === element.tagName.toLowerCase()) return;
|
|
61
61
|
element.setAttribute('aria-hidden', 'true');
|
|
62
62
|
this.hiddenElements.push(element);
|
|
63
|
+
if (!element.hasAttribute('inert')) {
|
|
64
|
+
element.setAttribute('inert', '');
|
|
65
|
+
this.inertElements.push(element);
|
|
66
|
+
}
|
|
63
67
|
}
|
|
64
68
|
showAll() {
|
|
65
69
|
let el = this.hiddenElements.pop();
|
|
@@ -67,6 +71,11 @@ class AtomicFocusTrap extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(e
|
|
|
67
71
|
el.removeAttribute('aria-hidden');
|
|
68
72
|
el = this.hiddenElements.pop();
|
|
69
73
|
}
|
|
74
|
+
let inertElement = this.inertElements.pop();
|
|
75
|
+
while(inertElement){
|
|
76
|
+
inertElement.removeAttribute('inert');
|
|
77
|
+
inertElement = this.inertElements.pop();
|
|
78
|
+
}
|
|
70
79
|
}
|
|
71
80
|
hideSiblingsRecursively(element) {
|
|
72
81
|
const parent = (0, utils_cjs_namespaceObject.getParent)(element);
|
|
@@ -100,6 +109,7 @@ class AtomicFocusTrap extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(e
|
|
|
100
109
|
this.showSelf();
|
|
101
110
|
if (!isInitialLoad) {
|
|
102
111
|
await (0, utils_cjs_namespaceObject.defer)();
|
|
112
|
+
if (!this.active) return;
|
|
103
113
|
(0, accessibility_utils_cjs_namespaceObject.getFirstFocusableDescendant)(this)?.focus();
|
|
104
114
|
}
|
|
105
115
|
this.hideSiblingsRecursively(this);
|
|
@@ -113,7 +123,7 @@ class AtomicFocusTrap extends (0, light_dom_cjs_namespaceObject.LightDomMixin)(e
|
|
|
113
123
|
return this.container ?? this;
|
|
114
124
|
}
|
|
115
125
|
constructor(...args){
|
|
116
|
-
super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.onFocusChanged = (e)=>{
|
|
126
|
+
super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.inertElements = [], this.onFocusChanged = (e)=>{
|
|
117
127
|
if (!e.target || !this.active) return;
|
|
118
128
|
const focusedElement = (0, utils_cjs_namespaceObject.getFocusedElement)();
|
|
119
129
|
if (focusedElement && (0, utils_cjs_namespaceObject.isAncestorOf)(this, focusedElement)) return;
|
|
@@ -96,11 +96,15 @@ function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName,
|
|
|
96
96
|
}
|
|
97
97
|
}`;
|
|
98
98
|
};
|
|
99
|
-
const horizontalFacets = ()
|
|
100
|
-
|
|
99
|
+
const horizontalFacets = ()=>{
|
|
100
|
+
const horizontalFacetsSelector = `${layoutSelector} ${(0, external_atomic_layout_section_utils_cjs_namespaceObject.sectionSelector)('horizontal-facets')}`;
|
|
101
|
+
return `${mediaQuerySelector} {
|
|
102
|
+
${horizontalFacetsSelector} > atomic-popover:not(.atomic-hidden),
|
|
103
|
+
${horizontalFacetsSelector} > atomic-facet-manager > atomic-popover:not(.atomic-hidden) {
|
|
101
104
|
display: block;
|
|
102
105
|
}
|
|
103
106
|
}`;
|
|
107
|
+
};
|
|
104
108
|
return [
|
|
105
109
|
display,
|
|
106
110
|
search,
|
|
@@ -63,9 +63,22 @@ function isAutomaticFacetGenerator(element) {
|
|
|
63
63
|
function isPseudoFacet(el) {
|
|
64
64
|
return 'facetId' in el;
|
|
65
65
|
}
|
|
66
|
+
function isPopover(element) {
|
|
67
|
+
return 'ATOMIC-POPOVER' === element.tagName;
|
|
68
|
+
}
|
|
69
|
+
function isFacetNestedInPopover(facet) {
|
|
70
|
+
return !!facet.parentElement && isPopover(facet.parentElement);
|
|
71
|
+
}
|
|
72
|
+
function getFacetElementToReorder(facet) {
|
|
73
|
+
return isFacetNestedInPopover(facet) ? facet.parentElement : facet;
|
|
74
|
+
}
|
|
66
75
|
function getFacetsInChildren(parent) {
|
|
67
|
-
|
|
68
|
-
|
|
76
|
+
return Array.from(parent.children).flatMap((child)=>{
|
|
77
|
+
if (isPseudoFacet(child)) return [
|
|
78
|
+
child
|
|
79
|
+
];
|
|
80
|
+
return isPopover(child) ? Array.from(child.children).filter(isPseudoFacet) : [];
|
|
81
|
+
});
|
|
69
82
|
}
|
|
70
83
|
function getAutomaticFacetGenerator(parent) {
|
|
71
84
|
return Array.from(parent.children).find(isAutomaticFacetGenerator);
|
|
@@ -90,27 +103,33 @@ function triageFacetsByParents(facets, ...parents) {
|
|
|
90
103
|
__webpack_require__.d(__webpack_exports__, {
|
|
91
104
|
collapseFacetsAfter: ()=>collapseFacetsAfter,
|
|
92
105
|
getAutomaticFacetGenerator: ()=>getAutomaticFacetGenerator,
|
|
106
|
+
getFacetElementToReorder: ()=>getFacetElementToReorder,
|
|
93
107
|
getFacetsInChildren: ()=>getFacetsInChildren,
|
|
94
108
|
getFirstNewFacetValueIndex: ()=>getFirstNewFacetValueIndex,
|
|
95
109
|
isAutomaticFacetGenerator: ()=>isAutomaticFacetGenerator,
|
|
110
|
+
isFacetNestedInPopover: ()=>isFacetNestedInPopover,
|
|
96
111
|
shouldDisplayInputForFacetRange: ()=>shouldDisplayInputForFacetRange,
|
|
97
112
|
sortFacetVisibility: ()=>sortFacetVisibility,
|
|
98
113
|
triageFacetsByParents: ()=>triageFacetsByParents
|
|
99
114
|
});
|
|
100
115
|
exports.collapseFacetsAfter = __webpack_exports__.collapseFacetsAfter;
|
|
101
116
|
exports.getAutomaticFacetGenerator = __webpack_exports__.getAutomaticFacetGenerator;
|
|
117
|
+
exports.getFacetElementToReorder = __webpack_exports__.getFacetElementToReorder;
|
|
102
118
|
exports.getFacetsInChildren = __webpack_exports__.getFacetsInChildren;
|
|
103
119
|
exports.getFirstNewFacetValueIndex = __webpack_exports__.getFirstNewFacetValueIndex;
|
|
104
120
|
exports.isAutomaticFacetGenerator = __webpack_exports__.isAutomaticFacetGenerator;
|
|
121
|
+
exports.isFacetNestedInPopover = __webpack_exports__.isFacetNestedInPopover;
|
|
105
122
|
exports.shouldDisplayInputForFacetRange = __webpack_exports__.shouldDisplayInputForFacetRange;
|
|
106
123
|
exports.sortFacetVisibility = __webpack_exports__.sortFacetVisibility;
|
|
107
124
|
exports.triageFacetsByParents = __webpack_exports__.triageFacetsByParents;
|
|
108
125
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
109
126
|
"collapseFacetsAfter",
|
|
110
127
|
"getAutomaticFacetGenerator",
|
|
128
|
+
"getFacetElementToReorder",
|
|
111
129
|
"getFacetsInChildren",
|
|
112
130
|
"getFirstNewFacetValueIndex",
|
|
113
131
|
"isAutomaticFacetGenerator",
|
|
132
|
+
"isFacetNestedInPopover",
|
|
114
133
|
"shouldDisplayInputForFacetRange",
|
|
115
134
|
"sortFacetVisibility",
|
|
116
135
|
"triageFacetsByParents"
|
|
@@ -77,9 +77,13 @@ class AtomicFacetManager extends (0, children_update_complete_mixin_cjs_namespac
|
|
|
77
77
|
const sortedFacets = this.sortFacetsUsingManager(facets, this.facetManager);
|
|
78
78
|
const { visibleFacets, invisibleFacets } = (0, facet_common_cjs_namespaceObject.sortFacetVisibility)(sortedFacets, this.bindings.store.getAllFacets());
|
|
79
79
|
const generator = (0, facet_common_cjs_namespaceObject.getAutomaticFacetGenerator)(this);
|
|
80
|
-
(0, facet_common_cjs_namespaceObject.
|
|
81
|
-
|
|
82
|
-
this.
|
|
80
|
+
const collapsibleFacets = visibleFacets.filter((facet)=>!(0, facet_common_cjs_namespaceObject.isFacetNestedInPopover)(facet));
|
|
81
|
+
(0, facet_common_cjs_namespaceObject.collapseFacetsAfter)(collapsibleFacets, this.collapseFacetsAfter);
|
|
82
|
+
generator?.updateCollapseFacetsDependingOnFacetsVisibility?.(this.collapseFacetsAfter, collapsibleFacets.length);
|
|
83
|
+
this.append(...[
|
|
84
|
+
...visibleFacets,
|
|
85
|
+
...invisibleFacets
|
|
86
|
+
].map((facet)=>(0, facet_common_cjs_namespaceObject.getFacetElementToReorder)(facet)), ...generator ? [
|
|
83
87
|
generator
|
|
84
88
|
] : []);
|
|
85
89
|
};
|
|
@@ -104,9 +104,8 @@ class AtomicPopover extends external_lit_namespaceObject.LitElement {
|
|
|
104
104
|
.active=${this.isOpen}
|
|
105
105
|
.shouldHideSelf=${false}
|
|
106
106
|
>
|
|
107
|
-
${this.renderPopover()}
|
|
107
|
+
${this.renderPopover()} ${(0, when_js_namespaceObject.when)(this.isOpen, ()=>this.renderBackdrop())}
|
|
108
108
|
</atomic-focus-trap>
|
|
109
|
-
${(0, when_js_namespaceObject.when)(this.isOpen, ()=>this.renderBackdrop())}
|
|
110
109
|
`;
|
|
111
110
|
}
|
|
112
111
|
updated() {
|
|
@@ -117,12 +117,22 @@ const styles = (0, external_lit_namespaceObject.css)`
|
|
|
117
117
|
max-width: 100%;
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
& > atomic-facet-manager {
|
|
121
|
+
display: contents;
|
|
122
|
+
|
|
123
|
+
& > * {
|
|
124
|
+
max-width: 100%;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
120
128
|
& > atomic-segmented-facet,
|
|
121
|
-
& > atomic-popover
|
|
129
|
+
& > atomic-popover,
|
|
130
|
+
& > atomic-facet-manager > atomic-popover {
|
|
122
131
|
margin-right: 0.5rem;
|
|
123
132
|
}
|
|
124
133
|
|
|
125
|
-
& > atomic-popover
|
|
134
|
+
& > atomic-popover,
|
|
135
|
+
& > atomic-facet-manager > atomic-popover {
|
|
126
136
|
display: none;
|
|
127
137
|
}
|
|
128
138
|
}
|
package/dist/cjs/versions.cjs
CHANGED
|
@@ -32,7 +32,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
32
32
|
headlessVersion: ()=>package_json_namespaceObject.version
|
|
33
33
|
});
|
|
34
34
|
const package_json_namespaceObject = require("@coveo/headless/package.json");
|
|
35
|
-
const atomicVersion = "3.64.
|
|
35
|
+
const atomicVersion = "3.64.1";
|
|
36
36
|
exports.atomicVersion = __webpack_exports__.atomicVersion;
|
|
37
37
|
exports.headlessVersion = __webpack_exports__.headlessVersion;
|
|
38
38
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
@@ -28,6 +28,10 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
|
|
|
28
28
|
if (element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || 'atomic-aria-live' === element.tagName.toLowerCase()) return;
|
|
29
29
|
element.setAttribute('aria-hidden', 'true');
|
|
30
30
|
this.hiddenElements.push(element);
|
|
31
|
+
if (!element.hasAttribute('inert')) {
|
|
32
|
+
element.setAttribute('inert', '');
|
|
33
|
+
this.inertElements.push(element);
|
|
34
|
+
}
|
|
31
35
|
}
|
|
32
36
|
showAll() {
|
|
33
37
|
let el = this.hiddenElements.pop();
|
|
@@ -35,6 +39,11 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
|
|
|
35
39
|
el.removeAttribute('aria-hidden');
|
|
36
40
|
el = this.hiddenElements.pop();
|
|
37
41
|
}
|
|
42
|
+
let inertElement = this.inertElements.pop();
|
|
43
|
+
while(inertElement){
|
|
44
|
+
inertElement.removeAttribute('inert');
|
|
45
|
+
inertElement = this.inertElements.pop();
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
hideSiblingsRecursively(element) {
|
|
40
49
|
const parent = getParent(element);
|
|
@@ -68,6 +77,7 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
|
|
|
68
77
|
this.showSelf();
|
|
69
78
|
if (!isInitialLoad) {
|
|
70
79
|
await defer();
|
|
80
|
+
if (!this.active) return;
|
|
71
81
|
getFirstFocusableDescendant(this)?.focus();
|
|
72
82
|
}
|
|
73
83
|
this.hideSiblingsRecursively(this);
|
|
@@ -81,7 +91,7 @@ class AtomicFocusTrap extends LightDomMixin(LitElement) {
|
|
|
81
91
|
return this.container ?? this;
|
|
82
92
|
}
|
|
83
93
|
constructor(...args){
|
|
84
|
-
super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.onFocusChanged = (e)=>{
|
|
94
|
+
super(...args), this.active = false, this.shouldHideSelf = true, this.scope = document.body, this.hiddenElements = [], this.inertElements = [], this.onFocusChanged = (e)=>{
|
|
85
95
|
if (!e.target || !this.active) return;
|
|
86
96
|
const focusedElement = getFocusedElement();
|
|
87
97
|
if (focusedElement && isAncestorOf(this, focusedElement)) return;
|
|
@@ -64,11 +64,15 @@ function buildCommonLayout(element, mobileBreakpoint, layoutWebComponentTagName,
|
|
|
64
64
|
}
|
|
65
65
|
}`;
|
|
66
66
|
};
|
|
67
|
-
const horizontalFacets = ()
|
|
68
|
-
|
|
67
|
+
const horizontalFacets = ()=>{
|
|
68
|
+
const horizontalFacetsSelector = `${layoutSelector} ${sectionSelector('horizontal-facets')}`;
|
|
69
|
+
return `${mediaQuerySelector} {
|
|
70
|
+
${horizontalFacetsSelector} > atomic-popover:not(.atomic-hidden),
|
|
71
|
+
${horizontalFacetsSelector} > atomic-facet-manager > atomic-popover:not(.atomic-hidden) {
|
|
69
72
|
display: block;
|
|
70
73
|
}
|
|
71
74
|
}`;
|
|
75
|
+
};
|
|
72
76
|
return [
|
|
73
77
|
display,
|
|
74
78
|
search,
|
|
@@ -34,9 +34,22 @@ function isAutomaticFacetGenerator(element) {
|
|
|
34
34
|
function isPseudoFacet(el) {
|
|
35
35
|
return 'facetId' in el;
|
|
36
36
|
}
|
|
37
|
+
function isPopover(element) {
|
|
38
|
+
return 'ATOMIC-POPOVER' === element.tagName;
|
|
39
|
+
}
|
|
40
|
+
function isFacetNestedInPopover(facet) {
|
|
41
|
+
return !!facet.parentElement && isPopover(facet.parentElement);
|
|
42
|
+
}
|
|
43
|
+
function getFacetElementToReorder(facet) {
|
|
44
|
+
return isFacetNestedInPopover(facet) ? facet.parentElement : facet;
|
|
45
|
+
}
|
|
37
46
|
function getFacetsInChildren(parent) {
|
|
38
|
-
|
|
39
|
-
|
|
47
|
+
return Array.from(parent.children).flatMap((child)=>{
|
|
48
|
+
if (isPseudoFacet(child)) return [
|
|
49
|
+
child
|
|
50
|
+
];
|
|
51
|
+
return isPopover(child) ? Array.from(child.children).filter(isPseudoFacet) : [];
|
|
52
|
+
});
|
|
40
53
|
}
|
|
41
54
|
function getAutomaticFacetGenerator(parent) {
|
|
42
55
|
return Array.from(parent.children).find(isAutomaticFacetGenerator);
|
|
@@ -58,4 +71,4 @@ function triageFacetsByParents(facets, ...parents) {
|
|
|
58
71
|
}
|
|
59
72
|
return sortedFacets;
|
|
60
73
|
}
|
|
61
|
-
export { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetsInChildren, getFirstNewFacetValueIndex, isAutomaticFacetGenerator, shouldDisplayInputForFacetRange, sortFacetVisibility, triageFacetsByParents };
|
|
74
|
+
export { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetElementToReorder, getFacetsInChildren, getFirstNewFacetValueIndex, isAutomaticFacetGenerator, isFacetNestedInPopover, shouldDisplayInputForFacetRange, sortFacetVisibility, triageFacetsByParents };
|
|
@@ -2,7 +2,7 @@ import { NumberValue, Schema } from "@coveo/bueno";
|
|
|
2
2
|
import { buildFacetManager } from "@coveo/headless";
|
|
3
3
|
import { LitElement, html } from "lit";
|
|
4
4
|
import { customElement, property, state } from "lit/decorators.js";
|
|
5
|
-
import { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetsInChildren, sortFacetVisibility } from "../../common/facets/facet-common.js";
|
|
5
|
+
import { collapseFacetsAfter, getAutomaticFacetGenerator, getFacetElementToReorder, getFacetsInChildren, isFacetNestedInPopover, sortFacetVisibility } from "../../common/facets/facet-common.js";
|
|
6
6
|
import { ValidatePropsController } from "../../common/validate-props-controller/validate-props-controller.js";
|
|
7
7
|
import { bindStateToController } from "../../../decorators/bind-state.js";
|
|
8
8
|
import { bindingGuard } from "../../../decorators/binding-guard.js";
|
|
@@ -45,9 +45,13 @@ class AtomicFacetManager extends ChildrenUpdateCompleteMixin(LightDomMixin(LitEl
|
|
|
45
45
|
const sortedFacets = this.sortFacetsUsingManager(facets, this.facetManager);
|
|
46
46
|
const { visibleFacets, invisibleFacets } = sortFacetVisibility(sortedFacets, this.bindings.store.getAllFacets());
|
|
47
47
|
const generator = getAutomaticFacetGenerator(this);
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
this.
|
|
48
|
+
const collapsibleFacets = visibleFacets.filter((facet)=>!isFacetNestedInPopover(facet));
|
|
49
|
+
collapseFacetsAfter(collapsibleFacets, this.collapseFacetsAfter);
|
|
50
|
+
generator?.updateCollapseFacetsDependingOnFacetsVisibility?.(this.collapseFacetsAfter, collapsibleFacets.length);
|
|
51
|
+
this.append(...[
|
|
52
|
+
...visibleFacets,
|
|
53
|
+
...invisibleFacets
|
|
54
|
+
].map((facet)=>getFacetElementToReorder(facet)), ...generator ? [
|
|
51
55
|
generator
|
|
52
56
|
] : []);
|
|
53
57
|
};
|
|
@@ -61,9 +61,8 @@ class AtomicPopover extends LitElement {
|
|
|
61
61
|
.active=${this.isOpen}
|
|
62
62
|
.shouldHideSelf=${false}
|
|
63
63
|
>
|
|
64
|
-
${this.renderPopover()}
|
|
64
|
+
${this.renderPopover()} ${when(this.isOpen, ()=>this.renderBackdrop())}
|
|
65
65
|
</atomic-focus-trap>
|
|
66
|
-
${when(this.isOpen, ()=>this.renderBackdrop())}
|
|
67
66
|
`;
|
|
68
67
|
}
|
|
69
68
|
updated() {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
const styles = css`.atomic-modal-opened{overflow-y:hidden}atomic-layout-section[section=search]{grid-area:atomic-section-search}atomic-layout-section[section=facets]{grid-area:atomic-section-facets}atomic-layout-section[section=main]{grid-area:atomic-section-main}atomic-layout-section[section=status]{grid-area:atomic-section-status}atomic-layout-section[section=pagination]{grid-area:atomic-section-pagination}atomic-search-layout{width:100%;height:100%;display:none;grid-template-areas:". atomic-section-search ." ". atomic-section-main .";grid-template-columns:var(--atomic-layout-spacing-x) minmax(0,1fr) var(
|
|
3
3
|
--atomic-layout-spacing-x
|
|
4
|
-
);atomic-layout-section[section=search]{margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width,678px);width:100%;justify-self:center;atomic-search-box{&::part(suggestions-double-list){width:125%;max-width:var(--atomic-layout-max-search-box-double-suggestions-width,800px)}&::part(suggestions-left){flex-basis:var(--atomic-layout-search-box-left-suggestions-width,30%)}&::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}}}atomic-layout-section[section=facets]{display:none;& *{margin-bottom:var(--atomic-layout-spacing-y)}}atomic-layout-section[section=main]{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=horizontal-facets]{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:.5rem;&>*{max-width:100%}&>atomic-popover,&>atomic-segmented-facet{margin-right:.5rem}&>atomic-popover{display:none}}atomic-layout-section[section=status]{display:grid;justify-content:space-between;grid-template-areas:"atomic-breadbox atomic-breadbox" "atomic-query-summary atomic-sort" "atomic-did-you-mean atomic-did-you-mean" "atomic-notifications atomic-notifications";&>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-breadbox{grid-area:atomic-breadbox}atomic-query-summary{grid-area:atomic-query-summary;align-self:center;overflow:hidden}atomic-sort-dropdown{justify-self:end}atomic-refine-toggle,atomic-sort-dropdown{grid-area:atomic-sort}atomic-did-you-mean{grid-area:atomic-did-you-mean}atomic-notifications{grid-area:atomic-notifications}}atomic-layout-section[section=results]{atomic-smart-snippet,atomic-smart-snippet-suggestions{margin-bottom:1.5rem}}atomic-layout-section[section=pagination]{display:flex;flex-direction:column;justify-content:space-between;align-items:center;atomic-load-more-results{width:100%}&:has(:only-child){justify-content:center}&>*{margin-top:var(--atomic-layout-spacing-y)}@media only screen and (min-width:50rem){flex-direction:row}}}`;
|
|
4
|
+
);atomic-layout-section[section=search]{margin:var(--atomic-layout-spacing-y) 0;max-width:var(--atomic-layout-max-search-box-input-width,678px);width:100%;justify-self:center;atomic-search-box{&::part(suggestions-double-list){width:125%;max-width:var(--atomic-layout-max-search-box-double-suggestions-width,800px)}&::part(suggestions-left){flex-basis:var(--atomic-layout-search-box-left-suggestions-width,30%)}&::part(suggestions-right){flex-basis:calc(100% - var(--atomic-layout-search-box-left-suggestions-width, 30%))}}}atomic-layout-section[section=facets]{display:none;& *{margin-bottom:var(--atomic-layout-spacing-y)}}atomic-layout-section[section=main]{margin-bottom:var(--atomic-layout-spacing-y)}atomic-layout-section[section=horizontal-facets]{display:flex;flex-wrap:wrap;margin-bottom:var(--atomic-layout-spacing-y);row-gap:.5rem;&>*{max-width:100%}&>atomic-facet-manager{display:contents;&>*{max-width:100%}}&>atomic-facet-manager>atomic-popover,&>atomic-popover,&>atomic-segmented-facet{margin-right:.5rem}&>atomic-facet-manager>atomic-popover,&>atomic-popover{display:none}}atomic-layout-section[section=status]{display:grid;justify-content:space-between;grid-template-areas:"atomic-breadbox atomic-breadbox" "atomic-query-summary atomic-sort" "atomic-did-you-mean atomic-did-you-mean" "atomic-notifications atomic-notifications";&>*{margin-bottom:var(--atomic-layout-spacing-y)}atomic-breadbox{grid-area:atomic-breadbox}atomic-query-summary{grid-area:atomic-query-summary;align-self:center;overflow:hidden}atomic-sort-dropdown{justify-self:end}atomic-refine-toggle,atomic-sort-dropdown{grid-area:atomic-sort}atomic-did-you-mean{grid-area:atomic-did-you-mean}atomic-notifications{grid-area:atomic-notifications}}atomic-layout-section[section=results]{atomic-smart-snippet,atomic-smart-snippet-suggestions{margin-bottom:1.5rem}}atomic-layout-section[section=pagination]{display:flex;flex-direction:column;justify-content:space-between;align-items:center;atomic-load-more-results{width:100%}&:has(:only-child){justify-content:center}&>*{margin-top:var(--atomic-layout-spacing-y)}@media only screen and (min-width:50rem){flex-direction:row}}}`;
|
|
5
5
|
const atomic_search_layout_tw_css = styles;
|
|
6
6
|
export default atomic_search_layout_tw_css;
|
package/dist/esm/versions.js
CHANGED
|
@@ -35,6 +35,8 @@ export declare function sortFacetVisibility(facetElements: BaseFacetElement[], f
|
|
|
35
35
|
};
|
|
36
36
|
export declare function collapseFacetsAfter(facets: BaseFacetElement[], visibleFacetsCount: number): void;
|
|
37
37
|
export declare function isAutomaticFacetGenerator(element: HTMLElement): element is AtomicAutomaticFacetGenerator;
|
|
38
|
+
export declare function isFacetNestedInPopover(facet: BaseFacetElement): boolean;
|
|
39
|
+
export declare function getFacetElementToReorder(facet: BaseFacetElement): HTMLElement;
|
|
38
40
|
export declare function getFacetsInChildren(parent: HTMLElement): BaseFacetElement[];
|
|
39
41
|
export declare function getAutomaticFacetGenerator(parent: HTMLElement): AtomicAutomaticFacetGenerator | undefined;
|
|
40
42
|
/**
|
|
@@ -12,7 +12,10 @@ declare const AtomicFacetManager_base: import("../../../mixins/mixin-common").Co
|
|
|
12
12
|
* 2. **Managing visibility** - Controls which facets should be visible or hidden based on available values and dependencies.
|
|
13
13
|
* 3. **Managing collapse state** - Automatically expands or collapses facets based on the `collapse-facets-after` property.
|
|
14
14
|
*
|
|
15
|
-
*
|
|
15
|
+
* A facet wrapped in an `atomic-popover` is managed like any other facet, and its popover moves along with it.
|
|
16
|
+
* Because a popover always displays its facet expanded, such a facet is never collapsed and does not count towards `collapse-facets-after`.
|
|
17
|
+
*
|
|
18
|
+
* @slot default - Facet components, or `atomic-popover` components wrapping a facet, are slotted within to leverage this functionality.
|
|
16
19
|
*/
|
|
17
20
|
export declare class AtomicFacetManager extends AtomicFacetManager_base implements InitializableComponent<Bindings> {
|
|
18
21
|
private static readonly propsSchema;
|
|
@@ -26,6 +29,8 @@ export declare class AtomicFacetManager extends AtomicFacetManager_base implemen
|
|
|
26
29
|
*
|
|
27
30
|
* Using the value `0` collapses all facets.
|
|
28
31
|
* Using the value `-1` disables the feature and keeps all facets expanded. Useful when you want to set the collapse state for each facet individually.
|
|
32
|
+
*
|
|
33
|
+
* Facets wrapped in an `atomic-popover` are always expanded and are not counted.
|
|
29
34
|
*/
|
|
30
35
|
collapseFacetsAfter: number;
|
|
31
36
|
constructor();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveo/atomic",
|
|
3
|
-
"version": "3.64.
|
|
3
|
+
"version": "3.64.1",
|
|
4
4
|
"description": "A web-component library for building modern UIs interfacing with the Coveo platform",
|
|
5
5
|
"homepage": "https://docs.coveo.com/en/atomic/latest/",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -80,12 +80,13 @@
|
|
|
80
80
|
"@playwright/test": "1.62.1",
|
|
81
81
|
"@rollup/plugin-replace": "6.0.3",
|
|
82
82
|
"@rslib/core": "0.23.2",
|
|
83
|
-
"@
|
|
84
|
-
"@storybook/addon-
|
|
85
|
-
"@storybook/addon-
|
|
86
|
-
"@storybook/addon-
|
|
83
|
+
"@size-limit/preset-small-lib": "14.1.0",
|
|
84
|
+
"@storybook/addon-a11y": "10.6.2",
|
|
85
|
+
"@storybook/addon-docs": "10.6.2",
|
|
86
|
+
"@storybook/addon-mcp": "10.6.2",
|
|
87
|
+
"@storybook/addon-vitest": "10.6.2",
|
|
87
88
|
"@storybook/icons": "2.1.0",
|
|
88
|
-
"@storybook/web-components-vite": "10.6.
|
|
89
|
+
"@storybook/web-components-vite": "10.6.2",
|
|
89
90
|
"@tailwindcss/postcss": "4.3.3",
|
|
90
91
|
"@tailwindcss/vite": "4.3.3",
|
|
91
92
|
"@types/escape-html": "1.0.4",
|
|
@@ -108,8 +109,9 @@
|
|
|
108
109
|
"react": "19.2.8",
|
|
109
110
|
"remark-gfm": "4.0.1",
|
|
110
111
|
"shadow-dom-testing-library": "1.14.1",
|
|
111
|
-
"
|
|
112
|
-
"storybook
|
|
112
|
+
"size-limit": "14.1.0",
|
|
113
|
+
"storybook": "10.6.2",
|
|
114
|
+
"storybook-addon-pseudo-states": "10.6.2",
|
|
113
115
|
"tailwindcss": "4.3.3",
|
|
114
116
|
"ts-dedent": "2.3.0",
|
|
115
117
|
"ts-lit-plugin": "2.0.2",
|
|
@@ -165,6 +167,7 @@
|
|
|
165
167
|
"validate:definitions": "tsc --noEmit --esModuleInterop --skipLibCheck ./dist/types/components.d.ts",
|
|
166
168
|
"chromatic": "chromatic",
|
|
167
169
|
"validate:light-dom-styles": "node ./scripts/check-light-dom-host-selectors.mjs",
|
|
168
|
-
"validate:no-new-light-dom": "node ./scripts/check-no-new-light-dom-components.mjs"
|
|
170
|
+
"validate:no-new-light-dom": "node ./scripts/check-no-new-light-dom-components.mjs",
|
|
171
|
+
"size": "node ../../scripts/size-limit.mjs run"
|
|
169
172
|
}
|
|
170
173
|
}
|