'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.js');
const utils = require('./utils-1ae6b57e.js');
const library = require('./library-289cf13f.js');
const defaultI18n = require('./default-i18n-072e75d7.js');
require('./index-20b57ec7.js');
require('./_commonjsHelpers-537d719a.js');

const ScFormatNumber = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /** The number to format. */
    this.value = 0;
    /** The formatting style to use. */
    this.type = 'decimal';
    /** Turns off grouping separators. */
    this.noGrouping = false;
    /** The currency to use when formatting. Must be an ISO 4217 currency code such as `USD` or `EUR`. */
    this.currency = 'USD';
    /** How to display the currency. */
    this.currencyDisplay = 'symbol';
  }
  render() {
    var _a;
    if (isNaN(this.value)) {
      return '';
    }
    const lang = navigator.language || ((_a = navigator) === null || _a === void 0 ? void 0 : _a.browserLanguage) || (navigator.languages || ['en'])[0];
    return new Intl.NumberFormat(this.locale || lang, {
      style: this.type,
      currency: this.currency.toUpperCase(),
      currencyDisplay: this.currencyDisplay,
      useGrouping: !this.noGrouping,
      minimumIntegerDigits: this.minimumIntegerDigits,
      minimumFractionDigits: this.minimumFractionDigits,
      maximumFractionDigits: this.maximumFractionDigits,
      minimumSignificantDigits: this.minimumSignificantDigits,
      maximumSignificantDigits: this.maximumSignificantDigits,
    }).format(this.noConvert ? this.value : utils.maybeConvertAmount(this.value, this.currency.toUpperCase()));
  }
};

const iconFiles = new Map();
const requestIcon = (url) => {
  if (iconFiles.has(url)) {
    return iconFiles.get(url);
  }
  else {
    const request = fetch(url).then(async (response) => {
      if (response.ok) {
        const div = document.createElement('div');
        div.innerHTML = await response.text();
        const svg = div.firstElementChild;
        return {
          ok: response.ok,
          status: response.status,
          svg: svg && svg.tagName.toLowerCase() === 'svg' ? svg.outerHTML : '',
        };
      }
      else {
        return {
          ok: response.ok,
          status: response.status,
          svg: null,
        };
      }
    });
    iconFiles.set(url, request);
    return request;
  }
};

const scIconCss = ":host{--width:1em;--height:1em;display:inline-block;width:var(--width);height:var(--height);contain:strict;box-sizing:content-box !important}.icon,svg{display:block;height:100%;width:100%}";

const parser = new DOMParser();
const ScIcon = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scLoad = index.createEvent(this, "scLoad", 7);
    this.scError = index.createEvent(this, "scError", 7);
    this.svg = '';
    /** The name of a registered custom icon library. */
    this.library = 'default';
  }
  /** @internal Fetches the icon and redraws it. Used to handle library registrations. */
  redraw() {
    this.setIcon();
  }
  componentWillLoad() {
    this.setIcon();
  }
  getLabel() {
    let label = '';
    if (this.label) {
      label = this.label;
    }
    else if (this.name) {
      label = this.name.replace(/-/g, ' ');
    }
    else if (this.src) {
      label = this.src.replace(/.*\//, '').replace(/-/g, ' ').replace(/\.svg/i, '');
    }
    return label;
  }
  async setIcon() {
    const library$1 = library.getIconLibrary(this.library);
    const url = this.getUrl();
    if (url) {
      try {
        const file = await requestIcon(url);
        if (url !== this.getUrl()) {
          // If the url has changed while fetching the icon, ignore this request
          return;
        }
        else if (file.ok) {
          const doc = parser.parseFromString(file.svg, 'text/html');
          const svgEl = doc.body.querySelector('svg');
          if (svgEl) {
            if (library$1 && library$1.mutator) {
              library$1.mutator(svgEl);
            }
            this.svg = svgEl.outerHTML;
            this.scLoad.emit();
          }
          else {
            this.svg = '';
            this.scError.emit({ status: file.status });
          }
        }
        else {
          this.svg = '';
          this.scError.emit({ status: file.status });
        }
      }
      catch {
        this.scError.emit({ status: -1 });
      }
    }
    else if (this.svg) {
      // If we can't resolve a URL and an icon was previously set, remove it
      this.svg = '';
    }
  }
  getUrl() {
    const library$1 = library.getIconLibrary(this.library);
    if (this.name && library$1) {
      return library$1.resolver(this.name);
    }
    else {
      return this.src;
    }
  }
  render() {
    return index.h("div", { part: "base", class: "icon", role: "img", "aria-label": this.getLabel(), innerHTML: this.svg });
  }
  static get assetsDirs() { return ["icon-assets"]; }
  static get watchers() { return {
    "name": ["setIcon"],
    "src": ["setIcon"],
    "library": ["setIcon"]
  }; }
};
ScIcon.style = scIconCss;

const scProductLineItemCss = ":host{display:block;font-family:var(--sc-font-sans)}.item{box-sizing:border-box;margin:0px;min-width:0px;display:flex;gap:18px;justify-content:space-between;align-items:stretch;width:100%;border-bottom:none}.item__text{box-sizing:border-box;margin:0px;min-width:0px;display:flex;gap:6px;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1 1 0%}.item__title{box-sizing:border-box;min-width:0px;margin:0;color:var(--sc-line-item-title-color, var(--sc-input-label-color));font-weight:var(--sc-font-weight-semibold);font-size:var(--sc-font-size-medium);line-height:var(--sc-line-height-dense);cursor:pointer}.item__suffix{flex:1;box-sizing:border-box;margin:0px;min-width:0px;display:flex;flex-direction:column;-webkit-box-pack:start;justify-content:space-between;align-items:flex-end;min-width:100px;margin-left:auto}.item__price{text-align:right;max-width:100%}.item__description{font-size:var(--sc-font-size-small);line-height:var(--sc-line-height-dense);opacity:0.75}.item__image{width:var(--sc-product-line-item-image-size, 4em);height:var(--sc-product-line-item-image-size, 4em);object-fit:cover;border-radius:4px;border:1px solid var(--sc-color-gray-200);display:block;box-shadow:var(--sc-input-box-shadow)}.product__description{display:flex;gap:0.5em;align-items:center}.price{font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-semibold);color:var(--sc-input-label-color);line-height:var(--sc-line-height-dense)}.price__description{font-size:var(--sc-font-size-small);line-height:var(--sc-line-height-dense);color:var(--sc-input-label-color);opacity:0.75}.item__remove{cursor:pointer;color:var(--sc-color-gray-400);margin-bottom:var(--sc-spacing-medium)}.actions__divider{opacity:0.25;margin:0 0.2em}";

const ScProductLineItem = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scUpdateQuantity = index.createEvent(this, "scUpdateQuantity", 3);
    this.scRemove = index.createEvent(this, "scRemove", 3);
    /** Can we select the quantity */
    this.editable = true;
  }
  renderPriceAndInterval() {
    if (this.trialDurationDays) {
      return (index.h("div", { class: "item__price" }, index.h("div", { class: "price" }, defaultI18n.sprintf(defaultI18n._n('%d day free', '%d days free', this.trialDurationDays), this.trialDurationDays)), index.h("div", { class: "price__description" }, defaultI18n.__('Then', 'surecart'), " ", index.h("sc-format-number", { type: "currency", currency: this.currency, value: this.amount }), " ", !!this.interval && this.interval)));
    }
    return (index.h("div", { class: "item__price" }, index.h("div", { class: "price" }, index.h("sc-format-number", { type: "currency", currency: this.currency, value: this.amount })), !!this.interval && index.h("div", { class: "price__description" }, this.interval)));
  }
  render() {
    return (index.h("div", { class: { 'item': true, 'item--has-image': !!this.imageUrl } }, !!this.imageUrl && index.h("img", { src: this.imageUrl, class: "item__image" }), index.h("div", { class: "item__text" }, index.h("div", { class: "item__title" }, index.h("slot", { name: "title" }, this.name)), this.editable && index.h("sc-quantity-select", { clickEl: this.el, quantity: this.quantity, onScChange: e => e.detail && this.scUpdateQuantity.emit(e.detail) }), !this.editable && this.quantity > 1 && (index.h("span", { class: "item__description" }, defaultI18n.__('Qty:', 'surecart'), " ", this.quantity))), index.h("div", { class: "item__suffix" }, this.removable ? index.h("sc-icon", { class: "item__remove", name: "x", onClick: () => this.scRemove.emit() }) : index.h("div", null), this.renderPriceAndInterval())));
  }
  get el() { return index.getElement(this); }
};
ScProductLineItem.style = scProductLineItemCss;

const scQuantitySelectCss = ":host{--focus-ring:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);display:inline-block}.input__control{text-align:center;line-height:1;border:none;flex:1;max-width:35px;-moz-appearance:textfield}.input__control::-webkit-outer-spin-button,.input__control::-webkit-inner-spin-button{-webkit-appearance:none}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--sc-input-color)}.input__control::placeholder{color:var(--sc-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.quantity--trigger{cursor:pointer;white-space:nowrap}.quantity{position:relative;display:inline-block;width:100px;height:var(--sc-quantity-control-height, var(--sc-input-height-small));display:flex;align-items:stretch;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);letter-spacing:var(--sc-input-letter-spacing);background-color:var(--sc-input-background-color);border:var(--sc-input-border);border-radius:var(--sc-input-border-radius-small);vertical-align:middle;box-shadow:var(--sc-input-box-shadow);transition:var(--sc-transition-fast) color, var(--sc-transition-fast) border, var(--sc-transition-fast) box-shadow}.quantity:hover:not(.quantity--disabled){background-color:var(--sc-input-background-color-hover);border-color:var(--sc-input-border-color-hover)}.quantity:hover:not(.quantity--disabled) .quantity__control{color:var(--sc-input-color-hover)}.quantity.quantity--focused:not(.quantity--disabled){background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);box-shadow:var(--focus-ring)}.quantity.quantity--focused:not(.quantity--disabled) .quantity__control{color:var(--sc-input-color-focus)}.quantity.quantity--disabled{background-color:var(--sc-input-background-color-disabled);border-color:var(--sc-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.quantity.quantity--disabled .input__control{color:var(--sc-input-color-disabled)}.quantity.quantity--disabled .input__control::placeholder{color:var(--sc-input-placeholder-color-disabled)}.button__decrease,.button__increase{display:flex;justify-content:center;align-items:center;height:auto;top:1px;bottom:1px;width:32px;background:var(--sc-input-background-color);color:var(--sc-input-color);cursor:pointer;font-size:13px;user-select:none}.button__decrease:hover:not(.button--disabled) .quantity__control,.button__increase:hover:not(.button--disabled) .quantity__control{color:var(--sc-input-color-hover)}.button__decrease.button--disabled,.button__increase.button--disabled{color:var(--sc-input-color-disabled)}.button__decrease{left:1px;border-radius:var(--sc-input-border-radius-small) 0 0 var(--sc-input-border-radius-small);border-right:var(--sc-input-border)}.button__increase{right:1px;border-radius:0 var(--sc-input-border-radius-small) var(--sc-input-border-radius-small) 0;border-left:var(--sc-input-border)}";

const ScQuantitySelect = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scChange = index.createEvent(this, "scChange", 7);
    this.scInput = index.createEvent(this, "scInput", 7);
    this.scFocus = index.createEvent(this, "scFocus", 7);
    this.scBlur = index.createEvent(this, "scBlur", 7);
    this.max = 100;
    this.min = 1;
    this.quantity = 0;
  }
  componentWillLoad() {
    if (!this.quantity) {
      this.quantity = this.min;
    }
  }
  decrease() {
    if (this.disabled)
      return;
    this.quantity = Math.max(this.quantity - 1, this.min);
    this.scChange.emit(this.quantity);
  }
  increase() {
    if (this.disabled)
      return;
    this.quantity = Math.min(this.quantity + 1, this.max);
    this.scChange.emit(this.quantity);
  }
  handleBlur() {
    this.hasFocus = false;
    this.scBlur.emit();
  }
  handleFocus() {
    this.hasFocus = true;
    this.scFocus.emit();
  }
  handleChange() {
    this.quantity = parseInt(this.input.value);
    this.scChange.emit(this.quantity);
  }
  handleInput() {
    this.quantity = parseInt(this.input.value);
    this.scInput.emit(this.quantity);
  }
  render() {
    return (index.h("div", { part: "base", class: {
        'quantity': true,
        // States
        'quantity--focused': this.hasFocus,
        'quantity--disabled': this.disabled,
      } }, index.h("span", { role: "button", "aria-label": defaultI18n.__('decrease number', 'surecart'), class: { 'button__decrease': true, 'button--disabled': this.quantity <= this.min }, onClick: () => this.quantity > this.min && this.decrease() }, index.h("sc-icon", { name: "minus" })), index.h("input", { class: "input__control", ref: el => (this.input = el), step: "1", type: "number", max: this.max, min: this.min, value: this.quantity, autocomplete: "off", tabindex: "0", role: "spinbutton", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.quantity, "aria-disabled": this.disabled, onChange: () => this.handleChange(), onInput: () => this.handleInput(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), index.h("span", { role: "button", "aria-label": defaultI18n.__('increase number', 'surecart'), class: { 'button__increase': true, 'button--disabled': this.quantity >= this.max }, onClick: () => this.quantity < this.max && this.increase() }, index.h("sc-icon", { name: "plus" }))));
  }
  get el() { return index.getElement(this); }
};
ScQuantitySelect.style = scQuantitySelectCss;

exports.sc_format_number = ScFormatNumber;
exports.sc_icon = ScIcon;
exports.sc_product_line_item = ScProductLineItem;
exports.sc_quantity_select = ScQuantitySelect;
