@eui/eds 22.0.0-alpha.32 → 22.0.0-alpha.34

package/docs/changelog.html

@@ -106,6 +106,56 @@
 
 
 
+<h2>22.0.0-alpha.33 (2026-09-30)</h2>
+<h5>Chores</h5>
+<ul>
+<li><strong>eds:</strong><ul>
+<li>port eds-alert changes to react and wc - temp hide the figma mini card - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/0f63eb96bf0b5b2626a5a221af62d7ba29f158e2">0f63eb96</a>)</li>
+</ul>
+</li>
+<li><strong>eds-badge:</strong><ul>
+<li>aligned with EDS design: added XS an L sizes, replaced outline variant with light - EDS-181 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EDS-181">EDS-181</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/9d2446d32ff98dcce534ea3a058272e781f23c46">9d2446d3</a>)</li>
+</ul>
+</li>
+<li><strong>eui-wizard-v2:</strong><ul>
+<li>Remove encapsulation.None - EUI-12798 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12798">EUI-12798</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/af789163998870f82a6ed72d093115e3d1eb73d8">af789163</a>)</li>
+</ul>
+</li>
+<li><strong>styles:</strong><ul>
+<li>fixed eds-icon sizes with inherit from parent (ex when used within an eds-avatar) - EDS-179 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EDS-179">EDS-179</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/aec8426e11a3d6c198bb4d47ca844cba8851e820">aec8426e</a>)</li>
+<li>fixed invalid state color for eds-input-password including the input text field and the addon icon button from the right side - EDS-313 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EDS-313">EDS-313</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/aecd469ada6585c51765e925deb00abfa733a77f">aecd469a</a>)</li>
+</ul>
+</li>
+<li><strong>ecl-select:</strong><ul>
+<li>added tests EUI-12932 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12932">EUI-12932</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/17d03c8f01cab22ef167f39d97a589de6492e014">17d03c8f</a>)</li>
+</ul>
+</li>
+</ul>
+<hr>
+<hr>
+<h2>22.0.0-alpha.32 (2026-09-30)</h2>
+<h5>Chores</h5>
+<ul>
+<li><strong>eds:</strong><ul>
+<li>added alert-actions / action block - styles fixes - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/821af9bb051fed01e5e33ae91a49af2a9dc80424">821af9bb</a>)</li>
+<li>updated dropdown, overlay, growl removing encapsulation.none - eds-divider created - EUI-12528 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12528">EUI-12528</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/1131d7348a039ba99b0d056948b22fa1a946fef2">1131d734</a>)</li>
+</ul>
+</li>
+<li><strong>eui-wizard:</strong><ul>
+<li>Remove encapsulation.None - EUI-12797 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12797">EUI-12797</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/dc31199a162cef8be4815959428e95d1f5223874">dc31199a</a>)</li>
+</ul>
+</li>
+<li><strong>eds-icon:</strong><ul>
+<li>added 3xs icon size - EDS-189 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EDS-189">EDS-189</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/b1f2125060c9a2cc2e8b759d804a8c68de982411">b1f21250</a>)</li>
+</ul>
+</li>
+<li><strong>eui-growl:</strong><ul>
+<li>Remove encapsulation.None - EUI-12784 <a href="https://citnet.tech.ec.europa.eu/CITnet/jira/browse/EUI-12784">EUI-12784</a>  (<a href="https://sdlc.aws.cloud.tech.ec.europa.eu/csdr/eui/eui/-/commit/87f85921b9cf11e251e694672349d50972d98943">87f85921</a>)</li>
+</ul>
+</li>
+</ul>
+<hr>
+<hr>
 <h2>22.0.0-alpha.31 (2026-09-29)</h2>
 <h5>Chores</h5>
 <ul>

package/docs/components/EdsBadge.html

@@ -147,7 +147,7 @@ state, and an icon-only (dot) mode.</p>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge&gt;99&lt;/eds-badge&gt;</code></pre></div><h4>Semantic colors</h4>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge color=&quot;success&quot;&gt;Active&lt;/eds-badge&gt;
 &lt;eds-badge color=&quot;critical&quot;&gt;Error&lt;/eds-badge&gt;</code></pre></div><h4>Variant</h4>
-<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge color=&quot;info&quot; variant=&quot;outline&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge color=&quot;info&quot; variant=&quot;light&quot;&gt;New&lt;/eds-badge&gt;</code></pre></div><h4>Truncation</h4>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge [maxCharCount]=&quot;2&quot; charReplacement=&quot;99+&quot;&gt;150&lt;/eds-badge&gt;</code></pre></div><h4>Icon-only (dot indicator)</h4>
 <b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eds-badge iconOnly color=&quot;critical&quot;&gt;&lt;/eds-badge&gt;</code></pre></div>
     </p>
@@ -546,8 +546,8 @@ exceeds this limit it is replaced with <code>charReplacement</code>. <code>0</co
                 </tr>
                 <tr>
                     <td class="col-md-4">
-                        <div class="io-description"><p>Visual variant of the badge. <code>filled</code> uses a solid semantic surface; <code>outline</code>
-uses a transparent surface with a stronger border.</p>
+                        <div class="io-description"><p>Visual variant of the badge. <code>filled</code> uses a solid semantic surface; <code>light</code>
+uses a subtle semantic surface with a matching subtler foreground.</p>
 <p>&#39;filled&#39;</p>
 </div>
                     </td>

package/docs/components/EdsTree.html

@@ -2522,7 +2522,7 @@ and custom node templates.</p>
 <script src="../js/libs/htmlparser.js"></script>
 <script src="../js/libs/deep-iterator.js"></script>
 <script>
-        var COMPONENT_TEMPLATE = '<div><div class="eds-tree__wrapper eds-ul-rep" cdkScrollable #cdkScrollableRef>    @if (renderTree) {    <cdk-tree        #treeComponentInstance        [dataSource]="cdkArrayDataSource"        [treeControl]="cdkTreeControl"        [trackBy]="trackBy"        class="eds-cdk-tree">        <!-- Leaf node (no children) -->        <cdk-nested-tree-node *cdkTreeNodeDef="let treeRunTimeItemModel" class="eds-cdk-nested-tree-node">            @if (treeRunTimeItemModel) {            <div                class="eds-li-rep eds-tree-node"                [class.eds-tree-node--first]="treeRunTimeItemModel?.path === \'0\'"                [class.eds-tree-node--last]="treeRunTimeItemModel.last"                [title]="getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || \'\'">                <div class="eds-tree-node-wrapper"                     (click)="onNodeClick(treeRunTimeItemModel, $event)">                    <div class="eds-tree-node-wrapper__container">                        <ng-container                            [ngTemplateOutlet]="nodeTemplateRef() || nodeTemplateDefault"                            [ngTemplateOutletContext]="{                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,                                onSelect: onSelectFn(treeRunTimeItemModel.path),                                id: uid + treeRunTimeItemModel.path,                                path: treeRunTimeItemModel.path                            }">                        </ng-container>                    </div>                </div>            </div>            }        </cdk-nested-tree-node>        <!-- Expandable node (has children) -->        <cdk-nested-tree-node            *cdkTreeNodeDef="let treeRunTimeItemModel; when: hasChild"            class="eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child">            @if (treeRunTimeItemModel) {            <div                class="eds-li-rep eds-tree-node eds-tree-node--with-child"                [class.eds-tree-node--first]="treeRunTimeItemModel?.path === \'0\'"                [class.eds-tree-node--last]="treeRunTimeItemModel.last"                [title]="getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || \'\'">                <div class="eds-tree-node-wrapper">                    <div (click)="onNodeClick(treeRunTimeItemModel, $event)" class="eds-tree-node-wrapper__container">                        <!-- Expand/collapse action button -->                        <button                            edsIconButton                            size="s"                            rounded                            [icon]="cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()"                            [ariaLabel]="\'Toggle \' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label"                            (click)="onToggleButtonClick(treeRunTimeItemModel, $event)"                            class="eds-tree-node__button">                        </button>                        <ng-container                            [ngTemplateOutlet]="nodeTemplateRef() || nodeTemplateDefault"                            [ngTemplateOutletContext]="{                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,                                onSelect: onSelectFn(treeRunTimeItemModel.path),                                id: uid + treeRunTimeItemModel.path,                                path: treeRunTimeItemModel.path,                                children: getTreeItem(treeRunTimeItemModel?.path)?.children                            }">                        </ng-container>                    </div>                </div>                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {                <div class="eds-ul-rep eds-tree-node" role="group">                    <ng-container cdkTreeNodeOutlet></ng-container>                </div>                }            </div>            }        </cdk-nested-tree-node>    </cdk-tree>    }</div><ng-template #nodeTemplateDefault let-node let-onSelect="onSelect" let-id="id" let-path="path">    @if (node) {        <div class="eds-tree-node-wrapper__container-left" [class.eds-tree-node-wrapper__container-left--selected]="node?.isSelected">            @if (node && node.selectable) {            <input                edsInputCheckbox                type="checkbox"                id="{{ id }}"                [checked]="!!node?.isSelected"                [indeterminate]="!!node?.isIndeterminate"                (change)="onSelect($event)" />            }            @if (node?.treeContentBlock?.iconSvgName) {                <eds-icon                    [icon]="node?.treeContentBlock?.iconSvgName"                    size="s"                    class="eds-u-mr-xs">                </eds-icon>            }            @if (node?.treeContentBlock?.chips) {                @for (chip of node.treeContentBlock.chips; track chip) {                <eds-chip                    size="m"                    [color]="$any(chip.typeClass || \'neutral\')"                    class="eds-u-mr-xs">                    {{ chip.label }}                </eds-chip>                }            }            @if (node?.treeContentBlock?.typeLabel) {                <eds-badge size="m" [color]="node?.treeContentBlock?.typeClass || \'neutral\'" class="eds-u-mr-xs">                    {{ node?.treeContentBlock?.typeLabel }}                </eds-badge>            }        </div>        <div class="eds-tree-node-wrapper__container-middle">            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {            <label                edsLabel                for="{{ id }}"                class="eds-u-text-truncate"                [class.eds-label--selected]="                    highlightPath()                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === \'indeterminate\' || node?.isSelected                        : node?.isSelected                "                [class.eds-u-cursor-pointer]="node?.selectable">                {{ node?.treeContentBlock?.label }}            </label>            }            @if (node?.treeContentBlock?.url) {            <label edsLabel for="{{ id }}" class="eds-u-text-truncate">                <a                    class="eds-u-text-link"                    [class.eds-u-text-link-standalone]="!showUnderlinedLinks()"                    [routerLink]="node?.treeContentBlock?.url">                    {{ node?.treeContentBlock?.label }}                </a>            </label>            }            @if (node?.treeContentBlock?.urlExternal) {            <label edsLabel for="{{ id }}" class="eds-u-text-truncate">                <a                    class="eds-u-text-link-external"                    [class.eds-u-text-link-external-standalone]="!showUnderlinedLinks()"                    href="{{ node?.treeContentBlock?.urlExternal }}"                    target="{{ node?.treeContentBlock?.urlExternalTarget || \'blank\' }}">                    {{ node?.treeContentBlock?.label }}                </a>            </label>            }        </div>        @if (node?.treeContentBlock?.rightContent) {        <div class="eds-tree-node-wrapper__container-right">            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {                <eds-badge variant="outline" [color]="badge.typeClass || \'neutral\'" class="eds-u-ml-xs">                    {{ badge.label }}                </eds-badge>            }            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {                <eds-chip                    size="m"                    [color]="$any(chip.typeClass || \'neutral\')"                    class="eds-u-ml-xs">                    {{ chip.label }}                </eds-chip>            }            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {                <eds-dropdown class="eds-u-ml-xs">                    <button edsIconButton size="s" rounded icon="dots-three-vertical" ariaLabel="Options menu"></button>                    <eds-dropdown-content>                        <ng-template                            [ngTemplateOutlet]="rightContextMenuTemplateRef()"                            [ngTemplateOutletContext]="{                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData                            }">                        </ng-template>                    </eds-dropdown-content>                </eds-dropdown>            }        </div>        }        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {        <ng-container            [ngTemplateOutlet]="nodeContentMetadataContainer"            [ngTemplateOutletContext]="{                $implicit: { expanded: false }            }" />        }        <ng-template #nodeContentMetadataContainer let-metaDataContainer>            <button                edsIconButton                size="s"                rounded                [icon]="metaDataContainer.expanded ? \'caret-down\' : \'caret-right\'"                ariaLabel="expand collapse tree item"                (click)="metaDataContainer.expanded = !metaDataContainer.expanded">            </button>            @if (metaDataContainer.expanded) {            <div class="eds-tree-node__metacontent">                <ng-template                    [ngTemplateOutlet]="nodeContentMetadataTemplateRef()"                    [ngTemplateOutletContext]="{                        $implicit: node?.treeContentBlock?.metadata,                        metadata: node?.treeContentBlock?.metadata                    }">                </ng-template>            </div>            }        </ng-template>        }</ng-template></div>'
+        var COMPONENT_TEMPLATE = '<div><div class="eds-tree__wrapper eds-ul-rep" cdkScrollable #cdkScrollableRef>    @if (renderTree) {    <cdk-tree        #treeComponentInstance        [dataSource]="cdkArrayDataSource"        [treeControl]="cdkTreeControl"        [trackBy]="trackBy"        class="eds-cdk-tree">        <!-- Leaf node (no children) -->        <cdk-nested-tree-node *cdkTreeNodeDef="let treeRunTimeItemModel" class="eds-cdk-nested-tree-node">            @if (treeRunTimeItemModel) {            <div                class="eds-li-rep eds-tree-node"                [class.eds-tree-node--first]="treeRunTimeItemModel?.path === \'0\'"                [class.eds-tree-node--last]="treeRunTimeItemModel.last"                [title]="getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || \'\'">                <div class="eds-tree-node-wrapper"                     (click)="onNodeClick(treeRunTimeItemModel, $event)">                    <div class="eds-tree-node-wrapper__container">                        <ng-container                            [ngTemplateOutlet]="nodeTemplateRef() || nodeTemplateDefault"                            [ngTemplateOutletContext]="{                                $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,                                onSelect: onSelectFn(treeRunTimeItemModel.path),                                id: uid + treeRunTimeItemModel.path,                                path: treeRunTimeItemModel.path                            }">                        </ng-container>                    </div>                </div>            </div>            }        </cdk-nested-tree-node>        <!-- Expandable node (has children) -->        <cdk-nested-tree-node            *cdkTreeNodeDef="let treeRunTimeItemModel; when: hasChild"            class="eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child">            @if (treeRunTimeItemModel) {            <div                class="eds-li-rep eds-tree-node eds-tree-node--with-child"                [class.eds-tree-node--first]="treeRunTimeItemModel?.path === \'0\'"                [class.eds-tree-node--last]="treeRunTimeItemModel.last"                [title]="getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel                    || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || \'\'">                <div class="eds-tree-node-wrapper">                    <div (click)="onNodeClick(treeRunTimeItemModel, $event)" class="eds-tree-node-wrapper__container">                        <!-- Expand/collapse action button -->                        <button                            edsIconButton                            size="s"                            rounded                            [icon]="cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()"                            [ariaLabel]="\'Toggle \' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label"                            (click)="onToggleButtonClick(treeRunTimeItemModel, $event)"                            class="eds-tree-node__button">                        </button>                        <ng-container                            [ngTemplateOutlet]="nodeTemplateRef() || nodeTemplateDefault"                            [ngTemplateOutletContext]="{                                $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,                                onSelect: onSelectFn(treeRunTimeItemModel.path),                                id: uid + treeRunTimeItemModel.path,                                path: treeRunTimeItemModel.path,                                children: getTreeItem(treeRunTimeItemModel?.path)?.children                            }">                        </ng-container>                    </div>                </div>                @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {                <div class="eds-ul-rep eds-tree-node" role="group">                    <ng-container cdkTreeNodeOutlet></ng-container>                </div>                }            </div>            }        </cdk-nested-tree-node>    </cdk-tree>    }</div><ng-template #nodeTemplateDefault let-node let-onSelect="onSelect" let-id="id" let-path="path">    @if (node) {        <div class="eds-tree-node-wrapper__container-left" [class.eds-tree-node-wrapper__container-left--selected]="node?.isSelected">            @if (node && node.selectable) {            <input                edsInputCheckbox                type="checkbox"                id="{{ id }}"                [checked]="!!node?.isSelected"                [indeterminate]="!!node?.isIndeterminate"                (change)="onSelect($event)" />            }            @if (node?.treeContentBlock?.iconSvgName) {                <eds-icon                    [icon]="node?.treeContentBlock?.iconSvgName"                    size="s"                    class="eds-u-mr-xs">                </eds-icon>            }            @if (node?.treeContentBlock?.chips) {                @for (chip of node.treeContentBlock.chips; track chip) {                <eds-chip                    size="m"                    [color]="$any(chip.typeClass || \'neutral\')"                    class="eds-u-mr-xs">                    {{ chip.label }}                </eds-chip>                }            }            @if (node?.treeContentBlock?.typeLabel) {                <eds-badge size="m" [color]="node?.treeContentBlock?.typeClass || \'neutral\'" class="eds-u-mr-xs">                    {{ node?.treeContentBlock?.typeLabel }}                </eds-badge>            }        </div>        <div class="eds-tree-node-wrapper__container-middle">            @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {            <label                edsLabel                for="{{ id }}"                class="eds-u-text-truncate"                [class.eds-label--selected]="                    highlightPath()                        ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === \'indeterminate\' || node?.isSelected                        : node?.isSelected                "                [class.eds-u-cursor-pointer]="node?.selectable">                {{ node?.treeContentBlock?.label }}            </label>            }            @if (node?.treeContentBlock?.url) {            <label edsLabel for="{{ id }}" class="eds-u-text-truncate">                <a                    class="eds-u-text-link"                    [class.eds-u-text-link-standalone]="!showUnderlinedLinks()"                    [routerLink]="node?.treeContentBlock?.url">                    {{ node?.treeContentBlock?.label }}                </a>            </label>            }            @if (node?.treeContentBlock?.urlExternal) {            <label edsLabel for="{{ id }}" class="eds-u-text-truncate">                <a                    class="eds-u-text-link-external"                    [class.eds-u-text-link-external-standalone]="!showUnderlinedLinks()"                    href="{{ node?.treeContentBlock?.urlExternal }}"                    target="{{ node?.treeContentBlock?.urlExternalTarget || \'blank\' }}">                    {{ node?.treeContentBlock?.label }}                </a>            </label>            }        </div>        @if (node?.treeContentBlock?.rightContent) {        <div class="eds-tree-node-wrapper__container-right">            @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {                <eds-badge variant="light" [color]="badge.typeClass || \'neutral\'" class="eds-u-ml-xs">                    {{ badge.label }}                </eds-badge>            }            @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {                <eds-chip                    size="m"                    [color]="$any(chip.typeClass || \'neutral\')"                    class="eds-u-ml-xs">                    {{ chip.label }}                </eds-chip>            }            @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {                <eds-dropdown class="eds-u-ml-xs">                    <button edsIconButton size="s" rounded icon="dots-three-vertical" ariaLabel="Options menu"></button>                    <eds-dropdown-content>                        <ng-template                            [ngTemplateOutlet]="rightContextMenuTemplateRef()"                            [ngTemplateOutletContext]="{                                $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,                                metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData                            }">                        </ng-template>                    </eds-dropdown-content>                </eds-dropdown>            }        </div>        }        @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {        <ng-container            [ngTemplateOutlet]="nodeContentMetadataContainer"            [ngTemplateOutletContext]="{                $implicit: { expanded: false }            }" />        }        <ng-template #nodeContentMetadataContainer let-metaDataContainer>            <button                edsIconButton                size="s"                rounded                [icon]="metaDataContainer.expanded ? \'caret-down\' : \'caret-right\'"                ariaLabel="expand collapse tree item"                (click)="metaDataContainer.expanded = !metaDataContainer.expanded">            </button>            @if (metaDataContainer.expanded) {            <div class="eds-tree-node__metacontent">                <ng-template                    [ngTemplateOutlet]="nodeContentMetadataTemplateRef()"                    [ngTemplateOutletContext]="{                        $implicit: node?.treeContentBlock?.metadata,                        metadata: node?.treeContentBlock?.metadata                    }">                </ng-template>            </div>            }        </ng-template>        }</ng-template></div>'
     var COMPONENTS = [{'name': 'EdsAccordion', 'selector': 'eds-accordion'},{'name': 'EdsAccordionItem', 'selector': 'eds-accordion-item'},{'name': 'EdsAlert', 'selector': 'div[edsAlert], eds-alert'},{'name': 'EdsAlertAction', 'selector': 'a[edsAlertAction]'},{'name': 'EdsAlertActions', 'selector': 'eds-alert-actions'},{'name': 'EdsAlertTitle', 'selector': 'eds-alert-title'},{'name': 'EdsAutocomplete', 'selector': 'eds-autocomplete'},{'name': 'EdsAutocompleteOption', 'selector': 'eds-autocomplete-option'},{'name': 'EdsAutocompleteOptionGroup', 'selector': 'eds-autocomplete-option-group'},{'name': 'EdsAutocompletePanel', 'selector': 'eds-autocomplete-panel'},{'name': 'EdsAvatar', 'selector': 'div[edsAvatar], span[edsAvatar], eds-avatar'},{'name': 'EdsAvatarBadge', 'selector': 'eds-avatar-badge'},{'name': 'EdsAvatarContent', 'selector': 'eds-avatar-content'},{'name': 'EdsAvatarContentLabel', 'selector': 'eds-avatar-content-label'},{'name': 'EdsAvatarContentSublabel', 'selector': 'eds-avatar-content-sublabel'},{'name': 'EdsAvatarIcon', 'selector': 'eds-avatar-icon'},{'name': 'EdsAvatarImage', 'selector': 'eds-avatar-image'},{'name': 'EdsAvatarList', 'selector': 'eds-avatar-list'},{'name': 'EdsAvatarText', 'selector': 'eds-avatar-text'},{'name': 'EdsBadge', 'selector': 'eds-badge, span[edsBadge]'},{'name': 'EdsBanner', 'selector': 'eds-banner'},{'name': 'EdsBannerCta', 'selector': 'eds-banner-cta'},{'name': 'EdsBannerDescription', 'selector': 'eds-banner-description'},{'name': 'EdsBannerPicture', 'selector': 'eds-banner-picture'},{'name': 'EdsBannerTitle', 'selector': 'eds-banner-title'},{'name': 'EdsBlockContent', 'selector': 'eds-block-content'},{'name': 'EdsBlockDocument', 'selector': 'eds-block-document'},{'name': 'EdsBlockquote', 'selector': 'eds-blockquote'},{'name': 'EdsBreadcrumb', 'selector': 'eds-breadcrumb'},{'name': 'EdsBreadcrumbItem', 'selector': 'eds-breadcrumb-item'},{'name': 'EdsButton', 'selector': 'button[edsButton]'},{'name': 'EdsCalendar', 'selector': 'eds-calendar'},{'name': 'EdsCalendarDay', 'selector': 'eds-calendar-day'},{'name': 'EdsCalendarHeader', 'selector': 'eds-calendar-header'},{'name': 'EdsCalendarMonthly', 'selector': 'eds-calendar-monthly'},{'name': 'EdsCalendarWeekly', 'selector': 'eds-calendar-weekly'},{'name': 'EdsCalendarWeeklyDayContent', 'selector': 'eds-calendar-weekly-day-content'},{'name': 'EdsCalendarWeeklyDayHeader', 'selector': 'eds-calendar-weekly-day-header'},{'name': 'EdsCalendarWeeklyDayHeaderAction', 'selector': 'eds-calendar-weekly-day-header-action'},{'name': 'EdsCard', 'selector': 'eds-card'},{'name': 'EdsCardBody', 'selector': 'eds-card-body'},{'name': 'EdsCardFooter', 'selector': 'eds-card-footer'},{'name': 'EdsCardHeader', 'selector': 'eds-card-header'},{'name': 'EdsCardHeaderEnd', 'selector': 'eds-card-header-end'},{'name': 'EdsCardLabel', 'selector': 'eds-card-label'},{'name': 'EdsCardMedia', 'selector': 'eds-card-media'},{'name': 'EdsCardMetadata', 'selector': 'eds-card-metadata'},{'name': 'EdsCardStart', 'selector': 'eds-card-start'},{'name': 'EdsCardSublabel', 'selector': 'eds-card-sublabel'},{'name': 'EdsCarousel', 'selector': 'eds-carousel'},{'name': 'EdsCarouselItem', 'selector': 'eds-carousel-item'},{'name': 'EdsChart', 'selector': 'eds-chart'},{'name': 'EdsChartLegend', 'selector': 'eds-chart-legend'},{'name': 'EdsChartLegendItem', 'selector': 'eds-chart-legend-item'},{'name': 'EdsChatBubble', 'selector': 'eds-chat-bubble'},{'name': 'EdsChatBubbleContent', 'selector': 'eds-chat-bubble-content, a[edsChatBubbleContent], button[edsChatBubbleContent]'},{'name': 'EdsChatBubbleGroup', 'selector': 'eds-chat-bubble-group'},{'name': 'EdsChatBubbleReactions', 'selector': 'eds-chat-bubble-reactions'},{'name': 'EdsChip', 'selector': 'eds-chip, span[edsChip], li[edsChip]'},{'name': 'EdsChipList', 'selector': 'eds-chip-list'},{'name': 'EdsChipListAdditionalContent', 'selector': 'eds-chip-list-additional-content'},{'name': 'EdsChipListAppendContent', 'selector': 'eds-chip-list-append-content'},{'name': 'EdsDateBlock', 'selector': 'eds-date-block'},{'name': 'EdsDatepicker', 'selector': 'eds-datepicker'},{'name': 'EdsDialog', 'selector': 'eds-dialog'},{'name': 'EdsDialogContainer', 'selector': 'eds-dialog-container'},{'name': 'EdsDimmer', 'selector': 'eds-dimmer'},{'name': 'EdsDisableContent', 'selector': 'eds-disable-content'},{'name': 'EdsDiscussionThread', 'selector': 'eds-discussion-thread'},{'name': 'EdsDiscussionThreadItem', 'selector': 'eds-discussion-thread-item'},{'name': 'EdsDivider', 'selector': 'eds-divider'},{'name': 'EdsDropdown', 'selector': 'eds-dropdown'},{'name': 'EdsDropdownContainer', 'selector': 'eds-dropdown-container'},{'name': 'EdsDropdownItem', 'selector': 'eds-dropdown-item, [edsDropdownItem]'},{'name': 'EdsEmptyState', 'selector': 'eds-empty-state'},{'name': 'EdsEmptyStateActions', 'selector': 'eds-empty-state-actions'},{'name': 'EdsEmptyStateDescription', 'selector': 'eds-empty-state-description'},{'name': 'EdsEmptyStateIcon', 'selector': 'eds-empty-state-icon'},{'name': 'EdsEmptyStateTitle', 'selector': 'eds-empty-state-title'},{'name': 'EdsFabButton', 'selector': 'eds-fab-button'},{'name': 'EdsFabButtonItem', 'selector': 'eds-fab-button-item'},{'name': 'EdsFeedbackMessage', 'selector': 'eds-feedback-message'},{'name': 'EdsFieldset', 'selector': 'eds-fieldset'},{'name': 'EdsFieldsetAction', 'selector': 'eds-fieldset-action'},{'name': 'EdsFieldsetDescription', 'selector': 'eds-fieldset-description'},{'name': 'EdsFieldsetIcon', 'selector': 'eds-fieldset-icon'},{'name': 'EdsFieldsetTitle', 'selector': 'eds-fieldset-title'},{'name': 'EdsFileUpload', 'selector': 'eds-file-upload'},{'name': 'EdsFileUploadPreview', 'selector': 'eds-file-upload-preview'},{'name': 'EdsFlexLayout', 'selector': 'eds-flex-layout'},{'name': 'EdsGaugeChart', 'selector': 'eds-gauge-chart'},{'name': 'EdsGeoChart', 'selector': 'eds-geo-chart'},{'name': 'EdsGridLayout', 'selector': 'eds-grid-layout'},{'name': 'EdsGridLayoutCell', 'selector': 'eds-grid-layout-cell'},{'name': 'EdsGridLayoutRow', 'selector': 'eds-grid-layout-row'},{'name': 'EdsGrowl', 'selector': 'eds-growl'},{'name': 'EdsIcon', 'selector': 'eds-icon, span[edsIcon]'},{'name': 'EdsIconButton', 'selector': 'button[edsIconButton]'},{'name': 'EdsIconImage', 'selector': 'eds-icon-image, span[edsIconImage]'},{'name': 'EdsIconState', 'selector': 'eds-icon-state'},{'name': 'EdsIconToggle', 'selector': 'eds-icon-toggle'},{'name': 'EdsInputAddon', 'selector': 'eds-input-addon'},{'name': 'EdsInputButton', 'selector': 'eds-input-button'},{'name': 'EdsInputCheckbox', 'selector': 'input[edsInputCheckbox]'},{'name': 'EdsInputGroup', 'selector': 'div[edsInputGroup]'},{'name': 'EdsInputIcon', 'selector': 'eds-input-icon'},{'name': 'EdsInputNumber', 'selector': 'input[edsInputNumber]'},{'name': 'EdsInputPassword', 'selector': 'eds-input-password'},{'name': 'EdsInputPrompt', 'selector': 'eds-input-prompt'},{'name': 'EdsInputRadio', 'selector': 'input[edsInputRadio]'},{'name': 'EdsInputText', 'selector': 'input[edsInputText]'},{'name': 'EdsLabel', 'selector': 'label[edsLabel], span[edsLabel], div[edsLabel]'},{'name': 'EdsLanguageSelector', 'selector': 'eds-language-selector'},{'name': 'EdsLanguageSelectorDialog', 'selector': 'eds-language-selector-dialog'},{'name': 'EdsLink', 'selector': 'a[edsLink]'},{'name': 'EdsList', 'selector': 'eds-list'},{'name': 'EdsListItem', 'selector': 'eds-list-item'},{'name': 'EdsListItemContent', 'selector': 'eds-list-item-content'},{'name': 'EdsListItemEnd', 'selector': 'eds-list-item-end'},{'name': 'EdsListItemLabel', 'selector': 'eds-list-item-label'},{'name': 'EdsListItemStart', 'selector': 'eds-list-item-start'},{'name': 'EdsLoadingIndicator', 'selector': 'eds-loading-indicator'},{'name': 'EdsMenu', 'selector': 'eds-menu'},{'name': 'EdsMenuItemComponent', 'selector': 'eds-menu-item'},{'name': 'EdsMessageBox', 'selector': 'eds-message-box'},{'name': 'EdsMultiselect', 'selector': 'eds-multiselect'},{'name': 'EdsMultiselectOption', 'selector': 'eds-multiselect-option'},{'name': 'EdsOverlay', 'selector': 'eds-overlay'},{'name': 'EdsOverlayContent', 'selector': 'eds-overlay-content'},{'name': 'EdsOverlayFooter', 'selector': 'eds-overlay-footer'},{'name': 'EdsOverlayHeader', 'selector': 'eds-overlay-header'},{'name': 'EdsOverlayHeaderActionItems', 'selector': 'eds-overlay-header-action-items'},{'name': 'EdsOverlayHeaderLabel', 'selector': 'eds-overlay-header-label'},{'name': 'EdsOverlayHeaderSublabel', 'selector': 'eds-overlay-header-sublabel'},{'name': 'EdsPage', 'selector': 'eds-page'},{'name': 'EdsPageBreadcrumb', 'selector': 'eds-page-breadcrumb'},{'name': 'EdsPageColumn', 'selector': 'eds-page-column'},{'name': 'EdsPageColumnBody', 'selector': 'eds-page-column-body'},{'name': 'EdsPageColumnFooter', 'selector': 'eds-page-column-footer'},{'name': 'EdsPageColumnHeader', 'selector': 'eds-page-column-header'},{'name': 'EdsPageColumnHeaderActionItems', 'selector': 'eds-page-column-header-action-items'},{'name': 'EdsPageColumnHeaderLabel', 'selector': 'eds-page-column-header-label'},{'name': 'EdsPageColumnHeaderSublabel', 'selector': 'eds-page-column-header-sublabel'},{'name': 'EdsPageColumns', 'selector': 'eds-page-columns'},{'name': 'EdsPageContent', 'selector': 'eds-page-content'},{'name': 'EdsPageFooter', 'selector': 'eds-page-footer'},{'name': 'EdsPageHeader', 'selector': 'eds-page-header'},{'name': 'EdsPageHeaderActionItems', 'selector': 'eds-page-header-action-items'},{'name': 'EdsPageHeaderBody', 'selector': 'eds-page-header-body'},{'name': 'EdsPageHeaderLabel', 'selector': 'eds-page-header-label'},{'name': 'EdsPageHeaderSublabel', 'selector': 'eds-page-header-sublabel'},{'name': 'EdsPaginator', 'selector': 'eds-paginator'},{'name': 'EdsPopover', 'selector': 'eds-popover'},{'name': 'EdsPopoverContainer', 'selector': 'eds-popover-container'},{'name': 'EdsProgressBar', 'selector': 'eds-progress-bar'},{'name': 'EdsProgressCircle', 'selector': 'eds-progress-circle'},{'name': 'EdsRating', 'selector': 'eds-rating'},{'name': 'EdsSegmentedControl', 'selector': 'eds-segmented-control'},{'name': 'EdsSegmentedControlItem', 'selector': 'eds-segmented-control-item'},{'name': 'EdsSelect', 'selector': 'select[edsSelect]'},{'name': 'EdsShell', 'selector': 'eds-shell'},{'name': 'EdsShellContent', 'selector': 'eds-shell-content'},{'name': 'EdsShellFooter', 'selector': 'eds-shell-footer'},{'name': 'EdsShellHeader', 'selector': 'eds-shell-header'},{'name': 'EdsShellHeaderApp', 'selector': 'eds-shell-header-app'},{'name': 'EdsShellHeaderEnd', 'selector': 'eds-shell-header-end'},{'name': 'EdsShellHeaderEnvironment', 'selector': 'eds-shell-header-environment'},{'name': 'EdsShellHeaderLogo', 'selector': 'eds-shell-header-logo'},{'name': 'EdsShellHeaderStart', 'selector': 'eds-shell-header-start'},{'name': 'EdsShellMenuToggle', 'selector': 'eds-shell-menu-toggle'},{'name': 'EdsShellSidebar', 'selector': 'eds-shell-sidebar'},{'name': 'EdsShellSidebarBottomNav', 'selector': 'eds-shell-sidebar-bottom-nav'},{'name': 'EdsShellSidebarFooter', 'selector': 'eds-shell-sidebar-footer'},{'name': 'EdsShellSidebarHeader', 'selector': 'eds-shell-sidebar-header'},{'name': 'EdsShellSidebarNav', 'selector': 'eds-shell-sidebar-nav'},{'name': 'EdsShellToolbar', 'selector': 'eds-shell-toolbar'},{'name': 'EdsShellToolbarApp', 'selector': 'eds-shell-toolbar-app'},{'name': 'EdsShellToolbarCenter', 'selector': 'eds-shell-toolbar-center'},{'name': 'EdsShellToolbarEnd', 'selector': 'eds-shell-toolbar-end'},{'name': 'EdsShellToolbarEnvironment', 'selector': 'eds-shell-toolbar-environment'},{'name': 'EdsShellToolbarLogo', 'selector': 'eds-shell-toolbar-logo'},{'name': 'EdsShellToolbarStart', 'selector': 'eds-shell-toolbar-start'},{'name': 'EdsShellTopMessage', 'selector': 'eds-shell-top-message'},{'name': 'EdsSkeleton', 'selector': 'eds-skeleton'},{'name': 'EdsSlider', 'selector': 'eds-slider'},{'name': 'EdsSnc', 'selector': 'eds-snc'},{'name': 'EdsSparkline', 'selector': 'eds-sparkline'},{'name': 'EdsSplitButton', 'selector': 'eds-split-button'},{'name': 'EdsSwiper', 'selector': 'eds-swiper'},{'name': 'EdsSwiperItem', 'selector': 'eds-swiper-item'},{'name': 'EdsSwitch', 'selector': 'eds-switch'},{'name': 'EdsTab', 'selector': 'eds-tab'},{'name': 'EdsTabBody', 'selector': 'eds-tab-body'},{'name': 'EdsTabHeader', 'selector': 'eds-tab-header'},{'name': 'EdsTabHeaderLabel', 'selector': 'eds-tab-header-label'},{'name': 'EdsTabHeaderLeftContent', 'selector': 'eds-tab-header-left-content'},{'name': 'EdsTabHeaderRightContent', 'selector': 'eds-tab-header-right-content'},{'name': 'EdsTabHeaderSublabel', 'selector': 'eds-tab-header-sub-label'},{'name': 'EdsTable', 'selector': 'eds-table, table[edsTable]'},{'name': 'EdsTableFilter', 'selector': 'eds-table-filter'},{'name': 'EdsTableSelectableHeader', 'selector': 'tr[edsHeaderSelectable]'},{'name': 'EdsTableSelectableRow', 'selector': 'tr[edsDataSelectable]'},{'name': 'EdsTableSortableCol', 'selector': 'th[edsSortable]'},{'name': 'EdsTabs', 'selector': 'eds-tabs'},{'name': 'EdsTabsRightContent', 'selector': 'eds-tabs-right-content'},{'name': 'EdsTag', 'selector': 'eds-tag, span[edsTag]'},{'name': 'EdsTagGroup', 'selector': 'eds-tag-group'},{'name': 'EdsTextarea', 'selector': 'textarea[edsTextarea]'},{'name': 'EdsTimeline', 'selector': 'eds-timeline'},{'name': 'EdsTimelineItem', 'selector': 'eds-timeline-item'},{'name': 'EdsTimepicker', 'selector': 'eds-timepicker'},{'name': 'EdsTooltipContainer', 'selector': 'eds-tooltip-container'},{'name': 'EdsTree', 'selector': 'eds-tree'},{'name': 'EdsTreeList', 'selector': 'eds-tree-list'},{'name': 'EdsTreeListItem', 'selector': 'eds-tree-list-item'},{'name': 'EdsTreeListItemContent', 'selector': 'eds-tree-list-item-content'},{'name': 'EdsTreeListToolbar', 'selector': 'eds-tree-list-toolbar'},{'name': 'EdsTrend', 'selector': 'eds-trend'},{'name': 'EdsUserProfile', 'selector': 'eds-user-profile'},{'name': 'EdsUserProfileMenu', 'selector': 'eds-user-profile-menu'},{'name': 'EdsUserProfileMenuItem', 'selector': 'eds-user-profile-menu-item'},{'name': 'EdsWizard', 'selector': 'eds-wizard'},{'name': 'EdsWizardStepComponent', 'selector': 'eds-wizard-step'}];
     var DIRECTIVES = [{'name': 'EdsAccordionItemHeader', 'selector': 'eds-accordion-item-header'},{'name': 'EdsAutoResizeDirective', 'selector': 'textarea[edsAutoResize]'},{'name': 'EdsBannerImage', 'selector': 'img[edsBannerImage]'},{'name': 'EdsBannerVideo', 'selector': 'video[edsBannerVideo]'},{'name': 'EdsCalendarDayCellDef', 'selector': 'ng-template[edsCalendarDayCell]'},{'name': 'EdsCalendarEventCellDef', 'selector': 'ng-template[edsCalendarEventCell]'},{'name': 'EdsCalendarHeaderCellDef', 'selector': 'ng-template[edsCalendarHeaderCell]'},{'name': 'EdsCardLink', 'selector': 'eds-card[edsCardLink]'},{'name': 'EdsClearableDirective', 'selector': '[edsClearable]:not([edsInputText])'},{'name': 'EdsColorDirective', 'selector': '[edsColorVariants]'},{'name': 'EdsDialogFooter', 'selector': 'eds-dialog-footer'},{'name': 'EdsDialogHeader', 'selector': 'eds-dialog-header'},{'name': 'EdsDropdownContent', 'selector': 'eds-dropdown-content'},{'name': 'EdsDropdownTreeDirective', 'selector': 'eds-dropdown[edsDropdownTree]'},{'name': 'EdsFlexColDirective', 'selector': '[edsFlexCol]'},{'name': 'EdsFlexGrowDirective', 'selector': '[edsFlexGrow]'},{'name': 'EdsFlexNoShrinkDirective', 'selector': '[edsFlexNoShrink]'},{'name': 'EdsInputPromptLeading', 'selector': '[edsInputPromptLeading]'},{'name': 'EdsInputPromptTrailing', 'selector': '[edsInputPromptTrailing]'},{'name': 'EdsLoadingDirective', 'selector': '[edsLoading]:not([edsInputText])'},{'name': 'EdsMaxlengthDirective', 'selector': 'input[edsMaxlength], textarea[edsMaxlength], [ngModel][edsMaxlength], [formControlName][edsMaxlength]'},{'name': 'EdsMessageBoxFooter', 'selector': 'eds-message-box-footer'},{'name': 'EdsPopoverArrowPosition', 'selector': '[edsPopoverArrowPosition]'},{'name': 'EdsResizable', 'selector': '[edsResizable]'},{'name': 'EdsSelectControlValueAccessor', 'selector': 'select:not([multiple])[formControlName][edsSelect],select:not([multiple])[formControl][edsSelect],select:not([multiple])[ngModel][edsSelect]'},{'name': 'EdsSelectMultipleControlValueAccessor', 'selector': 'select[multiple][formControlName][edsSelect],select[multiple][formControl][edsSelect],select[multiple][ngModel][edsSelect]'},{'name': 'EdsSelectMultipleOption', 'selector': 'option[edsOption]'},{'name': 'EdsSelectOptionDirective', 'selector': 'option[edsOption]'},{'name': 'EdsSizeDirective', 'selector': '[edsSizeVariants]'},{'name': 'EdsSrOnly', 'selector': '[edsSrOnly]'},{'name': 'EdsTableExpandableRow', 'selector': 'tr[edsExpandableRow]'},{'name': 'EdsTableStickyCol', 'selector': 'th[edsStickyCol], td[edsStickyCol]'},{'name': 'EdsTableTemplate', 'selector': '[edsTableTemplate]'},{'name': 'EdsTextTruncate', 'selector': '[edsTextTruncate]'},{'name': 'EdsTooltip', 'selector': '[edsTooltip]'},{'name': 'EdsTreeFormControlDirective', 'selector': 'eds-tree[edsTreeFormControl]'},{'name': 'EdsTreeListItemDetails', 'selector': 'eds-tree-list-item-details'},{'name': 'EdsTreeListItemLabel', 'selector': 'eds-tree-list-item-label'},{'name': 'EdsTreeListItemSubContainer', 'selector': 'eds-tree-list-item-sub-container'}];
     var ACTUAL_COMPONENT = {'name': 'EdsTree'};