@eui/core 23.0.0-alpha.1 → 23.0.0-alpha.3

package/docs/js/tabs.js

@@ -1,21 +1,104 @@
 document.addEventListener('DOMContentLoaded', function() {
-    var tabs = document.getElementsByClassName('nav-tabs'),
-        updateAddress = function(e) {
-            if(history.pushState && e.target.dataset.link) {
-                history.pushState(null, null, '#' + e.target.dataset.link);
+    var tabContainers = document.getElementsByClassName('nav-tabs');
+    var tabLinks = [];
+    var tabAliasMap = {
+        'template': 'templateData',
+        'dom-tree': 'tree'
+    };
+
+    function updateAddress(e) {
+        if (history.pushState && e.target.dataset.link) {
+            history.pushState(null, null, '#' + e.target.dataset.link);
+        }
+    }
+
+    function findTabLinkByDataLink(dataLink) {
+        for (var i = 0; i < tabLinks.length; i++) {
+            if (tabLinks[i].dataset.link === dataLink) {
+                return tabLinks[i];
+            }
+        }
+        return null;
+    }
+
+    function getClosestTabPane(element) {
+        if (!element) {
+            return null;
+        }
+        if (element.closest) {
+            return element.closest('.tab-pane');
+        }
+        var node = element;
+        while (node) {
+            if (node.classList && node.classList.contains('tab-pane')) {
+                return node;
             }
-        };
-    if (tabs.length > 0) {
-        tabs = tabs[0].querySelectorAll('li');
-        for (var i = 0; i < tabs.length; i++) {
-            tabs[i].addEventListener('click', updateAddress);
-            var linkTag = tabs[i].querySelector('a');
-            if (location.hash !== '') {
-                var currentHash = location.hash.substr(1);
-                if (currentHash === linkTag.dataset.link) {
-                    linkTag.click();
-                }
+            node = node.parentElement;
+        }
+        return null;
+    }
+
+    function findAnchorTarget(hashValue) {
+        if (!hashValue) {
+            return null;
+        }
+
+        var targetById = document.getElementById(hashValue);
+        if (targetById) {
+            return targetById;
+        }
+
+        var targetsByName = document.getElementsByName(hashValue);
+        if (targetsByName && targetsByName.length > 0) {
+            return targetsByName[0];
+        }
+
+        return null;
+    }
+
+    function activateTabFromHash() {
+        if (location.hash === '') {
+            return;
+        }
+
+        var currentHash = decodeURIComponent(location.hash.substr(1));
+        if (!currentHash) {
+            return;
+        }
+
+        var resolvedHash = tabAliasMap[currentHash] || currentHash;
+        var directMatch = findTabLinkByDataLink(resolvedHash);
+        if (directMatch) {
+            directMatch.click();
+            return;
+        }
+
+        if (currentHash.indexOf('source.') === 0) {
+            var sourceTabLink = findTabLinkByDataLink('source');
+            if (sourceTabLink) {
+                sourceTabLink.click();
+                return;
             }
         }
+
+        var targetAnchor = findAnchorTarget(currentHash);
+        var tabPane = getClosestTabPane(targetAnchor);
+        if (!tabPane || !tabPane.id) {
+            return;
+        }
+
+        var tabLink = findTabLinkByDataLink(tabPane.id);
+        if (tabLink) {
+            tabLink.click();
+        }
+    }
+
+    if (tabContainers.length > 0) {
+        tabLinks = tabContainers[0].querySelectorAll('a[data-link]');
+        for (var i = 0; i < tabLinks.length; i++) {
+            tabLinks[i].addEventListener('click', updateAddress);
+        }
+        activateTabFromHash();
+        window.addEventListener('hashchange', activateTabFromHash, false);
     }
 });

package/docs/js/tree.js

@@ -58,10 +58,18 @@ document.addEventListener('DOMContentLoaded', function() {
             type
         } of it) {
         if (type === 'NonIterableObject' && typeof key !== 'undefined' && value.type === 'tag') {
+            var parentId = parentNode && parentNode._parent ? parentNode._parent._id : null,
+                parentLevel = parentNode && parentNode._parent && typeof parentNode._parent._level === 'number'
+                    ? parentNode._parent._level
+                    : 0,
+                nodeLevel = parentLevel + 1;
+            value._level = nodeLevel;
+
             var newNode = {
                 id: value._id,
                 label: value.name,
-                type: value.type
+                type: value.type,
+                level: nodeLevel
             };
             for(var i = 0; i < COMPONENTS.length; i++) {
                 if (COMPONENTS[i].selector === value.name) {
@@ -88,17 +96,29 @@ document.addEventListener('DOMContentLoaded', function() {
                 }
             }
             newNodes.push(newNode);
-            newEdges.push({
-                from: parentNode._parent._id,
-                to: value._id,
-                arrows: 'to'
-            });
+            if (parentId !== null && typeof parentId !== 'undefined') {
+                newEdges.push({
+                    from: parentId,
+                    to: value._id
+                });
+            }
         }
     }
 
     newNodes.shift();
 
+    var stripHtml = function(value) {
+            return String(value || '').replace(/<[^>]*>/g, '');
+        },
+        longestLabelLength = newNodes.reduce(function(max, node) {
+            var labelLength = stripHtml(node.label).length;
+            return Math.max(max, labelLength);
+        }, 0),
+        uniformNodeWidth = Math.max(40, Math.ceil(longestLabelLength * 8 + 28));
+
     var container = document.getElementById('tree-container'),
+        isDarkMode = document.body && document.body.classList.contains('dark'),
+        treeFontColor = isDarkMode ? '#f0f0f0' : '#2d2d2d',
         data = {
             nodes: newNodes,
             edges: newEdges
@@ -107,12 +127,29 @@ document.addEventListener('DOMContentLoaded', function() {
             layout: {
                 hierarchical: {
                     sortMethod: 'directed',
+                    shakeTowards: 'roots',
+                    levelSeparation: 130,
                     enabled: true
                 }
             },
+            edges: {
+                smooth: {
+                    enabled: true,
+                    type: 'cubicBezier',
+                    forceDirection: 'vertical',
+                    roundness: 0.45
+                }
+            },
             nodes: {
                 shape: 'ellipse',
-                fixed: true
+                fixed: true,
+                font: {
+                    color: treeFontColor
+                },
+                widthConstraint: {
+                    minimum: uniformNodeWidth,
+                    maximum: uniformNodeWidth
+                }
             }
         },
 

package/docs/json/EuiPermissionService.md

@@ -9,6 +9,7 @@ This class extends `EuiService` and is responsible for handling user rights and
 It provides methods to initialize the service with user rights, check specific rights and permissions,
 and subscribe to changes in the user rights state.
 
+{EuiService<EuiUserRight[]>}
 See EuiService
 
 ```html

package/docs/json/LocaleService.md

@@ -12,4 +12,5 @@ Key functionalities include:
  - Binding to a translation service for locale changes.
  - Updating the Angular LOCALE_ID token.
 
+EuiService<T | LocaleState>