import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { c as countryChoices, h as hasPostal, a as hasCity, b as hasState } from './address.js';
import { r as reportChildrenValidity } from './form-data.js';
import { d as defineCustomElement$b } from './sc-block-ui2.js';
import { d as defineCustomElement$a } from './dropdown.js';
import { d as defineCustomElement$9 } from './sc-form-control2.js';
import { d as defineCustomElement$8 } from './sc-icon2.js';
import { d as defineCustomElement$7 } from './sc-input2.js';
import { d as defineCustomElement$6 } from './sc-menu2.js';
import { d as defineCustomElement$5 } from './sc-menu-item2.js';
import { d as defineCustomElement$4 } from './sc-menu-label2.js';
import { d as defineCustomElement$3 } from './sc-select2.js';
import { d as defineCustomElement$2 } from './sc-spinner2.js';
import { d as defineCustomElement$1 } from './sc-tooltip2.js';

const scAddressCss = ":host{display:block}.sc-address{display:block;position:relative}.sc-address [hidden]{display:none}.sc-address--loading{min-height:230px}.sc-address sc-skeleton{display:block;margin-bottom:1em}.sc-address__control{display:block}.sc-address__control>*{margin-bottom:-1px}.sc-address__columns{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between}.sc-address__columns>*{flex:1;width:50%;margin-right:-1px}.sc-address__columns>*:last-child{margin-right:0}";

const ScAddress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scChangeAddress = createEvent(this, "scChangeAddress", 7);
    this.scInputAddress = createEvent(this, "scInputAddress", 7);
    /** The address. */
    this.address = {
      country: null,
      city: null,
      line_1: null,
      line_2: null,
      postal_code: null,
      state: null,
    };
    this.names = {
      name: 'shipping_name',
      country: 'shipping_country',
      city: 'shipping_city',
      line_1: 'shipping_line_1',
      line_2: 'shipping_line_2',
      postal_code: 'shipping_postal_code',
      state: 'shipping_state',
    };
    this.placeholders = {
      name: __('Name or Company Name', 'surecart'),
      country: __('Country', 'surecart'),
      city: __('City', 'surecart'),
      line_1: __('Address', 'surecart'),
      line_2: __('Address Line 2', 'surecart'),
      postal_code: __('Postal Code/Zip', 'surecart'),
      state: __('State/Province/Region', 'surecart'),
    };
    /** Is this loading?  */
    this.loading = false;
    /** Is this required? */
    this.required = true;
    /** Should we show the city field? */
    this.showCity = true;
    /** Should we show the postal field? */
    this.showPostal = true;
    /** Holds our country choices. */
    this.countryChoices = countryChoices;
  }
  /** When the state changes, we want to update city and postal fields. */
  handleAddressChange() {
    if (!this.address.country)
      return;
    this.setRegions();
    this.showPostal = hasPostal(this.address.country);
    this.showCity = hasCity(this.address.country);
    this.scChangeAddress.emit(this.address);
    this.scInputAddress.emit(this.address);
  }
  updateAddress(address) {
    this.address = { ...this.address, ...address };
  }
  handleAddressInput(address) {
    this.scInputAddress.emit({ ...this.address, ...address });
  }
  clearAddress() {
    this.address = {
      country: null,
      city: null,
      line_1: null,
      line_2: null,
      postal_code: null,
      state: null,
    };
  }
  /** Set the regions based on the country. */
  setRegions() {
    if (hasState(this.address.country)) {
      import('./countries.js').then(module => {
        this.regions = module === null || module === void 0 ? void 0 : module[this.address.country];
      });
    }
    else {
      this.regions = [];
    }
  }
  componentWillLoad() {
    var _a;
    this.handleAddressChange();
    const country = ((_a = this.countryChoices.find(country => country.value === this.address.country)) === null || _a === void 0 ? void 0 : _a.value) || 'US';
    this.updateAddress({ country });
  }
  async reportValidity() {
    return reportChildrenValidity(this.el);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    return (h("div", { class: "sc-address" }, h("sc-form-control", { label: this.label, class: "sc-address__control", part: "control", required: this.required }, this.showName && (h("sc-input", { value: (_a = this === null || this === void 0 ? void 0 : this.address) === null || _a === void 0 ? void 0 : _a.name, onScChange: (e) => this.updateAddress({ name: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ name: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.name, name: this.names.name, "squared-bottom": true, disabled: this.disabled, required: this.required })), h("sc-select", { value: (_b = this.address) === null || _b === void 0 ? void 0 : _b.country, onScChange: (e) => {
        this.clearAddress();
        this.updateAddress({ country: e.target.value });
      }, choices: this.countryChoices, autocomplete: 'country-name', placeholder: this.placeholders.country, name: this.names.country, search: true, unselect: false, "squared-bottom": true, squared: this.showName, disabled: this.disabled, required: this.required }), h("sc-input", { value: (_c = this === null || this === void 0 ? void 0 : this.address) === null || _c === void 0 ? void 0 : _c.line_1, onScChange: (e) => this.updateAddress({ line_1: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ line_1: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.line_1, name: this.names.line_1, squared: true, disabled: this.disabled, required: this.required }), this.showLine2 && (h("sc-input", { value: (_d = this === null || this === void 0 ? void 0 : this.address) === null || _d === void 0 ? void 0 : _d.line_2, onScChange: (e) => this.updateAddress({ line_2: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ line_2: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.line_2, name: this.names.line_2, squared: true, disabled: this.disabled, required: this.required })), h("div", { class: "sc-address__columns" }, this.showCity && (h("sc-input", { placeholder: this.placeholders.city, name: this.names.city, value: (_e = this === null || this === void 0 ? void 0 : this.address) === null || _e === void 0 ? void 0 : _e.city, onScChange: (e) => this.updateAddress({ city: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ city: e.target.value || null }), required: this.required, squared: !!((_f = this === null || this === void 0 ? void 0 : this.regions) === null || _f === void 0 ? void 0 : _f.length), style: { marginRight: this.showPostal ? '-1px' : '0' }, "squared-top": true, disabled: this.disabled, "squared-right": this.showPostal })), this.showPostal && (h("sc-input", { placeholder: this.placeholders.postal_code, name: this.names.postal_code, onScChange: (e) => this.updateAddress({ postal_code: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ postal_code: e.target.value || null }), autocomplete: 'postal-code', required: this.required, value: (_g = this === null || this === void 0 ? void 0 : this.address) === null || _g === void 0 ? void 0 : _g.postal_code, squared: !!((_h = this === null || this === void 0 ? void 0 : this.regions) === null || _h === void 0 ? void 0 : _h.length), "squared-top": true, disabled: this.disabled, maxlength: ((_j = this.address) === null || _j === void 0 ? void 0 : _j.country) === 'US' ? 5 : null, "squared-left": this.showCity }))), !!((_k = this === null || this === void 0 ? void 0 : this.regions) === null || _k === void 0 ? void 0 : _k.length) && !!((_l = this === null || this === void 0 ? void 0 : this.address) === null || _l === void 0 ? void 0 : _l.country) && (h("sc-select", { placeholder: this.placeholders.state, name: this.names.state, autocomplete: 'address-level1', value: (_m = this === null || this === void 0 ? void 0 : this.address) === null || _m === void 0 ? void 0 : _m.state, onScChange: (e) => this.updateAddress({ state: e.target.value || null }), choices: this.regions, required: this.required, disabled: this.disabled, search: true, "squared-top": true }))), this.loading && h("sc-block-ui", null)));
  }
  get el() { return this; }
  static get watchers() { return {
    "address": ["handleAddressChange"]
  }; }
  static get style() { return scAddressCss; }
}, [1, "sc-address", {
    "address": [1040],
    "names": [16],
    "placeholders": [16],
    "loading": [4],
    "disabled": [4],
    "label": [1],
    "showName": [4, "show-name"],
    "showLine2": [4, "show-line-2"],
    "required": [516],
    "showCity": [32],
    "showPostal": [32],
    "regions": [32],
    "countryChoices": [32],
    "reportValidity": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-address", "sc-block-ui", "sc-dropdown", "sc-form-control", "sc-icon", "sc-input", "sc-menu", "sc-menu-item", "sc-menu-label", "sc-select", "sc-spinner", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-address":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScAddress);
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-dropdown":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-menu":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-menu-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-menu-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-select":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScAddress as S, defineCustomElement as d };
