@ethlete/cdk 4.47.0 → 4.48.0

package/fesm2022/ethlete-cdk.mjs

@@ -1,10 +1,10 @@
 import * as i1 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
-import { AsyncPipe, NgClass, NgTemplateOutlet, NgComponentOutlet, JsonPipe, DOCUMENT, Location } from '@angular/common';
+import { AsyncPipe, NgClass, NgTemplateOutlet, isPlatformBrowser, NgComponentOutlet, JsonPipe, DOCUMENT, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, assertInInjectionContext, forwardRef, EventEmitter, Output, ViewChildren, runInInjectionContext, Optional, Inject, SkipSelf, HostListener, contentChild, effect, untracked, NgZone, NgModule, DestroyRef, isSignal, Attribute } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, InjectionToken, Directive, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, input, numberAttribute, computed, PLATFORM_ID, Renderer2, effect, DestroyRef, signal, contentChildren, viewChild, viewChildren, isDevMode, Injectable, ChangeDetectorRef, TemplateRef, ViewContainerRef, ViewChild, assertInInjectionContext, forwardRef, EventEmitter, Output, ViewChildren, runInInjectionContext, Optional, Inject, SkipSelf, HostListener, contentChild, untracked, NgZone, NgModule, isSignal, Attribute } from '@angular/core';
 import * as i1$1 from '@ethlete/core';
-import { LetDirective, createDestroy, Memo, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, controlValueSignal, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, createComponentId, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, ViewportService, injectRoute, ROOT_BOUNDARY_TOKEN, injectQueryParam, RouterStateService, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { LetDirective, createDestroy, Memo, createComponentId, signalHostAttributes, signalHostClasses, previousSignalValue, signalHostStyles, nextFrame, syncSignal, signalStyles, injectHostElement, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, equal, switchQueryListChanges, controlValueSignal, signalAttributes, ResizeObserverService, createFlipAnimation, AnimatedOverlayDirective, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ANIMATED_LIFECYCLE_TOKEN, AnimatedLifecycleDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ObserveScrollStateDirective, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, ViewportService, injectRoute, ROOT_BOUNDARY_TOKEN, injectQueryParam, RouterStateService, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
 import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
@@ -1040,12 +1040,18 @@ const BRACKET_ROUND_MIRROR_TYPE = {
     LEFT: 'left',
     RIGHT: 'right',
 };
-const generateRoundTypeFromEthleteRoundType = (type, tournamentMode) => {
+const generateRoundTypeFromEthleteRoundType = (type, tournamentMode, roundMatchCount) => {
     switch (type) {
         case 'normal':
             switch (tournamentMode) {
                 case 'single-elimination':
-                    return SINGLE_ELIMINATION_BRACKET_ROUND_TYPE.SINGLE_ELIMINATION_BRACKET;
+                    // This might break if the single elimination contains a 3rd place match + round
+                    if (roundMatchCount === 1) {
+                        return COMMON_BRACKET_ROUND_TYPE.FINAL;
+                    }
+                    else {
+                        return SINGLE_ELIMINATION_BRACKET_ROUND_TYPE.SINGLE_ELIMINATION_BRACKET;
+                    }
                 case 'group':
                     return GROUP_BRACKET_ROUND_TYPE.GROUP;
                 case 'swiss':
@@ -1164,13 +1170,18 @@ const generateRoundRelations = (bracketData) => {
     const hasLowerRounds = lowerRounds.length > 0;
     const lastLowerRound = lowerRounds[lowerRounds.length - 1] || null;
     for (const [currentUpperRoundIndex, currentUpperRound] of upperRounds.entries()) {
-        const previousUpperRound = upperRounds[currentUpperRoundIndex - 1] || null;
-        const nextUpperRound = upperRounds[currentUpperRoundIndex + 1] || null;
+        const isLeftToRight = currentUpperRound.mirrorRoundType === null ||
+            currentUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.LEFT;
+        const relativePreviousUpperRound = upperRounds[currentUpperRoundIndex - 1] || null;
+        const relativeNextUpperRound = upperRounds[currentUpperRoundIndex + 1] || null;
+        const previousUpperRound = isLeftToRight ? relativePreviousUpperRound : relativeNextUpperRound;
+        const nextUpperRound = isLeftToRight ? relativeNextUpperRound : relativePreviousUpperRound;
         const currentLowerRound = lowerRounds[currentUpperRoundIndex] || null;
         const previousLowerRound = lowerRounds[currentUpperRoundIndex - 1] || null;
         const nextLowerRound = lowerRounds[currentUpperRoundIndex + 1] || null;
-        const isFirstRound = currentUpperRoundIndex === 0;
-        const isLastUpperRound = currentUpperRoundIndex === upperRounds.length - 1;
+        const isLastUpperRound = !nextUpperRound ||
+            (nextUpperRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
+                currentUpperRound.mirrorRoundType === null);
         const isFinal = currentUpperRound.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
         if (isFinal && hasLowerRounds) {
             // two to one relation
@@ -1286,7 +1297,7 @@ const generateRoundRelations = (bracketData) => {
                 rootRoundMatchFactor: firstUpperRound.matchCount / currentUpperRound.matchCount,
             });
         }
-        else if (isFirstRound) {
+        else if (currentUpperRound.isFirstRound) {
             // nothing to one relation
             if (!nextUpperRound)
                 throw new Error('nextUpperRound is null');
@@ -1351,10 +1362,10 @@ const generateMatchRelations = (bracketData, roundRelations, matchPositionMaps)
         const currentRelation = roundRelations.get(match.round.id);
         if (!currentRelation)
             throw new Error('Match round not found');
-        const { nextUpperRoundMatchPosition, nextLowerRoundMatchPosition, previousLowerRoundMatchPosition, previousUpperRoundMatchPosition, } = generateMatchRelationPositions(currentRelation, match);
+        const { nextRoundMatchPosition, previousLowerRoundMatchPosition, previousUpperRoundMatchPosition } = generateMatchRelationPositions(currentRelation, match);
         switch (currentRelation.type) {
             case 'nothing-to-one': {
-                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextUpperRoundMatchPosition);
+                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextRoundMatchPosition);
                 if (!nextMatch)
                     throw new Error('Next round match not found');
                 // means left is nothing. right is one
@@ -1403,7 +1414,7 @@ const generateMatchRelations = (bracketData, roundRelations, matchPositionMaps)
                 break;
             }
             case 'one-to-one': {
-                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextUpperRoundMatchPosition);
+                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextRoundMatchPosition);
                 const previousUpperMatch = matchPositionMaps
                     .get(currentRelation.previousRound.id)
                     ?.get(previousUpperRoundMatchPosition);
@@ -1418,12 +1429,7 @@ const generateMatchRelations = (bracketData, roundRelations, matchPositionMaps)
                     throw new Error('Previous lower round match not found');
                 // can be either one to one or two to one
                 const isLeftOne = previousUpperRoundMatchPosition === previousLowerRoundMatchPosition;
-                const isRightOne = nextUpperRoundMatchPosition === nextLowerRoundMatchPosition;
-                if (currentRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT) {
-                    console.log(match, generateMatchRelationPositions(currentRelation, match));
-                }
-                // TODO: Implement one to two
-                if (isLeftOne && isRightOne) {
+                if (isLeftOne) {
                     // one-to-one
                     matchRelations.set(match.id, {
                         type: 'one-to-one',
@@ -1435,7 +1441,7 @@ const generateMatchRelations = (bracketData, roundRelations, matchPositionMaps)
                         nextRound: currentRelation.nextRound,
                     });
                 }
-                else if (!isLeftOne) {
+                else {
                     // two-to-one
                     matchRelations.set(match.id, {
                         type: 'two-to-one',
@@ -1449,27 +1455,10 @@ const generateMatchRelations = (bracketData, roundRelations, matchPositionMaps)
                         nextRound: currentRelation.nextRound,
                     });
                 }
-                else if (!isRightOne) {
-                    const nextLowerMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextLowerRoundMatchPosition);
-                    if (!nextLowerMatch)
-                        throw new Error('Next lower round match not found');
-                    // one-to-two
-                    matchRelations.set(match.id, {
-                        type: 'one-to-two',
-                        currentMatch: match,
-                        currentRound: currentRelation.currentRound,
-                        previousMatch: previousUpperMatch,
-                        previousRound: currentRelation.previousRound,
-                        nextUpperMatch: nextMatch,
-                        nextUpperRound: currentRelation.nextRound,
-                        nextLowerMatch,
-                        nextLowerRound: nextLowerMatch.round,
-                    });
-                }
                 break;
             }
             case 'two-to-one': {
-                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextUpperRoundMatchPosition);
+                const nextMatch = matchPositionMaps.get(currentRelation.nextRound.id)?.get(nextRoundMatchPosition);
                 const previousUpperMatch = matchPositionMaps
                     .get(currentRelation.previousUpperRound.id)
                     ?.get(previousUpperRoundMatchPosition);
@@ -1525,8 +1514,7 @@ const generateMatchRelationPositions = (currentRelation, match) => {
     switch (currentRelation.type) {
         case 'nothing-to-one': {
             return {
-                nextUpperRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
-                nextLowerRoundMatchPosition: FALLBACK_MATCH_POSITION,
+                nextRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
                 previousUpperRoundMatchPosition: FALLBACK_MATCH_POSITION,
                 previousLowerRoundMatchPosition: FALLBACK_MATCH_POSITION,
             };
@@ -1535,8 +1523,7 @@ const generateMatchRelationPositions = (currentRelation, match) => {
             const previousRoundHasDoubleTheMatchCount = currentRelation.previousRoundMatchFactor === 2;
             const doubleUpperMatchCountShift = previousRoundHasDoubleTheMatchCount ? 1 : 0;
             return {
-                nextUpperRoundMatchPosition: FALLBACK_MATCH_POSITION,
-                nextLowerRoundMatchPosition: FALLBACK_MATCH_POSITION,
+                nextRoundMatchPosition: FALLBACK_MATCH_POSITION,
                 previousUpperRoundMatchPosition: (generateMatchPosition(match, currentRelation.previousRoundMatchFactor) -
                     doubleUpperMatchCountShift),
                 previousLowerRoundMatchPosition: generateMatchPosition(match, currentRelation.previousRoundMatchFactor),
@@ -1544,13 +1531,9 @@ const generateMatchRelationPositions = (currentRelation, match) => {
         }
         case 'one-to-one': {
             const previousRoundHasDoubleTheMatchCount = currentRelation.previousRoundMatchFactor === 2;
-            const nextRoundHasDoubleTheMatchCount = currentRelation.nextRoundMatchFactor === 2;
             const doubleUpperMatchCountShift = previousRoundHasDoubleTheMatchCount ? 1 : 0;
-            const doubleLowerMatchCountShift = nextRoundHasDoubleTheMatchCount ? 1 : 0;
             return {
-                nextUpperRoundMatchPosition: (generateMatchPosition(match, currentRelation.nextRoundMatchFactor) -
-                    doubleLowerMatchCountShift),
-                nextLowerRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
+                nextRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
                 previousUpperRoundMatchPosition: (generateMatchPosition(match, currentRelation.previousRoundMatchFactor) -
                     doubleUpperMatchCountShift),
                 previousLowerRoundMatchPosition: generateMatchPosition(match, currentRelation.previousRoundMatchFactor),
@@ -1558,16 +1541,14 @@ const generateMatchRelationPositions = (currentRelation, match) => {
         }
         case 'two-to-one': {
             return {
-                nextLowerRoundMatchPosition: FALLBACK_MATCH_POSITION,
-                nextUpperRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
+                nextRoundMatchPosition: generateMatchPosition(match, currentRelation.nextRoundMatchFactor),
                 previousUpperRoundMatchPosition: generateMatchPosition(match, currentRelation.previousUpperRoundMatchFactor),
                 previousLowerRoundMatchPosition: generateMatchPosition(match, currentRelation.previousLowerRoundMatchFactor),
             };
         }
         case 'two-to-nothing': {
             return {
-                nextLowerRoundMatchPosition: FALLBACK_MATCH_POSITION,
-                nextUpperRoundMatchPosition: FALLBACK_MATCH_POSITION,
+                nextRoundMatchPosition: FALLBACK_MATCH_POSITION,
                 previousUpperRoundMatchPosition: generateMatchPosition(match, currentRelation.previousUpperRoundMatchFactor),
                 previousLowerRoundMatchPosition: generateMatchPosition(match, currentRelation.previousLowerRoundMatchFactor),
             };
@@ -1613,9 +1594,9 @@ const generateMatchParticipantMap = (bracketData) => {
         let lossesTilNow = 0;
         let tiesTilNow = 0;
         for (const matchParticipantMatch of participant.matches.values()) {
-            const isWinner = matchParticipantMatch.bracketMatch.winner === matchParticipantMatch.side;
-            const isLooser = matchParticipantMatch.bracketMatch.winner &&
-                matchParticipantMatch.bracketMatch.winner !== matchParticipantMatch.side;
+            const isWinner = matchParticipantMatch.bracketMatch.winnerSide === matchParticipantMatch.side;
+            const isLooser = matchParticipantMatch.bracketMatch.winnerSide &&
+                matchParticipantMatch.bracketMatch.winnerSide !== matchParticipantMatch.side;
             const isTie = matchParticipantMatch.bracketMatch.status === 'completed' && !matchParticipantMatch.bracketMatch.winner;
             if (isWinner) {
                 winsTilNow++;
@@ -1724,8 +1705,8 @@ const generateBracketRoundSwissGroupMaps = (bracketData, matchParticipantMap) =>
         }
         const emptyMatchIds = [];
         for (const match of bracketRound.matches.values()) {
-            const participantHome = match.home ? (matchParticipantMap.get(match.home) ?? null) : null;
-            const participantAway = match.away ? (matchParticipantMap.get(match.away) ?? null) : null;
+            const participantHome = match.home ? (matchParticipantMap.get(match.home.id) ?? null) : null;
+            const participantAway = match.away ? (matchParticipantMap.get(match.away.id) ?? null) : null;
             const anyParticipant = participantHome || participantAway;
             if (!anyParticipant) {
                 emptyMatchIds.push(match.id);
@@ -1772,7 +1753,7 @@ const generateBracketDataForEthlete = (source) => {
         if (bracketData.rounds.some((r) => r.id === currentItem.round.id)) {
             throw new Error(`Round with id ${currentItem.round.id} already exists in the bracket data.`);
         }
-        const roundType = generateRoundTypeFromEthleteRoundType(currentItem.round.type, tournamentMode);
+        const roundType = generateRoundTypeFromEthleteRoundType(currentItem.round.type, tournamentMode, currentItem.matches.length);
         const bracketRound = {
             type: roundType,
             id: currentItem.round.id,
@@ -1800,39 +1781,46 @@ const generateBracketDataForEthlete = (source) => {
 };
 const generateAndSetBracketMatchWithParticipants = (match, options) => {
     const matchId = match.id;
-    const { bracketData, bracketRound, currentIndexInRound } = options;
+    const { bracketData, bracketRound, currentIndexInRound, participantCounter } = options;
+    let localParticipantCounter = participantCounter;
     const bracketMatch = {
         id: matchId,
         indexInRound: currentIndexInRound,
         position: (currentIndexInRound + 1),
         data: match.data,
         round: bracketRound,
-        home: match.home,
-        away: match.away,
-        winner: match.winner,
+        home: null,
+        away: null,
         status: match.status,
+        winnerSide: match.winner,
+        winner: null,
     };
     bracketData.matches.set(matchId, bracketMatch);
     bracketRound.matches.set(matchId, bracketMatch);
-    const participants = [bracketMatch.home, bracketMatch.away];
-    for (const [participantIndex, participant] of participants.entries()) {
-        if (!participant)
+    const participantIds = [match.home, match.away];
+    for (const [participantIndex, participantId] of participantIds.entries()) {
+        if (!participantId)
             continue;
-        const side = participantIndex === 0 ? 'Homeside' : 'Awayside';
-        if (!bracketData.participants.has(participant)) {
-            bracketData.participants.set(participant, {
-                id: participant,
+        const side = participantIndex === 0 ? 'home' : 'away';
+        if (!bracketData.participants.has(participantId)) {
+            bracketData.participants.set(participantId, {
+                id: participantId,
+                shortId: `p${localParticipantCounter++}`,
                 name: `${side} ${currentIndexInRound}`,
                 matches: new Map(),
             });
         }
-        const participantData = bracketData.participants.get(participant);
+        const participantData = bracketData.participants.get(participantId);
         if (!participantData.matches.has(bracketMatch.id)) {
             participantData.matches.set(bracketMatch.id, {
-                side: bracketMatch.home === participant ? 'home' : 'away',
+                side: match.home === participantId ? 'home' : 'away',
                 bracketMatch,
             });
         }
+        bracketMatch[side] = participantData;
+        if (bracketMatch.winnerSide === side) {
+            bracketMatch.winner = participantData;
+        }
     }
     return bracketMatch;
 };
@@ -1852,11 +1840,12 @@ const generateBracketData = (source, options) => {
     let currentUpperBracketIndex = 0;
     let currentLowerBracketIndex = 0;
     const splitRoundsRest = [];
-    for (const round of source.rounds) {
+    for (const [roundIndex, round] of source.rounds.entries()) {
         const isLowerBracket = round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET;
         const matches = source.matches.filter((m) => m.roundId === round.id);
         const roundId = round.id;
         const shouldSplitRound = shouldSplitRoundsInTwo && matches.length % 2 === 0;
+        const isFirstRound = roundIndex === 0;
         if (shouldSplitRound) {
             const firstHalfMatchesMaxIndex = matches.length / 2 - 1;
             const firstHalfRoundId = `${roundId}--half-1`;
@@ -1871,6 +1860,7 @@ const generateBracketData = (source, options) => {
                 matchCount: matches.length / 2,
                 matches: new Map(),
                 mirrorRoundType: BRACKET_ROUND_MIRROR_TYPE.LEFT,
+                isFirstRound,
             };
             const bracketRoundSecondHalf = {
                 type: round.type,
@@ -1882,6 +1872,7 @@ const generateBracketData = (source, options) => {
                 matchCount: matches.length / 2,
                 matches: new Map(),
                 mirrorRoundType: BRACKET_ROUND_MIRROR_TYPE.RIGHT,
+                isFirstRound,
             };
             bracketData.roundIds.push(firstHalfRoundId);
             bracketData.rounds.set(firstHalfRoundId, bracketRoundFirstHalf);
@@ -1891,15 +1882,20 @@ const generateBracketData = (source, options) => {
                 const matchSecond = matches[firstHalfMatchesMaxIndex + 1 + index];
                 if (!matchFirst || !matchSecond)
                     throw new Error('Match not found');
+                const participantCounter = bracketData.participants.size;
                 const bracketMatchFirst = generateAndSetBracketMatchWithParticipants(matchFirst, {
                     bracketData,
                     bracketRound: bracketRoundFirstHalf,
                     currentIndexInRound: index,
+                    participantCounter,
                 });
+                // The participant counter might have changed after the first half
+                const updatedParticipantCounter = bracketData.participants.size;
                 const bracketMatchSecond = generateAndSetBracketMatchWithParticipants(matchSecond, {
                     bracketData,
                     bracketRound: bracketRoundSecondHalf,
                     currentIndexInRound: index,
+                    participantCounter: updatedParticipantCounter,
                 });
                 bracketData.matchIds.push(bracketMatchFirst.id, bracketMatchSecond.id);
             }
@@ -1915,15 +1911,18 @@ const generateBracketData = (source, options) => {
                 matchCount: matches.length,
                 matches: new Map(),
                 mirrorRoundType: null,
+                isFirstRound,
             };
             bracketData.roundIds.push(roundId);
             bracketData.rounds.set(roundId, bracketRound);
             let currentIndexInRound = 0;
             for (const match of matches) {
+                const participantCounter = bracketData.participants.size;
                 const bracketMatch = generateAndSetBracketMatchWithParticipants(match, {
                     bracketData,
                     bracketRound,
                     currentIndexInRound,
+                    participantCounter,
                 });
                 bracketData.matchIds.push(bracketMatch.id);
                 currentIndexInRound++;
@@ -1953,29 +1952,30 @@ const generateBracketData = (source, options) => {
     return bracketData;
 };
 
-const path = (d, options) => `<path d="${d}" stroke="currentColor" fill="none" stroke-width="${options.width}" stroke-dasharray="${options.dashArray}" stroke-dashoffset="${options.dashOffset}" />`;
+const path = (d, options) => `<path d="${d.replace(/\s+/g, ' ').trim()}" stroke="currentColor" fill="none" stroke-width="${options.width}" stroke-dasharray="${options.dashArray}" stroke-dashoffset="${options.dashOffset}" class="${options.className}" />`;
 const curve = (from, to, direction, options) => {
     const fromInline = from.inline.end;
-    const fromBlock = from.block.center;
     const toInline = to.inline.start;
     const toBlock = to.block.center;
-    const curveAmount = options.curveAmount;
+    const fromBlock = from.block.center;
+    const startingCurveAmount = options.lineStartingCurveAmount;
+    const endingCurveAmount = options.lineEndingCurveAmount;
     const totalSpace = toInline - fromInline;
-    const totalSpaceMinusCurve = totalSpace - curveAmount * 2;
+    const totalSpaceMinusCurve = totalSpace - startingCurveAmount - endingCurveAmount;
     const lineLength = totalSpaceMinusCurve / 2;
     const straightLeftEnd = fromInline + lineLength;
     const straightRightStart = toInline - lineLength;
     // first 90 degree curve down
     const firstCurveStartX = straightLeftEnd;
-    const firstCurveEndX = straightLeftEnd + curveAmount;
-    const firstCurveEndY = direction === 'down' ? fromBlock + curveAmount : fromBlock - curveAmount;
-    const firstCurveBezierX = straightLeftEnd + curveAmount;
+    const firstCurveEndX = straightLeftEnd + startingCurveAmount;
+    const firstCurveEndY = direction === 'down' ? fromBlock + startingCurveAmount : fromBlock - startingCurveAmount;
+    const firstCurveBezierX = straightLeftEnd + startingCurveAmount;
     const firstCurveBezierY = fromBlock;
     // second 90 degree curve to the right
-    const secondCurveStartY = direction === 'down' ? toBlock - curveAmount : toBlock + curveAmount;
+    const secondCurveStartY = direction === 'down' ? toBlock - endingCurveAmount : toBlock + endingCurveAmount;
     const secondCurveEndX = straightRightStart;
     const secondCurveEndY = toBlock;
-    const secondCurveBezierX = straightRightStart - curveAmount;
+    const secondCurveBezierX = straightRightStart - endingCurveAmount;
     const secondCurveBezierY = toBlock;
     const pathStr = `
     M ${fromInline} ${fromBlock} 
@@ -1984,7 +1984,40 @@ const curve = (from, to, direction, options) => {
     V ${secondCurveStartY} 
     Q ${secondCurveBezierX} ${secondCurveBezierY}, ${secondCurveEndX} ${secondCurveEndY} 
     H ${toInline}
-  `.replace(/\s+/g, ' ');
+  `;
+    return path(pathStr, options.path);
+};
+const curveInverted = (from, to, direction, options) => {
+    const fromInline = from.inline.start;
+    const fromBlock = from.block.center;
+    const toInline = to.inline.end;
+    const toBlock = to.block.center;
+    const startingCurveAmount = options.lineStartingCurveAmount;
+    const endingCurveAmount = options.lineEndingCurveAmount;
+    const totalSpace = fromInline - toInline;
+    const totalSpaceMinusCurve = totalSpace - startingCurveAmount - endingCurveAmount;
+    const lineLength = totalSpaceMinusCurve / 2;
+    const straightRightEnd = fromInline - lineLength;
+    const straightLeftStart = toInline + lineLength;
+    const firstCurveStartX = straightRightEnd;
+    const firstCurveEndX = straightRightEnd - startingCurveAmount;
+    const firstCurveEndY = direction === 'down' ? fromBlock + startingCurveAmount : fromBlock - startingCurveAmount;
+    const firstCurveBezierX = straightRightEnd - startingCurveAmount;
+    const firstCurveBezierY = fromBlock;
+    // second 90 degree curve to the right
+    const secondCurveStartY = direction === 'down' ? toBlock - endingCurveAmount : toBlock + endingCurveAmount;
+    const secondCurveEndX = straightLeftStart;
+    const secondCurveEndY = toBlock;
+    const secondCurveBezierX = straightLeftStart + endingCurveAmount;
+    const secondCurveBezierY = toBlock;
+    const pathStr = `
+    M ${fromInline} ${fromBlock} 
+    H ${firstCurveStartX} 
+    Q ${firstCurveBezierX} ${firstCurveBezierY}, ${firstCurveEndX} ${firstCurveEndY} 
+    V ${secondCurveStartY}
+    Q ${secondCurveBezierX} ${secondCurveBezierY}, ${secondCurveEndX} ${secondCurveEndY} 
+    H ${toInline}
+  `;
     return path(pathStr, options.path);
 };
 const line = (from, to, options) => {
@@ -2062,10 +2095,14 @@ const drawMan = (items, firstRounds, dimensions) => {
                 matchHeight,
                 rowGap,
             };
-            // TODO: No lines for now
-            if (item.matchRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT) {
-                continue;
-            }
+            const currentMatchParticipantsShortIds = [
+                item.matchRelation.currentMatch.home?.shortId,
+                item.matchRelation.currentMatch.away?.shortId,
+            ]
+                .filter((id) => !!id)
+                .join(' ');
+            const pathOptions = { ...dimensions.path, className: currentMatchParticipantsShortIds };
+            const currentMatchPosition = getMatchPosition(round, item.matchRelation.currentMatch.id, staticMeasurements);
             // We only draw the left side of the match relation
             switch (item.matchRelation.type) {
                 case 'nothing-to-one': {
@@ -2073,31 +2110,36 @@ const drawMan = (items, firstRounds, dimensions) => {
                 }
                 case 'one-to-nothing':
                 case 'one-to-one': {
-                    const previous = getMatchPosition(items.get(item.matchRelation.previousRound.id), item.matchRelation.previousMatch.id, staticMeasurements);
-                    const current = getMatchPosition(round, item.matchRelation.currentMatch.id, staticMeasurements);
+                    const previousMatchPosition = getMatchPosition(items.get(item.matchRelation.previousRound.id), item.matchRelation.previousMatch.id, staticMeasurements);
                     // draw a straight line
-                    svgParts.push(line(previous, current, { path: dimensions.path }));
-                    break;
-                }
-                case 'one-to-two': {
-                    const nextUpper = getMatchPosition(items.get(item.matchRelation.nextUpperRound.id), item.matchRelation.nextUpperMatch.id, staticMeasurements);
-                    const nextLower = getMatchPosition(items.get(item.matchRelation.nextLowerRound.id), item.matchRelation.nextLowerMatch.id, staticMeasurements);
-                    const current = getMatchPosition(round, item.matchRelation.currentMatch.id, staticMeasurements);
-                    // const curveOptions: CurveOptions = { ...dimensions.curve, path: dimensions.path };
-                    // // draw two lines that merge into one in the middle
-                    // svgParts.push(curve(nextUpper, current, 'down', curveOptions));
-                    // svgParts.push(curve(nextLower, current, 'up', curveOptions));
+                    svgParts.push(line(previousMatchPosition, currentMatchPosition, { path: pathOptions }));
                     break;
                 }
                 case 'two-to-nothing':
                 case 'two-to-one': {
                     const previousUpper = getMatchPosition(items.get(item.matchRelation.previousUpperRound.id), item.matchRelation.previousUpperMatch.id, staticMeasurements);
                     const previousLower = getMatchPosition(items.get(item.matchRelation.previousLowerRound.id), item.matchRelation.previousLowerMatch.id, staticMeasurements);
-                    const current = getMatchPosition(round, item.matchRelation.currentMatch.id, staticMeasurements);
-                    const curveOptions = { ...dimensions.curve, path: dimensions.path };
+                    const curveOptions = {
+                        ...dimensions.curve,
+                        path: { ...dimensions.path, className: '' },
+                    };
+                    const curveFn = item.roundRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT ? curveInverted : curve;
                     // draw two lines that merge into one in the middle
-                    svgParts.push(curve(previousUpper, current, 'down', curveOptions));
-                    svgParts.push(curve(previousLower, current, 'up', curveOptions));
+                    svgParts.push(curveFn(previousUpper, currentMatchPosition, 'down', {
+                        ...curveOptions,
+                        path: { ...curveOptions.path, className: item.matchRelation.previousUpperMatch.winner?.shortId || '' },
+                    }));
+                    svgParts.push(curveFn(previousLower, currentMatchPosition, 'up', {
+                        ...curveOptions,
+                        path: { ...curveOptions.path, className: item.matchRelation.previousLowerMatch.winner?.shortId || '' },
+                    }));
+                    if (item.matchRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
+                        item.matchRelation.type === 'two-to-one' &&
+                        item.matchRelation.nextRound.mirrorRoundType === null) {
+                        // draw a straight line for the special case of connecting the final match to the mirrored semi final match
+                        const next = getMatchPosition(items.get(item.matchRelation.nextRound.id), item.matchRelation.nextMatch.id, staticMeasurements);
+                        svgParts.push(line(next, currentMatchPosition, { path: pathOptions }));
+                    }
                     break;
                 }
             }
@@ -2184,10 +2226,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
 const generateBracketGridItems = (bracketData, roundTypeMap, swissGroups, roundRelations, matchRelations, options) => {
     const roundHeaderComponent = options.headerComponent ?? NewBracketDefaultRoundHeaderComponent;
     const matchComponent = options.matchComponent ?? NewBracketDefaultMatchComponent;
+    const finalMatchComponent = options.finalMatchComponent ?? matchComponent;
     const optionsWithDefaults = {
         ...options,
         headerComponent: roundHeaderComponent,
         matchComponent: matchComponent,
+        finalMatchComponent: finalMatchComponent,
     };
     switch (bracketData.mode) {
         case TOURNAMENT_MODE.DOUBLE_ELIMINATION:
@@ -2234,6 +2278,7 @@ const generateGenericGridPlacements = (bracketData, roundTypeMap, roundRelations
                 rowStart: currentMatchRow,
                 rowEnd: ++currentMatchRow,
                 component: options.headerComponent,
+                className: 'et-bracket-new-item et-bracket-round-header-container',
                 roundRelation,
                 data: {
                     bracketRound: round,
@@ -2249,15 +2294,17 @@ const generateGenericGridPlacements = (bracketData, roundTypeMap, roundRelations
                 throw new Error('Match relation is missing');
             }
             const baseRow = match.indexInRound * matchHeight;
+            const participantShortIds = [match.home?.shortId, match.away?.shortId].filter((id) => !!id).join(' ');
             const matchItem = {
                 type: 'match',
                 id: match.id,
                 layoutId: `${match.id}-layout`,
                 rowStart: baseRow + currentMatchRow,
                 rowEnd: baseRow + currentMatchRow + matchHeight,
-                component: options.matchComponent,
+                component: round.type === COMMON_BRACKET_ROUND_TYPE.FINAL ? options.finalMatchComponent : options.matchComponent,
                 matchRelation,
                 roundRelation,
+                className: `et-bracket-new-item et-bracket-match-container ${participantShortIds}`,
                 data: {
                     bracketRound: round,
                     bracketMatch: match,
@@ -2278,23 +2325,47 @@ const generateSwissWithEliminationGridPlacements = (bracketData, roundTypeMap, s
     return gridItems;
 };
 
+const createJourneyHighlight = (bracketData) => {
+    let styles = '';
+    for (const participant of bracketData.participants.values()) {
+        styles += `
+          .et-new-bracket-host:has(.${participant.shortId}:hover) {
+            path, .et-bracket-match-container {
+                opacity: 0.5;
+            }
+
+            .${participant.shortId} {
+                opacity: 1 !important;
+            }
+          }
+        `;
+    }
+    return styles.replace(/\s+/g, ' ').trim();
+};
+
 class NewBracketComponent {
+    #domSanitizer;
+    #elementId;
     constructor() {
         this.#domSanitizer = inject(DomSanitizer);
+        this.#elementId = createComponentId('et-new-bracket');
         this.source = input.required();
         this.columnWidth = input(250, { transform: numberAttribute });
         this.matchHeight = input(75, { transform: numberAttribute });
         this.roundHeaderHeight = input(50, { transform: numberAttribute });
         this.columnGap = input(60, { transform: numberAttribute });
         this.rowGap = input(30, { transform: numberAttribute });
-        this.curveAmount = input(20, { transform: numberAttribute });
+        this.lineStartingCurveAmount = input(10, { transform: numberAttribute });
+        this.lineEndingCurveAmount = input(0, { transform: numberAttribute });
         this.lineWidth = input(2, { transform: numberAttribute });
         this.lineDashArray = input(0, { transform: numberAttribute });
         this.lineDashOffset = input(0, { transform: numberAttribute });
+        this.disableJourneyHighlight = input(false, { transform: booleanAttribute });
         this.layout = input(BRACKET_DATA_LAYOUT.LEFT_TO_RIGHT);
         this.hideRoundHeaders = input(false, { transform: booleanAttribute });
         this.roundHeaderComponent = input();
         this.matchComponent = input();
+        this.finalMatchComponent = input();
         this.bracketData = computed(() => generateBracketData(this.source(), { layout: this.layout() }));
         this.roundTypeMap = computed(() => generateBracketRoundTypeMap(this.bracketData()));
         this.matchParticipantMap = computed(() => generateMatchParticipantMap(this.bracketData()));
@@ -2306,6 +2377,7 @@ class NewBracketComponent {
             includeRoundHeaders: !this.hideRoundHeaders(),
             headerComponent: this.roundHeaderComponent(),
             matchComponent: this.matchComponent(),
+            finalMatchComponent: this.finalMatchComponent(),
         }));
         this.definitions = computed(() => generateBracketGridDefinitions(this.bracketData(), this.roundTypeMap(), {
             includeRoundHeaders: !this.hideRoundHeaders(),
@@ -2319,7 +2391,8 @@ class NewBracketComponent {
             rowGap: this.rowGap(),
             gridDefinitions: this.definitions(),
             curve: {
-                curveAmount: this.curveAmount(),
+                lineEndingCurveAmount: this.lineEndingCurveAmount(),
+                lineStartingCurveAmount: this.lineStartingCurveAmount(),
             },
             path: {
                 dashArray: this.lineDashArray(),
@@ -2327,17 +2400,45 @@ class NewBracketComponent {
                 width: this.lineWidth(),
             },
         })));
+        this.journeyHighlight = computed(() => this.disableJourneyHighlight() ? null : createJourneyHighlight(this.bracketData()));
+        const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        if (!isBrowser)
+            return;
+        const renderer = inject(Renderer2);
+        const styleId = `et-new-bracket-journey-highlight--${this.#elementId}`;
+        let oldStyleEl = null;
+        effect(() => {
+            const newHighlightStyle = this.journeyHighlight();
+            const head = document.head;
+            if (oldStyleEl) {
+                renderer.removeChild(head, oldStyleEl);
+            }
+            if (newHighlightStyle) {
+                const el = renderer.createElement('style');
+                renderer.setAttribute(el, 'id', styleId);
+                renderer.appendChild(el, renderer.createText(newHighlightStyle));
+                renderer.appendChild(head, el);
+                oldStyleEl = el;
+            }
+            else {
+                oldStyleEl = null;
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (oldStyleEl) {
+                renderer.removeChild(document.head, oldStyleEl);
+            }
+        });
     }
-    #domSanitizer;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NewBracketComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: NewBracketComponent, isStandalone: true, selector: "et-new-bracket", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, matchHeight: { classPropertyName: "matchHeight", publicName: "matchHeight", isSignal: true, isRequired: false, transformFunction: null }, roundHeaderHeight: { classPropertyName: "roundHeaderHeight", publicName: "roundHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, columnGap: { classPropertyName: "columnGap", publicName: "columnGap", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, curveAmount: { classPropertyName: "curveAmount", publicName: "curveAmount", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, lineDashArray: { classPropertyName: "lineDashArray", publicName: "lineDashArray", isSignal: true, isRequired: false, transformFunction: null }, lineDashOffset: { classPropertyName: "lineDashOffset", publicName: "lineDashOffset", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hideRoundHeaders: { classPropertyName: "hideRoundHeaders", publicName: "hideRoundHeaders", isSignal: true, isRequired: false, transformFunction: null }, roundHeaderComponent: { classPropertyName: "roundHeaderComponent", publicName: "roundHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, matchComponent: { classPropertyName: "matchComponent", publicName: "matchComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-new-bracket-host" }, ngImport: i0, template: "<section\n  [style.--_cw.px]=\"columnWidth()\"\n  [style.--_mh.px]=\"matchHeight()\"\n  [style.--_rhh.px]=\"roundHeaderHeight()\"\n  [style.--_cg.px]=\"columnGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"drawManData()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\" class=\"et-bracket-new-round\">\n      @for (item of round.items.values(); track item.layoutId) {\n        <li [style.--_r]=\"item.rowStart + ' / ' + item.rowEnd\" class=\"et-bracket-new-item\">\n          <ng-container *ngComponentOutlet=\"item.component; inputs: item.data\" />\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;gap:var(--_cg);grid-auto-columns:var(--_cw);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:1;list-style:none;margin:0;padding:0;gap:var(--_rg);grid-template-rows:var(--_rhh);grid-auto-rows:var(--_mh)}.et-bracket-new-item{grid-row:var(--_r);place-self:center}.et-bracket-new-svg{grid-column:1/calc(var(--_bcc) + 1);grid-row:1/2;inline-size:100%;block-size:100%}.et-bracket-new-svg path{color:var(--bracket-line-color)}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: NewBracketComponent, isStandalone: true, selector: "et-new-bracket", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, matchHeight: { classPropertyName: "matchHeight", publicName: "matchHeight", isSignal: true, isRequired: false, transformFunction: null }, roundHeaderHeight: { classPropertyName: "roundHeaderHeight", publicName: "roundHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, columnGap: { classPropertyName: "columnGap", publicName: "columnGap", isSignal: true, isRequired: false, transformFunction: null }, rowGap: { classPropertyName: "rowGap", publicName: "rowGap", isSignal: true, isRequired: false, transformFunction: null }, lineStartingCurveAmount: { classPropertyName: "lineStartingCurveAmount", publicName: "lineStartingCurveAmount", isSignal: true, isRequired: false, transformFunction: null }, lineEndingCurveAmount: { classPropertyName: "lineEndingCurveAmount", publicName: "lineEndingCurveAmount", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, lineDashArray: { classPropertyName: "lineDashArray", publicName: "lineDashArray", isSignal: true, isRequired: false, transformFunction: null }, lineDashOffset: { classPropertyName: "lineDashOffset", publicName: "lineDashOffset", isSignal: true, isRequired: false, transformFunction: null }, disableJourneyHighlight: { classPropertyName: "disableJourneyHighlight", publicName: "disableJourneyHighlight", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hideRoundHeaders: { classPropertyName: "hideRoundHeaders", publicName: "hideRoundHeaders", isSignal: true, isRequired: false, transformFunction: null }, roundHeaderComponent: { classPropertyName: "roundHeaderComponent", publicName: "roundHeaderComponent", isSignal: true, isRequired: false, transformFunction: null }, matchComponent: { classPropertyName: "matchComponent", publicName: "matchComponent", isSignal: true, isRequired: false, transformFunction: null }, finalMatchComponent: { classPropertyName: "finalMatchComponent", publicName: "finalMatchComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-new-bracket-host" }, ngImport: i0, template: "<section\n  [style.--_cw.px]=\"columnWidth()\"\n  [style.--_mh.px]=\"matchHeight()\"\n  [style.--_rhh.px]=\"hideRoundHeaders() ? matchHeight() : roundHeaderHeight()\"\n  [style.--_cg.px]=\"columnGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"drawManData()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\" class=\"et-bracket-new-round\">\n      @for (item of round.items.values(); track item.layoutId) {\n        <li [style.--_r]=\"item.rowStart + ' / ' + item.rowEnd\" [class]=\"item.className\">\n          <ng-container *ngComponentOutlet=\"item.component; inputs: item.data\" />\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;gap:var(--_cg);grid-auto-columns:var(--_cw);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:1;list-style:none;margin:0;padding:0;gap:var(--_rg);grid-template-rows:var(--_rhh);grid-auto-rows:var(--_mh)}.et-bracket-new-item{grid-row:var(--_r);place-self:center;transition:opacity .2s}.et-bracket-new-svg{grid-column:1/calc(var(--_bcc) + 1);grid-row:1/2;inline-size:100%;block-size:100%}.et-bracket-new-svg path{color:var(--bracket-line-color);transition:opacity .2s}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NewBracketComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-new-bracket', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-new-bracket-host',
-                    }, imports: [NgComponentOutlet], template: "<section\n  [style.--_cw.px]=\"columnWidth()\"\n  [style.--_mh.px]=\"matchHeight()\"\n  [style.--_rhh.px]=\"roundHeaderHeight()\"\n  [style.--_cg.px]=\"columnGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"drawManData()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\" class=\"et-bracket-new-round\">\n      @for (item of round.items.values(); track item.layoutId) {\n        <li [style.--_r]=\"item.rowStart + ' / ' + item.rowEnd\" class=\"et-bracket-new-item\">\n          <ng-container *ngComponentOutlet=\"item.component; inputs: item.data\" />\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;gap:var(--_cg);grid-auto-columns:var(--_cw);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:1;list-style:none;margin:0;padding:0;gap:var(--_rg);grid-template-rows:var(--_rhh);grid-auto-rows:var(--_mh)}.et-bracket-new-item{grid-row:var(--_r);place-self:center}.et-bracket-new-svg{grid-column:1/calc(var(--_bcc) + 1);grid-row:1/2;inline-size:100%;block-size:100%}.et-bracket-new-svg path{color:var(--bracket-line-color)}\n"] }]
-        }] });
+                    }, imports: [NgComponentOutlet], template: "<section\n  [style.--_cw.px]=\"columnWidth()\"\n  [style.--_mh.px]=\"matchHeight()\"\n  [style.--_rhh.px]=\"hideRoundHeaders() ? matchHeight() : roundHeaderHeight()\"\n  [style.--_cg.px]=\"columnGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"drawManData()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\" class=\"et-bracket-new-round\">\n      @for (item of round.items.values(); track item.layoutId) {\n        <li [style.--_r]=\"item.rowStart + ' / ' + item.rowEnd\" [class]=\"item.className\">\n          <ng-container *ngComponentOutlet=\"item.component; inputs: item.data\" />\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;gap:var(--_cg);grid-auto-columns:var(--_cw);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:1;list-style:none;margin:0;padding:0;gap:var(--_rg);grid-template-rows:var(--_rhh);grid-auto-rows:var(--_mh)}.et-bracket-new-item{grid-row:var(--_r);place-self:center;transition:opacity .2s}.et-bracket-new-svg{grid-column:1/calc(var(--_bcc) + 1);grid-row:1/2;inline-size:100%;block-size:100%}.et-bracket-new-svg path{color:var(--bracket-line-color);transition:opacity .2s}\n"] }]
+        }], ctorParameters: () => [] });
 
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,