import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';

const ScFormatDate = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** The date/time to format. If not set, the current date and time will be used. */
    this.date = new Date();
    /** When set, 24 hour time will always be used. */
    this.hourFormat = 'auto';
    this.type = 'date';
  }
  render() {
    const dateString = this.type === 'timestamp' ? parseInt(this.date.toString()) * 1000 : this.date;
    const date = new Date(dateString);
    const hour12 = this.hourFormat === 'auto' ? undefined : this.hourFormat === '12';
    // Check for an invalid date
    if (isNaN(date.getMilliseconds())) {
      return;
    }
    return new Intl.DateTimeFormat(this.locale, {
      weekday: this.weekday,
      era: this.era,
      year: this.year,
      month: this.month,
      day: this.day,
      hour: this.hour,
      minute: this.minute,
      second: this.second,
      timeZoneName: this.timeZoneName,
      timeZone: this.timeZone,
      hour12: hour12,
    }).format(date);
  }
}, [0, "sc-format-date", {
    "locale": [1],
    "date": [8],
    "weekday": [1],
    "era": [1],
    "year": [1],
    "month": [1],
    "day": [1],
    "hour": [1],
    "minute": [1],
    "second": [1],
    "timeZoneName": [1, "time-zone-name"],
    "timeZone": [1, "time-zone"],
    "hourFormat": [1, "hour-format"],
    "type": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-format-date"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-format-date":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScFormatDate);
      }
      break;
  } });
}
defineCustomElement();

export { ScFormatDate as S, defineCustomElement as d };
