'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.js');
const uniqueId = require('./uniqueId-dab8aef4.js');

const teliaTabContentCss = ".telia-tab-content{display:none;position:relative}.telia-tab-content:focus{outline:0}.telia-tab-content:focus::before{border-radius:calc(99.9rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\"\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));border-radius:calc(0.2rem * var(--voca-rem-multiplier))}.telia-tab-content:focus:not(:focus-visible)::before{box-shadow:none}.telia-tab-content--selected{display:block}";

const TeliaTabContent = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vocaTabContentNameChange = index.createEvent(this, "vocaTabContentNameChange", 7);
    /** Test id set for web component host */
    this.dataTestid = null;
    /** Use `tabId` prop on `telia-tab-content`, in order to set `id` attribute of the component. This *id* will, then be emitted with the `vocaTabChange` event, when the user switches tabs. */
    this.tabId = uniqueId.uniqueId('telia-tab');
  }
  updateName(e) {
    this.vocaTabContentNameChange.emit(e);
  }
  render() {
    const classes = {
      'telia-tab-content': true,
      'telia-tab-content--selected': this.active,
    };
    return (index.h(index.Host, { active: this.active, id: this.tabId }, index.h("div", { class: classes, role: "tabpanel", id: this.tabId + '-content', "aria-labelledby": this.tabId + '-header' }, index.h("slot", null))));
  }
  static get watchers() { return {
    "name": ["updateName"]
  }; }
};
TeliaTabContent.style = teliaTabContentCss;

exports.telia_tab_content = TeliaTabContent;
