{"version":3,"names":["somGridThCss","SomGridThStyle0","SomGridTh","handleKeyDown","event","this","direction","includes","keyCode","preventDefault","toggleAsc","handleClick","columnSortDirectionChange","emit","name","componentWillLoad","render","icon","h","key","role","class"],"sources":["src/components/som-grid-th/som-grid-th.scss?tag=som-grid-th","src/components/som-grid-th/som-grid-th.tsx"],"sourcesContent":["@import '../../sass/base/helpers';\n\nsom-grid-th {\n  .som-grid-th-container {\n    display: flex;\n    flex: 1;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding: $table-cell-padding;\n\n    &.sortable {\n      cursor: pointer;\n\n      &:hover {\n        background: rgba($smoke, 0.25)\n      }      \n    }\n\n    .icon-container {\n      margin-left: 0.5rem;\n      min-width: 1.5rem;\n      color: $primary;\n\n      &.presort {\n        color: $gray-30;\n      }\n    }\n  }\n}\n","import { Component, Prop, Element, Event, EventEmitter, Listen, h } from '@stencil/core';\n\n/**\n * TODO\n */\n@Component({\n  tag: 'som-grid-th',\n  styleUrl: 'som-grid-th.scss',\n})\nexport class SomGridTh {\n  @Element() el: HTMLElement;\n\n  /**\n   * This property sets the name of the data grid column.\n   */\n  @Prop() name: string;\n\n  /**\n   * This property sets the sorting dirction of the data grid.\n   */\n  @Prop() direction: 'none' | 'ascending' | 'descending';\n\n  /**\n   * This event will be triggered anytime sorting is changed\n   */\n  @Event() columnSortDirectionChange: EventEmitter;\n\n  @Listen('keydown')\n  handleKeyDown(event) {\n    if (this.direction) {\n      if ([13, 32].includes(event.keyCode)) {\n        // Enter (13) or Space bar (32) has been hit\n        event.preventDefault();\n        this.toggleAsc();\n      }\n    }\n  }\n\n  @Listen('click')\n  handleClick() {\n    if (this.direction) {\n      this.toggleAsc();\n    }\n  }\n\n  toggleAsc() {\n    let direction = 'descending';\n    if (this.direction === 'none' || this.direction === 'descending') {\n      direction = 'ascending';\n    } else if (this.direction === 'ascending') {\n      direction = 'descending';\n    }\n\n    this.columnSortDirectionChange.emit({\n      name: this.name,\n      direction,\n    });\n  }\n\n  componentWillLoad() {}\n\n  render() {\n    const icon = this.direction === 'none' ? <som-icon name=\"caret-sort\"></som-icon> : this.direction === 'ascending' ? <som-icon name=\"caret-up\"></som-icon> : <som-icon name=\"caret-down\"></som-icon>;\n    return (\n      <div role=\"button\" class={`som-grid-th-container ${this.direction ? 'sortable' : ''}`}>\n        <slot />\n        {this.direction ? <div class={`icon-container ${this.direction === 'none' ? 'presort' : ''}`}>{icon}</div> : null}\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,+cACrB,MAAAC,EAAeD,E,MCQFE,EAAS,M,2IAmBpB,aAAAC,CAAcC,GACZ,GAAIC,KAAKC,UAAW,CAClB,GAAI,CAAC,GAAI,IAAIC,SAASH,EAAMI,SAAU,CAEpCJ,EAAMK,iBACNJ,KAAKK,W,GAMX,WAAAC,GACE,GAAIN,KAAKC,UAAW,CAClBD,KAAKK,W,EAIT,SAAAA,GACE,IAAIJ,EAAY,aAChB,GAAID,KAAKC,YAAc,QAAUD,KAAKC,YAAc,aAAc,CAChEA,EAAY,W,MACP,GAAID,KAAKC,YAAc,YAAa,CACzCA,EAAY,Y,CAGdD,KAAKO,0BAA0BC,KAAK,CAClCC,KAAMT,KAAKS,KACXR,a,CAIJ,iBAAAS,GAAiB,CAEjB,MAAAC,GACE,MAAMC,EAAOZ,KAAKC,YAAc,OAASY,EAAA,YAAUJ,KAAK,eAA2BT,KAAKC,YAAc,YAAcY,EAAA,YAAUJ,KAAK,aAAyBI,EAAA,YAAUJ,KAAK,eAC3K,OACEI,EAAA,OAAAC,IAAA,2CAAKC,KAAK,SAASC,MAAO,yBAAyBhB,KAAKC,UAAY,WAAa,MAC/EY,EAAA,QAAAC,IAAA,6CACCd,KAAKC,UAAYY,EAAA,OAAKG,MAAO,kBAAkBhB,KAAKC,YAAc,OAAS,UAAY,MAAOW,GAAc,K","ignoreList":[]}