@eui/base 23.0.0-alpha.2 → 23.0.0-alpha.4

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">
@@ -68,16 +75,16 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="classes/EuiEuLanguages.html" data-type="entity-link" >EuiEuLanguages</a>
                             </li>
                             <li class="link">
-                                <a href="classes/EuiLazyService.html" data-type="entity-link" >EuiLazyService</a>
+                                <a href="classes/EuiLazyService.html" data-type="entity-link" >EuiLazyService&lt;T&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="classes/EuiPagination.html" data-type="entity-link" >EuiPagination</a>
                             </li>
                             <li class="link">
-                                <a href="classes/EuiService.html" data-type="entity-link" >EuiService</a>
+                                <a href="classes/EuiService.html" data-type="entity-link" >EuiService&lt;T&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="classes/LogAppender.html" data-type="entity-link" >LogAppender</a>
+                                <a href="classes/LogAppender.html" data-type="entity-link" >LogAppender&lt;CFG extends LogAppenderConfig &#x3D; LogAppenderConfig&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="classes/Logger.html" data-type="entity-link" >Logger</a>
@@ -98,16 +105,16 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="classes/UxErrorGroupOnClickEvent.html" data-type="entity-link" >UxErrorGroupOnClickEvent</a>
                             </li>
                             <li class="link">
-                                <a href="classes/UxErrorOutput.html" data-type="entity-link" >UxErrorOutput</a>
+                                <a href="classes/UxErrorOutput.html" data-type="entity-link" >UxErrorOutput&lt;DETAILS &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="classes/UxLinkLegacy.html" data-type="entity-link" >UxLinkLegacy</a>
+                                <a href="classes/UxLinkLegacy.html" data-type="entity-link" >UxLinkLegacy&lt;METADATA &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="classes/UxPublishErrorFeedbackEvent.html" data-type="entity-link" >UxPublishErrorFeedbackEvent</a>
                             </li>
                             <li class="link">
-                                <a href="classes/UxValidationErrorClass.html" data-type="entity-link" >UxValidationErrorClass</a>
+                                <a href="classes/UxValidationErrorClass.html" data-type="entity-link" >UxValidationErrorClass&lt;Details &#x3D; object&gt;</a>
                             </li>
                         </ul>
                     </li>
@@ -123,10 +130,10 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/ApiQueue.html" data-type="entity-link" >ApiQueue</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/ApiQueueItem.html" data-type="entity-link" >ApiQueueItem</a>
+                                <a href="interfaces/ApiQueueItem.html" data-type="entity-link" >ApiQueueItem&lt;PAYLOAD &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/AppState.html" data-type="entity-link" >AppState</a>
+                                <a href="interfaces/AppState.html" data-type="entity-link" >AppState&lt;T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/ConnectionStatus.html" data-type="entity-link" >ConnectionStatus</a>
@@ -144,10 +151,10 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/EnvDynamicConfig.html" data-type="entity-link" >EnvDynamicConfig</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiAppHandlersConfig.html" data-type="entity-link" >EuiAppHandlersConfig</a>
+                                <a href="interfaces/EuiAppHandlersConfig.html" data-type="entity-link" >EuiAppHandlersConfig&lt;T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiAppJsonConfig.html" data-type="entity-link" >EuiAppJsonConfig</a>
+                                <a href="interfaces/EuiAppJsonConfig.html" data-type="entity-link" >EuiAppJsonConfig&lt;T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/EuiAuthConfig.html" data-type="entity-link" >EuiAuthConfig</a>
@@ -156,7 +163,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/EuiConfig.html" data-type="entity-link" >EuiConfig</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiEnvConfig.html" data-type="entity-link" >EuiEnvConfig</a>
+                                <a href="interfaces/EuiEnvConfig.html" data-type="entity-link" >EuiEnvConfig&lt;T &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/EuiGlobalConfig.html" data-type="entity-link" >EuiGlobalConfig</a>
@@ -168,25 +175,25 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/EuiLanguage.html" data-type="entity-link" >EuiLanguage</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiMenuItem.html" data-type="entity-link" >EuiMenuItem</a>
+                                <a href="interfaces/EuiMenuItem.html" data-type="entity-link" >EuiMenuItem&lt;METADATA &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/EuiPaginationConfig.html" data-type="entity-link" >EuiPaginationConfig</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiServiceModel.html" data-type="entity-link" >EuiServiceModel</a>
+                                <a href="interfaces/EuiServiceModel.html" data-type="entity-link" >EuiServiceModel&lt;T&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiServiceStatus.html" data-type="entity-link" >EuiServiceStatus</a>
+                                <a href="interfaces/EuiServiceStatus.html" data-type="entity-link" >EuiServiceStatus&lt;T &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/EuiStoreServiceModel.html" data-type="entity-link" >EuiStoreServiceModel</a>
+                                <a href="interfaces/EuiStoreServiceModel.html" data-type="entity-link" >EuiStoreServiceModel&lt;T&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/EuiUserRight.html" data-type="entity-link" >EuiUserRight</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/GlobalConfig.html" data-type="entity-link" >GlobalConfig</a>
+                                <a href="interfaces/GlobalConfig.html" data-type="entity-link" >GlobalConfig&lt;T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/HttpErrorHandlerConfig.html" data-type="entity-link" >HttpErrorHandlerConfig</a>
@@ -228,19 +235,19 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/LogConfig.html" data-type="entity-link" >LogConfig</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/LogEvent.html" data-type="entity-link" >LogEvent</a>
+                                <a href="interfaces/LogEvent.html" data-type="entity-link" >LogEvent&lt;MESSAGES &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/LogPosition.html" data-type="entity-link" >LogPosition</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/ModuleConfig.html" data-type="entity-link" >ModuleConfig</a>
+                                <a href="interfaces/ModuleConfig.html" data-type="entity-link" >ModuleConfig&lt;T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/ModulesConfig.html" data-type="entity-link" >ModulesConfig</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/NotificationsState.html" data-type="entity-link" >NotificationsState</a>
+                                <a href="interfaces/NotificationsState.html" data-type="entity-link" >NotificationsState&lt;LIST &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/UrlAppenderConfig.html" data-type="entity-link" >UrlAppenderConfig</a>
@@ -258,7 +265,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/UserDetails.html" data-type="entity-link" >UserDetails</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/UserPreferences.html" data-type="entity-link" >UserPreferences</a>
+                                <a href="interfaces/UserPreferences.html" data-type="entity-link" >UserPreferences&lt;DASHBOARD &#x3D; any, T &#x3D; any&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/UserState.html" data-type="entity-link" >UserState</a>
@@ -270,7 +277,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="interfaces/UxErrorFollowMap.html" data-type="entity-link" >UxErrorFollowMap</a>
                             </li>
                             <li class="link">
-                                <a href="interfaces/UxErrorInfo.html" data-type="entity-link" >UxErrorInfo</a>
+                                <a href="interfaces/UxErrorInfo.html" data-type="entity-link" >UxErrorInfo&lt;DETAILS &#x3D; unknown&gt;</a>
                             </li>
                             <li class="link">
                                 <a href="interfaces/UxErrorMessage.html" data-type="entity-link" >UxErrorMessage</a>
@@ -334,4 +341,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);
         }