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

/**
 * Turn camel case to kebab case. For example: oneTwoThree => one-two-three
 */
const camelToKebabCase = (value) => {
  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
};

const FooterPartner = {
  TeliaFinance: 'teliaFinance',
  Mastercard: 'mastercard',
  Visa: 'visa',
  Klarna: 'klarna',
  Swish: 'swish',
};

const teliaFooterPartnersCss = ":host{display:block}.telia-footer-partners__list{display:flex;flex-wrap:wrap;gap:calc(1.6rem * var(--voca-rem-multiplier)) calc(3.2rem * var(--voca-rem-multiplier));line-height:0;list-style-type:none;margin:0;padding:0}.telia-footer-partners__list-item{align-items:center;display:flex;height:calc(2.4rem * var(--voca-rem-multiplier))}.telia-footer-partners__image{object-fit:contain}.telia-footer-partners__image--telia-finance{width:calc(14rem * var(--voca-rem-multiplier))}.telia-footer-partners__image--mastercard{padding-bottom:calc(0.15rem * var(--voca-rem-multiplier));width:calc(2.8rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-footer-partners__image--mastercard{padding-bottom:0}}.telia-footer-partners__image--visa{padding-bottom:calc(0.25rem * var(--voca-rem-multiplier));width:calc(3.6rem * var(--voca-rem-multiplier))}.telia-footer-partners__image--klarna{padding-bottom:calc(0.25rem * var(--voca-rem-multiplier));width:calc(5.1rem * var(--voca-rem-multiplier))}.telia-footer-partners__image--swish{padding-top:calc(0.25rem * var(--voca-rem-multiplier));width:calc(7.2rem * var(--voca-rem-multiplier))}";

const TeliaFooterPartners$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * List of partner logos to show. Provided either as an array of FooterPartner, or a stringified
     * representation of the same.
     */
    this.partners = [];
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-footer-partners';
    this.componentClass = 'telia-footer-partners';
    this.assetServer = 'https://cdn.voca.teliacompany.com/logo/';
    this.logos = {
      [FooterPartner.TeliaFinance]: 'Telia-finance-white.svg',
      [FooterPartner.Mastercard]: 'Mastercard.svg',
      [FooterPartner.Visa]: 'Visa-white.svg',
      [FooterPartner.Klarna]: 'Klarna-white.svg',
      [FooterPartner.Swish]: 'Swish-white.svg',
    };
  }
  getPartners() {
    let localPartners;
    if (typeof this.partners === 'object') {
      localPartners = this.partners;
    }
    else {
      localPartners = JSON.parse(this.partners);
    }
    return localPartners;
  }
  getImage(key) {
    const classes = {
      [`${this.componentClass}__image`]: true,
      [`${this.componentClass}__image--${camelToKebabCase(key)}`]: true,
    };
    return (h("img", { class: classes, src: `${this.assetServer}${this.logos[key]}`, alt: this.getAltOrEmptyString(key), role: "img" }));
  }
  getAltOrEmptyString(key) {
    // eslint-disable-next-line @stencil/strict-boolean-conditions
    if (!this.__altTexts || !this.__altTexts[key]) {
      return '';
    }
    return this.__altTexts[key];
  }
  /**
   * To avoid calling JSON.parse() on each
   * iteration of the loop that renders each
   * partner, this is a rudmentary cache for the
   * alt texts for the partner logos. It
   * is run on each render, for simplicity.
   */
  updateAltTextCache(value) {
    if (!value)
      return;
    let localAltTexts;
    if (typeof value === 'object') {
      localAltTexts = value;
    }
    else {
      localAltTexts = JSON.parse(value);
    }
    this.__altTexts = localAltTexts;
  }
  componentWillRender() {
    this.updateAltTextCache(this.altTexts);
  }
  render() {
    const partners = this.getPartners();
    return (h(Host, { "data-testid": this.dataTestid }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), partners.length && (h("ul", { class: `${this.componentClass}__list` }, partners.map(key => !!this.logos[key] && (h("li", { class: `${this.componentClass}__list-item` }, this.getImage(key))))))));
  }
  static get style() { return teliaFooterPartnersCss; }
}, [1, "telia-footer-partners", {
    "dataTestid": [1, "data-testid"],
    "partners": [1],
    "altTexts": [1, "alt-texts"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-footer-partners", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-footer-partners":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaFooterPartners$1);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaFooterPartners = TeliaFooterPartners$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaFooterPartners, defineCustomElement };
