'use strict';

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

const index = require('./index-dd0345d7.js');
const index$1 = require('./index-53f5a5fc.js');
const utils = require('./utils-f67712aa.js');
const statusNote = require('./status-note-b89242d6.js');

const tabHeaderCss = ":host{outline:none;--font-family:var(--telekom-typography-font-family-sans, TeleNeoWeb);--font-weight:var(--telekom-typography-font-weight-bold);--height-small:2rem;--color:var(--telekom-color-text-and-icon-standard);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--color-selected:var(--telekom-color-text-and-icon-primary-standard);--box-shadow-focus:0 0 0 var(--telekom-line-weight-highlight)\n    var(--telekom-color-functional-focus);--spacing-right-slotted:var(--telekom-spacing-unit-x2);--color-disabled:var(--telekom-color-text-and-icon-disabled);--radius:var(--telekom-radius-standard)}.tab-header{color:var(--color);cursor:pointer;display:inline-flex;outline:none;position:relative;box-sizing:border-box;align-items:center;padding-left:0;height:var(--tab-height);margin-right:var(--tab-spacing);padding-right:var(--tab-spacing);font-family:var(--font-family);font-size:calc(var(--tab-height) / 2);font-weight:var(--font-weight);border-radius:var(--tab-radius)}.tab-header--small{--tab-height:var(--height-small)}.tab-header--disabled{cursor:auto;color:var(--color-disabled)}.tab-header--disabled:after{cursor:auto;background-color:var(--telekom-color-ui-border-disabled) !important}.tab-header--disabled:active{color:var(--color-disabled)}.tab-header--disabled:hover{color:var(--color-disabled) !important}.tab-header--disabled:hover:after{background-color:var(--telekom-color-ui-border-disabled) !important}.tab-header:after{left:0;right:0;width:100%;bottom:0;content:'';display:block;position:absolute;height:var(--tab-border-size);background-color:var(--tab-border-color)}.tab-header:before{left:0;right:0;width:100%;bottom:0;height:0;content:'';display:block;z-index:1;position:absolute;border-top:1px solid transparent}.tab-header:hover{color:var(--color-hover)}.tab-header:hover:after{background-color:var(--color-hover)}.tab-header:active{color:var(--color-active)}.tab-header:active:after{background-color:var(--color-active)}.tab-header:active:after{background-color:var(--color-active)}.tab-header ::slotted(*){margin-right:var(--spacing-right-slotted)}.tab-header--has-focus{box-shadow:var(--box-shadow-focus)}.tab-header--selected{color:var(--color-selected)}.tab-header--selected:after{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);height:var(--tab-border-size-selected);background-color:var(--color-selected)}.tab-header--selected:before{border-top:var(--tab-border-size-selected) solid transparent}";

const DEFAULT_ICON_SIZE = 24;
const PER_SPEC_ICON_SIZE = 16;
let i = 0;
const TabHeader = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.generatedId = i++;
    /** True for a disabled Tabnavigation */
    this.disabled = false;
    /** True for smaller height and font size */
    // DEPRECATED - size should replace small
    this.small = false;
    /** (optional) size  */
    this.size = 'large';
    this.hasFocus = false;
  }
  selectedChanged(newValue) {
    if (!this.disabled) {
      if (newValue === true) {
        // Having focus on the host element, and not on inner elements,
        // is required because screen readers.
        this.hostElement.focus();
      }
      this.updateSlottedIcon();
    }
  }
  componentDidLoad() {
    this.setChildrenIconSize();
  }
  componentDidRender() {
    if (this.small !== false) {
      statusNote.statusNote({
        tag: 'deprecated',
        message: 'Property "small" is deprecated. Please use the "size" property!',
        type: 'warn',
        source: this.hostElement,
      });
    }
  }
  /**
   * Find slotted icons, and if any, add the `selected` attribute accordingly.
   */
  updateSlottedIcon() {
    const slot = this.container.querySelector('slot');
    if (slot === null) {
      return;
    }
    const children = Array.from(slot.assignedNodes())
      .filter((node) => node.nodeType === 1)
      .filter((node) => node.nodeName.toUpperCase().indexOf('ICON') > -1);
    if (children.length === 0) {
      return;
    }
    const action = this.selected ? 'setAttribute' : 'removeAttribute';
    children.forEach((child) => child[action]('selected', ''));
  }
  /**
   * Set any children icon's size according the button size.
   */
  setChildrenIconSize() {
    const icons = Array.from(this.hostElement.children).filter(utils.isScaleIcon);
    icons.forEach((icon) => {
      // This is meh people might actually want 24
      if (icon.size === DEFAULT_ICON_SIZE) {
        icon.size = PER_SPEC_ICON_SIZE;
      }
    });
  }
  render() {
    return (index.h(index.Host, { id: `scale-tab-header-${this.generatedId}`, role: this.disabled ? false : 'tab', "aria-selected": this.selected ? 'true' : 'false', tabindex: this.disabled ? false : this.selected ? '0' : '-1', onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false) }, this.styles && index.h("style", null, this.styles), index.h("span", { part: this.getBasePartMap(), ref: (el) => (this.container = el), class: this.getCssClassMap() }, index.h("slot", null))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const component = 'tab-header';
    const prefix = mode === 'basePart' ? '' : `${component}--`;
    return index$1.classnames(component, this.selected && `${prefix}selected`, (this.size === 'small' || this.small) && `${prefix}small`, this.hasFocus && `${prefix}has-focus`, this.disabled && `${prefix}disabled`);
  }
  get hostElement() { return index.getElement(this); }
  static get watchers() { return {
    "selected": ["selectedChanged"]
  }; }
};
TabHeader.style = tabHeaderCss;

exports.scale_tab_header = TabHeader;
