@adonsio/adn-tournament/esm2015/lib/double-elimination-tree/double-elimination-tree.component.js

This packages allows you to generate Tournament Brackets in **Angular v12.2.4**. It's currently **work in progress** so use it at your own risk.

import { Component, Input } from '@angular/core';
export class DoubleEliminationTreeComponent {
    constructor() {
    }
    ngOnChanges(changes) {
        this.losersBracket = this.tournament.rounds.filter(round => {
            return round.type === 'Loserbracket';
        });
        this.winnersBracket = this.tournament.rounds.filter(round => {
            return round.type === 'Winnerbracket';
        });
        //@ts-ignore
        this.final = this.tournament.rounds.filter(round => {
            return round.type === 'Final';
        }).shift();
    }
}
DoubleEliminationTreeComponent.decorators = [
    { type: Component, args: [{
                selector: 'adn-double-elimination-tree',
                template: "<div class=\"ngtt-de__container\">\r\n    <div class=\"ngtt-de__winners-bracket-wrapper\">\r\n      <ng-container *ngFor=\"let winnersround of winnersBracket\">\r\n        <!--      {{winnersround.round}}-->\r\n        <div class=\"ngtt-de__winners-round-wrapper\">\r\n          <ng-container *ngFor=\"let match of winnersround.matches\">\r\n            <div class=\"ngtt-de__winners-match-wrapper\">\r\n              <div class=\"ngtt-de__match-component-container\">\r\n                <ng-container *ngTemplateOutlet=\"matchTemplate; context:{$implicit: match}\"></ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n      <div class=\"ngtt-de__winners-round-wrapper\">\r\n        <div class=\"ngtt-de__finale-match-wrapper\">\r\n          <div class=\"ngtt-de__match-component-container\">\r\n            <ng-container *ngTemplateOutlet=\"matchTemplate; context:{$implicit: final.matches[0]}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"ngtt-de__losers-bracket-wrapper\">\r\n      <ng-container *ngFor=\"let losersround of losersBracket\">\r\n        <!--      {{losersround.round}}<br>-->\r\n        <div class=\"ngtt-de__losers-round-wrapper\">\r\n          <ng-container *ngFor=\"let match of losersround.matches\">\r\n            <div class=\"ngtt-de__losers-match-wrapper\">\r\n              <div class=\"ngtt-de__match-component-container\">\r\n                <ng-container *ngTemplateOutlet=\"matchTemplate; context:{$implicit: match}\"></ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  ",
                styles: [""]
            },] }
];
DoubleEliminationTreeComponent.ctorParameters = () => [];
DoubleEliminationTreeComponent.propDecorators = {
    matchTemplate: [{ type: Input }],
    tournament: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG91YmxlLWVsaW1pbmF0aW9uLXRyZWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRuLXRvdXJuYW1lbnQvc3JjL2xpYi9kb3VibGUtZWxpbWluYXRpb24tdHJlZS9kb3VibGUtZWxpbWluYXRpb24tdHJlZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQXdDLE1BQU0sZUFBZSxDQUFDO0FBUXRGLE1BQU0sT0FBTyw4QkFBOEI7SUFXekM7SUFDQSxDQUFDO0lBRUQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ3pELE9BQU8sS0FBSyxDQUFDLElBQUksS0FBSyxjQUFjLENBQUM7UUFDdkMsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUMxRCxPQUFPLEtBQUssQ0FBQyxJQUFJLEtBQUssZUFBZSxDQUFDO1FBQ3hDLENBQUMsQ0FBQyxDQUFDO1FBQ0QsWUFBWTtRQUNkLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFO1lBQ2pELE9BQU8sS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLENBQUM7UUFDaEMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDYixDQUFDOzs7WUE5QkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSw2QkFBNkI7Z0JBQ3ZDLDB1REFBdUQ7O2FBRXhEOzs7OzRCQUVFLEtBQUs7eUJBRUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBUZW1wbGF0ZVJlZn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7QWRuUm91bmQsIEFkblRvdXJuYW1lbnR9IGZyb20gJy4uL2RlY2xhcmF0aW9ucy9pbnRlcmZhY2VzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYWRuLWRvdWJsZS1lbGltaW5hdGlvbi10cmVlJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZG91YmxlLWVsaW1pbmF0aW9uLXRyZWUuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2RvdWJsZS1lbGltaW5hdGlvbi10cmVlLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIERvdWJsZUVsaW1pbmF0aW9uVHJlZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XHJcbiAgQElucHV0KClcclxuICBtYXRjaFRlbXBsYXRlITogVGVtcGxhdGVSZWY8YW55PjtcclxuICBASW5wdXQoKVxyXG4gIHRvdXJuYW1lbnQhOiBBZG5Ub3VybmFtZW50O1xyXG5cclxuICBwdWJsaWMgbG9zZXJzQnJhY2tldCE6IEFkblJvdW5kW107XHJcbiAgcHVibGljIHdpbm5lcnNCcmFja2V0ITogQWRuUm91bmRbXTtcclxuICAvL0B0cy1pZ25vcmVcclxuICBwdWJsaWMgZmluYWw6IEFkblJvdW5kO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcclxuICAgIHRoaXMubG9zZXJzQnJhY2tldCA9IHRoaXMudG91cm5hbWVudC5yb3VuZHMuZmlsdGVyKHJvdW5kID0+IHtcclxuICAgICAgcmV0dXJuIHJvdW5kLnR5cGUgPT09ICdMb3NlcmJyYWNrZXQnO1xyXG4gICAgfSk7XHJcbiAgICB0aGlzLndpbm5lcnNCcmFja2V0ID0gdGhpcy50b3VybmFtZW50LnJvdW5kcy5maWx0ZXIocm91bmQgPT4ge1xyXG4gICAgICByZXR1cm4gcm91bmQudHlwZSA9PT0gJ1dpbm5lcmJyYWNrZXQnO1xyXG4gICAgfSk7XHJcbiAgICAgIC8vQHRzLWlnbm9yZVxyXG4gICAgdGhpcy5maW5hbCA9IHRoaXMudG91cm5hbWVudC5yb3VuZHMuZmlsdGVyKHJvdW5kID0+IHtcclxuICAgICAgcmV0dXJuIHJvdW5kLnR5cGUgPT09ICdGaW5hbCc7XHJcbiAgICB9KS5zaGlmdCgpO1xyXG4gIH1cclxuXHJcbn1cclxuIl19