import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$a } from './telia-accordion2.js';
import { d as defineCustomElement$9 } from './telia-accordion-item2.js';
import { d as defineCustomElement$8 } from './telia-column.js';
import { d as defineCustomElement$7 } from './telia-heading2.js';
import { d as defineCustomElement$6 } from './telia-icon2.js';
import { d as defineCustomElement$5 } from './telia-list2.js';
import { d as defineCustomElement$4 } from './telia-row2.js';
import { d as defineCustomElement$3 } from './telia-style-link2.js';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const teliaFooterNavigationCss = ".telia-footer-navigation{color:#e8e8ed;display:block}.telia-footer-navigation__list-container{display:none}@media screen and (min-width: 64em){.telia-footer-navigation__list-container{display:block}}.telia-footer-navigation__list-container .telia-footer-navigation__list-header{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.4rem * var(--voca-rem-multiplier));line-height:1.5;margin-bottom:calc(0.8rem * var(--voca-rem-multiplier));margin-top:0;color:rgba(255, 255, 255, 0.6)}.telia-footer-navigation__list-container telia-row{row-gap:calc(4.8rem * var(--voca-rem-multiplier))}.telia-footer-navigation__list-item{margin-bottom:calc(0.8rem * var(--voca-rem-multiplier))}.telia-footer-navigation__list-item:last-of-type{margin-bottom:0}.telia-footer-navigation__list-item telia-style-link a{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;font-weight:500}.telia-footer-navigation__accordion-container{display:block}@media screen and (min-width: 64em){.telia-footer-navigation__accordion-container{display:none}}";

const TeliaFooterNavigation$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * An array of lists of links or a stringified
     * representation of the same.
     */
    this.links = [];
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-footer-navigation';
    this.maxRenderedItems = 6;
    this.componentClass = 'telia-footer-navigation';
  }
  getLinks() {
    let data = [];
    if (typeof this.links === 'object') {
      data = this.links;
    }
    else {
      data = JSON.parse(this.links);
    }
    // Print a console warning if number of provided items exceeds our current allowed limit
    if (data.length > this.maxRenderedItems) {
      console.warn(`[VDS:telia-footer-navigation] The amount of "links" provided exceeds out current limit of ${this.maxRenderedItems} items, items above the limit are discarded.`);
    }
    return data.slice(0, this.maxRenderedItems);
  }
  renderLinkList(list) {
    return (h("telia-list", null, list.map(link => (h("li", { class: `${this.componentClass}__list-item` }, h("telia-style-link", { variant: "navigation", "dark-background": true, "disable-visited": true }, h("a", { href: link.href }, link.name)))))));
  }
  getListColumnWidth(links = []) {
    if (links.length > 4)
      return 2;
    return 3;
  }
  render() {
    const links = this.getLinks();
    const listColumnWidth = this.getListColumnWidth(links);
    return (h("div", { class: this.componentClass, "data-testid": this.dataTestid }, h("section", { class: `${this.componentClass}__list-container` }, h("telia-row", null, 
    // Limiting rendering to only the first 6 columns
    links.map(list => (h("telia-col", { width: listColumnWidth }, h("h2", { class: `${this.componentClass}__list-header` }, list.header), this.renderLinkList(list.links)))))), h("section", { class: `${this.componentClass}__accordion-container` }, h("telia-accordion", { "dark-background": true }, links.map(list => (h("telia-accordion-item", { "heading-tag": "h2", heading: list.header, "dark-background": true }, this.renderLinkList(list.links)))))), h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaFooterNavigationCss; }
}, [1, "telia-footer-navigation", {
    "dataTestid": [1, "data-testid"],
    "links": [1]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-footer-navigation", "telia-accordion", "telia-accordion-item", "telia-col", "telia-heading", "telia-icon", "telia-list", "telia-row", "telia-style-link", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-footer-navigation":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaFooterNavigation$1);
      }
      break;
    case "telia-accordion":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "telia-accordion-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "telia-col":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "telia-heading":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "telia-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "telia-list":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "telia-row":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "telia-style-link":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaFooterNavigation = TeliaFooterNavigation$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaFooterNavigation, defineCustomElement };
