'use strict';

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

const index = require('./index-9c866aeb.js');
const defaultI18n = require('./default-i18n-d4248548.js');
require('./index-88baf240.js');
const pageAlign = require('./page-align-bf197eb4.js');
require('./index-04dc658f.js');

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--has-image{align-items:center}.item__scratch-price{opacity:0.75;font-size:90%;text-decoration:line-through}.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:solid 1px var(--sc-input-border-color, var(--sc-input-border));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-small)}.actions__divider{opacity:0.25;margin:0 0.2em}.item--is-rtl.price{text-align:right}.item--is-rtl .item__price{text-align:left}.base{display:grid;gap:var(--sc-spacing-x-small)}.fee__description{opacity:0.75}";

const ScProductLineItem = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scUpdateQuantity = index.createEvent(this, "scUpdateQuantity", 3);
    this.scRemove = index.createEvent(this, "scRemove", 3);
    /** Is the setup fee not included in the free trial? */
    this.setupFeeTrialEnabled = true;
    /** Can we select the quantity */
    this.editable = true;
    /** The max allowed. */
    this.max = 100;
  }
  renderPriceAndInterval() {
    const setupFee = (this.fees || []).find(fee => fee.fee_type === 'setup');
    if (this.trialDurationDays) {
      return (index.h("div", { class: "item__price", part: "price" }, index.h("div", { class: "price", part: "price__amount" }, !!setupFee && !this.setupFeeTrialEnabled ? (index.h(index.Fragment, null, setupFee === null || setupFee === void 0 ? void 0 :
        setupFee.description, " ", index.h("sc-format-number", { part: "price__amount", type: "currency", currency: this.currency, value: setupFee.amount }))) : (defaultI18n.sprintf(defaultI18n._n('%d day free', '%d days free', this.trialDurationDays, 'surecart'), this.trialDurationDays))), index.h("div", { class: "price__description", part: "price__description" }, 
      /** translators: 30 days free, Then $99 per month. */
      defaultI18n.__('Then', 'surecart'), ' ', !!this.scratchAmount && this.scratchAmount > this.amount && (index.h(index.Fragment, null, index.h("sc-format-number", { class: "item__scratch-price", part: "price__scratch", type: "currency", currency: this.currency, value: this.scratchAmount }), ' ')), index.h("sc-format-number", { part: "price__amount", type: "currency", currency: this.currency, value: this.amount }), " ", !!this.interval && this.interval, !!setupFee && !this.setupFeeTrialEnabled && defaultI18n.sprintf(defaultI18n._n('starting in %d day', 'starting in %d days', this.trialDurationDays, 'surecart'), this.trialDurationDays))));
    }
    return (index.h("div", { class: "item__price", part: "price" }, index.h("div", { class: "price", part: "price__amount" }, !!this.scratchAmount && this.scratchAmount !== this.amount && (index.h(index.Fragment, null, index.h("sc-format-number", { class: "item__scratch-price", type: "currency", currency: this.currency, value: this.scratchAmount }), ' ')), index.h("sc-format-number", { type: "currency", currency: this.currency, value: this.amount })), !!this.interval && (index.h("div", { class: "price__description", part: "price__description" }, this.interval))));
  }
  render() {
    return (index.h("div", { class: "base", part: "base" }, index.h("div", { part: "product-line-item", class: { 'item': true, 'item--has-image': !!this.imageUrl, 'item--is-rtl': pageAlign.isRtl() } }, !!this.imageUrl && index.h("img", { part: "image", src: `${window.scData.cdn_root}fit=scale-down,format=auto,width=130/${this.imageUrl}`, class: "item__image" }), index.h("div", { class: "item__text", part: "text" }, index.h("div", { class: "item__title", part: "title" }, index.h("slot", { name: "title" }, this.name)), this.editable && (index.h("sc-quantity-select", { max: this.max || Infinity, exportparts: "base:quantity__base, minus, minus-icon, plus, plus-icon, input", 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", part: "static-quantity" }, defaultI18n.__('Qty:', 'surecart'), " ", this.quantity))), index.h("div", { class: "item__suffix", part: "suffix" }, this.removable ? index.h("sc-icon", { exportparts: "base:remove-icon__base", class: "item__remove", name: "x", onClick: () => this.scRemove.emit() }) : index.h("div", null), this.renderPriceAndInterval())), (this.fees || []).map(fee => {
      if (this.trialDurationDays && !this.setupFeeTrialEnabled && fee.fee_type === 'setup')
        return null;
      return (index.h("sc-line-item", null, index.h("sc-format-number", { slot: "price-description", type: "currency", value: fee === null || fee === void 0 ? void 0 : fee.amount, currency: this.currency || 'usd' }), index.h("span", { slot: "price-description", class: "fee__description" }, fee === null || fee === void 0 ? void 0 : fee.description)));
    })));
  }
  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;background-color:var(--sc-input-control-background-color, var(--sc-color-white));color:var(--sc-input-control-color, var(--sc-color-black));-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-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) 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{background-color:var(--sc-input-background-color-disabled);border-color:var(--sc-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.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)}.quantity--is-rtl .button__decrease{right:1px;border-left:var(--sc-input-border);border-right:0}.quantity--is-rtl .button__increase{left:1px;border-right:var(--sc-input-border);border-left:0}";

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 = Infinity;
    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.max ? this.max : 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,
        'quantity--is-rtl': pageAlign.isRtl(),
      } }, index.h("span", { part: "minus", role: "button", "aria-label": defaultI18n.__('decrease number', 'surecart'), class: { 'button__decrease': true, 'button--disabled': this.quantity <= this.min && this.min > 1 }, onClick: () => this.quantity > this.min && this.decrease() }, index.h("sc-icon", { name: "minus", exportparts: "base:minus__icon" })), index.h("input", { part: "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", { part: "plus", 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", exportparts: "base:plus__icon" }))));
  }
  get el() { return index.getElement(this); }
};
ScQuantitySelect.style = scQuantitySelectCss;

exports.sc_product_line_item = ScProductLineItem;
exports.sc_quantity_select = ScQuantitySelect;
