@eui/core 17.0.0-next.9 → 17.0.0-rc.2

package/docs/js/menu.js

@@ -0,0 +1,325 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var menuCollapsed = false,
+        mobileMenu = document.getElementById('mobile-menu');
+
+    var localContextInUrl = '';
+
+    if (COMPODOC_CURRENT_PAGE_CONTEXT !== '') {
+        switch (COMPODOC_CURRENT_PAGE_CONTEXT) {
+            case 'additional-page':
+                localContextInUrl = 'additional-documentation';
+                break;
+            case 'class':
+                localContextInUrl = 'classes';
+                break;
+            case 'miscellaneous-functions':
+            case 'miscellaneous-variables':
+            case 'miscellaneous-typealiases':
+            case 'miscellaneous-enumerations':
+                localContextInUrl = 'miscellaneous';
+            default:
+                break;
+        }
+    }
+
+    function hasClass(el, cls) {
+        return el.className && new RegExp('(\\s|^)' + cls + '(\\s|$)').test(el.className);
+    }
+
+    var processLink = function (link, url) {
+        if (url.charAt(0) !== '.') {
+            var prefix = '';
+            switch (COMPODOC_CURRENT_PAGE_DEPTH) {
+                case 5:
+                    prefix = '../../../../../';
+                    break;
+                case 4:
+                    prefix = '../../../../';
+                    break;
+                case 3:
+                    prefix = '../../../';
+                    break;
+                case 2:
+                    prefix = '../../';
+                    break;
+                case 1:
+                    prefix = '../';
+                    break;
+                case 0:
+                    prefix = './';
+                    break;
+            }
+            link.setAttribute('href', prefix + url);
+        }
+    };
+
+    var processMenuLinks = function (links, dontAddClass) {
+        for (var i = 0; i < links.length; i++) {
+            var link = links[i];
+            var linkHref = link.getAttribute('href');
+            if (linkHref) {
+                var linkHrefFile = linkHref.substr(linkHref.lastIndexOf('/') + 1, linkHref.length);
+                if (
+                    linkHrefFile.toLowerCase() === COMPODOC_CURRENT_PAGE_URL.toLowerCase() &&
+                    link.innerHTML.indexOf('Getting started') == -1 &&
+                    !dontAddClass &&
+                    linkHref.toLowerCase().indexOf(localContextInUrl.toLowerCase()) !== -1
+                ) {
+                    link.classList.add('active');
+                }
+                processLink(link, linkHref);
+            }
+        }
+    };
+    var chapterLinks = document.querySelectorAll('[data-type="chapter-link"]');
+    processMenuLinks(chapterLinks);
+    var entityLinks = document.querySelectorAll('[data-type="entity-link"]');
+    processMenuLinks(entityLinks);
+    var indexLinks = document.querySelectorAll('[data-type="index-link"]');
+    processMenuLinks(indexLinks, true);
+    var compodocLogos = document.querySelectorAll('[data-type="compodoc-logo"]');
+    var customLogo = document.querySelectorAll('[data-type="custom-logo"]');
+    var processLogos = function (entityLogos) {
+        for (var i = 0; i < entityLogos.length; i++) {
+            var entityLogo = entityLogos[i];
+            if (entityLogo) {
+                var url = entityLogo.getAttribute('data-src');
+                // Dark mode + logo
+                let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                if (isDarkMode && url.indexOf('compodoc') !== -1) {
+                    url = 'images/compodoc-vectorise-inverted.png';
+                }
+                if (url.charAt(0) !== '.') {
+                    var prefix = '';
+                    switch (COMPODOC_CURRENT_PAGE_DEPTH) {
+                        case 5:
+                            prefix = '../../../../../';
+                            break;
+                        case 4:
+                            prefix = '../../../../';
+                            break;
+                        case 3:
+                            prefix = '../../../';
+                            break;
+                        case 2:
+                            prefix = '../../';
+                            break;
+                        case 1:
+                            prefix = '../';
+                            break;
+                        case 0:
+                            prefix = './';
+                            break;
+                    }
+                    entityLogo.src = prefix + url;
+                }
+            }
+        }
+    };
+    processLogos(compodocLogos);
+    processLogos(customLogo);
+
+    setTimeout(function () {
+        document.getElementById('btn-menu').addEventListener('click', function () {
+            if (menuCollapsed) {
+                mobileMenu.style.display = 'none';
+            } else {
+                mobileMenu.style.display = 'block';
+                document.getElementsByTagName('body')[0].style['overflow-y'] = 'hidden';
+            }
+            menuCollapsed = !menuCollapsed;
+        });
+
+        /**
+         * Native bootstrap doesn't wait DOMContentLoaded event to start his job, re do it here
+         */
+        var Collapses = document.querySelectorAll('[data-bs-toggle="collapse"]');
+        for (var o = 0, cll = Collapses.length; o < cll; o++) {
+            var collapse = Collapses[o],
+                options = {};
+            options.duration = collapse.getAttribute('data-duration');
+            const targetId = collapse.getAttribute('data-bs-target');
+            if (targetId !== '') {
+                options.parent = collapse;
+                const c = new BSN.Collapse(targetId, options);
+            }
+        }
+
+        // collapse menu
+        var classnameMenuToggler = document.getElementsByClassName('menu-toggler'),
+            faAngleUpClass = 'ion-ios-arrow-up',
+            faAngleDownClass = 'ion-ios-arrow-down',
+            toggleItemMenu = function (e) {
+                var element = $(e.target),
+                    parent = element[0].parentNode,
+                    parentLink,
+                    elementIconChild;
+                if (parent) {
+                    if (!$(parent).hasClass('linked')) {
+                        e.preventDefault();
+                    } else {
+                        parentLink = parent.parentNode;
+                        if (parentLink && element.hasClass('link-name')) {
+                            $(parentLink).trigger('click');
+                        }
+                    }
+                    elementIconChild = parent.getElementsByClassName(faAngleUpClass)[0];
+                    if (!elementIconChild) {
+                        elementIconChild = parent.getElementsByClassName(faAngleDownClass)[0];
+                    }
+                    if (elementIconChild) {
+                        elementIconChild = $(elementIconChild);
+                        if (elementIconChild.hasClass(faAngleUpClass)) {
+                            elementIconChild.addClass(faAngleDownClass);
+                            elementIconChild.removeClass(faAngleUpClass);
+                        } else {
+                            elementIconChild.addClass(faAngleUpClass);
+                            elementIconChild.removeClass(faAngleDownClass);
+                        }
+                    }
+                }
+            };
+
+        for (var i = 0; i < classnameMenuToggler.length; i++) {
+            classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
+        }
+
+        // Scroll to active link
+        var menus = document.querySelectorAll('.menu'),
+            i = 0,
+            len = menus.length,
+            activeMenu,
+            activeMenuClass,
+            activeLink;
+
+        for (i; i < len; i++) {
+            if (getComputedStyle(menus[i]).display != 'none') {
+                activeMenu = menus[i];
+                activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
+            }
+        }
+
+        if (activeMenu) {
+            activeLink = document.querySelector('.' + activeMenuClass + ' .active');
+            if (activeLink) {
+                var linkType = activeLink.getAttribute('data-type');
+                var linkContext = activeLink.getAttribute('data-context');
+                if (linkType === 'entity-link') {
+                    var parentLi = activeLink.parentNode,
+                        parentUl,
+                        parentChapterMenu;
+                    if (parentLi) {
+                        parentUl = parentLi.parentNode;
+                        if (parentUl) {
+                            parentChapterMenu = parentUl.parentNode;
+                            if (parentChapterMenu) {
+                                var toggler = parentChapterMenu.querySelector('.menu-toggler'),
+                                    elementIconChild =
+                                        toggler.getElementsByClassName(faAngleUpClass)[0];
+                                if (toggler && !elementIconChild) {
+                                    toggler.click();
+                                }
+                            }
+                        }
+                    }
+                    if (linkContext && linkContext === 'sub-entity') {
+                        // Toggle also the master parent menu
+                        var linkContextId = activeLink.getAttribute('data-context-id');
+                        var toggler = activeMenu.querySelector(
+                            '.chapter.' + linkContextId + ' a .menu-toggler'
+                        );
+                        if (toggler) {
+                            toggler.click();
+                        }
+                        if (linkContextId === 'additional') {
+                            var mainToggler = activeMenu.querySelector(
+                                '.chapter.' + linkContextId + ' div.menu-toggler'
+                            );
+                            if (mainToggler) {
+                                mainToggler.click();
+                            }
+                        }
+                    }
+                } else if (linkType === 'chapter-link') {
+                    var linkContextId = activeLink.getAttribute('data-context-id');
+                    var toggler = activeLink.querySelector('.menu-toggler');
+                    if (toggler) {
+                        toggler.click();
+                    }
+                    if (linkContextId === 'additional') {
+                        var mainToggler = activeMenu.querySelector(
+                            '.chapter.' + linkContextId + ' div.menu-toggler'
+                        );
+                        if (mainToggler) {
+                            mainToggler.click();
+                        }
+                    }
+                }
+                setTimeout(function () {
+                    activeMenu.scrollTop = activeLink.offsetTop;
+                    if (
+                        activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 ||
+                        activeLink.innerHTML.toLowerCase().indexOf('overview') != -1
+                    ) {
+                        activeMenu.scrollTop = 0;
+                    }
+                }, 300);
+            }
+        }
+        // Dark mode toggle button
+        var useDark = window.matchMedia('(prefers-color-scheme: dark)');
+        var darkModeState = useDark.matches;
+        var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
+        var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
+        var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
+
+        function checkToggle(check) {
+            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                $darkModeToggleSwitchers[i].checked = check;
+            }
+        }
+
+        function toggleDarkMode(state) {
+            if (window.localStorage) {
+                localStorage.setItem('compodoc_darkmode-state', state);
+            }
+
+            checkToggle(state);
+
+            const hasClass = document.body.classList.contains('dark');
+
+            if (state) {
+                for (var i = 0; i < $darkModeToggles.length; i++) {
+                    $darkModeToggles[i].classList.add('dark');
+                }
+                if (!hasClass) {
+                    document.body.classList.add('dark');
+                }
+            } else {
+                for (var i = 0; i < $darkModeToggles.length; i++) {
+                    $darkModeToggles[i].classList.remove('dark');
+                }
+                if (hasClass) {
+                    document.body.classList.remove('dark');
+                }
+            }
+        }
+
+        useDark.addEventListener('change', function (evt) {
+            toggleDarkMode(evt.matches);
+        });
+        if (darkModeStateLocal) {
+            darkModeState = darkModeStateLocal === 'true';
+        }
+        toggleDarkMode(darkModeState);
+
+        if ($darkModeToggles.length > 0) {
+            for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
+                $darkModeToggleSwitchers[i].addEventListener('change', function (event) {
+                    darkModeState = !darkModeState;
+                    toggleDarkMode(darkModeState);
+                });
+            }
+        }
+    }, 0);
+});

package/docs/js/routes.js

@@ -0,0 +1,301 @@
+document.addEventListener('DOMContentLoaded', function () {
+    function htmlEntities(str) {
+        return String(str)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    function foundLazyModuleWithPath(path) {
+        //path is like app/customers/customers.module#CustomersModule
+        var split = path.split('#'),
+            lazyModulePath = split[0],
+            lazyModuleName = split[1];
+        return lazyModuleName;
+    }
+
+    function getBB(selection) {
+        selection.each(function (d) {
+            d.bbox = this.getBBox();
+        });
+    }
+
+    var test_cases, test_case, test_case_num, engine;
+
+    var tree = ROUTES_INDEX;
+
+    function cleanStringChildren(obj) {
+        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 (typeof obj[property] === 'object') {
+                    cleanStringChildren(obj[property]);
+                }
+            }
+        }
+    }
+    cleanStringChildren(tree);
+
+    engine = d3.layout.tree().setNodeSizes(true);
+
+    engine.spacing(function (a, b) {
+        return a.parent == b.parent ? 0 : engine.rootXSize();
+    });
+
+    engine.nodeSize(function (d) {
+        return [
+            document.getElementById(d.id).getBBox()['height'] + 70,
+            document.getElementById(d.id).getBBox()['width'] + 30
+        ];
+    });
+
+    var nodes = d3.layout.hierarchy()(tree),
+        svg = d3.select('#body-routes').append('svg'),
+        svg_g = svg.append('g'),
+        svg_p = svg.append('g'),
+        last_id = 0,
+        node = svg_g
+            .selectAll('.node')
+            .data(nodes, function (d) {
+                return d.id || (d.id = ++last_id);
+            })
+            .enter()
+            .append('g')
+            .attr('class', 'node');
+
+    svg.attr('id', 'main');
+
+    svg_g.attr('transform', 'translate(20,0)').attr('id', 'main-group');
+
+    svg_p.attr('transform', 'translate(20,0)').attr('id', 'paths');
+
+    var infos_group = node.append('g').attr({
+        id: function (d) {
+            return d.id;
+        },
+        dx: 0,
+        dy: 0
+    });
+
+    //Node icon
+    infos_group
+        .append('text')
+        .attr('font-family', 'Ionicons')
+        .attr('y', 5)
+        .attr('x', 0)
+        .attr('class', function (d) {
+            return d.children || d._children ? 'icon has-children' : 'icon';
+        })
+        .attr('font-size', function (d) {
+            return '15px';
+        })
+        .text(function (d) {
+            return '\uf183';
+        });
+
+    //node infos
+    infos_group
+        .append('svg:text')
+        .attr('x', function (d) {
+            return 0;
+        })
+        .attr('y', function (d) {
+            return 10;
+        })
+        .attr('dy', '.35em')
+        .attr('class', 'text')
+        .attr('text-anchor', function (d) {
+            return 'start';
+        })
+        .html(function (d) {
+            // if kind === module name + module
+            // if kind === component component + path
+            var _name = '';
+            if (d.kind === 'module') {
+                if (d.module) {
+                    _name +=
+                        '<tspan x="0" dy="1.4em"><a href="./modules/' +
+                        d.module +
+                        '.html">' +
+                        d.module +
+                        '</a></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>';
+                }
+            } 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>';
+                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.component) {
+                    _name +=
+                        '<tspan x="0" dy="1.4em"><a href="./components/' +
+                        d.component +
+                        '.html">' +
+                        d.component +
+                        '</a></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 (d.canActivate) {
+                    _name += '<tspan x="0" dy="1.4em">&#10003; canActivate</tspan>';
+                }
+                if (d.canDeactivate) {
+                    _name += '<tspan x="0" dy="1.4em">&#215;&nbsp;&nbsp;canDeactivate</tspan>';
+                }
+                if (d.canActivateChild) {
+                    _name += '<tspan x="0" dy="1.4em">&#10003; canActivateChild</tspan>';
+                }
+                if (d.canLoad) {
+                    _name += '<tspan x="0" dy="1.4em">&#8594; canLoad</tspan>';
+                }
+                if (d.redirectTo) {
+                    _name += '<tspan x="0" dy="1.4em">&rarr; ' + d.redirectTo + '</tspan>';
+                }
+                if (d.pathMatch) {
+                    _name += '<tspan x="0" dy="1.4em">&gt; ' + d.pathMatch + '</tspan>';
+                }
+                if (d.outlet) {
+                    _name += '<tspan x="0" dy="1.4em">&lt;outlet&gt; : ' + d.outlet + '</tspan>';
+                }
+            }
+            return _name;
+        })
+        .call(getBB);
+
+    //
+    // Node lazy loaded ?
+    //
+    infos_group
+        .append('svg:text')
+        .attr('y', function (d) {
+            return 45;
+        })
+        .attr('x', function (d) {
+            return -18;
+        })
+        .attr('font-family', 'Ionicons')
+        .attr('class', function (d) {
+            return 'icon';
+        })
+        .attr('font-size', function (d) {
+            return '15px';
+        })
+        .text(function (d) {
+            var _text = '';
+            if (d.loadChildren || d.loadComponent) {
+                _text = '\uf4c1';
+            }
+            if (d.guarded) {
+                _text = '\uf1b0';
+            }
+            return _text;
+        });
+
+    //Node text background
+    infos_group
+        .insert('rect', 'text')
+        .attr('width', function (d) {
+            return d.bbox.width;
+        })
+        .attr('height', function (d) {
+            return d.bbox.height;
+        })
+        .attr('y', function (d) {
+            return 15;
+        })
+        .style('fill', 'white')
+        .style('fill-opacity', 0.75);
+
+    nodes = engine.nodes(tree);
+
+    function node_extents(n) {
+        return [n.x - n.x_size / 2, n.y, n.x + n.x_size / 2, n.y + n.y_size];
+    }
+    var root_extents = node_extents(nodes[0]);
+    var xmin = root_extents[0],
+        ymin = root_extents[1],
+        xmax = root_extents[2],
+        ymax = root_extents[3],
+        area_sum = (xmax - xmin) * (ymax - ymin),
+        x_size_min = nodes[0].x_size,
+        y_size_min = nodes[0].y_size;
+
+    nodes.slice(1).forEach(function (n) {
+        var ne = node_extents(n);
+        xmin = Math.min(xmin, ne[0]);
+        ymin = Math.min(ymin, ne[1]);
+        xmax = Math.max(xmax, ne[2]);
+        ymax = Math.max(ymax, ne[3]);
+        area_sum += (ne[2] - ne[0]) * (ne[3] - ne[1]);
+        x_size_min = Math.min(x_size_min, n.x_size);
+        y_size_min = Math.min(y_size_min, n.y_size);
+    });
+
+    var area_ave = area_sum / nodes.length;
+    var scale = 80 / Math.sqrt(area_ave);
+
+    function svg_x(node_y) {
+        return node_y - ymin;
+    }
+
+    function svg_y(node_x) {
+        return (node_x - xmin) * scale;
+    }
+
+    var nodebox_right_margin = Math.min(x_size_min * scale, 10);
+    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) + ')';
+    });
+
+    var diagonal = d3.svg.diagonal().projection(function (d) {
+        return [svg_x(d.y), svg_y(d.x)];
+    });
+
+    var links = engine.links(nodes);
+    var links = svg_p
+        .selectAll('.link')
+        .data(links)
+        .enter()
+        .append('path')
+        .attr('class', 'link')
+        .attr('d', diagonal);
+
+    var _svg = document.getElementById('main'),
+        main_g = _svg.childNodes[0];
+
+    _svg.removeChild(main_g);
+    _svg.appendChild(main_g);
+
+    svg.attr({
+        width: document.getElementById('main-group').getBBox()['width'] + 30,
+        height: document.getElementById('main-group').getBBox()['height'] + 50
+    });
+});