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

const teliaPriceCss = ".telia-price{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;color:rgba(0, 0, 0, 0.6);display:block;vertical-align:top}.telia-price__strong{color:#121214}.telia-price__full-price,.telia-price__price{display:inline-block;text-decoration:none;word-break:keep-all}.telia-price__price .telia-price__value{color:rgba(0, 0, 0, 0.85)}.telia-price__price--large .telia-price__value{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(2rem * var(--voca-rem-multiplier));line-height:1.25}@media screen and (min-width: 37.5em){.telia-price__price--large .telia-price__value{font-size:calc(\n    calc(2rem * var(--voca-rem-multiplier)) + 0.4 *\n      (100vw - calc(60rem * var(--voca-rem-multiplier))) / 84\n  )}}@media screen and (min-width: 90em){.telia-price__price--large .telia-price__value{font-size:calc(2.4rem * var(--voca-rem-multiplier))}}";

const TeliaPrice$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** Allows the size of the rendered price to be increased to a larger, more prominent style */
    this.largePrice = false;
    this.dataTrackingId = 'telia-price';
    /**
     * These different unicodes are used both for esthetic
     * and practical reasons. JSX strips leading spaces by default.
     * Rendering the different parts of the price with correct
     * spacing is more easily achieved when we can insert a space
     * before a part, rather than after.
     */
    this.thinnerSpace = '\u2006';
    this.mediumSpace = '\u2005';
    this.widerSpace = '\u2004';
    this.priceLine = () => {
      // adds a space before periodicity if there is no '/' in the periodicity text
      let periodicity = this.periodicity;
      if (this.periodicity && !this.periodicity.includes('/')) {
        periodicity = ` ${this.periodicity}`;
      }
      const Tag = this.fullPrice ? 'ins' : 'span';
      const priceClasses = {
        ['telia-price__price']: true,
        [`telia-price__price--large`]: !!this.largePrice,
      };
      return (h("telia-p", null, h("span", { role: 'text' }, this.startingAt && this.startingAt.concat(' '), h("strong", { class: "telia-price__strong" }, h(Tag, { class: priceClasses }, this.renderPrice(this.price, this.currency), periodicity)), this.fullPrice && (h("del", { class: "telia-price__full-price" }, this.widerSpace, "(", this.priceWithCurrency(this.fullPrice, this.currency), ")")))));
    };
    this.termsLine = () => {
      if (!this.terms) {
        return null;
      }
      const Tag = this.termsFullPrice ? 'ins' : 'span';
      return (h("telia-p", null, h("span", { role: 'text' }, this.terms, this.termsPrice && (h(Tag, { class: "telia-price__price" }, this.mediumSpace, this.priceWithCurrency(this.termsPrice, this.currency))), this.termsFullPrice && (h("del", { class: "telia-price__full-price" }, this.widerSpace, "(", this.priceWithCurrency(this.termsFullPrice, this.currency), ")")))));
    };
  }
  /**
   * This utility is used both for the 'price'
   * property and optional props as 'full price' and
   * 'terms-price'. Therefore it renders nothing
   * if the price is not truthy. This allows us
   * to use it even though the passed price
   * may be falsy (empty string for instance).
   */
  priceWithCurrency(price, currency) {
    if (price) {
      return [price, currency].join(this.thinnerSpace);
    }
  }
  renderPrice(price, currency) {
    if (price) {
      return [
        h("span", { class: "telia-price__value" }, price),
        this.thinnerSpace,
        currency,
      ];
    }
  }
  render() {
    return (h(Host, { class: "telia-price" }, h("telia-vst", { dataTrackingId: this.dataTrackingId }), this.priceLine(), this.termsLine()));
  }
  static get style() { return teliaPriceCss; }
}, [1, "telia-price", {
    "dataTestid": [1, "data-testid"],
    "currency": [1],
    "price": [1],
    "periodicity": [1],
    "fullPrice": [1, "full-price"],
    "startingAt": [1, "starting-at"],
    "terms": [1],
    "termsPrice": [1, "terms-price"],
    "termsFullPrice": [1, "terms-full-price"],
    "largePrice": [4, "large-price"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-price", "telia-p", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-price":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaPrice$1);
      }
      break;
    case "telia-p":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaPrice = TeliaPrice$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaPrice, defineCustomElement };
