import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './telia-icon2.js';
import { d as defineCustomElement$1 } from './telia-vst2.js';

const TabNavigationTypes = {
  Home: 'Home',
  End: 'End',
  ArrowRight: 'ArrowRight',
  ArrowLeft: 'ArrowLeft',
};
const TabNavigationTypesArray = Object.keys(TabNavigationTypes);

const teliaTabHeaderCss = ".telia-tab-header{border:0 solid transparent;background-color:transparent;color:#222222;cursor:pointer;margin:0;outline:0;padding:0;position:relative;width:100%}.telia-tab-header:hover .telia-tab-header__content{background-color:#fbf0ff;color:#5e0092}.telia-tab-header:hover .telia-tab-header__visible-title{font-weight:500}.telia-tab-header:focus .telia-tab-header__content{outline:calc(0.2rem * var(--voca-rem-multiplier)) solid #0099ff;outline-offset:calc(-1 * (0.2rem * var(--voca-rem-multiplier)));z-index:2}.telia-tab-header:focus:not(:focus-visible) .telia-tab-header__content{outline:none}.telia-tab-header--selected{cursor:auto}.telia-tab-header--selected .telia-tab-header__content{background-color:#ffffff;border-top:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;color:#29003e;font-weight:500}.telia-tab-header--selected:hover>.telia-tab-header__content{background-color:#ffffff}.telia-tab-header__content{border-top:calc(0.2rem * var(--voca-rem-multiplier)) solid transparent;border-radius:calc(0.2rem * var(--voca-rem-multiplier));font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;background-color:rgba(0, 0, 0, 0.05);box-sizing:border-box;display:flex;height:100%;justify-content:center;padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier));position:relative;transition:all 3ms;white-space:nowrap;width:100%}@media screen and (min-width: 37.5em){.telia-tab-header__content{padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-tab-header__content{padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier))}}.telia-tab-header__icon{margin-right:calc(0.4rem * var(--voca-rem-multiplier))}.telia-tab-header__visible-title{position:absolute}.telia-tab-header__hidden-title{font-weight:500;visibility:hidden}.telia-tab-header--light,.telia-tab-header--light-wide{background-color:transparent}.telia-tab-header--light::after,.telia-tab-header--light-wide::after{background-color:rgba(0, 0, 0, 0.15);z-index:1;bottom:0;content:\"\";display:block;height:calc(0.2rem * var(--voca-rem-multiplier));left:0;position:absolute;right:0;width:100%}.telia-tab-header--light .telia-tab-header__content,.telia-tab-header--light-wide .telia-tab-header__content{background-color:transparent;border:calc(0.1rem * var(--voca-rem-multiplier)) solid transparent;color:#29003e}.telia-tab-header--light:hover>.telia-tab-header__content,.telia-tab-header--light-wide:hover>.telia-tab-header__content{color:#5e0092;background-color:#fbf0ff}.telia-tab-header--light:hover::after,.telia-tab-header--light-wide:hover::after{background-color:rgba(0, 0, 0, 0.15)}.telia-tab-header--light.telia-tab-header--selected::after,.telia-tab-header--light-wide.telia-tab-header--selected::after{background-color:#29003e}.telia-tab-header--light.telia-tab-header--selected .telia-tab-header__content,.telia-tab-header--light-wide.telia-tab-header--selected .telia-tab-header__content{background-color:transparent}.telia-tab-header--contained-on-negative .telia-tab-header__content{background-color:rgba(255, 255, 255, 0.15);color:#fbf0ff}.telia-tab-header--contained-on-negative.telia-tab-header--selected .telia-tab-header__content{border-top:calc(0.2rem * var(--voca-rem-multiplier)) solid #ffffff;color:#29003e}";

const TeliaTabHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.tabChange = createEvent(this, "tabChange", 7);
    this.vocaInternalTabNavigation = createEvent(this, "vocaInternalTabNavigation", 7);
    /** Test id set for web component host */
    this.dataTestid = null;
    /** The active prop is set from the telia-tab event listener*/
    this.active = false;
    /** Custom event on focus, only used internally*/
    /** index of tab-header*/
    this.dataIndex = null;
    /** will toggle --has-keypress class based on interaction with component */
    this.isKeyPress = true;
    /** Style of header */
    this.variant = 'default';
  }
  componentDidUpdate() {
    if (this.active && this.isKeyPress) {
      this.element.querySelector('button').focus();
    }
  }
  /** Handle click event
   * @param e - event
   * @private
   */
  onClickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    this.tabChange.emit('click,' + this.dataIndex.toString());
    this.vocaInternalTabNavigation.emit({
      originalEvent: e,
      value: { location: this.dataIndex },
    });
  }
  /** Handle keyboard navigation
   * @param e - event
   * @private
   */
  onKeyDownHandler(e) {
    const key = e.key;
    if (key === TabNavigationTypes.ArrowRight ||
      key === TabNavigationTypes.ArrowLeft) {
      e.preventDefault();
      e.stopPropagation();
      const index = e.key === TabNavigationTypes.ArrowRight
        ? this.dataIndex + 1
        : this.dataIndex - 1;
      this.tabChange.emit(key + ',' + index.toString());
    }
    else if (key === TabNavigationTypes.Home ||
      key === TabNavigationTypes.End) {
      e.preventDefault();
      e.stopPropagation();
      this.tabChange.emit(key + ',');
    }
    this.handleKeyNavigation(e);
  }
  handleKeyNavigation(e) {
    const key = e.key;
    if (TabNavigationTypesArray.indexOf(key) > -1) {
      e.preventDefault();
      e.stopPropagation();
      const typedKey = TabNavigationTypes[key];
      this.vocaInternalTabNavigation.emit({
        originalEvent: e,
        value: { key: typedKey },
      });
    }
  }
  render() {
    const classes = {
      'telia-tab-header': true,
      'telia-tab-header--selected': this.active,
      [`telia-tab-header--${this.variant}`]: !!this.variant,
    };
    return (h("button", { class: classes, role: "tab", id: this.tabId + '-header', "aria-selected": this.active, "aria-controls": this.tabId + '-content', onClick: e => this.onClickHandler(e), onKeyDown: e => this.onKeyDownHandler(e), "data-testid": this.dataTestid, tabIndex: this.active ? null : -1, "data-index": this.dataIndex }, h("span", { class: "telia-tab-header__content" }, this.icon && (h("telia-icon", { class: "telia-tab-header__icon", name: this.icon, svg: this.svg, size: "md" })), h("span", null, h("span", { class: "telia-tab-header__visible-title" }, h("slot", null)), h("span", { class: "telia-tab-header__hidden-title", "aria-hidden": true }, this.name)))));
  }
  get element() { return this; }
  static get style() { return teliaTabHeaderCss; }
}, [4, "telia-tab-header", {
    "dataTestid": [1, "data-testid"],
    "tabId": [1, "tab-id"],
    "active": [516],
    "icon": [1],
    "svg": [1],
    "name": [1],
    "dataIndex": [2, "data-index"],
    "isKeyPress": [4, "is-key-press"],
    "variant": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-tab-header", "telia-icon", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-tab-header":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaTabHeader);
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TabNavigationTypes as T, TeliaTabHeader as a, defineCustomElement as d };
