@eui/mobile-core 20.0.2 → 22.0.0-alpha.1

package/docs/js/menu-wc.js

@@ -19,15 +19,23 @@ 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">
-                        <li class="link">
-                            <a href="index.html" data-type="chapter-link">
-                                <span class="icon ion-ios-keypad"></span>Overview
-                            </a>
-                        </li>
+                                <li class="link">
+                                    <a href="index.html" data-type="chapter-link">
+                                        <span class="icon ion-ios-keypad"></span>Overview
+                                    </a>
+                                </li>
+
                         <li class="link">
                             <a href="changelog.html"  data-type="chapter-link">
                                 <span class="icon ion-ios-paper"></span>CHANGELOG
@@ -43,6 +51,7 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                         <span class="icon ion-ios-apps"></span>Properties
                                     </a>
                                 </li>
+
                     </ul>
                 </li>
                     <li class="chapter modules">
@@ -59,13 +68,13 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                 <a href="modules/EuimAboutModule.html" data-type="entity-link" class="deprecated-name">EuimAboutModule</a>
                                     <li class="chapter inner">
                                         <div class="simple menu-toggler" data-bs-toggle="collapse" ${ isNormalMode ?
-                                            'data-bs-target="#components-links-module-EuimAboutModule-644754ba65e7d7ebec8981d615c461cc9db6a1c0c6920175d9ae172d693fb2a8ec3f5ef1bd0f45089e7a4d4062161f331f909fa735686bef3914264738e80752"' : 'data-bs-target="#xs-components-links-module-EuimAboutModule-644754ba65e7d7ebec8981d615c461cc9db6a1c0c6920175d9ae172d693fb2a8ec3f5ef1bd0f45089e7a4d4062161f331f909fa735686bef3914264738e80752"' }>
+                                            'data-bs-target="#components-links-module-EuimAboutModule-e549eda796d29eb893d705b09af578fd5d529da57401d5c9525694f9dc23942b01fff10f794419dfacd3a309c3f9728674fe116a2434c2c80768b8f121b64a6e"' : 'data-bs-target="#xs-components-links-module-EuimAboutModule-e549eda796d29eb893d705b09af578fd5d529da57401d5c9525694f9dc23942b01fff10f794419dfacd3a309c3f9728674fe116a2434c2c80768b8f121b64a6e"' }>
                                             <span class="icon ion-md-cog"></span>
                                             <span>Components</span>
                                             <span class="icon ion-ios-arrow-down"></span>
                                         </div>
-                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-EuimAboutModule-644754ba65e7d7ebec8981d615c461cc9db6a1c0c6920175d9ae172d693fb2a8ec3f5ef1bd0f45089e7a4d4062161f331f909fa735686bef3914264738e80752"' :
-                                            'id="xs-components-links-module-EuimAboutModule-644754ba65e7d7ebec8981d615c461cc9db6a1c0c6920175d9ae172d693fb2a8ec3f5ef1bd0f45089e7a4d4062161f331f909fa735686bef3914264738e80752"' }>
+                                        <ul class="links collapse" ${ isNormalMode ? 'id="components-links-module-EuimAboutModule-e549eda796d29eb893d705b09af578fd5d529da57401d5c9525694f9dc23942b01fff10f794419dfacd3a309c3f9728674fe116a2434c2c80768b8f121b64a6e"' :
+                                            'id="xs-components-links-module-EuimAboutModule-e549eda796d29eb893d705b09af578fd5d529da57401d5c9525694f9dc23942b01fff10f794419dfacd3a309c3f9728674fe116a2434c2c80768b8f121b64a6e"' }>
                                             <li class="link">
                                                 <a href="components/EuimAboutComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimAboutComponent</a>
                                             </li>
@@ -185,9 +194,6 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                             <li class="link">
                                                 <a href="components/EuimChipSelectorComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimChipSelectorComponent</a>
                                             </li>
-                                            <li class="link">
-                                                <a href="components/EuimHelperTextComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimHelperTextComponent</a>
-                                            </li>
                                             <li class="link">
                                                 <a href="components/EuimScrollerXComponent.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimScrollerXComponent</a>
                                             </li>
@@ -214,6 +220,9 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                                         <li class="link">
                                             <a href="directives/EuimAlignTopDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimAlignTopDirective</a>
                                         </li>
+                                        <li class="link">
+                                            <a href="directives/EuimFooterTransparentDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimFooterTransparentDirective</a>
+                                        </li>
                                         <li class="link">
                                             <a href="directives/EuimListItemNoPaddingsDirective.html" data-type="entity-link" data-context="sub-entity" data-context-id="modules" >EuimListItemNoPaddingsDirective</a>
                                         </li>
@@ -1300,9 +1309,12 @@ customElements.define('compodoc-menu', class extends HTMLElement {
                             </li>
                         </ul>
                     </li>
+                        <li class="chapter">
+                            <a data-type="chapter-link" href="routes.html"><span class="icon ion-ios-git-branch"></span>Routes</a>
+                        </li>
             </ul>
         </nav>
         `);
         this.innerHTML = tp.strings;
     }
-});
+});

package/docs/js/routes/routes_index.js

@@ -0,0 +1 @@
+var ROUTES_INDEX = {"name":"<root>","kind":"module","children":[{"name":"EuimAboutModule","kind":"module","filename":"packages/core/src/lib/components/euim-about/euim-about.module.ts"}]}

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,49 +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 + '</tspan>';
                 _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.path || d.name, nodeHref) +
+                    '</tspan>';
+                if (d.component) {
+                    _name +=
+                        '<tspan x="0" dy="1.4em">' +
+                        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 + '</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>';
@@ -174,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) {
@@ -259,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;
     }
@@ -272,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);
         }