@ethlete/cdk 4.28.0 → 4.28.1

package/src/lib/components/bracket/components/bracket/bracket.component.ts

@@ -1,358 +0,0 @@
-import { ComponentPortal, ComponentType, PortalModule } from '@angular/cdk/portal';
-import { AsyncPipe, NgClass } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostBinding,
-  Injector,
-  Input,
-  TrackByFunction,
-  ViewEncapsulation,
-  inject,
-} from '@angular/core';
-import { LetDirective, Memo } from '@ethlete/core';
-import { RoundStageStructureWithMatchesView } from '@ethlete/types';
-import { BehaviorSubject, map } from 'rxjs';
-import { BRACKET_CONFIG_TOKEN, BRACKET_MATCH_ID_TOKEN, BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN } from '../../constants';
-import { BracketConfig, BracketMatch, BracketRound } from '../../types';
-import { Bracket, createBracketConfig, orderRounds } from '../../utils';
-import { ConnectedMatches } from './bracket.component.types';
-
-@Component({
-  selector: 'et-bracket',
-  templateUrl: './bracket.component.html',
-  styleUrls: ['./bracket.component.scss'],
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgClass, LetDirective, PortalModule, AsyncPipe],
-  host: {
-    class: 'et-bracket',
-  },
-  providers: [
-    {
-      provide: BRACKET_TOKEN,
-      useExisting: BracketComponent,
-    },
-  ],
-})
-export class BracketComponent {
-  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-  private _bracketConfig = inject(BRACKET_CONFIG_TOKEN, { optional: true });
-  private _injector = inject(Injector);
-
-  @Input()
-  get itemWith() {
-    return this._itemWith;
-  }
-  set itemWith(v: string) {
-    this._itemWith = v;
-
-    this._elementRef.nativeElement.style.setProperty('--_bracket-item-width', v);
-  }
-  private _itemWith = '200px';
-
-  @Input()
-  get itemHeight() {
-    return this._itemHeight;
-  }
-  set itemHeight(v: string) {
-    this._itemHeight = v;
-    this._elementRef.nativeElement.style.setProperty('--_bracket-item-height', v);
-  }
-  private _itemHeight = '100px';
-
-  @Input()
-  get roundHeaderHeight() {
-    return this._roundHeaderHeight;
-  }
-  set roundHeaderHeight(v: string) {
-    this._roundHeaderHeight = v;
-    this._elementRef.nativeElement.style.setProperty('--_round-header-height', v);
-  }
-  private _roundHeaderHeight = '50px';
-
-  @Input()
-  get upperLowerBracketGap() {
-    return this._upperLowerBracketGap;
-  }
-  set upperLowerBracketGap(v: string) {
-    this._upperLowerBracketGap = v;
-    this._elementRef.nativeElement.style.setProperty('--_upper-lower-bracket-gap', v);
-  }
-  private _upperLowerBracketGap = '0px';
-
-  @Input()
-  get columnGap() {
-    return this._columnGap;
-  }
-  set columnGap(v: string) {
-    this._columnGap = v;
-    this._elementRef.nativeElement.style.setProperty('--_bracket-column-gap', v);
-  }
-  private _columnGap!: string;
-
-  @Input()
-  get rowGap() {
-    return this._rowGap;
-  }
-  set rowGap(v: string) {
-    this._rowGap = v;
-    this._elementRef.nativeElement.style.setProperty('--_bracket-row-gap', v);
-  }
-  private _rowGap!: string;
-
-  @Input()
-  get roundsWithMatches() {
-    return this._roundsWithMatches;
-  }
-  set roundsWithMatches(v: RoundStageStructureWithMatchesView[] | null | undefined) {
-    this._roundsWithMatches = v;
-
-    if (!v || v.length === 0) {
-      this._bracket$.next(null);
-      this._roundsWithMatches = null;
-    } else {
-      const sortedRounds = orderRounds(v);
-
-      this._bracket$.next(new Bracket(sortedRounds));
-      this._roundsWithMatches = sortedRounds;
-    }
-  }
-  private _roundsWithMatches!: RoundStageStructureWithMatchesView[] | null | undefined;
-
-  @Input()
-  get componentConfig() {
-    return this._componentConfig;
-  }
-  set componentConfig(v: BracketConfig | null) {
-    this._componentConfig = v;
-    this._config = createBracketConfig(this._bracketConfig, v);
-  }
-  private _componentConfig: BracketConfig | null = null;
-
-  @HostBinding('attr.has-round-headers')
-  get hasRoundHeaders() {
-    return !!this._config?.roundHeaderComponent;
-  }
-
-  protected _config = createBracketConfig(this._componentConfig, this._bracketConfig);
-  protected _bracket$ = new BehaviorSubject<Bracket | null>(null);
-
-  trackByRound: TrackByFunction<BracketRound> = (_, round) => round.data.id;
-  trackByMatch: TrackByFunction<BracketMatch> = (_, match) => match.data.id;
-
-  getBracketMatchById(id: string) {
-    return this._bracket$.pipe(map((bracket) => bracket?.getMatchById(id) ?? null));
-  }
-
-  getBracketRoundById(id: string) {
-    return this._bracket$.pipe(map((bracket) => bracket?.getRoundById(id) ?? null));
-  }
-
-  @Memo({
-    resolver: (match: BracketMatch, bracket: Bracket) =>
-      `${match.data.id}-${match.previousMatches?.roundId ?? null} ${bracket.id}`,
-  })
-  protected getConnectedMatches(match: BracketMatch, bracket: Bracket): ConnectedMatches {
-    const previousMatches = this._getPreviousMatches(match, bracket);
-    const nextMatch = this._getNextMatch(match, bracket);
-
-    return {
-      previousMatches,
-      nextMatch,
-    };
-  }
-
-  @Memo({
-    resolver: (currentMatch: BracketMatch, nextMatch: BracketMatch | null) =>
-      `${currentMatch.data.id}-${nextMatch?.previousMatches?.roundId ?? null}`,
-  })
-  protected getChildConnectorShape(currentMatch: BracketMatch, nextMatch: BracketMatch | null) {
-    if (!nextMatch) {
-      return null;
-    }
-
-    const nextMatchPreviousMatches = nextMatch.previousMatches?.matchIds;
-
-    if (!nextMatchPreviousMatches) {
-      return null;
-    }
-
-    const nextMatchPreviousMatchA = nextMatchPreviousMatches[0];
-    const nextMatchPreviousMatchB = nextMatchPreviousMatches[1];
-
-    if (nextMatchPreviousMatches.length === 1) {
-      return 'straight';
-    }
-
-    if (currentMatch.data.id === nextMatchPreviousMatchA) {
-      return 'down';
-    }
-
-    if (currentMatch.data.id === nextMatchPreviousMatchB) {
-      return 'up';
-    }
-
-    return null;
-  }
-
-  @Memo({
-    resolver: (roundIndex: number, bracket: Bracket) => `${roundIndex}-${bracket.id}`,
-  })
-  protected getLineMultiAfter(roundIndex: number, bracket: Bracket) {
-    const isDoubleElimination = bracket.bracketType === 'double';
-    const currentRound = bracket.bracketRounds[roundIndex];
-    const nextRound = bracket.bracketRounds[roundIndex + 1];
-
-    // for connecting the last looser match and the respective semi final winner match
-    if (
-      isDoubleElimination &&
-      (!nextRound || nextRound.data.type === 'third_place') &&
-      currentRound?.data.type === 'loser_bracket'
-    ) {
-      return bracket.totalRowCount - 1;
-    }
-
-    if (!nextRound) {
-      return 1;
-    }
-
-    if (nextRound.matches.length === currentRound?.matches.length) {
-      return 1;
-    }
-
-    if (!isDoubleElimination) {
-      return 2 ** roundIndex;
-    } else {
-      let rndIndex = roundIndex;
-
-      if (currentRound?.data.type === 'loser_bracket') {
-        const totalWinnerRounds = bracket.winnerRoundCount;
-        const looserRoundIndex =
-          currentRound.data.type === 'loser_bracket' ? roundIndex - totalWinnerRounds : roundIndex;
-
-        rndIndex = looserRoundIndex / 2;
-      }
-
-      return 2 ** rndIndex;
-    }
-  }
-
-  @Memo({
-    resolver: (
-      affectedRound: BracketRound | null,
-      previousRound: BracketRound | null,
-      currentRound: BracketRound | null,
-      nextRound: BracketRound | null,
-      bracket: Bracket,
-    ) =>
-      `${affectedRound?.data.id} ${previousRound?.data.id} ${currentRound?.data.id} ${nextRound?.data.id} ${bracket.id}`,
-  })
-  protected getLineSpan(
-    affectedRound: BracketRound | null,
-    previousRound: BracketRound | null,
-    currentRound: BracketRound | null,
-    nextRound: BracketRound | null,
-    bracket: Bracket,
-  ) {
-    if (!affectedRound) {
-      return 0;
-    }
-
-    // There is never a connection to the third place match
-    if (nextRound?.data.type === 'third_place') {
-      return 0;
-    }
-
-    if (bracket.isPartialDoubleElimination) {
-      if (affectedRound === nextRound && nextRound.data.type === 'final') {
-        return 2;
-      } else if (affectedRound === currentRound && currentRound?.data.type === 'final') {
-        return 0;
-      } else if (affectedRound === previousRound && currentRound?.data.type === 'final') {
-        return 0;
-      }
-    }
-
-    return affectedRound.column.end - affectedRound.column.start;
-  }
-
-  @Memo({
-    resolver: (round: BracketRound) => `${round.data.id}`,
-  })
-  protected createRoundPortal(round: BracketRound, component: ComponentType<unknown>) {
-    const injector = Injector.create({
-      providers: [
-        {
-          provide: BRACKET_ROUND_ID_TOKEN,
-          useValue: round.data.id,
-        },
-      ],
-      parent: this._injector,
-    });
-
-    const portal = new ComponentPortal(component, null, injector);
-
-    return portal;
-  }
-
-  @Memo({
-    resolver: (match: BracketMatch) => `${match.data.id}`,
-  })
-  protected createMatchPortal(match: BracketMatch, component: ComponentType<unknown>) {
-    const injector = Injector.create({
-      providers: [
-        {
-          provide: BRACKET_MATCH_ID_TOKEN,
-          useValue: match.data.id,
-        },
-      ],
-      parent: this._injector,
-    });
-
-    const portal = new ComponentPortal(component, null, injector);
-
-    return portal;
-  }
-
-  @Memo({ resolver: (id: string, bracket: Bracket) => `${id}-${bracket.id}` })
-  private _getRoundById(id: string, bracket: Bracket) {
-    return bracket?.bracketRounds.find((round) => round.data.id === id) ?? null;
-  }
-
-  @Memo({
-    resolver: (match: BracketMatch, bracket: Bracket) =>
-      `${match.data.id}-${match.previousMatches?.roundId ?? null} ${bracket.id}`,
-  })
-  private _getPreviousMatches(match: BracketMatch, bracket: Bracket) {
-    if (!match.previousMatches) {
-      return null;
-    }
-
-    const { roundId, matchIds } = match.previousMatches;
-
-    const round = this._getRoundById(roundId, bracket);
-
-    return matchIds.map((matchId: string) => {
-      return round?.matches.find((match) => match.data.id === matchId) ?? null;
-    });
-  }
-
-  @Memo({
-    resolver: (match: BracketMatch, bracket: Bracket) =>
-      `${match.data.id}-${match.previousMatches?.roundId ?? null} ${bracket.id}`,
-  })
-  private _getNextMatch(match: BracketMatch, bracket: Bracket) {
-    if (!match.nextMatch) {
-      return null;
-    }
-
-    const { roundId, matchId } = match.nextMatch;
-
-    const round = this._getRoundById(roundId, bracket);
-
-    return round?.matches.find((match) => match.data.id === matchId) ?? null;
-  }
-}

package/src/lib/components/bracket/components/bracket/bracket.component.types.ts

@@ -1,6 +0,0 @@
-import { BracketMatch } from '../../types';
-
-export interface ConnectedMatches {
-  previousMatches: (BracketMatch | null)[] | null;
-  nextMatch: BracketMatch | null;
-}

package/src/lib/components/bracket/constants/bracket.constants.ts

@@ -1,15 +0,0 @@
-import { InjectionToken } from '@angular/core';
-import { BracketComponent } from '../components/bracket';
-import { BracketMatchComponent } from '../partials/bracket-match';
-import { BracketRoundHeaderComponent } from '../partials/bracket-round-header';
-import { BracketConfig } from '../types';
-
-export const BRACKET_TOKEN = new InjectionToken<BracketComponent>('BRACKET_TOKEN');
-export const BRACKET_CONFIG_TOKEN = new InjectionToken<BracketConfig>('BRACKET_CONFIG_TOKEN');
-export const BRACKET_ROUND_ID_TOKEN = new InjectionToken<string>('BRACKET_ROUND_ID_TOKEN');
-export const BRACKET_MATCH_ID_TOKEN = new InjectionToken<string>('BRACKET_MATCH_ID_TOKEN');
-
-export const BRACKET_DEFAULT_CONFIG: BracketConfig = {
-  roundHeaderComponent: BracketRoundHeaderComponent,
-  matchComponent: BracketMatchComponent,
-} as const;

package/src/lib/components/bracket/directives/bracket-match/bracket-match.directive.ts

@@ -1,12 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { BRACKET_MATCH_ID_TOKEN, BRACKET_TOKEN } from '../../constants';
-
-@Directive({
-  standalone: true,
-})
-export class BracketMatchDirective {
-  matchId = inject(BRACKET_MATCH_ID_TOKEN);
-  bracket = inject(BRACKET_TOKEN);
-
-  match$ = this.bracket.getBracketMatchById(this.matchId);
-}

package/src/lib/components/bracket/directives/bracket-round/bracket-round.directive.ts

@@ -1,12 +0,0 @@
-import { Directive, inject } from '@angular/core';
-import { BRACKET_ROUND_ID_TOKEN, BRACKET_TOKEN } from '../../constants';
-
-@Directive({
-  standalone: true,
-})
-export class BracketRoundDirective {
-  roundId = inject(BRACKET_ROUND_ID_TOKEN);
-  bracket = inject(BRACKET_TOKEN);
-
-  round$ = this.bracket.getBracketRoundById(this.roundId);
-}

package/src/lib/components/bracket/partials/bracket-match/bracket-match.component.html

@@ -1,3 +0,0 @@
-@if (matchData.match$ | async; as match) {
-  {{ match.data.id }}
-}

package/src/lib/components/bracket/partials/bracket-match/bracket-match.component.scss

@@ -1,2 +0,0 @@
-.et-bracket-match {
-}

package/src/lib/components/bracket/partials/bracket-match/bracket-match.component.ts

@@ -1,20 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
-import { BracketMatchDirective } from '../../directives/bracket-match';
-
-@Component({
-  selector: 'et-bracket-match',
-  templateUrl: './bracket-match.component.html',
-  styleUrls: ['./bracket-match.component.scss'],
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'et-bracket-match',
-  },
-  imports: [AsyncPipe],
-  hostDirectives: [BracketMatchDirective],
-})
-export class BracketMatchComponent {
-  matchData = inject(BracketMatchDirective);
-}

package/src/lib/components/bracket/partials/bracket-round-header/bracket-round-header.component.html

@@ -1,3 +0,0 @@
-@if (roundData.round$ | async; as round) {
-  {{ round.name }}
-}

package/src/lib/components/bracket/partials/bracket-round-header/bracket-round-header.component.scss

@@ -1,2 +0,0 @@
-.et-bracket-round-header {
-}

package/src/lib/components/bracket/partials/bracket-round-header/bracket-round-header.component.ts

@@ -1,20 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
-import { BracketRoundDirective } from '../../directives/bracket-round';
-
-@Component({
-  selector: 'et-bracket-round-header',
-  templateUrl: './bracket-round-header.component.html',
-  styleUrls: ['./bracket-round-header.component.scss'],
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'et-bracket-round-header',
-  },
-  imports: [AsyncPipe],
-  hostDirectives: [BracketRoundDirective],
-})
-export class BracketRoundHeaderComponent {
-  roundData = inject(BracketRoundDirective);
-}

package/src/lib/components/bracket/stories/bracket.component.stories.ts

@@ -1,64 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Meta, StoryFn } from '@storybook/angular';
-import CustomMDXDocumentation from './bracket.docs.mdx';
-import { StorybookBracketComponent } from './components';
-import {
-  ET_DUMMY_DATA_DOUBLE_ASYNC,
-  ET_DUMMY_DATA_DOUBLE_SYNC,
-  ET_DUMMY_DATA_SINGLE,
-  ET_DUMMY_DATA_SWISS,
-} from './dummy-data';
-
-export default {
-  title: 'CDK/Bracket',
-  component: StorybookBracketComponent,
-  args: {
-    itemWith: '344px',
-    itemHeight: '107px',
-    columnGap: '3rem',
-    rowGap: '1rem',
-    roundHeaderHeight: '21px',
-    upperLowerBracketGap: '0px',
-  },
-  parameters: {
-    docs: {
-      page: CustomMDXDocumentation,
-    },
-  },
-} as Meta<StorybookBracketComponent>;
-
-const Template: StoryFn<StorybookBracketComponent> = (args) => ({
-  props: args,
-});
-
-export const Single = {
-  render: Template,
-
-  args: {
-    roundsWithMatches: ET_DUMMY_DATA_SINGLE as any,
-  },
-};
-
-export const Double_Sync = {
-  render: Template,
-
-  args: {
-    roundsWithMatches: ET_DUMMY_DATA_DOUBLE_SYNC as any,
-  },
-};
-
-export const Double_Async = {
-  render: Template,
-
-  args: {
-    roundsWithMatches: ET_DUMMY_DATA_DOUBLE_ASYNC as any,
-  },
-};
-
-export const Swiss = {
-  render: Template,
-
-  args: {
-    roundsWithMatches: ET_DUMMY_DATA_SWISS as any,
-  },
-};

package/src/lib/components/bracket/stories/bracket.docs.mdx

@@ -1,24 +0,0 @@
-# Bracket
-
-Display a bracket view of a tournament (single or double elimination).
-Imported by adding the `BracketImports` array to the `imports` array in your standalone component.
-Default configuration can be provided by adding `provideBracketConfig()` to a `providers` array. This allows for defining a match item & round header component.
-Relevant information (such as match id or round details) will be injected into the respective components.
-
-## Usage
-
-Wrapping the bracket component in a scrollable component is recommended to avoid overflow issues.
-
-```html
-<et-scrollable stickyButtons>
-  <et-bracket
-    [itemHeight]="itemHeight"
-    [itemWith]="itemWith"
-    [columnGap]="columnGap"
-    [rowGap]="rowGap"
-    [roundsWithMatches]="roundsWithMatches"
-    [roundHeaderHeight]="roundHeaderHeight"
-    [upperLowerBracketGap]="upperLowerBracketGap"
-  ></et-bracket>
-</et-scrollable>
-```

package/src/lib/components/bracket/stories/components/bracket-storybook.component.ts

@@ -1,102 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { RoundStageStructureWithMatchesView } from '@ethlete/types';
-import { ScrollableImports } from '../../../scrollable/scrollable.imports';
-import { BracketComponent } from '../../components/bracket';
-
-@Component({
-  selector: 'et-sb-bracket',
-  template: `
-    <et-scrollable stickyButtons>
-      <et-bracket
-        [itemHeight]="itemHeight"
-        [itemWith]="itemWith"
-        [columnGap]="columnGap"
-        [rowGap]="rowGap"
-        [roundsWithMatches]="roundsWithMatches"
-        [roundHeaderHeight]="roundHeaderHeight"
-        [upperLowerBracketGap]="upperLowerBracketGap"
-      />
-    </et-scrollable>
-  `,
-  styles: [
-    `
-      .et-bracket-match {
-        background-color: rgb(101, 101, 101);
-        border-radius: 10px;
-        font-size: 10px;
-        padding: 1rem;
-        box-sizing: border-box;
-      }
-
-      .et-bracket-round {
-        font-size: 10px;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-bottom: 1px solid rgb(101, 101, 101);
-      }
-    `,
-  ],
-  standalone: true,
-  imports: [BracketComponent, ScrollableImports],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class StorybookBracketComponent {
-  get itemWith() {
-    return this._itemWith;
-  }
-  set itemWith(v: string) {
-    this._itemWith = v;
-  }
-  private _itemWith!: string;
-
-  get itemHeight() {
-    return this._itemHeight;
-  }
-  set itemHeight(v: string) {
-    this._itemHeight = v;
-  }
-  private _itemHeight!: string;
-
-  get roundHeaderHeight() {
-    return this._roundHeaderHeight;
-  }
-  set roundHeaderHeight(v: string) {
-    this._roundHeaderHeight = v;
-  }
-  private _roundHeaderHeight!: string;
-
-  get columnGap() {
-    return this._columnGap;
-  }
-  set columnGap(v: string) {
-    this._columnGap = v;
-  }
-  private _columnGap!: string;
-
-  get rowGap() {
-    return this._rowGap;
-  }
-  set rowGap(v: string) {
-    this._rowGap = v;
-  }
-  private _rowGap!: string;
-
-  get upperLowerBracketGap() {
-    return this._upperLowerBracketGap;
-  }
-  set upperLowerBracketGap(v: string) {
-    this._upperLowerBracketGap = v;
-  }
-  private _upperLowerBracketGap = '0px';
-
-  get roundsWithMatches() {
-    return this._roundsWithMatches;
-  }
-  set roundsWithMatches(v: RoundStageStructureWithMatchesView[] | null | undefined) {
-    this._roundsWithMatches = v;
-  }
-  private _roundsWithMatches!: RoundStageStructureWithMatchesView[] | null | undefined;
-}

package/src/lib/components/bracket/stories/components/index.ts

@@ -1 +0,0 @@
-export * from './bracket-storybook.component';