@ethlete/cdk 4.28.0 → 4.28.2

package/src/lib/components/bracket/stories/dummy-data/index.ts

@@ -1,5 +0,0 @@
-export * from './ET_DUMMY_DATA_DOUBLE_SYNC';
-export * from './ET_DUMMY_DATA_SINGLE';
-export * from './ET_DUMMY_DATA_SWISS';
-export * from './ET_DUMMY_DATE_DOUBLE_ASYNC';
-export * from './FIFA_DUMMY_DATA_DOUBLE_4';

package/src/lib/components/bracket/types/bracket-config.types.ts

@@ -1,6 +0,0 @@
-import { ComponentType } from '@angular/cdk/portal';
-
-export interface BracketConfig {
-  roundHeaderComponent: ComponentType<unknown> | null;
-  matchComponent: ComponentType<unknown>;
-}

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

@@ -1,37 +0,0 @@
-import { MatchListView, RoundStageStructureView } from '@ethlete/types';
-
-export interface BracketRound {
-  matchCount: number;
-  name: string | null;
-  matches: BracketMatch[];
-  data: RoundStageStructureView;
-
-  row: {
-    start: number;
-    end: number;
-  };
-
-  column: {
-    start: number;
-    end: number;
-  };
-}
-
-export interface BracketMatch {
-  data: MatchListView;
-
-  row: {
-    start: number;
-    end: number;
-  };
-
-  previousMatches: {
-    roundId: string;
-    matchIds: string[];
-  } | null;
-
-  nextMatch: {
-    roundId: string;
-    matchId: string;
-  } | null;
-}

package/src/lib/components/bracket/utils/bracket-config.utils.ts

@@ -1,18 +0,0 @@
-import { BRACKET_CONFIG_TOKEN, BRACKET_DEFAULT_CONFIG } from '../constants';
-import { BracketConfig } from '../types';
-
-export const createBracketConfig = (
-  globalConfig: Partial<BracketConfig> | null | undefined = {},
-  localConfig: Partial<BracketConfig> | null | undefined = {},
-): BracketConfig => ({
-  ...BRACKET_DEFAULT_CONFIG,
-  ...(globalConfig || {}),
-  ...(localConfig || {}),
-});
-
-export const provideBracketConfig = (config: Partial<BracketConfig> | null | undefined = {}) => {
-  return {
-    provide: BRACKET_CONFIG_TOKEN,
-    useValue: createBracketConfig(config),
-  };
-};

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

@@ -1,440 +0,0 @@
-import { MatchListView, RoundStageStructureWithMatchesView } from '@ethlete/types';
-import { BracketMatch, BracketRound } from '../types';
-
-let bracketId = 0;
-
-export const isUpperBracketMatch = (match: RoundStageStructureWithMatchesView | null | undefined) => {
-  if (!match) {
-    return false;
-  }
-
-  return (
-    match.round.type === 'winner_bracket' ||
-    match.round.type === 'final' ||
-    match.round.type === 'normal' ||
-    match.round.type === 'reverse_final' ||
-    !match.round.type
-  );
-};
-
-export const orderRounds = (rounds: RoundStageStructureWithMatchesView[]) => {
-  const normalRounds = orderRoundsByRoundNumber(rounds.filter((r) => r.round.type === 'normal'));
-  const winnerRounds = orderRoundsByRoundNumber(rounds.filter((r) => r.round.type === 'winner_bracket'));
-  const loserRounds = orderRoundsByRoundNumber(rounds.filter((r) => r.round.type === 'loser_bracket'));
-  const finalRounds = rounds.filter((r) => r.round.type === 'final');
-  const reverseFinalRounds = rounds.filter((r) => r.round.type === 'reverse_final');
-  const thirdPlaceRounds = rounds.filter((r) => r.round.type === 'third_place');
-
-  return [...winnerRounds, ...normalRounds, ...finalRounds, ...reverseFinalRounds, ...loserRounds, ...thirdPlaceRounds];
-};
-
-export const orderRoundsByRoundNumber = (rounds: RoundStageStructureWithMatchesView[]) => {
-  return rounds.slice(0).sort((a, b) => {
-    if (a.round.number < b.round.number) {
-      return -1;
-    }
-    if (a.round.number > b.round.number) {
-      return 1;
-    }
-    return 0;
-  });
-};
-
-export const normalizeRoundType = (roundType: string | null | undefined) => {
-  if (!roundType) {
-    return null;
-  }
-
-  if (
-    roundType === 'normal' ||
-    roundType === 'winner_bracket' ||
-    roundType === 'final' ||
-    roundType === 'reverse_final'
-  ) {
-    return 'upper';
-  }
-
-  return 'lower';
-};
-
-export class Bracket {
-  get winnerRounds() {
-    return this._roundsWithMatches.filter((r) => isUpperBracketMatch(r));
-  }
-
-  get loserRounds() {
-    return this._roundsWithMatches.filter((r) => r.round.type === 'loser_bracket');
-  }
-
-  get firstWinnerRound() {
-    return this.winnerRounds[0] ?? null;
-  }
-
-  get firstLoserRound() {
-    return this.loserRounds[0] ?? null;
-  }
-
-  get winnerRoundCount() {
-    return this.winnerRounds.length;
-  }
-
-  get loserRoundCount() {
-    return this.loserRounds.length;
-  }
-
-  get bracketSize() {
-    return this.firstWinnerRound ? this.firstWinnerRound.matches.length * 2 : 0;
-  }
-
-  get bracketType() {
-    return !this.loserRoundCount ? 'single' : 'double';
-  }
-
-  get winnerBracketRowCount() {
-    return this.firstWinnerRound?.matches.length ?? 0;
-  }
-
-  get loserBracketRowCount() {
-    return this.firstLoserRound?.matches.length ?? 0;
-  }
-
-  get totalRowCount() {
-    return this.winnerBracketRowCount + this.loserBracketRowCount + 1;
-  }
-
-  get totalColCount() {
-    return this.bracketType === 'single'
-      ? this.winnerRoundCount
-      : this.loserRoundCount + (this.winnerRoundCount - this.loserRoundCount / 2) - 1;
-  }
-
-  get winnerRowStart() {
-    return 1;
-  }
-
-  get winnerRowEnd() {
-    return this.bracketType === 'single' ? this.totalRowCount : this.totalRowCount - this.winnerBracketRowCount;
-  }
-
-  get loserRowStart() {
-    return this.winnerBracketRowCount + 1;
-  }
-
-  get loserRowEnd() {
-    return this.totalRowCount;
-  }
-
-  get indexOfLooserRoundStart() {
-    return this._roundsWithMatches.findIndex((r) => r.round.type === 'loser_bracket');
-  }
-
-  get looserRowAdditionalRoundCount() {
-    if (this.bracketType === 'single') {
-      return 0;
-    }
-
-    const winnerRounds = this._roundsWithMatches.filter((r) => r.round.type === 'winner_bracket');
-    const winnerRoundCount = winnerRounds.length;
-    const loserRounds = this._roundsWithMatches.filter((r) => r.round.type === 'loser_bracket');
-    const loserRoundCount = loserRounds.length;
-
-    return loserRoundCount - winnerRoundCount;
-  }
-
-  get isPartialDoubleElimination() {
-    return (
-      this.bracketType === 'double' && this.firstWinnerRound?.matches.length === this.firstLoserRound?.matches.length
-    );
-  }
-
-  readonly bracketRounds: BracketRound[];
-  readonly id = bracketId++;
-
-  private readonly _bracketMatches: BracketMatch[];
-
-  constructor(private _roundsWithMatches: RoundStageStructureWithMatchesView[]) {
-    this.bracketRounds = this._computeBracket(_roundsWithMatches);
-
-    const rounds = this.bracketRounds.map((r) => r.matches);
-    const flatMatches: BracketMatch[] = [];
-
-    for (const round of rounds) {
-      for (const match of round) {
-        flatMatches.push(match);
-      }
-    }
-
-    this._bracketMatches = flatMatches;
-  }
-
-  getRoundById(roundId: string) {
-    return this.bracketRounds.find((r) => r.data.id === roundId);
-  }
-
-  getMatchById(matchId: string) {
-    return this._bracketMatches.find((m) => m.data.id === matchId);
-  }
-
-  private _computeBracket(data: RoundStageStructureWithMatchesView[]) {
-    const rounds: BracketRound[] = [];
-
-    for (const [index, round] of data.entries()) {
-      let relativeIndex = index;
-
-      if (index === this.indexOfLooserRoundStart || index > this.indexOfLooserRoundStart) {
-        relativeIndex = index - this.indexOfLooserRoundStart;
-      }
-
-      let previousRound: RoundStageStructureWithMatchesView | null = data[index - 1] ?? null;
-      const nextRound: RoundStageStructureWithMatchesView | null = data[index + 1] ?? null;
-
-      // Switching to loser bracket should reset the previousRound.
-      if (normalizeRoundType(previousRound?.round.type) !== normalizeRoundType(round.round.type)) {
-        previousRound = null;
-      }
-
-      rounds.push(this._transformRound(round, relativeIndex, previousRound, nextRound));
-    }
-
-    return rounds;
-  }
-
-  private _transformRound = (
-    currentRound: RoundStageStructureWithMatchesView,
-    currentRoundIndex: number,
-    previousRound: RoundStageStructureWithMatchesView | null,
-    nextRound: RoundStageStructureWithMatchesView | null,
-  ): BracketRound => {
-    const matchCount = currentRound.matches.length;
-    const name = currentRound.round.name;
-    const isWinnerBracket = isUpperBracketMatch(currentRound);
-    const isDoubleElimination = this.bracketType === 'double';
-
-    let colStart = 0;
-    let colEnd = 0;
-
-    let rowStart = isWinnerBracket ? this.winnerRowStart : this.loserRowStart;
-    let rowEnd = isWinnerBracket ? this.winnerRowEnd : this.loserRowEnd;
-    let firstRoundMatchCount = isWinnerBracket
-      ? this.firstWinnerRound?.matches.length
-      : this.firstLoserRound?.matches.length;
-
-    if (isDoubleElimination) {
-      if (isWinnerBracket) {
-        if (currentRoundIndex === 0) {
-          // The first winner bracket round is always 1 col wide.
-          colStart = 1;
-          colEnd = 1;
-        } else {
-          const colStartDouble = currentRoundIndex * 2;
-          const colEndDouble = colStartDouble + 1;
-          const isSemiFinalRound = currentRound.round.type === 'winner_bracket' && matchCount === 1;
-
-          // If the col end is greater than the total looser rounds, then we need to span 2 cols,
-          // since the loser bracket will always play 2 rounds per winner bracket round.
-          // We also need to span 2 col if the current round is the semi final round AND we have an async start.
-          // Async start means that the first winner round's matches length is equal to the first loser round's matches length.
-          // This is produced by only showing a part (eg. the last 5 rounds) of a much bigger bracket.
-          if (colEndDouble < this.loserRoundCount || (isSemiFinalRound && this.isPartialDoubleElimination)) {
-            colStart = colStartDouble;
-
-            // We need to add one to the col to create a actual grid span
-            colEnd = colEndDouble + 1;
-          } else {
-            // If the col end is greater than the total looser rounds, then we need to go back to 1 col wide,
-            // since this is the point where semi finals, finals (and second chance final) are played
-            const overshoot = colEndDouble - this.loserRoundCount;
-            let delta = Math.floor(overshoot / 2);
-
-            if (this.isPartialDoubleElimination) {
-              delta = delta - 1;
-            }
-
-            colStart = colStartDouble - delta;
-            colEnd = colStartDouble - delta;
-
-            // If the overshoot is bigger than 1, we need to adjust the row start and end to span over the whole grid,
-            // since we are in the final round(s).
-            // Overshoot 1 means we are in the semi final round and there is a loser bracket round in this step (the last one).
-            if (overshoot > 1) {
-              rowStart = 1;
-              rowEnd = this.totalRowCount;
-              firstRoundMatchCount = this.totalRowCount - 1;
-            }
-          }
-        }
-      } else if (currentRound.round.type === 'third_place') {
-        const hasSecondChanceFinal = this._roundsWithMatches.some((r) => r.round.type === 'reverse_final');
-
-        // Span the third place match form final to second chance final
-        if (hasSecondChanceFinal) {
-          colStart = currentRoundIndex + 1;
-          colEnd = currentRoundIndex + 3;
-        } else {
-          // Keep the third place match in the same col as the final
-          colStart = currentRoundIndex + 1;
-          colEnd = currentRoundIndex + 1;
-        }
-      } else {
-        // Loser bracket rounds are always 1 col wide.
-        colStart = currentRoundIndex + 1;
-        colEnd = currentRoundIndex + 1;
-      }
-    } else {
-      if (currentRound.round.type === 'third_place') {
-        // The third place match is always in the same col as the final
-        colStart = currentRoundIndex - 1;
-        colEnd = currentRoundIndex - 1;
-
-        if (this.winnerRowEnd - 1 === 2) {
-          // Special case for 2 match brackets
-          rowStart = 2;
-          rowEnd = 2;
-        } else if (this.winnerRowEnd - 1 === 4) {
-          // Special case for 4 match brackets
-          rowStart = 3;
-          rowEnd = 3;
-        } else if (this.winnerRowEnd - 1 > 4) {
-          // Special case for 8+ match brackets. This will result in it being in the same row as the second semi final match.
-          rowStart = (this.winnerRowEnd - 1) / 2 + (this.winnerRowEnd - 1) / 2 / 2;
-          rowEnd = this.winnerRowEnd;
-        }
-      } else {
-        // All other single elimination rounds are always 1 col wide.
-        colStart = currentRoundIndex;
-        colEnd = currentRoundIndex;
-      }
-    }
-
-    const matches = currentRound.matches.map((match, matchIndex) => {
-      return this._transformMatch(
-        match,
-        matchIndex,
-        rowStart,
-        matchCount,
-        firstRoundMatchCount ?? 0,
-        previousRound,
-        nextRound,
-        currentRound,
-        currentRoundIndex,
-      );
-    });
-
-    return {
-      matchCount,
-      name,
-      matches,
-      data: currentRound.round,
-
-      row: {
-        start: rowStart,
-        end: rowEnd,
-      },
-      column: {
-        start: colStart,
-        end: colEnd,
-      },
-    };
-  };
-
-  private _transformMatch = (
-    match: MatchListView,
-    matchIndex: number,
-    roundRowStart: number,
-    matchCount: number,
-    firstRoundMatchCount: number,
-    previousRound: RoundStageStructureWithMatchesView | null,
-    nextRound: RoundStageStructureWithMatchesView | null,
-    currentRound: RoundStageStructureWithMatchesView | null,
-    currentRoundIndex: number,
-  ): BracketMatch => {
-    const diff = firstRoundMatchCount / matchCount;
-
-    let rowStart = roundRowStart + matchIndex * diff;
-    let rowEnd = rowStart + diff;
-
-    if (currentRound?.round.type === 'third_place' && this.bracketType === 'single') {
-      // Special case for 8+ single elimination brackets. This will result in the current match being in the same row as the second semi final match.
-      if (this.winnerRowEnd - 1 > 4) {
-        rowStart = (this.winnerRowEnd - 1) / 2;
-        rowEnd = this.winnerRowEnd - 1;
-      }
-    }
-
-    let roundsSameSize = previousRound?.matches.length === matchCount;
-    let logicalNextRound: RoundStageStructureWithMatchesView | null = null;
-
-    if (
-      (currentRound?.round.type === 'loser_bracket' && !nextRound) ||
-      (currentRound?.round.type === 'loser_bracket' && nextRound?.round.type === 'third_place')
-    ) {
-      const next = this._roundsWithMatches[currentRoundIndex - this.looserRowAdditionalRoundCount + 1];
-
-      if (next) {
-        // Transition from last round of looser bracket to semi final round of winner bracket
-        logicalNextRound = next;
-      }
-    } else if (
-      ((currentRound && isUpperBracketMatch(currentRound)) || !currentRound?.round.type) &&
-      nextRound?.round.type === 'loser_bracket'
-    ) {
-      // The last winner round (final) does not have a next round, but the next round is the first looser round.
-      logicalNextRound = null;
-    } else {
-      logicalNextRound = nextRound;
-    }
-
-    const previousMatchA =
-      (roundsSameSize ? previousRound?.matches[matchIndex]?.id : previousRound?.matches[matchIndex * 2]?.id) ?? null;
-    let previousMatchB = previousRound?.matches[matchIndex * 2 + 1]?.id ?? null;
-
-    // previousMatchB could be the last loser bracket match
-    if (!previousMatchB && currentRound && isUpperBracketMatch(currentRound)) {
-      const matchB = this.loserRounds[currentRoundIndex + this.looserRowAdditionalRoundCount - 1]?.matches[0];
-
-      if (this.loserRounds.length === currentRoundIndex + this.looserRowAdditionalRoundCount && matchB) {
-        previousMatchB = matchB.id;
-        roundsSameSize = false;
-      }
-    }
-
-    const nextMatch = logicalNextRound?.matches[Math.floor(matchIndex / 2)]?.id ?? null;
-
-    let previousRoundMatches = null;
-
-    if (previousRound) {
-      if (roundsSameSize && previousMatchA) {
-        // 1 match to 1 match
-        previousRoundMatches = {
-          roundId: previousRound.round.id,
-          matchIds: [previousMatchA],
-        };
-      } else if (previousMatchA && previousMatchB) {
-        // 2 matches to 1 match
-        previousRoundMatches = {
-          roundId: previousRound.round.id,
-          matchIds: [previousMatchA, previousMatchB],
-        };
-      }
-    }
-
-    const nextRoundMatch =
-      nextMatch && logicalNextRound
-        ? {
-            roundId: logicalNextRound.round.id,
-            matchId: nextMatch,
-          }
-        : null;
-
-    return {
-      row: {
-        start: rowStart,
-        end: rowEnd,
-      },
-      data: match,
-
-      previousMatches: currentRound?.round.type !== 'third_place' ? previousRoundMatches : null,
-      nextMatch: currentRound?.round.type !== 'third_place' ? nextRoundMatch : null,
-    };
-  };
-}

package/src/lib/components/button/button.imports.ts

@@ -1,4 +0,0 @@
-import { ButtonComponent } from './components/button';
-import { QueryButtonComponent } from './components/query-button';
-
-export const ButtonImports = [ButtonComponent, QueryButtonComponent] as const;

package/src/lib/components/button/components/button/button.component.html

@@ -1,5 +0,0 @@
-<span class="et-button-content">
-  <span class="et-button-text">
-    <ng-content />
-  </span>
-</span>

package/src/lib/components/button/components/button/button.component.scss

@@ -1,2 +0,0 @@
-.et-button {
-}

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

@@ -1,18 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
-import { ButtonDirective } from '../../directives/button';
-
-@Component({
-  selector: '[et-button]',
-  templateUrl: './button.component.html',
-  styleUrls: ['./button.component.scss'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  hostDirectives: [{ directive: ButtonDirective, inputs: ['disabled', 'type', 'pressed'] }],
-  host: {
-    class: 'et-button',
-  },
-})
-export class ButtonComponent {
-  protected button = inject(ButtonDirective);
-}

package/src/lib/components/button/components/query-button/query-button.component.html

@@ -1,26 +0,0 @@
-<ng-container *etLet="queryButton.showSuccess$ | async as showSuccess">
-  <ng-container *etLet="queryButton.showFailure$ | async as showFailure">
-    <span *etQuery="queryButton.query$ | async; loading as loading" class="et-button-content et-query-button-content">
-      <span
-        [attr.aria-hidden]="(loading && !queryButton.skipLoading) || showSuccess || showFailure ? 'true' : undefined"
-        class="et-button-text et-query-button-text et-query-button-text--default"
-      >
-        <ng-content />
-      </span>
-
-      @if (loading && !queryButton.skipLoading) {
-        <span class="et-query-button-loading"> </span>
-      }
-      @if (loading && !queryButton.skipLoading) {
-        <span class="et-button-text et-query-button-text et-query-button-text--loading">Loading</span>
-      }
-
-      @if (showSuccess) {
-        <span class="et-button-text et-query-button-text et-query-button-text--success">Success</span>
-      }
-      @if (showFailure) {
-        <span class="et-button-text et-query-button-text et-query-button-text--failure">Failure</span>
-      }
-    </span>
-  </ng-container>
-</ng-container>

package/src/lib/components/button/components/query-button/query-button.component.scss

@@ -1,19 +0,0 @@
-.et-query-button {
-  .et-button-content {
-    display: grid;
-  }
-
-  .et-query-button-text,
-  .et-query-button-loading {
-    grid-area: 1 / 1 / 2 / 2;
-  }
-
-  &.et-query-button--loading,
-  &.et-query-button--success,
-  &.et-query-button--failure {
-    .et-query-button-text--default {
-      opacity: 0;
-      user-select: none;
-    }
-  }
-}

package/src/lib/components/button/components/query-button/query-button.component.ts

@@ -1,26 +0,0 @@
-import { AsyncPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';
-import { LetDirective } from '@ethlete/core';
-import { QueryDirective } from '@ethlete/query';
-import { ButtonDirective } from '../../directives/button';
-import { QueryButtonDirective } from '../../directives/query-button';
-
-@Component({
-  selector: '[et-query-button]',
-  templateUrl: './query-button.component.html',
-  styleUrls: ['./query-button.component.scss'],
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  hostDirectives: [
-    { directive: QueryButtonDirective, inputs: ['query', 'skipSuccess', 'skipFailure', 'skipLoading'] },
-    { directive: ButtonDirective, inputs: ['disabled', 'type', 'pressed'] },
-  ],
-  imports: [QueryDirective, AsyncPipe, LetDirective],
-  host: {
-    class: 'et-query-button',
-  },
-})
-export class QueryButtonComponent {
-  protected queryButton = inject(QueryButtonDirective);
-}

package/src/lib/components/button/directives/button/button.directive.ts

@@ -1,68 +0,0 @@
-import { Directive, ElementRef, Input, booleanAttribute, inject } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { signalHostAttributes, signalHostClasses } from '@ethlete/core';
-import { BehaviorSubject, Observable, map } from 'rxjs';
-
-type ButtonType = 'button' | 'submit' | 'reset' | 'menu';
-
-@Directive({
-  standalone: true,
-  exportAs: 'etButton',
-})
-export class ButtonDirective {
-  readonly isButton = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement.tagName === 'BUTTON';
-  readonly isAnchor = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement.tagName === 'A';
-
-  @Input()
-  get disabled(): boolean {
-    return this._disabled$.value;
-  }
-  set disabled(value: unknown) {
-    this._disabled$.next(booleanAttribute(value));
-  }
-  get disabled$(): Observable<boolean> {
-    return this._disabled$.asObservable();
-  }
-  private _disabled$ = new BehaviorSubject(false);
-
-  @Input()
-  get type(): ButtonType {
-    return this._type$.value;
-  }
-  set type(value: ButtonType) {
-    this._type$.next(value);
-  }
-  get type$(): Observable<ButtonType> {
-    return this._type$.asObservable();
-  }
-  private _type$ = new BehaviorSubject<ButtonType>('button');
-
-  @Input()
-  get pressed(): boolean {
-    return this._pressed$.value;
-  }
-  set pressed(value: unknown) {
-    this._pressed$.next(booleanAttribute(value));
-  }
-  private _pressed$ = new BehaviorSubject(false);
-
-  readonly hostAttributeBindings = signalHostAttributes({
-    'disabled aria-disabled': toSignal(this.disabled$),
-    'aria-pressed': toSignal(this._pressed$),
-
-    ...(this.isAnchor ? { tabindex: toSignal(this.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))) } : {}),
-    ...(this.isButton ? { type: toSignal(this.type$) } : {}),
-  });
-
-  readonly hostClassBindings = signalHostClasses({
-    'et-pressed': toSignal(this._pressed$),
-  });
-
-  _removeDisabledBindings() {
-    this.hostAttributeBindings.remove('disabled aria-disabled');
-  }
-
-  _removeTabIndexBindings() {
-    this.hostAttributeBindings.remove('tabindex');
-  }
-}