import { r as registerInstance, h, g as getElement } from './index-c269755a.js';
import { H as HTag } from './HTag-1f86a384.js';
import { u as uniqueId } from './uniqueId-2052fef6.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 AccordionNavigation = {
  Home: 'Home',
  End: 'End',
  ArrowUp: 'ArrowUp',
  ArrowDown: 'ArrowDown',
};
const AccordionNavigationArray = Object.keys(AccordionNavigation);

const teliaAccordionCss = ".telia-accordion__heading{margin:0;padding:calc(3.2rem * var(--voca-rem-multiplier)) 0}.telia-accordion__items{border-top:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-accordion--dark-bg .telia-accordion__heading{color:#ffffff}.telia-accordion--dark-bg .telia-accordion__items{border-top:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.3)}";

const TeliaAccordion = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * H-tag for the heading. Useful if the accordion group
     * (and its items) is placed in content where a specific
     * heading level makes more sense.
     */
    this.headingTag = HTag.H2;
    /** Accordion text is indented */
    this.indented = false;
    this.componentClass = 'telia-accordion';
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-accordion';
  }
  // eslint-disable-next-line @stencil/prefer-vdom-listener
  keydownHandler(ev) {
    const target = ev.target;
    if (target.nodeName.toLowerCase() !== 'telia-accordion-item') {
      return;
    }
    this.stopPreventRelevantEvents(ev);
    const items = this.fetchAccordionItems();
    const emitterIndex = items.findIndex(item => {
      return item === ev.target;
    });
    let nextIndex = this.getNextIndex(ev.key, emitterIndex, items.length);
    items[nextIndex].focusButton();
  }
  componentWillLoad() {
    if (this.indented) {
      // apply indentation on all slotted elements and dynamically inserted nodes
      this.host.childNodes.forEach(node => {
        node['indented'] = true;
      });
      this.mutationObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
          mutation.addedNodes.forEach(node => {
            node['indented'] = true;
          });
        });
      });
      this.mutationObserver.observe(this.host, { childList: true });
    }
  }
  disconnectedCallback() {
    var _a;
    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
  }
  fetchAccordionItems() {
    const items = [];
    this.host
      .querySelectorAll('telia-accordion-item')
      .forEach(item => items.push(item));
    return items;
  }
  getNextIndex(key, currentIndex, length) {
    let nextIndex = currentIndex;
    switch (key) {
      case AccordionNavigation.ArrowDown:
        nextIndex = currentIndex + 1;
        if (nextIndex === length) {
          nextIndex = 0;
        }
        break;
      case AccordionNavigation.ArrowUp:
        nextIndex = currentIndex - 1;
        if (nextIndex < 0) {
          nextIndex = length - 1;
        }
        break;
      case AccordionNavigation.Home:
        nextIndex = 0;
        break;
      case AccordionNavigation.End:
        nextIndex = length - 1;
        break;
    }
    return nextIndex;
  }
  stopPreventRelevantEvents(ev) {
    if (AccordionNavigationArray.indexOf(ev.key) > -1) {
      ev.stopPropagation();
      ev.preventDefault();
    }
  }
  render() {
    const mainClass = {
      [this.componentClass]: true,
      [this.componentClass.concat('--dark-bg')]: this.darkBackground,
    };
    const headingClass = {
      [this.componentClass.concat('__heading')]: true,
    };
    const itemsClass = {
      [this.componentClass.concat('__items')]: true,
    };
    return (h("section", { class: mainClass }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), this.heading ? (h("div", { class: headingClass }, h("telia-heading", { tag: this.headingTag, variant: "title-300" }, this.heading))) : (''), h("div", { class: itemsClass }, h("slot", null))));
  }
  get host() { return getElement(this); }
};
TeliaAccordion.style = teliaAccordionCss;

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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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))));
  }
};
TeliaAccordionItem.style = teliaAccordionItemCss;

export { TeliaAccordion as telia_accordion, TeliaAccordionItem as telia_accordion_item };
