<commit_before>import { Component, Input, ContentChildren, QueryList, AfterContentInit, HostListener } from '@angular/core';
import { SprkTabbedNavigationTabDirective } from '../../directives/tabbed-navigation/sprk-tabbed-navigation-tab/sprk-tabbed-navigation-tab.directive';
import { SprkTabbedNavigationPanelDirective } from '../../directives/tabbed-navigation/sprk-tabbed-navigation-panel/sprk-tabbed-navigation-panel.directive';
import * as _ from 'lodash';

@Component({
  selector: 'sprk-tabbed-navigation',
  template: `
    <div [ngClass]="getClasses()" role="tablist" [attr.aria-orientation]="orientation">
      <div class="sprk-c-Tabs__buttons">
        <ng-content select="[sprk-tabbed-navigation-tab]"></ng-content> 
      </div>
      <ng-content select="[sprk-tabbed-navigation-panel]"></ng-content>
      <ng-content></ng-content>
    </div>`
})

export class SparkTabbedNavigationComponent implements AfterContentInit {
  @Input() additionalClasses: string;
  @Input() orientation: string = 'horizontal';

  @HostListener('click', ['$event']) onClick($event){

    if($event.target.classList.contains('sprk-c-Tabs__button')) {
      let activePanel = this.panels.find((panel) => {
        return panel.ref.nativeElement.id === $event.target.getAttribute('aria-controls');
      });

      this.tabs.forEach((tab) => {
        tab.ref.nativeElement.classList.remove('sprk-c-Tabs__button--active');
        tab.ref.nativeElement.setAttribute('aria-selected', 'false');
      });

      $event.target.classList.add('sprk-c-Tabs__button--active');
      $event.target.setAttribute('aria-selected', 'true');

      this.panels.forEach((panel) => {
        panel.ref.nativeElement.classList.add('sprk-u-Display--none');
      });

      activePanel.ref.nativeElement.classList.remove('sprk-u-Display--none');
    }
  }

  componentID = _.uniqueId();

  @ContentChildren(SprkTabbedNavigationTabDirective) tabs: QueryList<SprkTabbedNavigationTabDirective>;
  @ContentChildren(SprkTabbedNavigationPanelDirective) panels: QueryList<SprkTabbedNavigationPanelDirective>;

  getClasses(): string {
    let classArray: Array<String> = ['sprk-c-Tabs'];

    if (this.additionalClasses) {
      this.additionalClasses.split(' ').forEach((className) => {
        classArray.push(className);
      })
    }

    return classArray.join(' ');
  }

  ngAfterContentInit(): void {
    let tabIDs = [];
    let panelIDs = [];

    if(this.tabs && this.panels) {
      this.tabs.forEach((tab, index) => {
        let tabID = `tabbed-navigation-${this.componentID}-tab-${index}`;
        let panelID = `tabbed-navigation-${this.componentID}-panel-${index}`;

        tab.ref.nativeElement.setAttribute('id', tabID);
        tab.ref.nativeElement.setAttribute('aria-controls', panelID);
        tabIDs.push(tabID);
        panelIDs.push(panelID);
      });

      tabIDs = tabIDs.reverse();
      panelIDs = panelIDs.reverse();

      this.panels.forEach((panel, index) => {
        panel.ref.nativeElement.setAttribute('id', panelIDs.pop());
        panel.ref.nativeElement.setAttribute('aria-labelledby', tabIDs.pop());
      });
    }
  }
}<commit_msg>bound the keyboard events, hooked up the aria orientation code<commit_after>import { Component, Input, ContentChildren, QueryList, AfterContentInit, HostListener, ElementRef } from '@angular/core';
import { SprkTabbedNavigationTabDirective } from '../../directives/tabbed-navigation/sprk-tabbed-navigation-tab/sprk-tabbed-navigation-tab.directive';
import { SprkTabbedNavigationPanelDirective } from '../../directives/tabbed-navigation/sprk-tabbed-navigation-panel/sprk-tabbed-navigation-panel.directive';
import * as _ from 'lodash';
import { resetTabs, setActiveTab, retreatTab, advanceTab, getActiveTabIndex, ariaOrientation } from '@sparkdesignsystem/spark-core/components/tabs';

@Component({
  selector: 'sprk-tabbed-navigation',
  template: `
    <div [ngClass]="getClasses()" role="tablist">
      <div class="sprk-c-Tabs__buttons">
        <ng-content select="[sprk-tabbed-navigation-tab]"></ng-content> 
      </div>
      <ng-content select="[sprk-tabbed-navigation-panel]"></ng-content>
      <ng-content></ng-content>
    </div>`
})

export class SparkTabbedNavigationComponent implements AfterContentInit {
  @Input() additionalClasses: string;

  @HostListener('click', ['$event']) onClick($event){

    if($event.target.classList.contains('sprk-c-Tabs__button')) {
      let activePanel = this.panels.find((panel) => {
        return panel.ref.nativeElement.id === $event.target.getAttribute('aria-controls');
      });

      resetTabs(this.tabs.map((tab) => { return tab.ref.nativeElement; }),
        this.panels.map((panel) => { return panel.ref.nativeElement; }));

      setActiveTab($event.target, activePanel.ref.nativeElement);
    }
  }

  @HostListener('window:resize', ['$event']) onResize($event) {
    ariaOrientation(window.innerWidth, this.ref.nativeElement);
  };

  @HostListener('keydown', ['$event']) onKeydown($event){
    const keys = {
      end: 35,
      home: 36,
      left: 37,
      right: 39,
      tab: 9,
    };

    let tabElements = this.tabs.map((tab) => { return tab.ref.nativeElement; });
    let panelElements = this.panels.map((panel) => { return panel.ref.nativeElement; });

    if ($event.keyCode === keys.left) {
      retreatTab(tabElements, panelElements);
    } else if ($event.keyCode === keys.right) {
      advanceTab(tabElements, panelElements);
    } else if ($event.keyCode === keys.tab) {
      event.preventDefault();
      panelElements[getActiveTabIndex(tabElements)].focus();
    } else if ($event.keyCode === keys.home) {
      setActiveTab(tabElements[0], panelElements[0]);
    } else if ($event.keyCode === keys.end) {
      setActiveTab(tabElements[tabElements.length - 1], panelElements[panelElements.length - 1]);
    }
  }

  componentID = _.uniqueId();

  @ContentChildren(SprkTabbedNavigationTabDirective) tabs: QueryList<SprkTabbedNavigationTabDirective>;
  @ContentChildren(SprkTabbedNavigationPanelDirective) panels: QueryList<SprkTabbedNavigationPanelDirective>;

  getClasses(): string {
    let classArray: Array<String> = ['sprk-c-Tabs'];

    if (this.additionalClasses) {
      this.additionalClasses.split(' ').forEach((className) => {
        classArray.push(className);
      })
    }

    return classArray.join(' ');
  }

  ngAfterContentInit(): void {
    let tabIDs = [];
    let panelIDs = [];

    if(this.tabs && this.panels) {
      this.tabs.forEach((tab, index) => {
        let tabID = `tabbed-navigation-${this.componentID}-tab-${index}`;
        let panelID = `tabbed-navigation-${this.componentID}-panel-${index}`;

        tab.ref.nativeElement.setAttribute('id', tabID);
        tab.ref.nativeElement.setAttribute('aria-controls', panelID);
        tabIDs.push(tabID);
        panelIDs.push(panelID);
      });

      tabIDs = tabIDs.reverse();
      panelIDs = panelIDs.reverse();

      this.panels.forEach((panel, index) => {
        panel.ref.nativeElement.setAttribute('id', panelIDs.pop());
        panel.ref.nativeElement.setAttribute('aria-labelledby', tabIDs.pop());
      });
    }
  }

  constructor(public ref: ElementRef) {
    ariaOrientation(window.innerWidth, this.ref.nativeElement);
  }

}
{'fraction_non_alphanumeric': 0.16037995594713655, 'fraction_numerical': 0.001789647577092511, 'mean_word_length': 3.7483660130718954, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5634201', 'n_tokens_mistral': 2251, 'n_tokens_neox': 2204, 'n_words': 324}