@eui/core 21.4.2-snapshot-1787737932680 → 22.0.0-alpha.2

package/docs/js/menu-wc.js

@@ -19,7 +19,14 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                 </li>
 
                 <li class="divider"></li>
-                ${ isNormalMode ? `<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div>` : '' }
+                ${ isNormalMode ? `<div id="book-search-input" role="search">
+    <input type="text" placeholder="Type to search">
+    <button type="button"
+        class="search-input-clear"
+        aria-label="Clear search"
+        data-search-input-clear>&times;</button>
+</div>
+` : '' }
                 <li class="chapter">
                     <a data-type="chapter-link" href="index.html"><span class="icon ion-ios-home"></span>Getting started</a>
                     <ul class="links">
@@ -76,13 +83,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/TranslateMockModule.html" data-type="entity-link" >TranslateMockModule</a>
                                 <li class="chapter inner">
                                     <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
-                                        'data-bs-target="#directives-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' : 'data-bs-target="#xs-directives-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' }>
+                                        'data-bs-target="#directives-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' : 'data-bs-target="#xs-directives-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' }>
                                         <span class="icon ion-md-code-working"></span>
                                         <span>Directives</span>
                                         <span class="icon ion-ios-arrow-down"></span>
                                     </div>
-                                    <ul class="links collapse" ${ isNormalMode ? 'id="directives-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' :
-                                        'id="xs-directives-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' }>
+                                    <ul class="links collapse" ${ isNormalMode ? 'id="directives-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' :
+                                        'id="xs-directives-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' }>
                                         <li class="link">
                                             <a href="directives/TranslateMockDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >TranslateMockDirective</a>
                                         </li>
@@ -90,13 +97,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 </li>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
-                                            'data-bs-target="#pipes-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' : 'data-bs-target="#xs-pipes-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' }>
-                                            <span class="icon ion-md-add"></span>
+                                            'data-bs-target="#pipes-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' : 'data-bs-target="#xs-pipes-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' }>
+                                            <span class="icon ion-md-funnel"></span>
                                             <span>Pipes</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="pipes-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' :
-                                            'id="xs-pipes-links-module-TranslateMockModule-eec6297f1f1ae191bbb1201554ba7a136a865bf32065bbbcdb2248787a067444dc6c4e8a95f112a7b1a3efd7b5db21ce79350f47f40a1165aa740417439313be"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="pipes-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' :
+                                            'id="xs-pipes-links-module-TranslateMockModule-a6db37044983724bfab8f8eb6fbaf6bb1f4b1de1651ef5303a344a4b606cbe68e1bf0bdbe45bd473e1c77e446058e133e85517ed7e8fda4b4be59a70ef96bd06"' }>
                                             <li class="link">
                                                 <a href="pipes/TranslateMockPipe.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >TranslateMockPipe</a>
                                             </li>
@@ -105,6 +112,19 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             </li>
                 </ul>
                 </li>
+                        <li class="chapter">
+                            <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ? 'data-bs-target="#directives-links"' :
+                                'data-bs-target="#xs-directives-links"' }>
+                                <span class="icon ion-md-code-working"></span>
+                                <span>Directives</span>
+                                <span class="icon ion-ios-arrow-down"></span>
+                            </div>
+                            <ul class="links collapse " ${ isNormalMode ? 'id="directives-links"' : 'id="xs-directives-links"' }>
+                                <li class="link">
+                                    <a href="directives/TranslateMockDirective.html" data-type="entity-link" >TranslateMockDirective</a>
+                                </li>
+                            </ul>
+                        </li>
                     <li class="chapter">
                         <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ? 'data-bs-target="#classes-links"' :
                             'data-bs-target="#xs-classes-links"' }>
@@ -167,6 +187,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             <li class="link">
                                 <a href="classes/StorageServiceMock.html" data-type="entity-link" >StorageServiceMock</a>
                             </li>
+                            <li class="link">
+                                <a href="classes/TranslateLoaderMock.html" data-type="entity-link" >TranslateLoaderMock</a>
+                            </li>
                             <li class="link">
                                 <a href="classes/TranslateServiceMock.html" data-type="entity-link" >TranslateServiceMock</a>
                             </li>
@@ -327,10 +350,10 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                         </div>
                         <ul class="links collapse " ${ isNormalMode ? ' id="interfaces-links"' : 'id="xs-interfaces-links"' }>
                             <li class="link">
-                                <a href="interfaces/Action.html" data-type="entity-link" >Action</a>
+                                <a href="interfaces/Action.html" data-type="entity-link" >Action&lt;Type extends string &#x3D; string&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/ActionReducer.html" data-type="entity-link" >ActionReducer</a>
+                                <a href="interfaces/ActionReducer.html" data-type="entity-link" >ActionReducer&lt;T, V extends Action &#x3D; Action&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/body.html" data-type="entity-link" >body</a>
@@ -350,6 +373,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             <li class="link">
                                 <a href="interfaces/Edit-2.html" data-type="entity-link" >Edit</a>
                             </li>
+                            <li class="link">
+                                <a href="interfaces/Edit-3.html" data-type="entity-link" >Edit</a>
+                            </li>
                             <li class="link">
                                 <a href="interfaces/EuiComponentEntry.html" data-type="entity-link" >EuiComponentEntry</a>
                             </li>
@@ -375,10 +401,10 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/LoadedResourcesError.html" data-type="entity-link" >LoadedResourcesError</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/MemoizedSelector.html" data-type="entity-link" >MemoizedSelector</a>
+                                <a href="interfaces/MemoizedSelector.html" data-type="entity-link" >MemoizedSelector&lt;State, Result, ProjectorFn &#x3D; DefaultProjectorFn&lt;Result&gt;&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/MemoizedSelectorWithProps.html" data-type="entity-link" class="deprecated-name">MemoizedSelectorWithProps</a>
+                                <a href="interfaces/MemoizedSelectorWithProps.html" data-type="entity-link" class="deprecated-name">MemoizedSelectorWithProps&lt;State, Props, Result, ProjectorFn &#x3D; DefaultProjectorFn&lt;Result&gt;&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/MigrateAllSchema.html" data-type="entity-link" >MigrateAllSchema</a>
@@ -464,6 +490,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             <li class="link">
                                 <a href="interfaces/Schema-20.html" data-type="entity-link" >Schema</a>
                             </li>
+                            <li class="link">
+                                <a href="interfaces/Schema-21.html" data-type="entity-link" >Schema</a>
+                            </li>
                             <li class="link">
                                 <a href="interfaces/SelectorEntry.html" data-type="entity-link" >SelectorEntry</a>
                             </li>
@@ -477,10 +506,23 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/TranslationKeys.html" data-type="entity-link" >TranslationKeys</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/UIState.html" data-type="entity-link" >UIState</a>
+                                <a href="interfaces/UIState.html" data-type="entity-link" >UIState&lt;BP &#x3D; any, DI &#x3D; any, AMD &#x3D;any, BPV &#x3D; any&gt;</a>
                             </li>
                         </ul>
                     </li>
+                        <li class="chapter">
+                            <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ? 'data-bs-target="#pipes-links"' :
+                                'data-bs-target="#xs-pipes-links"' }>
+                                <span class="icon ion-md-funnel"></span>
+                                <span>Pipes</span>
+                                <span class="icon ion-ios-arrow-down"></span>
+                            </div>
+                            <ul class="links collapse " ${ isNormalMode ? 'id="pipes-links"' : 'id="xs-pipes-links"' }>
+                                <li class="link">
+                                    <a href="pipes/TranslateMockPipe.html" data-type="entity-link" >TranslateMockPipe</a>
+                                </li>
+                            </ul>
+                        </li>
                     <li class="chapter">
                         <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ? 'data-bs-target="#miscellaneous-links"'
                             : 'data-bs-target="#xs-miscellaneous-links"' }>
@@ -511,4 +553,4 @@ customElements.define('compodoc-menu', class extends HTMLElement {
         `);
         this.innerHTML = tp.strings;
     }
-});
+});

package/docs/js/routes.js

@@ -15,6 +15,65 @@ document.addEventListener('DOMContentLoaded', function () {
         return lazyModuleName;
     }
 
+    function foundLazyComponentWithPath(path) {
+        var split = path.split('#'),
+            lazyComponentName = split[1];
+        return lazyComponentName;
+    }
+
+    function safeHref(href) {
+        return String(href || '').replace(/"/g, '"');
+    }
+
+    function resolveNodeHref(d) {
+        if (!d) {
+            return '';
+        }
+
+        if (d.href) {
+            return d.href;
+        }
+
+        if (d.component && d.component !== 'default') {
+            return './components/' + d.component + '.html';
+        }
+
+        if (d.module && d.module !== 'default') {
+            return './modules/' + d.module + '.html';
+        }
+
+        if (d.loadComponent) {
+            var lazyComponent = foundLazyComponentWithPath(d.loadComponent);
+            if (lazyComponent && lazyComponent !== 'default') {
+                return './components/' + lazyComponent + '.html';
+            }
+        }
+
+        if (d.loadChildren) {
+            var lazyModule = foundLazyModuleWithPath(d.loadChildren);
+            if (lazyModule && lazyModule !== 'default') {
+                return './modules/' + lazyModule + '.html';
+            }
+        }
+
+        return '';
+    }
+
+    function wrapLabelWithLink(label, href) {
+        if (!href) {
+            return label;
+        }
+        return '<a href="' + safeHref(href) + '" target="_top">' + label + '</a>';
+    }
+
+    function withLeadingSlash(routeValue) {
+        var value = String(routeValue || '');
+        if (value.length === 0) {
+            return '/';
+        }
+        return value.charAt(0) === '/' ? value : '/' + value;
+    }
+
     function getBB(selection) {
         selection.each(function (d) {
             d.bbox = this.getBBox();
@@ -26,16 +85,32 @@ document.addEventListener('DOMContentLoaded', function () {
     var tree = ROUTES_INDEX;
 
     function cleanStringChildren(obj) {
+        if (!obj || typeof obj !== 'object') {
+            return;
+        }
         for (var property in obj) {
-            if (obj.hasOwnProperty(property)) {
-                if (property === 'children' && typeof obj[property] === 'object') {
-                    for (var i = obj[property].length - 1; i >= 0; i--) {
-                        if (typeof obj[property][i] === 'string') {
-                            obj[property].splice(i, 1);
+            if (Object.prototype.hasOwnProperty.call(obj, property)) {
+                if (property === 'children') {
+                    if (typeof obj[property] === 'string') {
+                        obj[property] = [];
+                        continue;
+                    }
+
+                    if (Array.isArray(obj[property])) {
+                        for (var i = obj[property].length - 1; i >= 0; i--) {
+                            if (
+                                typeof obj[property][i] !== 'object' ||
+                                obj[property][i] === null
+                            ) {
+                                obj[property].splice(i, 1);
+                            }
                         }
+                    } else if (obj[property] && typeof obj[property] === 'object') {
+                        obj[property] = [];
                     }
                 }
-                if (typeof obj[property] === 'object') {
+
+                if (obj[property] && typeof obj[property] === 'object') {
                     cleanStringChildren(obj[property]);
                 }
             }
@@ -84,6 +159,17 @@ document.addEventListener('DOMContentLoaded', function () {
         dy: 0
     });
 
+    infos_group
+        .style('cursor', function (d) {
+            return resolveNodeHref(d) ? 'pointer' : null;
+        })
+        .on('click', function (d) {
+            var href = resolveNodeHref(d);
+            if (href) {
+                window.location.href = href;
+            }
+        });
+
     //Node icon
     infos_group
         .append('text')
@@ -118,56 +204,66 @@ document.addEventListener('DOMContentLoaded', function () {
             // if kind === module name + module
             // if kind === component component + path
             var _name = '';
+            var nodeHref = resolveNodeHref(d);
             if (d.kind === 'module') {
                 if (d.module) {
                     _name +=
-                        '<tspan x="0" dy="1.4em"><a href="./modules/' +
-                        d.module +
-                        '.html">' +
-                        d.module +
-                        '</a></tspan>';
+                        '<tspan x="0" dy="1.4em">' +
+                        wrapLabelWithLink(d.module, nodeHref || './modules/' + d.module + '.html') +
+                        '</tspan>';
                     if (d.name) {
                         _name += '<tspan x="0" dy="1.4em">' + d.name + '</tspan>';
                     }
                 } else {
-                    _name += '<tspan x="0" dy="1.4em">' + htmlEntities(d.name) + '</tspan>';
+                    _name +=
+                        '<tspan x="0" dy="1.4em">' +
+                        wrapLabelWithLink(htmlEntities(d.name), nodeHref) +
+                        '</tspan>';
                 }
             } else if (d.kind === 'component') {
-                _name += '<tspan x="0" dy="1.4em">' + (d.path || d.name) + '</tspan>';
+                _name +=
+                    '<tspan x="0" dy="1.4em">' +
+                    wrapLabelWithLink(d.path || d.name, nodeHref) +
+                    '</tspan>';
                 if (d.component) {
-                    _name +=
-                        '<tspan x="0" dy="1.4em"><a href="./components/' +
-                        d.component +
-                        '.html">' +
-                        d.component +
-                        '</a></tspan>';
-                } else if (d.name && d.name.includes('Component')) {
                     _name +=
                         '<tspan x="0" dy="1.4em">' +
-                        d.name +
+                        wrapLabelWithLink(d.component, nodeHref) +
                         '</tspan>';
+                } else if (d.name && d.name.includes('Component')) {
+                    _name += '<tspan x="0" dy="1.4em">' + wrapLabelWithLink(d.name, nodeHref) + '</tspan>';
                 }
                 if (d.outlet) {
                     _name += '<tspan x="0" dy="1.4em">&lt;outlet&gt; : ' + d.outlet + '</tspan>';
                 }
             } else {
-                _name += '<tspan x="0" dy="1.4em">/' + (d.path || d.name) + '</tspan>';
+                if (d.kind === 'route-redirect') {
+                    var fromPath = d.path === '' ? "''" : withLeadingSlash(d.path || '');
+                    var redirectTo = withLeadingSlash(d.redirectTo || d.name);
+                    _name += '<tspan x="0" dy="1.4em">' + fromPath + ' &rarr; ' + redirectTo + '</tspan>';
+                    if (d.pathMatch) {
+                        _name += '<tspan x="0" dy="1.4em">pathMatch: ' + d.pathMatch + '</tspan>';
+                    }
+                } else {
+                    _name +=
+                        '<tspan x="0" dy="1.4em">' +
+                        wrapLabelWithLink(withLeadingSlash(d.path || d.name), nodeHref) +
+                        '</tspan>';
+                }
                 if (d.component) {
                     _name +=
-                        '<tspan x="0" dy="1.4em"><a href="./components/' +
-                        d.component +
-                        '.html">' +
-                        d.component +
-                        '</a></tspan>';
+                        '<tspan x="0" dy="1.4em">' +
+                        wrapLabelWithLink(d.component, nodeHref) +
+                        '</tspan>';
                 }
                 if (d.loadChildren) {
                     var moduleName = foundLazyModuleWithPath(d.loadChildren);
-                    _name +=
-                        '<tspan x="0" dy="1.4em"><a href="./modules/' +
-                        moduleName +
-                        '.html">' +
-                        moduleName +
-                        '</a></tspan>';
+                    if (moduleName && moduleName !== 'default') {
+                        _name +=
+                            '<tspan x="0" dy="1.4em">' +
+                            wrapLabelWithLink(moduleName, './modules/' + moduleName + '.html') +
+                            '</tspan>';
+                    }
                 }
                 if (d.canActivate) {
                     _name += '<tspan x="0" dy="1.4em">&#10003; canActivate</tspan>';
@@ -181,10 +277,10 @@ document.addEventListener('DOMContentLoaded', function () {
                 if (d.canLoad) {
                     _name += '<tspan x="0" dy="1.4em">&#8594; canLoad</tspan>';
                 }
-                if (d.redirectTo) {
+                if (d.kind !== 'route-redirect' && d.redirectTo) {
                     _name += '<tspan x="0" dy="1.4em">&rarr; ' + d.redirectTo + '</tspan>';
                 }
-                if (d.pathMatch) {
+                if (d.kind !== 'route-redirect' && d.pathMatch) {
                     _name += '<tspan x="0" dy="1.4em">&gt; ' + d.pathMatch + '</tspan>';
                 }
                 if (d.outlet) {
@@ -266,11 +362,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
     var area_ave = area_sum / nodes.length;
     var scale = 80 / Math.sqrt(area_ave);
+    var depthHorizontalSpacing = 40;
 
     function svg_x(node_y) {
         return node_y - ymin;
     }
 
+    function projected_x(node) {
+        return svg_x(node.y) + (node.depth || 0) * depthHorizontalSpacing;
+    }
+
     function svg_y(node_x) {
         return (node_x - xmin) * scale;
     }
@@ -279,11 +380,11 @@ document.addEventListener('DOMContentLoaded', function () {
     var nodebox_vertical_margin = Math.min(y_size_min * scale, 3);
 
     node.attr('transform', function (d) {
-        return 'translate(' + svg_x(d.y) + ',' + svg_y(d.x) + ')';
+        return 'translate(' + projected_x(d) + ',' + svg_y(d.x) + ')';
     });
 
     var diagonal = d3.svg.diagonal().projection(function (d) {
-        return [svg_x(d.y), svg_y(d.x)];
+        return [projected_x(d), svg_y(d.x)];
     });
 
     var links = engine.links(nodes);

package/docs/js/search/search.js

@@ -8,6 +8,8 @@
         $searchTitle,
         $searchResultsCount,
         $searchQuery,
+        $searchInputs,
+        $searchClearButtons,
         $mainContainer,
         $xsMenu;
 
@@ -160,12 +162,44 @@
             $searchInputs.forEach((item, index) => {
                 item.value = '';
             });
+            syncSearchClearButtons();
+        });
+    }
+
+    function getSearchInputContainer(element) {
+        var current = element;
+        while (current && current !== document) {
+            if (current.id === 'book-search-input') {
+                return current;
+            }
+            current = current.parentNode;
+        }
+        return null;
+    }
+
+    function syncSearchClearButtons() {
+        if (!$searchInputs || !$searchClearButtons) {
+            return;
+        }
+
+        var hasValue = false;
+        $searchInputs.forEach((input) => {
+            if (input.value && input.value.length > 0) {
+                hasValue = true;
+            }
+        });
+
+        $searchClearButtons.forEach((button) => {
+            button.classList.toggle('is-visible', hasValue);
         });
     }
 
     function bindSearch() {
         // Bind DOM
         $searchInputs = document.querySelectorAll('#book-search-input input');
+        $searchClearButtons = document.querySelectorAll(
+            '#book-search-input [data-search-input-clear]'
+        );
 
         $searchResults = document.querySelector('.search-results');
         $searchList = $searchResults.querySelector('.search-results-list');
@@ -194,11 +228,13 @@
             // HTML5 (IE9 & others)
             item.addEventListener('input', function (e) {
                 handleUpdate(this);
+                syncSearchClearButtons();
             });
             // Workaround for IE < 9
             item.addEventListener('propertychange', function (e) {
                 if (e.originalEvent.propertyName == 'value') {
                     handleUpdate(this);
+                    syncSearchClearButtons();
                 }
             });
             // Push to history on blur
@@ -212,6 +248,31 @@
                 }
             });
         });
+
+        $searchClearButtons.forEach((button) => {
+            button.addEventListener('click', function (e) {
+                e.preventDefault();
+
+                var container = getSearchInputContainer(this);
+                var containerInput = container ? container.querySelector('input') : null;
+                var nextValue = '';
+
+                $searchInputs.forEach((input) => {
+                    input.value = nextValue;
+                });
+
+                if (containerInput) {
+                    handleUpdate(containerInput);
+                    containerInput.focus();
+                } else if ($searchInputs.length > 0) {
+                    handleUpdate($searchInputs[0]);
+                }
+
+                syncSearchClearButtons();
+            });
+        });
+
+        syncSearchClearButtons();
     }
 
     function launchSearchFromQueryString() {
@@ -221,6 +282,7 @@
             $searchInputs.forEach((item, index) => {
                 item.value = q;
             });
+            syncSearchClearButtons();
             // Launch search
             launchSearch(q);
         }