@ethlete/cdk 4.63.1 → 4.64.0

package/fesm2022/ethlete-cdk.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, ViewContainerRef, Directive, input, booleanAttribute, computed, isDevMode, model, contentChild, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, ElementRef, Injector, HostBinding, Input, signal, numberAttribute, Renderer2, DOCUMENT, viewChild, viewChildren, ContentChild, Injectable, ChangeDetectorRef, ViewChild, ContentChildren, assertInInjectionContext, forwardRef, runInInjectionContext, EventEmitter, Output, ViewChildren, Optional, Inject, NgZone, HostListener, SkipSelf, NgModule, DestroyRef, isSignal, IterableDiffers, ComponentFactoryResolver, HostAttributeToken } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, ViewContainerRef, Directive, input, booleanAttribute, computed, isDevMode, model, contentChild, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, ElementRef, Injector, HostBinding, Input, numberAttribute, Renderer2, DOCUMENT, signal, viewChild, viewChildren, ContentChild, Injectable, ChangeDetectorRef, ViewChild, ContentChildren, assertInInjectionContext, forwardRef, runInInjectionContext, EventEmitter, Output, ViewChildren, Optional, Inject, NgZone, HostListener, SkipSelf, NgModule, DestroyRef, isSignal, IterableDiffers, ComponentFactoryResolver, HostAttributeToken } from '@angular/core';
 import * as i2 from '@angular/cdk/portal';
 import { CdkPortal, PortalModule, ComponentPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
 import { DomSanitizer, Title } from '@angular/platform-browser';
@@ -7,7 +7,7 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
 import { toObservable, takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
 import { map, switchMap, combineLatest, pairwise, tap, BehaviorSubject, takeUntil, skip, of, merge, timer, takeWhile, filter, fromEvent, Subject, Observable, startWith, debounceTime, withLatestFrom, distinctUntilChanged, take, skipUntil, skipWhile, catchError, throwError, defer, partition, from, finalize, Subscription } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
-import { AsyncPipe, JsonPipe, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT as DOCUMENT$1, Location, NgStyle } from '@angular/common';
+import { AsyncPipe, NgComponentOutlet, NgClass, NgTemplateOutlet, DOCUMENT as DOCUMENT$1, Location, NgStyle } from '@angular/common';
 import * as i1 from '@ethlete/core';
 import { Memo, createComponentId, signalHostAttributes, signalHostClasses, createDestroy, 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, AnimatedLifecycleDirective, ANIMATED_LIFECYCLE_TOKEN, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, SmartBlockScrollStrategy, signalElementDimensions, signalElementScrollState, createIsRenderedSignal, createCanAnimateSignal, useCursorDragScroll, signalElementIntersection, signalElementChildren, getIntersectionInfo, getElementScrollCoordinates, ClickObserverService, RootBoundaryDirective, elementCanScroll, cloneFormGroup, getFormGroupValue, ViewportService, injectRoute, ROOT_BOUNDARY_TOKEN, injectQueryParam, RouterStateService, fromNextFrame, isElementVisible, AnimatedIfDirective, FocusVisibleService, inferMimeType, TypedQueryList } from '@ethlete/core';
 import { extractQuery, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, QueryDirective, queryComputed, switchQueryState, shouldRetryRequest, ExperimentalQuery, isClassValidatorError, isSymfonyFormViolationListError, isSymfonyListError } from '@ethlete/query';
@@ -1344,10 +1344,10 @@ const createMatchesMapBase = (source, rounds, participants) => {
 
 const createParticipantsMapBase = (source) => {
     const map = new BracketMap();
-    const participantIds = new Set(source.matches
+    const participantIds = source.matches
         .map((m) => [m.home, m.away])
         .flat()
-        .filter((p) => !!p));
+        .filter((p) => !!p);
     for (const [index, participantId] of participantIds.entries()) {
         const participantBase = {
             id: participantId,
@@ -1584,13 +1584,13 @@ class NewBracketDefaultMatchComponent {
         this.bracketMatch = input.required(...(ngDevMode ? [{ debugName: "bracketMatch" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDefaultMatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.2", type: NewBracketDefaultMatchComponent, isStandalone: true, selector: "et-new-bracket-default-match", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketMatch: { classPropertyName: "bracketMatch", publicName: "bracketMatch", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-match-host" }, ngImport: i0, template: ` {{ bracketMatch().id }} `, isInline: true, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:250px;block-size:75px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.2", type: NewBracketDefaultMatchComponent, isStandalone: true, selector: "et-new-bracket-default-match", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null }, bracketMatch: { classPropertyName: "bracketMatch", publicName: "bracketMatch", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-match-host" }, ngImport: i0, template: ` {{ bracketMatch().id }} `, isInline: true, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDefaultMatchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-new-bracket-default-match', template: ` {{ bracketMatch().id }} `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-new-bracket-default-match-host',
-                    }, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:250px;block-size:75px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"] }]
+                    }, styles: [".et-new-bracket-default-match-host{display:block;padding:8px;border:1px solid yellow;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;font-size:12px}\n"] }]
         }] });
 
 class NewBracketDefaultRoundHeaderComponent {
@@ -1598,13 +1598,13 @@ class NewBracketDefaultRoundHeaderComponent {
         this.bracketRound = input.required(...(ngDevMode ? [{ debugName: "bracketRound" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.2", type: NewBracketDefaultRoundHeaderComponent, isStandalone: true, selector: "et-new-bracket-default-round-header", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-round-header-host" }, ngImport: i0, template: ` {{ bracketRound().name }} `, isInline: true, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:250px;block-size:50px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.2", type: NewBracketDefaultRoundHeaderComponent, isStandalone: true, selector: "et-new-bracket-default-round-header", inputs: { bracketRound: { classPropertyName: "bracketRound", publicName: "bracketRound", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-new-bracket-default-round-header-host" }, ngImport: i0, template: ` {{ bracketRound().name }} `, isInline: true, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDefaultRoundHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-new-bracket-default-round-header', template: ` {{ bracketRound().name }} `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-new-bracket-default-round-header-host',
-                    }, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:250px;block-size:50px;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"] }]
+                    }, styles: [".et-new-bracket-default-round-header-host{display:block;padding:8px;border:1px solid green;inline-size:100%;block-size:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box}\n"] }]
         }] });
 
 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}" />`;
@@ -1648,6 +1648,1158 @@ const linePath = (from, to, options) => {
     return path(`M ${from.inline.end} ${from.block.center} L ${to.inline.start} ${to.block.center}`, options.path);
 };
 
+const makePos = (dimensions) => ({
+    block: {
+        start: dimensions.top,
+        end: dimensions.top + dimensions.height,
+        center: dimensions.top + dimensions.height / 2,
+    },
+    inline: {
+        start: dimensions.left,
+        end: dimensions.left + dimensions.width,
+        center: dimensions.left + dimensions.width / 2,
+    },
+});
+const drawMan = (dimensions) => {
+    const svgParts = [];
+    for (const col of dimensions.bracketGrid.columns) {
+        for (const el of col.elements) {
+            if (el.type === 'header')
+                continue;
+            const currentMatchParticipantsShortIds = [el.match.home?.shortId, el.match.away?.shortId]
+                .filter((id) => !!id)
+                .join(' ');
+            const pathOptions = { ...dimensions.path, className: currentMatchParticipantsShortIds };
+            const currentPos = makePos(el.dimensions);
+            // No lines for the third place match
+            if (el.round.type === COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)
+                continue;
+            switch (el.match.relation.type) {
+                case 'nothing-to-one': {
+                    continue;
+                }
+                case 'one-to-nothing':
+                case 'one-to-one': {
+                    const prev = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousMatch.id);
+                    const prevPos = makePos(prev.dimensions);
+                    // draw a straight line
+                    svgParts.push(linePath(prevPos, currentPos, { path: pathOptions }));
+                    break;
+                }
+                case 'two-to-nothing':
+                case 'two-to-one': {
+                    const prevUpper = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousUpperMatch.id);
+                    const prevLower = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.previousLowerMatch.id);
+                    const prevUpperPos = makePos(prevUpper.dimensions);
+                    const prevLowerPos = makePos(prevLower.dimensions);
+                    const isLowerUpperMerger = el.match.relation.previousLowerRound.id !== el.match.relation.previousUpperRound.id;
+                    const invertCurve = el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT;
+                    const curveOptions = {
+                        ...dimensions.curve,
+                        inverted: invertCurve,
+                        path: { ...dimensions.path, className: '' },
+                    };
+                    if (isLowerUpperMerger) {
+                        svgParts.push(linePath(prevUpperPos, currentPos, { path: pathOptions }));
+                    }
+                    else {
+                        // draw two lines that merge into one in the middle
+                        svgParts.push(curvePath(prevUpperPos, currentPos, 'down', {
+                            ...curveOptions,
+                            path: {
+                                ...curveOptions.path,
+                                className: el.match.relation.previousUpperMatch.winner?.shortId || '',
+                            },
+                        }));
+                    }
+                    svgParts.push(curvePath(prevLowerPos, currentPos, 'up', {
+                        ...curveOptions,
+                        path: {
+                            ...curveOptions.path,
+                            className: el.match.relation.previousLowerMatch.winner?.shortId || '',
+                        },
+                    }));
+                    if (el.round.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
+                        el.match.relation.type === 'two-to-one' &&
+                        el.match.relation.nextRound.mirrorRoundType === null) {
+                        // draw a straight line for the special case of connecting the final match to the mirrored semi final match
+                        const next = dimensions.bracketGrid.matchElementMap.getOrThrow(el.match.relation.nextMatch.id);
+                        const nextPos = makePos(next.dimensions);
+                        svgParts.push(linePath(nextPos, currentPos, { path: pathOptions }));
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    return svgParts.join('');
+};
+
+const createBracketElementPart = (config) => {
+    const { elementPartHeight } = config;
+    const newElementPart = {
+        dimensions: {
+            width: 0,
+            height: elementPartHeight,
+            top: 0,
+            left: 0,
+        },
+    };
+    return {
+        elementPart: newElementPart,
+    };
+};
+
+const createBracketElement = (config) => {
+    const { type, area, elementHeight, partHeights } = config;
+    const parts = [];
+    const newElementBase = {
+        dimensions: {
+            width: 0,
+            height: elementHeight,
+            top: 0,
+            left: 0,
+        },
+        containerDimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        parts,
+        area,
+    };
+    const newElement = (() => {
+        switch (type) {
+            case 'header':
+                return {
+                    ...newElementBase,
+                    type,
+                    component: config.component,
+                    round: config.round,
+                };
+            case 'match':
+                return {
+                    ...newElementBase,
+                    type,
+                    component: config.component,
+                    match: config.match,
+                    round: config.round,
+                };
+            case 'matchGap':
+            case 'roundHeaderGap':
+            case 'roundGap':
+            case 'colGap':
+                return {
+                    ...newElementBase,
+                    type,
+                };
+            default:
+                throw new Error(`Unknown element type: ${type}`);
+        }
+    })();
+    const pushPart = (...newParts) => {
+        parts.push(...newParts);
+    };
+    for (const partHeight of partHeights) {
+        const { elementPart } = createBracketElementPart({
+            elementPartHeight: partHeight,
+        });
+        pushPart(elementPart);
+    }
+    return {
+        element: newElement,
+    };
+};
+
+const finalizeBracketGrid = (grid) => {
+    const finalizedColumns = [];
+    const finalizedElementMap = new BracketMap();
+    const ignoredSections = [];
+    for (const [masterColumnIndex, masterColumn] of grid.grid.masterColumns.entries()) {
+        for (const [sectionIndex, section] of masterColumn.sections.entries()) {
+            if (ignoredSections.some((s) => s.masterColumnIndex === masterColumnIndex && s.sectionIndex === sectionIndex)) {
+                continue;
+            }
+            const elements = [];
+            const firstSubColumn = section.subColumns[0];
+            const lastSubColumn = section.subColumns[section.subColumns.length - 1];
+            if (!firstSubColumn || !lastSubColumn)
+                continue;
+            let sectionWidth = section.dimensions.width;
+            for (const element of firstSubColumn.elements) {
+                if (element.type === 'header') {
+                    elements.push({
+                        type: 'header',
+                        dimensions: element.dimensions,
+                        component: element.component,
+                        round: element.round,
+                    });
+                }
+                else if (element.type === 'match') {
+                    const matchEl = {
+                        type: 'match',
+                        dimensions: element.dimensions,
+                        component: element.component,
+                        match: element.match,
+                        round: element.round,
+                        classes: [element.match.home?.shortId, element.match.away?.shortId].filter((v) => !!v).join(' '),
+                    };
+                    elements.push(matchEl);
+                    finalizedElementMap.set(element.match.id, matchEl);
+                }
+            }
+            if (!lastSubColumn.span.isEnd) {
+                for (let index = masterColumnIndex + 1; index < grid.grid.masterColumns.length; index++) {
+                    const nextMaster = grid.grid.masterColumns[index];
+                    const nextSection = nextMaster?.sections[sectionIndex];
+                    if (!nextSection)
+                        break;
+                    sectionWidth += nextSection.dimensions.width;
+                    ignoredSections.push({ masterColumnIndex: index, sectionIndex });
+                    if (nextSection.subColumns.some((sc) => sc.span.isEnd)) {
+                        break;
+                    }
+                }
+            }
+            if (!elements.length)
+                continue;
+            finalizedColumns.push({
+                dimensions: {
+                    ...section.dimensions,
+                    width: sectionWidth,
+                },
+                elements,
+            });
+        }
+    }
+    return {
+        columns: finalizedColumns,
+        elementMap: finalizedElementMap,
+    };
+};
+
+const createBracketGrid = (config) => {
+    const masterColumns = [];
+    const spannedWidthCache = new Map();
+    const spanStartLeftCache = new Map();
+    const newGrid = {
+        dimensions: { width: 0, height: 0, top: 0, left: 0 },
+        masterColumns,
+    };
+    const pushMasterColumn = (...newMasterColumns) => {
+        masterColumns.push(...newMasterColumns);
+    };
+    const calculateDimensions = () => {
+        let currentMasterColumnLeft = 0;
+        let maxGridHeight = 0;
+        const masterCols = newGrid.masterColumns;
+        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            masterColumn.dimensions.left = currentMasterColumnLeft;
+            masterColumn.dimensions.top = 0;
+            let maxMasterColumnHeight = 0;
+            let currentSectionTop = 0;
+            const sections = masterColumn.sections;
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                section.dimensions.width = masterColumn.dimensions.width;
+                section.dimensions.left = currentMasterColumnLeft;
+                section.dimensions.top = currentSectionTop;
+                const subColumns = section.subColumns;
+                const totalSubColumns = subColumns.length;
+                const subColumnWidth = section.dimensions.width / totalSubColumns;
+                let currentSubColumnLeft = currentMasterColumnLeft;
+                let maxSectionHeight = 0;
+                for (let scIdx = 0; scIdx < totalSubColumns; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    subColumn.dimensions.width = subColumnWidth;
+                    subColumn.dimensions.left = currentSubColumnLeft;
+                    subColumn.dimensions.top = currentSectionTop;
+                    let totalSubColumnHeight = 0;
+                    const elements = subColumn.elements;
+                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        const element = elements[elIdx];
+                        let totalElementHeight = 0;
+                        const parts = element.parts;
+                        for (let pIdx = 0; pIdx < parts.length; pIdx++) {
+                            const part = parts[pIdx];
+                            part.dimensions.width = subColumnWidth;
+                            part.dimensions.left = currentSubColumnLeft;
+                            part.dimensions.top = subColumn.dimensions.top + totalSubColumnHeight + totalElementHeight;
+                            totalElementHeight += part.dimensions.height;
+                        }
+                        element.containerDimensions.height = totalElementHeight;
+                        element.containerDimensions.width = subColumnWidth;
+                        element.containerDimensions.left = currentSubColumnLeft;
+                        element.containerDimensions.top = subColumn.dimensions.top + totalSubColumnHeight;
+                        element.dimensions.width = subColumnWidth;
+                        element.dimensions.left = currentSubColumnLeft;
+                        element.dimensions.top =
+                            element.containerDimensions.top + (totalElementHeight - element.dimensions.height) * 0.5;
+                        totalSubColumnHeight += totalElementHeight;
+                    }
+                    subColumn.dimensions.height = totalSubColumnHeight;
+                    if (totalSubColumnHeight > maxSectionHeight)
+                        maxSectionHeight = totalSubColumnHeight;
+                    currentSubColumnLeft += subColumnWidth;
+                }
+                section.dimensions.height = maxSectionHeight;
+                currentSectionTop += maxSectionHeight;
+                maxMasterColumnHeight += maxSectionHeight;
+            }
+            masterColumn.dimensions.height = maxMasterColumnHeight;
+            if (maxMasterColumnHeight > maxGridHeight)
+                maxGridHeight = maxMasterColumnHeight;
+            currentMasterColumnLeft += masterColumn.dimensions.width;
+        }
+        newGrid.dimensions.width = currentMasterColumnLeft;
+        newGrid.dimensions.height = maxGridHeight;
+        calculateSpanningElementDimensions();
+    };
+    const calculateSpanningElementDimensions = () => {
+        const spanDimensions = new Map();
+        const masterCols = newGrid.masterColumns;
+        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            const sections = masterColumn.sections;
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                const subColumns = section.subColumns;
+                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    const elements = subColumn.elements;
+                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        const element = elements[elIdx];
+                        if (!element.span)
+                            continue;
+                        const span = element.span;
+                        const isStartPosition = mcIdx === span.masterColumnStart && secIdx === span.sectionStart && scIdx === span.subColumnStart;
+                        const spanKey = `${span.masterColumnStart}-${span.masterColumnEnd}-${span.sectionStart}-${span.sectionEnd}-${span.subColumnStart}-${span.subColumnEnd}`;
+                        if (isStartPosition && !spanDimensions.has(spanKey)) {
+                            const totalSpannedWidth = calculateSpannedWidth(span, masterCols);
+                            const spanStartLeft = calculateSpanStartLeft(span, masterCols);
+                            const width = config.spanElementWidth;
+                            spanDimensions.set(spanKey, { width, left: spanStartLeft + (totalSpannedWidth - width) * 0.5 });
+                        }
+                        const storedDimensions = spanDimensions.get(spanKey);
+                        if (storedDimensions) {
+                            element.dimensions.width = storedDimensions.width;
+                            element.dimensions.left = storedDimensions.left;
+                            element.isHidden = !isStartPosition;
+                        }
+                    }
+                }
+            }
+        }
+    };
+    const calculateSpannedWidth = (span, masterColumns) => {
+        const key = `${span.masterColumnStart}-${span.masterColumnEnd}-${span.sectionStart}-${span.sectionEnd}-${span.subColumnStart}-${span.subColumnEnd}`;
+        if (spannedWidthCache.has(key))
+            return spannedWidthCache.get(key);
+        if (span.masterColumnStart === span.masterColumnEnd) {
+            const masterColumn = masterColumns[span.masterColumnStart];
+            if (masterColumn) {
+                const section = masterColumn.sections[span.sectionStart];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    const totalWidth = subColumnWidth * (span.subColumnEnd - span.subColumnStart + 1);
+                    spannedWidthCache.set(key, totalWidth);
+                    return totalWidth;
+                }
+            }
+            spannedWidthCache.set(key, 0);
+            return 0;
+        }
+        let totalWidth = 0;
+        for (let mcIdx = span.masterColumnStart; mcIdx <= span.masterColumnEnd; mcIdx++) {
+            const masterColumn = masterColumns[mcIdx];
+            if (!masterColumn)
+                continue;
+            if (mcIdx === span.masterColumnStart) {
+                const section = masterColumn.sections[span.sectionStart];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    totalWidth += subColumnWidth * (section.subColumns.length - span.subColumnStart);
+                }
+            }
+            else if (mcIdx === span.masterColumnEnd) {
+                const section = masterColumn.sections[span.sectionEnd];
+                if (section) {
+                    const subColumnWidth = section.dimensions.width / section.subColumns.length;
+                    totalWidth += subColumnWidth * (span.subColumnEnd + 1);
+                }
+            }
+            else {
+                totalWidth += masterColumn.dimensions.width;
+            }
+        }
+        spannedWidthCache.set(key, totalWidth);
+        return totalWidth;
+    };
+    const calculateSpanStartLeft = (span, masterColumns) => {
+        const key = `${span.masterColumnStart}-${span.sectionStart}-${span.subColumnStart}`;
+        if (spanStartLeftCache.has(key))
+            return spanStartLeftCache.get(key);
+        const startMasterColumn = masterColumns[span.masterColumnStart];
+        if (!startMasterColumn) {
+            spanStartLeftCache.set(key, 0);
+            return 0;
+        }
+        let startLeft = startMasterColumn.dimensions.left;
+        const section = startMasterColumn.sections[span.sectionStart];
+        if (section) {
+            startLeft += (section.dimensions.width / section.subColumns.length) * span.subColumnStart;
+        }
+        spanStartLeftCache.set(key, startLeft);
+        return startLeft;
+    };
+    const setupElementSpans = () => {
+        const masterCols = newGrid.masterColumns;
+        for (let mcIdx = 0; mcIdx < masterCols.length; mcIdx++) {
+            const masterColumn = masterCols[mcIdx];
+            const sections = masterColumn.sections;
+            for (let secIdx = 0; secIdx < sections.length; secIdx++) {
+                const section = sections[secIdx];
+                const subColumns = section.subColumns;
+                for (let scIdx = 0; scIdx < subColumns.length; scIdx++) {
+                    const subColumn = subColumns[scIdx];
+                    if (subColumn.span.isStart && subColumn.span.isEnd)
+                        continue;
+                    let spanStart = { masterColumnIndex: mcIdx, sectionIndex: secIdx, subColumnIndex: scIdx };
+                    if (!subColumn.span.isStart) {
+                        outer: for (let m = mcIdx; m >= 0; m--) {
+                            const mc = masterCols[m];
+                            if (!mc)
+                                continue;
+                            const sec = mc.sections[secIdx];
+                            if (!sec)
+                                continue;
+                            const end = m === mcIdx ? scIdx : sec.subColumns.length - 1;
+                            for (let s = end; s >= 0; s--) {
+                                if (sec.subColumns[s]?.span.isStart) {
+                                    spanStart = { masterColumnIndex: m, sectionIndex: secIdx, subColumnIndex: s };
+                                    break outer;
+                                }
+                            }
+                        }
+                    }
+                    let spanEnd = { masterColumnIndex: mcIdx, sectionIndex: secIdx, subColumnIndex: scIdx };
+                    if (!subColumn.span.isEnd) {
+                        outer: for (let m = mcIdx; m < masterCols.length; m++) {
+                            const mc = masterCols[m];
+                            if (!mc)
+                                continue;
+                            const sec = mc.sections[secIdx];
+                            if (!sec)
+                                continue;
+                            const start = m === mcIdx ? scIdx : 0;
+                            for (let s = start; s < sec.subColumns.length; s++) {
+                                if (sec.subColumns[s]?.span.isEnd) {
+                                    spanEnd = { masterColumnIndex: m, sectionIndex: secIdx, subColumnIndex: s };
+                                    break outer;
+                                }
+                            }
+                        }
+                    }
+                    const elements = subColumn.elements;
+                    for (let elIdx = 0; elIdx < elements.length; elIdx++) {
+                        elements[elIdx].span = {
+                            masterColumnStart: spanStart.masterColumnIndex,
+                            masterColumnEnd: spanEnd.masterColumnIndex,
+                            sectionStart: spanStart.sectionIndex,
+                            sectionEnd: spanEnd.sectionIndex,
+                            subColumnStart: spanStart.subColumnIndex,
+                            subColumnEnd: spanEnd.subColumnIndex,
+                        };
+                    }
+                }
+            }
+        }
+    };
+    return {
+        grid: newGrid,
+        pushMasterColumn,
+        calculateDimensions,
+        setupElementSpans,
+    };
+};
+
+const createBracketMasterColumn = (config) => {
+    const { columnWidth } = config;
+    const sections = [];
+    const newMasterColumn = {
+        dimensions: {
+            width: columnWidth,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        sections,
+    };
+    const pushSection = (...newSections) => {
+        sections.push(...newSections);
+    };
+    return {
+        masterColumn: newMasterColumn,
+        pushSection,
+    };
+};
+
+const createBracketMasterColumnSection = (config) => {
+    const { type } = config;
+    const subColumns = [];
+    const newMasterColumnSection = {
+        dimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        subColumns,
+        type,
+    };
+    const pushSubColumn = (...newSubColumns) => {
+        subColumns.push(...newSubColumns);
+    };
+    return {
+        masterColumnSection: newMasterColumnSection,
+        pushSubColumn,
+    };
+};
+
+const createBracketSubColumn = (config) => {
+    const { span } = config;
+    const elements = [];
+    const newSubColumn = {
+        dimensions: {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        },
+        elements,
+        span,
+    };
+    const pushElement = (...newElements) => {
+        elements.push(...newElements);
+    };
+    return {
+        subColumn: newSubColumn,
+        pushElement,
+    };
+};
+
+function logGridAreasFormatted(gridTemplateAreas) {
+    if (!gridTemplateAreas) {
+        console.log('No grid areas to display');
+        return;
+    }
+    // Parse the grid template areas string
+    const rows = gridTemplateAreas
+        .split('\n')
+        .map((row) => row.replace(/^"/, '').replace(/"$/, '')) // Remove quotes
+        .map((row) => row.split(' ')); // Split into individual areas
+    if (rows.length === 0) {
+        console.log('No grid areas to display');
+        return;
+    }
+    // Find the maximum width for each column to align properly
+    const columnCount = rows[0]?.length ?? 0;
+    const columnWidths = [];
+    for (let colIndex = 0; colIndex < columnCount; colIndex++) {
+        const maxWidth = Math.max(...rows.map((row) => (row[colIndex] || '').length));
+        columnWidths.push(Math.max(maxWidth, 3)); // Minimum width of 3
+    }
+    console.log('\n📋 Grid Template Areas (Formatted):');
+    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
+    // Log each row with proper spacing
+    rows.forEach((row, rowIndex) => {
+        const formattedRow = row
+            .map((area, colIndex) => {
+            const width = columnWidths[colIndex] ?? 0;
+            return area.padEnd(width);
+        })
+            .join(' | ');
+        console.log(`${String(rowIndex).padStart(2, '0')}: ${formattedRow}`);
+    });
+    console.log('═'.repeat(columnWidths.reduce((sum, width) => sum + width + 3, 0)));
+    console.log(`📊 Grid dimensions: ${rows.length} rows × ${columnCount} columns\n`);
+}
+function gridColumnsToGridProperty(grid) {
+    if (!grid.length) {
+        return {
+            gridTemplateAreas: '',
+            gridTemplateRows: '',
+            gridTemplateColumns: '',
+        };
+    }
+    // Calculate the total number of columns (subcolumns across all master columns)
+    const totalColumns = grid.reduce((total, masterColumn) => {
+        return total + Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+    }, 0);
+    // Find all unique sections across all master columns to determine rows
+    const allSections = [];
+    grid.forEach((masterColumn, masterColumnIndex) => {
+        masterColumn.sections.forEach((section, sectionIndex) => {
+            // For each section, we need to process all its subcolumns
+            section.subColumns.forEach((subColumn) => {
+                allSections.push({
+                    elements: subColumn.elements,
+                    sectionIndex,
+                    masterColumnIndex,
+                });
+            });
+        });
+    });
+    // Group sections by their index to create rows
+    const sectionsByIndex = new Map();
+    let globalColumnIndex = 0;
+    grid.forEach((masterColumn, masterColumnIndex) => {
+        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+        masterColumn.sections.forEach((section, sectionIndex) => {
+            if (!sectionsByIndex.has(sectionIndex)) {
+                sectionsByIndex.set(sectionIndex, []);
+            }
+            section.subColumns.forEach((subColumn, subColumnIndex) => {
+                sectionsByIndex.get(sectionIndex).push({
+                    elements: subColumn.elements,
+                    columnIndex: globalColumnIndex + subColumnIndex,
+                    masterColumnIndex,
+                });
+            });
+        });
+        globalColumnIndex += maxSubColumns;
+    });
+    // Build the grid matrix - sections become rows, subcolumns become columns
+    const areaMatrix = [];
+    const rowHeights = [];
+    // Process each section (which becomes a row group)
+    for (const [sectionIndex, sectionColumns] of sectionsByIndex.entries()) {
+        // Find max rows needed for this section
+        const maxRowsInSection = Math.max(...sectionColumns.map((col) => col.elements.reduce((total, element) => total + element.parts.length, 0)), 0);
+        // Create rows for this section
+        for (let rowIndex = 0; rowIndex < maxRowsInSection; rowIndex++) {
+            const areaRow = new Array(totalColumns).fill('.');
+            let currentRowHeight;
+            // Fill in areas for each column in this section
+            for (const sectionColumn of sectionColumns) {
+                let accumulatedRows = 0;
+                let area = '.';
+                let height;
+                // Find which element this row belongs to
+                for (const element of sectionColumn.elements) {
+                    const elementRowCount = element.parts.length;
+                    if (rowIndex >= accumulatedRows && rowIndex < accumulatedRows + elementRowCount) {
+                        const relativeRowIndex = rowIndex - accumulatedRows;
+                        area = element.area;
+                        height = element.parts[relativeRowIndex]?.dimensions.height;
+                        break;
+                    }
+                    accumulatedRows += elementRowCount;
+                }
+                areaRow[sectionColumn.columnIndex] = area;
+                // Use the first defined height for this row
+                if (!currentRowHeight && height !== undefined) {
+                    currentRowHeight = `${height}px`;
+                }
+            }
+            areaMatrix.push(areaRow);
+            rowHeights.push(currentRowHeight ?? 'auto');
+        }
+    }
+    // Calculate column widths
+    const columnWidths = [];
+    for (const masterColumn of grid) {
+        const maxSubColumns = Math.max(...masterColumn.sections.map((section) => section.subColumns.length));
+        for (let i = 0; i < maxSubColumns; i++) {
+            // Find the width from any section that has this subcolumn
+            const subColumnWidth = masterColumn.sections.find((section) => section.subColumns[i])?.subColumns[i]?.dimensions.width ?? 0;
+            columnWidths.push(`${subColumnWidth}px`);
+        }
+    }
+    // Build the CSS properties
+    const gridTemplateAreas = areaMatrix.map((row) => `"${row.join(' ')}"`).join('\n');
+    const gridTemplateRows = rowHeights.join(' ');
+    const gridTemplateColumns = columnWidths.join(' ');
+    const result = {
+        gridTemplateAreas,
+        gridTemplateRows,
+        gridTemplateColumns,
+    };
+    logGridAreasFormatted(gridTemplateAreas);
+    return result;
+}
+
+const calculateUpperLowerRatio = (upperRoundsCount, lowerRoundsCount) => {
+    // In double elimination, after the first aligned column,
+    // we need to distribute the remaining upper rounds across the remaining lower rounds
+    const remainingUpperRounds = upperRoundsCount - 1; // Subtract the first round
+    const remainingLowerRounds = lowerRoundsCount - 1; // Subtract the first round
+    if (remainingUpperRounds === 0) {
+        return 1; // Edge case: only one upper round
+    }
+    return remainingLowerRounds / remainingUpperRounds;
+};
+const calculateColumnSplitFactor = (upperToLowerRatio) => {
+    // The split factor determines how many sub-columns each match column will have
+    // For example, if the ratio is 1.5, we split each match column
+    // into 2 sub-columns so that matches can be centered correctly
+    if (upperToLowerRatio === 1.5) {
+        return 2; // Split into 2 sub-columns for 1.5 ratio
+    }
+    if (upperToLowerRatio === 2) {
+        return 1; // Split into 1 sub-columns for 2 ratio
+    }
+    return 1;
+};
+const calculateLowerRoundIndex = (subColumnIndex, splitFactor) => Math.floor(subColumnIndex / splitFactor);
+const calculateUpperRoundIndex = (subColumnIndex, upperToLowerRatio, splitFactor) => {
+    // Calculate which complete column we're in
+    const completeColumnIndex = Math.floor(subColumnIndex / splitFactor);
+    // For the first complete column (index 0), always use the first upper round (index 0)
+    if (completeColumnIndex === 0) {
+        return 0;
+    }
+    // For subsequent columns, map based on the ratio
+    // We subtract 1 because the first column is handled separately
+    const adjustedColumnIndex = completeColumnIndex - 1;
+    // Calculate which upper round this column should use
+    // We add 1 because we start from the second upper round (index 1)
+    return Math.floor(adjustedColumnIndex / upperToLowerRatio) + 1;
+};
+
+const createBracketGapMasterColumn = (config) => {
+    const { existingMasterColumns, columnGap } = config;
+    const lastMasterColumn = existingMasterColumns[existingMasterColumns.length - 1];
+    if (!lastMasterColumn) {
+        throw new Error('No last master column found in existing master columns');
+    }
+    const { masterColumn, pushSection } = createBracketMasterColumn({
+        columnWidth: columnGap,
+    });
+    for (const section of lastMasterColumn.sections) {
+        const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+        });
+        const lastSubColumn = section.subColumns[section.subColumns.length - 1];
+        if (!lastSubColumn) {
+            throw new Error('No last sub column found in section');
+        }
+        const { pushElement, subColumn } = createBracketSubColumn({
+            span: {
+                isStart: lastSubColumn.span.isEnd ? true : false,
+                isEnd: lastSubColumn.span.isEnd ? true : false,
+            },
+        });
+        for (const lastSubColumnElement of lastSubColumn.elements) {
+            const partHeights = lastSubColumnElement.parts.map((part) => part.dimensions.height);
+            const elementToCreate = (() => {
+                switch (lastSubColumnElement.type) {
+                    case 'matchGap':
+                    case 'roundHeaderGap':
+                    case 'roundGap':
+                    case 'colGap': {
+                        return {
+                            area: !lastSubColumn.span.isEnd ? lastSubColumnElement.area : `.`,
+                            type: !lastSubColumn.span.isEnd ? lastSubColumnElement.type : 'colGap',
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                        };
+                    }
+                    case 'header':
+                        if (lastSubColumn.span.isEnd)
+                            break;
+                        return {
+                            area: lastSubColumnElement.area,
+                            type: lastSubColumnElement.type,
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                            component: lastSubColumnElement.component,
+                            round: lastSubColumnElement.round,
+                        };
+                    case 'match':
+                        if (lastSubColumn.span.isEnd)
+                            break;
+                        return {
+                            area: lastSubColumnElement.area,
+                            type: lastSubColumnElement.type,
+                            elementHeight: lastSubColumnElement.dimensions.height,
+                            partHeights,
+                            component: lastSubColumnElement.component,
+                            round: lastSubColumnElement.round,
+                            match: lastSubColumnElement.match,
+                        };
+                }
+                return {
+                    area: `.`,
+                    type: 'colGap',
+                    elementHeight: lastSubColumnElement.dimensions.height,
+                    partHeights,
+                };
+            })();
+            pushElement(createBracketElement(elementToCreate).element);
+        }
+        pushSubColumn(subColumn);
+        pushSection(masterColumnSection);
+    }
+    return masterColumn;
+};
+
+const createRoundBracketSubColumnRelativeToFirstRound = (config) => {
+    const { firstRound, round, options, span, hasReverseFinal } = config;
+    const { subColumn, pushElement } = createBracketSubColumn({
+        span,
+    });
+    const matchFactor = firstRound.matchCount / round.matchCount;
+    const matches = Array.from(round.matches.values());
+    const elementsToCreate = [];
+    // Only include a header row if headers exist
+    if (options.roundHeaderHeight > 0) {
+        elementsToCreate.push({
+            type: 'header',
+            area: `h${round.shortId}`,
+            partHeights: [options.roundHeaderHeight],
+            elementHeight: options.roundHeaderHeight,
+            component: config.components.roundHeader,
+            round,
+        }, {
+            type: 'roundHeaderGap',
+            area: '.',
+            partHeights: [options.rowGap],
+            elementHeight: options.rowGap,
+        });
+    }
+    // Add match elements to create
+    for (const [matchIndex, match] of matches.entries()) {
+        const isLastMatch = matchIndex === matches.length - 1;
+        const matchRows = [];
+        for (let factorIndex = 0; factorIndex < matchFactor; factorIndex++) {
+            const isLastFactor = factorIndex === matchFactor - 1;
+            // Add the match height
+            matchRows.push(options.matchHeight);
+            if (isLastFactor)
+                continue;
+            // Add gap between match factors (except after the last one)
+            matchRows.push(options.rowGap);
+        }
+        const isFinalMatch = hasReverseFinal
+            ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+            : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+        elementsToCreate.push({
+            type: 'match',
+            area: `m${match.shortId}`,
+            partHeights: matchRows,
+            elementHeight: isFinalMatch ? options.finalMatchHeight : options.matchHeight,
+            component: isFinalMatch ? config.components.finalMatch : config.components.match,
+            match,
+            round,
+        });
+        if (!isLastMatch) {
+            elementsToCreate.push({
+                type: 'matchGap',
+                area: '.',
+                partHeights: [options.rowGap],
+                elementHeight: options.rowGap,
+            });
+        }
+    }
+    // Create all elements at once
+    for (const elementData of elementsToCreate) {
+        const { element } = createBracketElement(elementData);
+        pushElement(element);
+    }
+    return subColumn;
+};
+
+const createDoubleEliminationGrid = (bracketData, options, components) => {
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const upperBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET).values());
+    const lowerBracketRounds = Array.from(bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET).values());
+    const remainingRounds = Array.from(bracketData.rounds.values()).filter((r) => r.type !== DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET &&
+        r.type !== DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET &&
+        r.type !== COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE);
+    const thirdPlaceRound = bracketData.roundsByType.get(COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)?.first() ?? null;
+    const hasReverseFinal = !!bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL)?.first();
+    const firstUpperRound = upperBracketRounds[0];
+    const firstLowerRound = lowerBracketRounds[0];
+    if (!firstUpperRound || !firstLowerRound) {
+        throw new Error('No upper or lower rounds found in bracket data');
+    }
+    const upperToLowerRatio = calculateUpperLowerRatio(upperBracketRounds.length, lowerBracketRounds.length);
+    const columnSplitFactor = calculateColumnSplitFactor(upperToLowerRatio);
+    let lastRoundLastSubColumnUpperIndex = -1;
+    let lastRoundLastSubColumnLowerIndex = -1;
+    for (const [lowerRoundIndex, lowerRound] of lowerBracketRounds.entries()) {
+        const isLastLowerRound = lowerRoundIndex === lowerBracketRounds.length - 1;
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: options.columnWidth,
+        });
+        const { masterColumnSection: upperSection, pushSubColumn: pushUpperSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const { masterColumnSection: upperLowerGapSection, pushSubColumn: pushUpperLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+        });
+        const { masterColumnSection: lowerSection, pushSubColumn: pushLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        for (let currentColumnSplitFactor = 1; currentColumnSplitFactor <= columnSplitFactor; currentColumnSplitFactor++) {
+            const subColumnIndex = lowerRoundIndex * columnSplitFactor + (currentColumnSplitFactor - 1);
+            const currentUpperRoundIndex = calculateUpperRoundIndex(subColumnIndex, upperToLowerRatio, columnSplitFactor);
+            const currentLowerRoundIndex = lowerRoundIndex;
+            const isFirstSubColumnInMasterColumn = currentColumnSplitFactor === 1;
+            const isLastSubColumnInMasterColumn = currentColumnSplitFactor === columnSplitFactor;
+            const previousSubColumnIndex = subColumnIndex - 1;
+            const nextSubColumnIndex = subColumnIndex + 1;
+            const previousUpperRoundIndex = previousSubColumnIndex >= 0
+                ? calculateUpperRoundIndex(previousSubColumnIndex, upperToLowerRatio, columnSplitFactor)
+                : -1;
+            const nextUpperRoundIndex = calculateUpperRoundIndex(nextSubColumnIndex, upperToLowerRatio, columnSplitFactor);
+            const previousLowerRoundIndex = previousSubColumnIndex >= 0 ? calculateLowerRoundIndex(previousSubColumnIndex, columnSplitFactor) : -1;
+            const nextLowerRoundIndex = calculateLowerRoundIndex(nextSubColumnIndex, columnSplitFactor);
+            const upperRound = upperBracketRounds[currentUpperRoundIndex];
+            if (!upperRound) {
+                throw new Error('Upper round not found for subColumnIndex: ' + subColumnIndex);
+            }
+            // For upper bracket spans - check if this round is different from the previous occurrence
+            const isUpperSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnUpperIndex !== currentUpperRoundIndex
+                : previousUpperRoundIndex !== currentUpperRoundIndex;
+            // For upper bracket spans - check if this round will be different in the next occurrence
+            const isUpperSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateUpperRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, upperToLowerRatio, columnSplitFactor) !==
+                        currentUpperRoundIndex
+                : nextUpperRoundIndex !== currentUpperRoundIndex;
+            // For lower bracket spans - similar logic
+            const isLowerSpanStart = isFirstSubColumnInMasterColumn
+                ? lowerRoundIndex === 0 || lastRoundLastSubColumnLowerIndex !== currentLowerRoundIndex
+                : previousLowerRoundIndex !== currentLowerRoundIndex;
+            const isLowerSpanEnd = isLastSubColumnInMasterColumn
+                ? isLastLowerRound ||
+                    calculateLowerRoundIndex((lowerRoundIndex + 1) * columnSplitFactor, columnSplitFactor) !==
+                        currentLowerRoundIndex
+                : nextLowerRoundIndex !== currentLowerRoundIndex;
+            const upperSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstUpperRound,
+                round: upperRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isUpperSpanStart,
+                    isEnd: isUpperSpanEnd,
+                },
+                components,
+            });
+            pushUpperSubColumn(upperSubColumn);
+            const upperLowerGapSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
+            });
+            const upperLowerGapElement = createBracketElement({
+                area: '.',
+                type: 'roundGap',
+                elementHeight: options.upperLowerGap,
+                partHeights: [options.upperLowerGap],
+            });
+            upperLowerGapSubColumn.pushElement(upperLowerGapElement.element);
+            pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: lowerRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isLowerSpanStart,
+                    isEnd: isLowerSpanEnd,
+                },
+                components,
+            });
+            pushLowerSubColumn(lowerSubColumn);
+            if (isLastSubColumnInMasterColumn) {
+                lastRoundLastSubColumnUpperIndex = currentUpperRoundIndex;
+                lastRoundLastSubColumnLowerIndex = currentLowerRoundIndex;
+            }
+        }
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        if (remainingRounds.length) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    for (const [roundIndex, round] of remainingRounds.entries()) {
+        const isLastRound = roundIndex === remainingRounds.length - 1;
+        const isFirstRound = roundIndex === 0;
+        const isAnyFinal = hasReverseFinal
+            ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
+            : round.type === COMMON_BRACKET_ROUND_TYPE.FINAL;
+        const { masterColumn, pushSection } = createBracketMasterColumn({
+            columnWidth: isAnyFinal ? options.finalColumnWidth : options.columnWidth,
+        });
+        const { masterColumnSection: upperSection, pushSubColumn: pushUpperSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const { masterColumnSection: upperLowerGapSection, pushSubColumn: pushUpperLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'gap',
+        });
+        const { masterColumnSection: lowerSection, pushSubColumn: pushLowerSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const upperSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+            firstRound: firstUpperRound,
+            round,
+            options,
+            hasReverseFinal,
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+            components,
+        });
+        pushUpperSubColumn(upperSubColumn);
+        const upperLowerGapSubColumn = createBracketSubColumn({
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+        });
+        const upperLowerGapElement = createBracketElement({
+            area: '.',
+            type: 'roundGap',
+            elementHeight: options.upperLowerGap,
+            partHeights: [options.upperLowerGap],
+        });
+        upperLowerGapSubColumn.pushElement(upperLowerGapElement.element);
+        pushUpperLowerSubColumn(upperLowerGapSubColumn.subColumn);
+        if (thirdPlaceRound) {
+            const lowerSubColumn = createRoundBracketSubColumnRelativeToFirstRound({
+                firstRound: firstLowerRound,
+                round: thirdPlaceRound,
+                options,
+                hasReverseFinal,
+                span: {
+                    isStart: isFirstRound,
+                    isEnd: isLastRound,
+                },
+                components,
+            });
+            pushLowerSubColumn(lowerSubColumn);
+        }
+        else {
+            const lowerSubColumn = createBracketSubColumn({
+                span: {
+                    isStart: true,
+                    isEnd: true,
+                },
+            });
+            const firstMasterRound = grid.grid.masterColumns[0];
+            if (!firstMasterRound)
+                throw new Error('No first master round found in grid');
+            const lastMasterColumnSection = firstMasterRound.sections[firstMasterRound.sections.length - 1];
+            if (!lastMasterColumnSection)
+                throw new Error('No last master column section found in grid');
+            const firstSubColumn = lastMasterColumnSection.subColumns[0];
+            if (!firstSubColumn)
+                throw new Error('No first sub column found in grid');
+            for (const element of firstSubColumn.elements) {
+                const el = createBracketElement({
+                    area: '.',
+                    type: 'colGap',
+                    elementHeight: element.dimensions.height,
+                    partHeights: element.parts.map((p) => p.dimensions.height),
+                });
+                lowerSubColumn.pushElement(el.element);
+            }
+            pushLowerSubColumn(lowerSubColumn.subColumn);
+        }
+        pushSection(upperSection, upperLowerGapSection, lowerSection);
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    grid.setupElementSpans();
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+const createSingleEliminationGrid = (bracketData, options, components) => {
+    const grid = createBracketGrid({ spanElementWidth: options.columnWidth });
+    const rounds = Array.from(bracketData.rounds.values());
+    const firstRound = bracketData.rounds.first();
+    if (!firstRound) {
+        throw new Error('No rounds found in bracket data');
+    }
+    for (const [roundIndex, round] of rounds.entries()) {
+        const isLastRound = roundIndex === rounds.length - 1;
+        const { masterColumn, ...mutableMasterColumn } = createBracketMasterColumn({
+            columnWidth: round.type === COMMON_BRACKET_ROUND_TYPE.FINAL ? options.finalColumnWidth : options.columnWidth,
+        });
+        const { masterColumnSection, pushSubColumn } = createBracketMasterColumnSection({
+            type: 'round',
+        });
+        const sub = createRoundBracketSubColumnRelativeToFirstRound({
+            firstRound,
+            round,
+            options,
+            hasReverseFinal: false,
+            span: {
+                isStart: true,
+                isEnd: true,
+            },
+            components,
+        });
+        pushSubColumn(sub);
+        mutableMasterColumn.pushSection(masterColumnSection);
+        grid.pushMasterColumn(masterColumn);
+        if (!isLastRound) {
+            grid.pushMasterColumn(createBracketGapMasterColumn({
+                existingMasterColumns: grid.grid.masterColumns,
+                columnGap: options.columnGap,
+            }));
+        }
+    }
+    grid.calculateDimensions();
+    const finalizedGrid = finalizeBracketGrid(grid);
+    return {
+        raw: grid,
+        columns: finalizedGrid.columns,
+        matchElementMap: finalizedGrid.elementMap,
+    };
+};
+
+const createJourneyHighlight = (bracketData) => {
+    let styles = '';
+    for (const participant of bracketData.participants.values()) {
+        styles += `
+          .et-new-bracket-host:has(.${participant.shortId}:hover) {
+            path, .et-bracket-new-element--match {
+                opacity: 0.5;
+            }
+
+            .${participant.shortId} {
+                opacity: 1 !important;
+            }
+          }
+        `;
+    }
+    return styles.replace(/\s+/g, ' ').trim();
+};
+
 const FALLBACK_MATCH_RELATION_POSITION = -1;
 const generateMatchPosition = (match, factor) => Math.ceil(match.position * factor);
 const generateMatchRelationPositions = (relation, match) => {
@@ -2412,533 +3564,6 @@ const generateBracketRoundSwissGroupMaps = (bracketData) => {
     return roundsWithSwissGroups;
 };
 
-const calcStaticMeasurements = (item, firstRounds, dimensions) => {
-    const { columnWidth, matchHeight, rowGap, columnGap, roundHeaderHeight, upperLowerGap } = dimensions;
-    const roundHeaderRowGap = roundHeaderHeight ? rowGap : 0;
-    const roundHeaderWithGapHeight = roundHeaderHeight + roundHeaderRowGap;
-    let baseOffsetY = roundHeaderWithGapHeight;
-    let baseRoundMatchCount = null;
-    let includeUpperLowerGap = false;
-    if (firstRounds.type === FIRST_ROUNDS_TYPE.SINGLE) {
-        baseRoundMatchCount = firstRounds.first.matchCount;
-    }
-    else {
-        if (item.roundRelation.currentRound.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET) {
-            baseRoundMatchCount = firstRounds.upper.matchCount;
-        }
-        else if (item.roundRelation.currentRound.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET) {
-            baseRoundMatchCount = firstRounds.lower.matchCount;
-        }
-        else {
-            baseRoundMatchCount = firstRounds.upper.matchCount + firstRounds.lower.matchCount;
-            includeUpperLowerGap = true;
-        }
-    }
-    if (item.roundRelation.currentRound.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET) {
-        if (firstRounds.type !== FIRST_ROUNDS_TYPE.DOUBLE) {
-            throw new Error(`Item is in lower bracket, but first rounds type is not double elimination: ${firstRounds.type}`);
-        }
-        const totalFirstUpperRoundHeight = firstRounds.upper.matchCount * matchHeight +
-            (firstRounds.upper.matchCount - 1) * rowGap +
-            roundHeaderWithGapHeight;
-        baseOffsetY = totalFirstUpperRoundHeight;
-        // Add the gap between the upper and lower bracket
-        baseOffsetY += upperLowerGap;
-        // Add one additional round header height if preset
-        baseOffsetY += roundHeaderWithGapHeight;
-    }
-    const staticMeasurements = {
-        upperLowerGap,
-        baseOffsetY,
-        baseRoundMatchCount,
-        includeUpperLowerGap,
-        columnGap,
-        columnWidth,
-        matchHeight,
-        rowGap,
-    };
-    return staticMeasurements;
-};
-const getMatchPosition = (roundItem, matchId, staticMeasurements) => {
-    if (!roundItem)
-        throw new Error('Item is missing');
-    if (!matchId)
-        throw new Error('Match is missing');
-    const match = roundItem.items.get(matchId);
-    if (!match || match.type !== 'match')
-        throw new Error('Match is missing');
-    const matchHalf = staticMeasurements.matchHeight / 2;
-    const roundFactor = staticMeasurements.baseRoundMatchCount / roundItem.roundRelation.currentRound.matchCount;
-    const remainingRowGapCount = roundItem.roundRelation.currentRound.matchCount - 1;
-    const matchIncludedRowGapTotal = staticMeasurements.baseRoundMatchCount - 1 - remainingRowGapCount;
-    const matchIncludedRowGapPerMatch = matchIncludedRowGapTotal / roundItem.roundRelation.currentRound.matchCount;
-    const matchRoundItemHeight = staticMeasurements.matchHeight * roundFactor + matchIncludedRowGapPerMatch * staticMeasurements.rowGap;
-    const matchesAbove = match.matchRelation.currentMatch.indexInRound;
-    const rowOffset = matchesAbove * staticMeasurements.rowGap + matchesAbove * matchRoundItemHeight;
-    const matchRowOffset = (matchRoundItemHeight - staticMeasurements.matchHeight) / 2;
-    const upperLowerGapOffset = staticMeasurements.includeUpperLowerGap ? staticMeasurements.upperLowerGap : 0;
-    const blockStart = rowOffset + matchRowOffset + staticMeasurements.baseOffsetY + upperLowerGapOffset;
-    const block = {
-        start: blockStart,
-        end: blockStart + staticMeasurements.matchHeight,
-        center: blockStart + matchHalf,
-    };
-    const inlineStart = (roundItem.columnStart - 1) * staticMeasurements.columnWidth +
-        (roundItem.columnStart - 1) * staticMeasurements.columnGap;
-    const inline = {
-        start: inlineStart,
-        end: inlineStart + staticMeasurements.columnWidth,
-        center: inlineStart + staticMeasurements.columnWidth / 2,
-    };
-    return { inline, block };
-};
-
-const drawMan = (rounds, firstRounds, dimensions) => {
-    const svgParts = [];
-    const debugMap = {};
-    for (const round of rounds.values()) {
-        for (const gridItem of round.items.values()) {
-            if (gridItem.type === 'round')
-                continue; // we don't draw lines for round headers
-            const currentStaticMeasurements = calcStaticMeasurements(gridItem, firstRounds, dimensions);
-            const currentMatchParticipantsShortIds = [
-                gridItem.matchRelation.currentMatch.home?.shortId,
-                gridItem.matchRelation.currentMatch.away?.shortId,
-            ]
-                .filter((id) => !!id)
-                .join(' ');
-            const pathOptions = { ...dimensions.path, className: currentMatchParticipantsShortIds };
-            const currentMatchPosition = getMatchPosition(round, gridItem.matchRelation.currentMatch.id, currentStaticMeasurements);
-            debugMap[gridItem.matchRelation.currentMatch.id] = {
-                position: currentMatchPosition,
-                staticMeasurements: currentStaticMeasurements,
-            };
-            // We only draw the left side of the match relation
-            switch (gridItem.matchRelation.type) {
-                case 'nothing-to-one': {
-                    continue;
-                }
-                case 'one-to-nothing':
-                case 'one-to-one': {
-                    const previousStaticMeasurements = debugMap[gridItem.matchRelation.previousMatch.id]?.staticMeasurements;
-                    if (!previousStaticMeasurements) {
-                        throw new Error(`Static measurements for previous match with id ${gridItem.matchRelation.previousMatch.id} not found`);
-                    }
-                    const previousMatchPosition = getMatchPosition(rounds.get(gridItem.matchRelation.previousRound.id), gridItem.matchRelation.previousMatch.id, previousStaticMeasurements);
-                    // draw a straight line
-                    svgParts.push(linePath(previousMatchPosition, currentMatchPosition, { path: pathOptions }));
-                    break;
-                }
-                case 'two-to-nothing':
-                case 'two-to-one': {
-                    const previousUpperStaticMeasurements = debugMap[gridItem.matchRelation.previousUpperMatch.id]?.staticMeasurements;
-                    const previousLowerStaticMeasurements = debugMap[gridItem.matchRelation.previousLowerMatch.id]?.staticMeasurements;
-                    if (!previousUpperStaticMeasurements || !previousLowerStaticMeasurements) {
-                        throw new Error(`Static measurements for previous upper match with id ${gridItem.matchRelation.previousUpperMatch.id} or previous lower match with id ${gridItem.matchRelation.previousLowerMatch.id} not found`);
-                    }
-                    const previousUpper = getMatchPosition(rounds.get(gridItem.matchRelation.previousUpperRound.id), gridItem.matchRelation.previousUpperMatch.id, previousUpperStaticMeasurements);
-                    const previousLower = getMatchPosition(rounds.get(gridItem.matchRelation.previousLowerRound.id), gridItem.matchRelation.previousLowerMatch.id, previousLowerStaticMeasurements);
-                    if (round.roundRelation.currentRound.type === 'final') {
-                        console.log({
-                            previousUpper,
-                            previousLower,
-                            currentMatchPosition,
-                            currentStaticMeasurements,
-                            previousUpperStaticMeasurements,
-                            previousLowerStaticMeasurements,
-                        });
-                    }
-                    const invertCurve = gridItem.roundRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT;
-                    const curveOptions = {
-                        ...dimensions.curve,
-                        inverted: invertCurve,
-                        path: { ...dimensions.path, className: '' },
-                    };
-                    // draw two lines that merge into one in the middle
-                    svgParts.push(curvePath(previousUpper, currentMatchPosition, 'down', {
-                        ...curveOptions,
-                        path: {
-                            ...curveOptions.path,
-                            className: gridItem.matchRelation.previousUpperMatch.winner?.shortId || '',
-                        },
-                    }));
-                    svgParts.push(curvePath(previousLower, currentMatchPosition, 'up', {
-                        ...curveOptions,
-                        path: {
-                            ...curveOptions.path,
-                            className: gridItem.matchRelation.previousLowerMatch.winner?.shortId || '',
-                        },
-                    }));
-                    if (gridItem.matchRelation.currentRound.mirrorRoundType === BRACKET_ROUND_MIRROR_TYPE.RIGHT &&
-                        gridItem.matchRelation.type === 'two-to-one' &&
-                        gridItem.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(rounds.get(gridItem.matchRelation.nextRound.id), gridItem.matchRelation.nextMatch.id, currentStaticMeasurements);
-                        svgParts.push(linePath(next, currentMatchPosition, { path: pathOptions }));
-                    }
-                    break;
-                }
-            }
-        }
-    }
-    return {
-        svg: svgParts.join(''),
-        debugMap,
-    };
-};
-
-const generateColumnCount = (bracketData) => {
-    const thirdPlaceRoundSize = bracketData.roundsByType.get(COMMON_BRACKET_ROUND_TYPE.THIRD_PLACE)?.size || 0;
-    switch (bracketData.mode) {
-        case TOURNAMENT_MODE.DOUBLE_ELIMINATION: {
-            const upperBracketSize = bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET)?.size || 0;
-            const lowerBracketSize = bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET)?.size || 0;
-            // the total columns are the bigger number of winner bracket rounds vs looser bracket rounds + all other rounds excluding third place
-            return (bracketData.rounds.size -
-                upperBracketSize -
-                lowerBracketSize -
-                thirdPlaceRoundSize +
-                Math.max(upperBracketSize, lowerBracketSize));
-        }
-        default: {
-            // the total columns are the amount of rounds excluding third place
-            return bracketData.rounds.size - thirdPlaceRoundSize;
-        }
-    }
-};
-const generateRowCount = (bracketData, options) => {
-    switch (bracketData.mode) {
-        case TOURNAMENT_MODE.DOUBLE_ELIMINATION: {
-            const upperBracketSize = bracketData.roundsByType
-                .getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET)
-                .first()?.matchCount;
-            const lowerBracketSize = bracketData.roundsByType
-                .getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET)
-                ?.first()?.matchCount;
-            const roundHeadersCount = options.includeRoundHeaders ? 2 : 0;
-            if (upperBracketSize === undefined || lowerBracketSize === undefined) {
-                throw new Error('Upper or lower bracket size is undefined');
-            }
-            // the total rows the amount of matches in the first upper bracket round + first lower bracket round + if true, the round header row for both
-            return upperBracketSize + lowerBracketSize + roundHeadersCount;
-        }
-        default: {
-            const firstRoundSize = bracketData.rounds.values().next().value?.matchCount;
-            const roundHeadersCount = options.includeRoundHeaders ? 1 : 0;
-            if (firstRoundSize === undefined) {
-                throw new Error('First round size is undefined');
-            }
-            // the total rows are the amount of matches in the first round + if true, the round header row
-            return firstRoundSize + roundHeadersCount;
-        }
-    }
-};
-const generateBracketGridDefinitions = (bracketData, options) => {
-    const columnCount = generateColumnCount(bracketData);
-    const rowCount = generateRowCount(bracketData, options);
-    return { columnCount, rowCount };
-};
-
-const generateBracketGridItems = (data) => {
-    const { bracketData, swissGroups, options } = data;
-    const roundHeaderComponent = options.headerComponent ?? NewBracketDefaultRoundHeaderComponent;
-    const matchComponent = options.matchComponent ?? NewBracketDefaultMatchComponent;
-    const finalMatchComponent = options.finalMatchComponent ?? matchComponent;
-    const optionsWithDefaults = {
-        ...options,
-        headerComponent: roundHeaderComponent,
-        matchComponent: matchComponent,
-        finalMatchComponent: finalMatchComponent,
-    };
-    const config = {
-        bracketData,
-        swissGroups,
-        options: optionsWithDefaults,
-    };
-    switch (bracketData.mode) {
-        case TOURNAMENT_MODE.DOUBLE_ELIMINATION:
-            return generateDoubleEliminationGridPlacements(config);
-        case TOURNAMENT_MODE.SWISS_WITH_ELIMINATION: {
-            return generateSwissWithEliminationGridPlacements(config);
-        }
-        default:
-            return generateGenericGridPlacements(config);
-    }
-};
-const generateGenericGridPlacements = (config) => {
-    const gridItems = new Map();
-    const { bracketData, options } = config;
-    const firstRound = bracketData.rounds.first();
-    if (!firstRound) {
-        throw new Error('First round is missing');
-    }
-    for (const round of bracketData.rounds.values()) {
-        let currentMatchRow = 1;
-        const columnStart = round.logicalIndex + 1;
-        const columnEnd = columnStart + 1;
-        const roundRelation = round.relation;
-        if (roundRelation.type === 'two-to-nothing' || roundRelation.type === 'two-to-one') {
-            throw new Error(`Invalid relation type ${roundRelation.type}`);
-        }
-        const roundItem = {
-            id: round.id,
-            layoutId: `${round.id}-layout`,
-            columnStart,
-            columnEnd,
-            rowStart: 1,
-            rowEnd: firstRound.matchCount + 1 + (options.includeRoundHeaders ? 1 : 0),
-            roundRelation,
-            items: new Map(),
-            columnDefinitions: 'var(--_cw)',
-            rowDefinitions: options.includeRoundHeaders
-                ? `var(--_rhh) ${new Array(firstRound.matchCount).fill('var(--_mh)').join(' ')}`
-                : `repeat(${firstRound.matchCount}, var(--_mh))`,
-        };
-        if (options.includeRoundHeaders) {
-            const roundHeaderItem = {
-                type: 'round',
-                id: round.id,
-                layoutId: `${round.id}-layout`,
-                rowStart: currentMatchRow,
-                rowEnd: ++currentMatchRow,
-                component: options.headerComponent,
-                className: 'et-bracket-new-item et-bracket-round-header-container',
-                roundRelation,
-                data: {
-                    bracketRound: round,
-                },
-            };
-            roundItem.items.set(round.id, roundHeaderItem);
-        }
-        const rootRoundMatchFactor = roundRelation.type !== 'nothing-to-one' ? roundRelation.rootRoundMatchFactor : null;
-        const matchHeight = rootRoundMatchFactor ? rootRoundMatchFactor : 1;
-        for (const match of round.matches.values()) {
-            const matchRelation = match.relation;
-            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: 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,
-                },
-            };
-            roundItem.items.set(match.id, matchItem);
-        }
-        gridItems.set(round.id, roundItem);
-    }
-    return gridItems;
-};
-const generateDoubleEliminationGridPlacements = (config) => {
-    const gridItems = new Map();
-    const { bracketData, options } = config;
-    const upperBracketRounds = bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET);
-    const lowerBracketRounds = bracketData.roundsByType.getOrThrow(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET);
-    const hasReverseFinal = !!bracketData.roundsByType.get(DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL);
-    const firstUpperRound = upperBracketRounds.first();
-    const firstLowerRound = lowerBracketRounds.first();
-    const headerRowMod = options.includeRoundHeaders ? 1 : 0;
-    if (!firstUpperRound) {
-        throw new Error('First round is missing');
-    }
-    if (!firstLowerRound) {
-        throw new Error('First lower round is missing');
-    }
-    const roundDelta = lowerBracketRounds.size - upperBracketRounds.size;
-    const isAsyncBracket = roundDelta === 2;
-    let currentUpperColumn = 1;
-    for (const round of bracketData.rounds.values()) {
-        let currentMatchRow = 1;
-        const columnStart = round.logicalIndex + 1;
-        const columnEnd = columnStart + 1;
-        const roundRelation = round.relation;
-        const isUpperBracket = round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.UPPER_BRACKET;
-        const isUpperNeitherStartNorEnd = !round.isFirstOfType && !round.isLastOfType && isUpperBracket;
-        const upperRowSpan = isUpperNeitherStartNorEnd || (isAsyncBracket && round.isLastOfType) ? 2 : 1;
-        const isLowerBracket = round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.LOWER_BRACKET;
-        const upperBracketRowStart = 1;
-        const upperBracketRowEnd = firstUpperRound.matchCount + headerRowMod + 1;
-        const lowerBracketRowStart = upperBracketRowEnd;
-        const lowerBracketRowEnd = lowerBracketRowStart + headerRowMod + firstLowerRound.matchCount;
-        const fullBracketRowStart = 1;
-        const fullBracketRowEnd = lowerBracketRowEnd;
-        const roundRowStart = isUpperBracket
-            ? upperBracketRowStart
-            : isLowerBracket
-                ? lowerBracketRowStart
-                : fullBracketRowStart;
-        const roundRowEnd = isUpperBracket ? upperBracketRowEnd : isLowerBracket ? lowerBracketRowEnd : fullBracketRowEnd;
-        const upperBracketColumnStart = currentUpperColumn;
-        const upperBracketColumnEnd = currentUpperColumn + upperRowSpan;
-        currentUpperColumn += upperRowSpan;
-        const lowerBracketColumnStart = columnStart;
-        const lowerBracketColumnEnd = columnEnd;
-        const fullBracketColumnStart = columnStart;
-        const fullBracketColumnEnd = columnEnd;
-        const roundColumnStart = isUpperBracket
-            ? upperBracketColumnStart
-            : isLowerBracket
-                ? lowerBracketColumnStart
-                : fullBracketColumnStart;
-        const roundColumnEnd = isUpperBracket
-            ? upperBracketColumnEnd
-            : isLowerBracket
-                ? lowerBracketColumnEnd
-                : fullBracketColumnEnd;
-        const roundItem = {
-            id: round.id,
-            layoutId: `${round.id}-layout`,
-            columnStart: roundColumnStart,
-            columnEnd: roundColumnEnd,
-            rowStart: roundRowStart,
-            rowEnd: roundRowEnd,
-            roundRelation,
-            columnDefinitions: new Array(roundColumnEnd - roundColumnStart - 1).fill('var(--_cw)').join(' '),
-            rowDefinitions: options.includeRoundHeaders
-                ? `var(--_rhh) ${new Array(roundRowEnd - roundRowStart - 1).fill('var(--_mh)').join(' ')}`
-                : `repeat(${roundRowEnd - roundRowStart - 1}, var(--_mh))`,
-            items: new Map(),
-        };
-        if (options.includeRoundHeaders) {
-            const roundHeaderItem = {
-                type: 'round',
-                id: round.id,
-                layoutId: `${round.id}-layout`,
-                rowStart: currentMatchRow,
-                rowEnd: ++currentMatchRow,
-                component: options.headerComponent,
-                className: 'et-bracket-new-item et-bracket-round-header-container',
-                roundRelation,
-                data: {
-                    bracketRound: round,
-                },
-            };
-            roundItem.items.set(round.id, roundHeaderItem);
-        }
-        const rootRoundMatchFactor = roundRelation.type !== 'nothing-to-one' &&
-            roundRelation.type !== 'two-to-nothing' &&
-            roundRelation.type !== 'two-to-one'
-            ? roundRelation.rootRoundMatchFactor
-            : roundRelation.type === 'two-to-nothing' || roundRelation.type === 'two-to-one'
-                ? roundRelation.upperRootRoundMatchFactor
-                : null;
-        const isPastUpperLower = !isUpperBracket && !isLowerBracket;
-        const matchHeight = rootRoundMatchFactor ? rootRoundMatchFactor : 1;
-        for (const match of round.matches.values()) {
-            const matchRelation = match.relation;
-            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: isPastUpperLower ? currentMatchRow : baseRow + currentMatchRow,
-                rowEnd: isPastUpperLower ? roundRowEnd : baseRow + +currentMatchRow + matchHeight,
-                component: hasReverseFinal
-                    ? round.type === DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE.REVERSE_FINAL
-                        ? options.finalMatchComponent
-                        : options.matchComponent
-                    : 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,
-                },
-            };
-            roundItem.items.set(match.id, matchItem);
-        }
-        gridItems.set(round.id, roundItem);
-    }
-    return gridItems;
-};
-const generateSwissWithEliminationGridPlacements = (config) => {
-    const { swissGroups } = config;
-    if (!swissGroups)
-        throw new Error('Swiss groups are required for swiss with elimination mode');
-    const gridItems = new Map();
-    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 NewBracketDebugComponent {
-    constructor() {
-        this.drawManDebugData = input.required(...(ngDevMode ? [{ debugName: "drawManDebugData" }] : []));
-        this.showAdditionalInfos = signal(false, ...(ngDevMode ? [{ debugName: "showAdditionalInfos" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", type: NewBracketDebugComponent, isStandalone: true, selector: "et-new-bracket-debug", inputs: { drawManDebugData: { classPropertyName: "drawManDebugData", publicName: "drawManDebugData", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.et-new-bracket-debug-host--expanded": "showAdditionalInfos()" }, classAttribute: "et-new-bracket-debug-host" }, ngImport: i0, template: `
-    @let data = drawManDebugData();
-
-    <div class="et-new-bracket-debug-top-level">
-      <p>
-        ⇔: {{ data.position.inline.start }} - {{ data.position.inline.end }} ⇕: {{ data.position.block.start }} -
-        {{ data.position.block.end }}
-      </p>
-
-      <button (click)="showAdditionalInfos.set(!showAdditionalInfos())" class="et-new-bracket-debug-toggle-detail-btn">
-        Details
-      </button>
-    </div>
-
-    @if (showAdditionalInfos()) {
-      <pre>{{ data | json }}</pre>
-    }
-  `, isInline: true, styles: [".et-bracket-match-container{position:relative}.et-new-bracket-debug-host{position:absolute;top:0;left:0;right:0;z-index:1000;font-size:12px;color:#fff;padding:4px;border-radius:4px;background:#000;overflow:auto}.et-new-bracket-debug-host p{margin:0;padding:0}.et-new-bracket-debug-host.et-new-bracket-debug-host--expanded{z-index:1001}.et-new-bracket-debug-top-level{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px}.et-new-bracket-debug-toggle-detail-btn{padding:0;margin:0;background:transparent;border:none;text-decoration:underline;text-align:left;color:inherit;cursor:pointer}\n"], dependencies: [{ kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketDebugComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-new-bracket-debug', template: `
-    @let data = drawManDebugData();
-
-    <div class="et-new-bracket-debug-top-level">
-      <p>
-        ⇔: {{ data.position.inline.start }} - {{ data.position.inline.end }} ⇕: {{ data.position.block.start }} -
-        {{ data.position.block.end }}
-      </p>
-
-      <button (click)="showAdditionalInfos.set(!showAdditionalInfos())" class="et-new-bracket-debug-toggle-detail-btn">
-        Details
-      </button>
-    </div>
-
-    @if (showAdditionalInfos()) {
-      <pre>{{ data | json }}</pre>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'et-new-bracket-debug-host',
-                        '[class.et-new-bracket-debug-host--expanded]': 'showAdditionalInfos()',
-                    }, imports: [JsonPipe], styles: [".et-bracket-match-container{position:relative}.et-new-bracket-debug-host{position:absolute;top:0;left:0;right:0;z-index:1000;font-size:12px;color:#fff;padding:4px;border-radius:4px;background:#000;overflow:auto}.et-new-bracket-debug-host p{margin:0;padding:0}.et-new-bracket-debug-host.et-new-bracket-debug-host--expanded{z-index:1001}.et-new-bracket-debug-top-level{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px}.et-new-bracket-debug-toggle-detail-btn{padding:0;margin:0;background:transparent;border:none;text-decoration:underline;text-align:left;color:inherit;cursor:pointer}\n"] }]
-        }] });
-
 class NewBracketComponent {
     constructor() {
         this.domSanitizer = inject(DomSanitizer);
@@ -2966,39 +3591,45 @@ class NewBracketComponent {
         this.finalMatchComponent = input(...(ngDevMode ? [undefined, { debugName: "finalMatchComponent" }] : []));
         this.bracketData = computed(() => createNewBracket(this.source(), { layout: this.layout() }), ...(ngDevMode ? [{ debugName: "bracketData" }] : []));
         this.swissGroups = computed(() => generateBracketRoundSwissGroupMaps(this.bracketData()), ...(ngDevMode ? [{ debugName: "swissGroups" }] : []));
-        this.items = computed(() => generateBracketGridItems({
-            bracketData: this.bracketData(),
-            swissGroups: this.swissGroups(),
-            options: {
+        this.bracketGrid = computed(() => {
+            const bracketData = this.bracketData();
+            const options = {
                 includeRoundHeaders: !this.hideRoundHeaders(),
-                headerComponent: this.roundHeaderComponent(),
-                matchComponent: this.matchComponent(),
-                finalMatchComponent: this.finalMatchComponent(),
-            },
-        }), ...(ngDevMode ? [{ debugName: "items" }] : []));
-        this.definitions = computed(() => generateBracketGridDefinitions(this.bracketData(), {
-            includeRoundHeaders: !this.hideRoundHeaders(),
-            columnGap: this.columnGap(),
-            upperLowerGap: this.bracketData().mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION ? this.upperLowerGap() : 0,
-            columnWidth: this.columnWidth(),
-            matchHeight: this.matchHeight(),
-            roundHeaderHeight: this.hideRoundHeaders() ? 0 : this.roundHeaderHeight(),
-            rowGap: this.rowGap(),
-            layout: this.layout(),
-            finalMatchHeight: this.finalMatchComponent() ? this.finalMatchHeight() : this.matchHeight(),
-            finalColumnWidth: this.finalMatchComponent() ? this.finalColumnWidth() : this.columnWidth(),
-        }), ...(ngDevMode ? [{ debugName: "definitions" }] : []));
-        this.firstRounds = computed(() => getFirstRounds(this.bracketData()), ...(ngDevMode ? [{ debugName: "firstRounds" }] : []));
+                columnGap: this.columnGap(),
+                upperLowerGap: this.bracketData().mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION ? this.upperLowerGap() : 0,
+                columnWidth: this.columnWidth(),
+                matchHeight: this.matchHeight(),
+                roundHeaderHeight: this.hideRoundHeaders() ? 0 : this.roundHeaderHeight(),
+                rowGap: this.rowGap(),
+                layout: this.layout(),
+                finalMatchHeight: this.finalMatchHeight(),
+                finalColumnWidth: this.finalColumnWidth(),
+            };
+            const components = {
+                match: this.matchComponent() ?? NewBracketDefaultMatchComponent,
+                finalMatch: this.finalMatchComponent() ?? NewBracketDefaultMatchComponent,
+                roundHeader: this.roundHeaderComponent() ?? NewBracketDefaultRoundHeaderComponent,
+            };
+            switch (bracketData.mode) {
+                case TOURNAMENT_MODE.DOUBLE_ELIMINATION:
+                    return createDoubleEliminationGrid(bracketData, options, components);
+                case TOURNAMENT_MODE.SINGLE_ELIMINATION:
+                    return createSingleEliminationGrid(bracketData, options, components);
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "bracketGrid" }] : []));
         this.drawManData = computed(() => {
-            // if (this.bracketData().mode !== TOURNAMENT_MODE.SINGLE_ELIMINATION) return '';
-            return drawMan(this.items(), this.firstRounds(), {
+            const bracketGrid = this.bracketGrid();
+            if (!bracketGrid)
+                return '';
+            return drawMan({
                 columnGap: this.columnGap(),
                 upperLowerGap: this.bracketData().mode === TOURNAMENT_MODE.DOUBLE_ELIMINATION ? this.upperLowerGap() : 0,
                 columnWidth: this.columnWidth(),
                 matchHeight: this.matchHeight(),
                 roundHeaderHeight: this.hideRoundHeaders() ? 0 : this.roundHeaderHeight(),
                 rowGap: this.rowGap(),
-                gridDefinitions: this.definitions(),
+                bracketGrid,
                 curve: {
                     lineEndingCurveAmount: this.lineEndingCurveAmount(),
                     lineStartingCurveAmount: this.lineStartingCurveAmount(),
@@ -3010,13 +3641,9 @@ class NewBracketComponent {
                 },
             });
         }, ...(ngDevMode ? [{ debugName: "drawManData" }] : []));
-        this.svgContent = computed(() => this.domSanitizer.bypassSecurityTrustHtml(this.drawManData().svg), ...(ngDevMode ? [{ debugName: "svgContent" }] : []));
+        this.svgContent = computed(() => this.domSanitizer.bypassSecurityTrustHtml(this.drawManData()), ...(ngDevMode ? [{ debugName: "svgContent" }] : []));
         this.journeyHighlight = computed(() => this.disableJourneyHighlight() ? null : createJourneyHighlight(this.bracketData()), ...(ngDevMode ? [{ debugName: "journeyHighlight" }] : []));
         this.setupJourneyHighlight();
-        effect(() => {
-            logRoundRelations(this.bracketData());
-            console.log(this.bracketData());
-        });
     }
     setupJourneyHighlight() {
         const renderer = inject(Renderer2);
@@ -3048,13 +3675,13 @@ class NewBracketComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", 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 }, finalMatchHeight: { classPropertyName: "finalMatchHeight", publicName: "finalMatchHeight", isSignal: true, isRequired: false, transformFunction: null }, finalColumnWidth: { classPropertyName: "finalColumnWidth", publicName: "finalColumnWidth", 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 }, upperLowerGap: { classPropertyName: "upperLowerGap", publicName: "upperLowerGap", 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 }, debug: { classPropertyName: "debug", publicName: "debug", 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.--_ulg.px]=\"upperLowerGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"svgContent()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul\n      [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\"\n      [style.--_r]=\"round.rowStart + ' / ' + round.rowEnd\"\n      [style.--_cd]=\"round.columnDefinitions\"\n      [style.--_rd]=\"round.rowDefinitions\"\n      class=\"et-bracket-new-round\"\n    >\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\n          @if (debug() && item.type === 'match') {\n            @let debugData = drawManData().debugMap[item.id];\n\n            @if (debugData) {\n              <et-new-bracket-debug [drawManDebugData]=\"debugData\" />\n            }\n          }\n          <div></div>\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;column-gap:var(--_cg);row-gap:var(--_ulg);grid-template-columns:repeat(var(--_bcc),var(--_cw));grid-template-rows:repeat(var(--_brc),auto);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:var(--_r);list-style:none;margin:0;padding:0;row-gap:var(--_rg);grid-template-rows:var(--_rd);grid-template-columns:var(--_cd)}.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/calc(var(--_brc) + 1);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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: NewBracketDebugComponent, selector: "et-new-bracket-debug", inputs: ["drawManDebugData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.2", 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 }, finalMatchHeight: { classPropertyName: "finalMatchHeight", publicName: "finalMatchHeight", isSignal: true, isRequired: false, transformFunction: null }, finalColumnWidth: { classPropertyName: "finalColumnWidth", publicName: "finalColumnWidth", 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 }, upperLowerGap: { classPropertyName: "upperLowerGap", publicName: "upperLowerGap", 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 }, debug: { classPropertyName: "debug", publicName: "debug", 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: "@if (bracketGrid(); as grid) {\n  <section\n    [style.width.px]=\"grid.raw.grid.dimensions.width\"\n    [style.height.px]=\"grid.raw.grid.dimensions.height\"\n    class=\"et-bracket-new\"\n  >\n    <svg [innerHTML]=\"svgContent()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n    @for (round of grid.columns; track $index) {\n      <ul\n        [style.width.px]=\"round.dimensions.width\"\n        [style.height.px]=\"round.dimensions.height\"\n        [style.top.px]=\"round.dimensions.top\"\n        [style.left.px]=\"round.dimensions.left\"\n        class=\"et-bracket-new-round\"\n      >\n        @for (element of round.elements; track $index) {\n          @let inputs =\n            element.type === 'header'\n              ? { bracketRound: element.round }\n              : { bracketRound: element.round, bracketMatch: element.match };\n\n          @let highlightClass = element.type === 'header' ? '' : element.classes;\n\n          <li\n            [style.width.px]=\"element.dimensions.width\"\n            [style.height.px]=\"element.dimensions.height\"\n            [style.top.px]=\"element.dimensions.top - round.dimensions.top\"\n            [style.left.px]=\"element.dimensions.left - round.dimensions.left\"\n            class=\"et-bracket-new-element et-bracket-new-element--{{ element.type }} {{ highlightClass }}\"\n          >\n            <ng-container *ngComponentOutlet=\"element.component; inputs: inputs\" />\n          </li>\n        }\n      </ul>\n    }\n  </section>\n}\n", styles: [".et-bracket-new{position:relative;--bracket-line-color: red}.et-bracket-new-round{position:absolute;list-style:none;margin:0;padding:0}.et-bracket-new-element{position:absolute;list-style:none;margin:0;padding:0;transition:opacity .2s}.et-bracket-new-svg{inline-size:100%;block-size:100%;position:absolute}.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", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: NewBracketComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-new-bracket', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-new-bracket-host',
-                    }, imports: [NgComponentOutlet, NewBracketDebugComponent], 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.--_ulg.px]=\"upperLowerGap()\"\n  [style.--_rg.px]=\"rowGap()\"\n  [style.--_bcc]=\"definitions().columnCount\"\n  [style.--_brc]=\"definitions().rowCount\"\n  class=\"et-bracket-new\"\n>\n  <svg [innerHTML]=\"svgContent()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n  @for (round of items().values(); track round.layoutId) {\n    <ul\n      [style.--_c]=\"round.columnStart + ' / ' + round.columnEnd\"\n      [style.--_r]=\"round.rowStart + ' / ' + round.rowEnd\"\n      [style.--_cd]=\"round.columnDefinitions\"\n      [style.--_rd]=\"round.rowDefinitions\"\n      class=\"et-bracket-new-round\"\n    >\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\n          @if (debug() && item.type === 'match') {\n            @let debugData = drawManData().debugMap[item.id];\n\n            @if (debugData) {\n              <et-new-bracket-debug [drawManDebugData]=\"debugData\" />\n            }\n          }\n          <div></div>\n        </li>\n      }\n    </ul>\n  }\n</section>\n", styles: [".et-bracket-new{display:grid;column-gap:var(--_cg);row-gap:var(--_ulg);grid-template-columns:repeat(var(--_bcc),var(--_cw));grid-template-rows:repeat(var(--_brc),auto);--bracket-line-color: red}.et-bracket-new-round{display:grid;grid-column:var(--_c);grid-row:var(--_r);list-style:none;margin:0;padding:0;row-gap:var(--_rg);grid-template-rows:var(--_rd);grid-template-columns:var(--_cd)}.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/calc(var(--_brc) + 1);inline-size:100%;block-size:100%}.et-bracket-new-svg path{color:var(--bracket-line-color);transition:opacity .2s}\n"] }]
+                    }, imports: [NgComponentOutlet], template: "@if (bracketGrid(); as grid) {\n  <section\n    [style.width.px]=\"grid.raw.grid.dimensions.width\"\n    [style.height.px]=\"grid.raw.grid.dimensions.height\"\n    class=\"et-bracket-new\"\n  >\n    <svg [innerHTML]=\"svgContent()\" class=\"et-bracket-new-svg\" xmlns=\"http://www.w3.org/2000/svg\" />\n\n    @for (round of grid.columns; track $index) {\n      <ul\n        [style.width.px]=\"round.dimensions.width\"\n        [style.height.px]=\"round.dimensions.height\"\n        [style.top.px]=\"round.dimensions.top\"\n        [style.left.px]=\"round.dimensions.left\"\n        class=\"et-bracket-new-round\"\n      >\n        @for (element of round.elements; track $index) {\n          @let inputs =\n            element.type === 'header'\n              ? { bracketRound: element.round }\n              : { bracketRound: element.round, bracketMatch: element.match };\n\n          @let highlightClass = element.type === 'header' ? '' : element.classes;\n\n          <li\n            [style.width.px]=\"element.dimensions.width\"\n            [style.height.px]=\"element.dimensions.height\"\n            [style.top.px]=\"element.dimensions.top - round.dimensions.top\"\n            [style.left.px]=\"element.dimensions.left - round.dimensions.left\"\n            class=\"et-bracket-new-element et-bracket-new-element--{{ element.type }} {{ highlightClass }}\"\n          >\n            <ng-container *ngComponentOutlet=\"element.component; inputs: inputs\" />\n          </li>\n        }\n      </ul>\n    }\n  </section>\n}\n", styles: [".et-bracket-new{position:relative;--bracket-line-color: red}.et-bracket-new-round{position:absolute;list-style:none;margin:0;padding:0}.et-bracket-new-element{position:absolute;list-style:none;margin:0;padding:0;transition:opacity .2s}.et-bracket-new-svg{inline-size:100%;block-size:100%;position:absolute}.et-bracket-new-svg path{color:var(--bracket-line-color);transition:opacity .2s}\n"] }]
         }], ctorParameters: () => [] });
 
 var index = /*#__PURE__*/Object.freeze({
@@ -14381,7 +15008,7 @@ class OverlayContainerComponent extends CdkDialogContainer {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.2", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledByHack", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1.RootBoundaryDirective }, { directive: i1.AnimatedLifecycleDirective }, { directive: ProvideThemeDirective }], ngImport: i0, template: `
     <div class="et-overlay-container-drag-handle"></div>
     <ng-template cdkPortalOutlet />
-  `, isInline: true, styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box;width:100%}.et-overlay>:nth-child(2){overflow:auto}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay:has(.et-overlay-sidebar-host){overflow:hidden}.et-overlay:has(.et-overlay-sidebar-host)>:nth-child(2){display:grid;grid-template-columns:0 1fr}.et-overlay:has(.et-overlay-sidebar-host):has(.et-overlay-sidebar--visible)>:nth-child(2){grid-template-columns:auto 1fr}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-host{display:grid;min-block-size:0}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*{overflow:auto}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*:not(.et-overlay-main){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay-sidebar-host{overflow:auto}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body:has(.et-overlay-router-outlet-host){padding:0;overflow:visible}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-body-container{display:grid;grid-auto-rows:minmax(0,1fr);min-height:0}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-host{display:grid}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-page{padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:100%}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box;width:100%}.et-overlay>:nth-child(2){overflow:auto}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay:has(.et-overlay-sidebar-host){overflow:hidden}.et-overlay:has(.et-overlay-sidebar-host)>:nth-child(2){display:grid;grid-template-columns:0 1fr}.et-overlay:has(.et-overlay-sidebar-host):has(.et-overlay-sidebar--visible)>:nth-child(2){grid-template-columns:auto 1fr}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-host{display:grid;min-block-size:0}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*{overflow:auto}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*:not(.et-overlay-main){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay-sidebar-host{overflow:auto}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body:has(.et-overlay-router-outlet-host){padding:0;overflow:visible}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-body-container{display:grid;grid-auto-rows:minmax(0,1fr);min-height:0}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-host{display:grid}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-page{padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:100%}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImport: i0, type: OverlayContainerComponent, decorators: [{
             type: Component,
@@ -14398,7 +15025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.2", ngImpor
                         '[attr.aria-label]': '_config.ariaLabel',
                         '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
                         '[class.et-with-default-animation]': '!_config.customAnimated',
-                    }, imports: [PortalModule], hostDirectives: [RootBoundaryDirective, AnimatedLifecycleDirective, ProvideThemeDirective], styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box;width:100%}.et-overlay>:nth-child(2){overflow:auto}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay:has(.et-overlay-sidebar-host){overflow:hidden}.et-overlay:has(.et-overlay-sidebar-host)>:nth-child(2){display:grid;grid-template-columns:0 1fr}.et-overlay:has(.et-overlay-sidebar-host):has(.et-overlay-sidebar--visible)>:nth-child(2){grid-template-columns:auto 1fr}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-host{display:grid;min-block-size:0}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*{overflow:auto}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*:not(.et-overlay-main){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay-sidebar-host{overflow:auto}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body:has(.et-overlay-router-outlet-host){padding:0;overflow:visible}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-body-container{display:grid;grid-auto-rows:minmax(0,1fr);min-height:0}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-host{display:grid}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-page{padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:100%}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
+                    }, imports: [PortalModule], hostDirectives: [RootBoundaryDirective, AnimatedLifecycleDirective, ProvideThemeDirective], styles: [".et-overlay{--et-overlay-padding-inline: 16px;--et-overlay-padding-block: 16px;--et-overlay-header-padding-block-end: 16px;--et-overlay-body-padding-block: 0;--et-overlay-footer-padding-block-start: 16px;--et-overlay-body-divider-color: #565656;--et-overlay-body-min-block-size: 100px;--_et-overlay-drag-handle-inline-size: 32px;--_et-overlay-drag-handle-block-size: 4px;--_et-overlay-drag-handle-block-margin: 22px;--_et-overlay-drag-handle-color: #565656;--_et-overlay-drag-handle-radius: 5px;position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none;box-sizing:border-box;width:100%}.et-overlay>:nth-child(2){overflow:auto}.et-overlay>:nth-child(2):not(.et-overlay-main){display:grid}.et-overlay.et-overlay--bottom-sheet .et-overlay-container-drag-handle{display:flex}.et-overlay:has(.et-overlay-main){overflow:visible}.et-overlay:has(.et-overlay-sidebar-host){overflow:hidden}.et-overlay:has(.et-overlay-sidebar-host)>:nth-child(2){display:grid;grid-template-columns:0 1fr}.et-overlay:has(.et-overlay-sidebar-host):has(.et-overlay-sidebar--visible)>:nth-child(2){grid-template-columns:auto 1fr}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-host{display:grid;min-block-size:0}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page{display:grid;grid-template-rows:minmax(0,1fr)}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*{overflow:auto}.et-overlay:has(.et-overlay-sidebar-host) .et-overlay-router-outlet-page>*:not(.et-overlay-main){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.et-overlay-sidebar-host{overflow:auto}.et-overlay-main{display:grid;grid-template-rows:minmax(0,1fr);overflow:auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:has(.et-overlay-header):has(.et-overlay-body){grid-template-rows:auto minmax(var(--et-overlay-body-min-block-size),1fr)}.et-overlay-main:has(.et-overlay-body):has(.et-overlay-footer){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-main:not(:has(.et-overlay-footer)){grid-template-rows:minmax(var(--et-overlay-body-min-block-size),1fr) auto}.et-overlay-container-drag-handle{block-size:var(--_et-overlay-drag-handle-block-size);margin-block:var(--_et-overlay-drag-handle-block-margin);display:none;justify-content:center}.et-overlay-container-drag-handle:before{content:\"\";position:static;inline-size:var(--_et-overlay-drag-handle-inline-size);block-size:var(--_et-overlay-drag-handle-block-size);background-color:var(--_et-overlay-drag-handle-color);border-radius:var(--_et-overlay-drag-handle-radius)}.et-overlay-body{display:grid;overflow:auto;padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body:has(.et-overlay-router-outlet-host){padding:0;overflow:visible}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-body-container{display:grid;grid-auto-rows:minmax(0,1fr);min-height:0}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-host{display:grid}.et-overlay-body:has(.et-overlay-router-outlet-host) .et-overlay-router-outlet-page{padding-inline:var(--et-overlay-padding-inline);padding-block:var(--et-overlay-body-padding-block);overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}.et-overlay-body.et-overlay-body--enable-divider-animations{transition:border-color .3s var(--ease-1)}.et-overlay-main:has(.et-overlay-header) .et-overlay-body.et-overlay-body--render-dividers{border-block-start:1px solid var(--et-overlay-body-divider-color)}.et-overlay-main:has(.et-overlay-footer) .et-overlay-body.et-overlay-body--render-dividers{border-block-end:1px solid var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers{border-color:var(--et-overlay-body-divider-color)}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-start{border-block-start-color:transparent}.et-overlay-body.et-overlay-body--render-dividers.et-overlay-body--dynamic-dividers.et-scrollable-body--is-at-end{border-block-end-color:transparent}.et-overlay-body .et-overlay-body-container{position:relative;min-block-size:100%}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element,.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{position:absolute;block-size:1px;pointer-events:none}.et-overlay-body .et-overlay-body-container .et-overlay-body-start-element{inset-inline:1px;inset-block-start:1px}.et-overlay-body .et-overlay-body-container .et-overlay-body-end-element{inset-inline:1px;inset-block-end:1px}.et-overlay-header{padding-block-start:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-end:var(--et-overlay-header-padding-block-end)}.et-overlay-footer{padding-block-end:var(--et-overlay-padding-block);padding-inline:var(--et-overlay-padding-inline);padding-block-start:var(--et-overlay-footer-padding-block-start)}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation:after{content:\"\";position:absolute;background-color:inherit}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet:after{inset-inline:0;inset-block-end:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet:after{inset-inline:0;inset-block-start:-50px;block-size:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet:after{inset-inline-start:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet:after{inset-inline-end:-50px;inset-block:0;inline-size:50px}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--anchored-dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
         }], ctorParameters: () => [] });
 
 const FILTER_OVERLAY_CONFIG = new InjectionToken('FILTER_OVERLAY_CONFIG');