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

const chevronUp = { "name": "chevron-up", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M53.0318 42.1986C52.6256 42.605 52.0745 42.8333 51.4999 42.8333C50.9253 42.8333 50.3742 42.605 49.968 42.1986L31.9999 24.2305L14.0318 42.1986C13.1858 43.0446 11.8141 43.0446 10.968 42.1986C10.122 41.3525 10.122 39.9808 10.968 39.1348L30.468 19.6348C30.8742 19.2283 31.4253 19 31.9999 19C32.5745 19 33.1256 19.2283 33.5318 19.6348L53.0318 39.1348C53.4382 39.541 53.6666 40.092 53.6666 40.6667C53.6666 41.2413 53.4382 41.7924 53.0318 42.1986Z\"/></svg>" };

const teliaAccordionItemCss = ":host{--vds-accordion-item-content-max-width:80ch}.telia-accordion-item{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-accordion-item__header{color:#29003e;background:transparent;border:0;cursor:pointer;display:flex;justify-content:space-between;min-height:calc(4.8rem * var(--voca-rem-multiplier));outline:none;padding:calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) 0;width:100%}@media screen and (min-width: 37.5em){.telia-accordion-item__header{padding:calc(2.4rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) 0}}@media screen and (min-width: 64em){.telia-accordion-item__header{padding:calc(3.2rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) calc(3.2rem * var(--voca-rem-multiplier)) 0}}.telia-accordion-item__header:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier))}.telia-accordion-item__header:focus:not(:focus-visible){outline:none}.telia-accordion-item__header:hover{color:#5e0092;background-color:#fbf0ff}.telia-accordion-item__header--active{color:#7800b4}.telia-accordion-item__header-title{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.25;align-items:center;display:flex;justify-content:space-between;margin:0;text-align:left}@media screen and (min-width: 37.5em){.telia-accordion-item__header-title{font-size:calc(\n    calc(1.6rem * var(--voca-rem-multiplier)) + 0.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.telia-accordion-item__header-title{font-size:calc(2rem * var(--voca-rem-multiplier))}}.telia-accordion-item__header--indented{display:flex;padding-left:calc(1.6rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-accordion-item__header--indented{padding-left:calc(2.4rem * var(--voca-rem-multiplier))}}.telia-accordion-item__header-icon{height:calc(2.4rem * var(--voca-rem-multiplier));transform:rotate(180deg);transition:transform 0.15s cubic-bezier(0.45, 0, 0.52, 0.98)}.telia-accordion-item__header-icon--rotate{transform:rotate(0deg)}.telia-accordion-item__content{color:#222222;display:none;height:0;opacity:0;overflow:hidden;max-width:var(--vds-accordion-item-content-max-width, 80ch)}.telia-accordion-item__content--indented{display:flex;padding-left:calc(1.6rem * var(--voca-rem-multiplier));padding-right:calc(3.2rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-accordion-item__content--indented{padding-left:calc(2.4rem * var(--voca-rem-multiplier));padding-right:calc(6.4rem * var(--voca-rem-multiplier))}}.telia-accordion-item__content--visible{display:block;height:auto;opacity:1;padding-bottom:calc(1.6rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-accordion-item__content--visible{padding-bottom:calc(3.2rem * var(--voca-rem-multiplier))}}@media screen and (min-width: 64em){.telia-accordion-item__content--visible{padding-bottom:calc(3.2rem * var(--voca-rem-multiplier))}}.telia-accordion-item--dark-bg{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.3)}.telia-accordion-item--dark-bg .telia-accordion-item__header{color:#fbf0ff}.telia-accordion-item--dark-bg .telia-accordion-item__header:hover{color:#edc8ff;background-color:rgba(255, 255, 255, 0.1)}.telia-accordion-item--dark-bg .telia-accordion-item__header--active{color:#de99ff}.telia-accordion-item--dark-bg .telia-accordion-item__content{color:#ffffff}";

const TeliaAccordionItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.isOpen = false;
    this.componentClass = 'telia-accordion-item';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-accordion-item';
    this.uniqueId = uniqueId('accordion');
    this.toggleAccordion = () => {
      this.isOpen = !this.isOpen;
    };
    this.setButtonRef = (elm) => {
      this.buttonEl = elm;
    };
  }
  /**
   * Sets focus on the accordion button (it contains the header).
   */
  async focusButton() {
    this.buttonEl.focus();
  }
  render() {
    const mainClass = {
      [this.componentClass]: true,
      [this.componentClass.concat('--dark-bg')]: this.darkBackground,
    };
    const itemHeadingClass = {
      [this.componentClass.concat('__header')]: true,
      [this.componentClass.concat('__header--indented')]: this.indented,
      [this.componentClass.concat('__header--active')]: this.isOpen,
    };
    const itemContentClass = {
      [this.componentClass.concat('__content')]: true,
      [this.componentClass.concat('__content--indented')]: this.indented,
      [this.componentClass.concat('__content--visible')]: this.isOpen,
    };
    const itemIconClass = {
      [this.componentClass.concat('__header-icon')]: true,
      [this.componentClass.concat('__header-icon--rotate')]: this.isOpen,
    };
    return (h("div", { class: mainClass }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), h("button", { id: `telia-accordion-item-header-${this.uniqueId}`, class: itemHeadingClass, type: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": `telia-accordion-item-content-${this.uniqueId}`, onClick: this.toggleAccordion, ref: this.setButtonRef }, h("span", { class: "telia-accordion-item__header-title" }, this.heading), h("telia-icon", { svg: chevronUp.svg, class: itemIconClass })), h("div", { id: `telia-accordion-item-content-${this.uniqueId}`, "data-test-id": "item-content", class: itemContentClass, role: "region", "aria-labelledby": `telia-accordion-item-header-${this.uniqueId}` }, h("slot", null))));
  }
  static get style() { return teliaAccordionItemCss; }
}, [1, "telia-accordion-item", {
    "dataTestid": [1, "data-testid"],
    "heading": [1],
    "darkBackground": [4, "dark-background"],
    "indented": [4],
    "isOpen": [32],
    "focusButton": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-accordion-item", "telia-icon", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-accordion-item":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaAccordionItem);
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { TeliaAccordionItem as T, defineCustomElement as d };
