import { r as registerInstance, h, d as getElement } from './index-cb74209c.js';
import { _ as _t } from './i18n-c66f020d.js';
import './_commonjsHelpers-4d8f6371.js';

const attributeValuesCss = "gl-attribute-values ion-note{font-size:14px;line-height:14px;padding-top:16px;text-align:right}";

const AttributeValues = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.options = [];
    this.attributeOptions = undefined;
    this.features = undefined;
    this.header = _t("webmapgl.attribute-values.header");
    this.headerAttribute = undefined;
    this.labelPosition = undefined;
    this.limit = 1;
    this.valueMaxWidth = "200px";
  }
  componentWillLoad() {
    this.parseAttributeOptions();
  }
  /**
   * Converts a format attribute option from a string to the json object we can pass into toLocaleString.
   * If the format is one of the three possible string values, create a specific options object for that.
   */
  parseFormat(format) {
    if (typeof format !== "string")
      return format;
    let parsedFormat;
    try {
      parsedFormat = JSON.parse(format);
    }
    catch (e) {
      if (/SyntaxError/.test(e)) {
        if (["currency", "decimal", "percent"].indexOf(format) !== -1) {
          parsedFormat = {
            style: format,
          };
          if (format === "currency")
            parsedFormat["currency"] = "USD";
        }
      }
      else {
        throw e;
      }
    }
    return parsedFormat;
  }
  parseAttributeOptions() {
    this.options =
      typeof this.attributeOptions === "string"
        ? JSON.parse(this.attributeOptions)
        : this.attributeOptions;
  }
  getItemsForFeature(feature, options) {
    return options
      .filter((attr) => attr.name !== this.headerAttribute &&
      feature.properties[attr.name] != undefined)
      .map((attr) => (h("ion-item", null, h("ion-label", { position: this.labelPosition }, attr.alias || attr.name), h("ion-note", { slot: this.labelPosition != "stacked" ? "end" : null, "text-wrap": true, style: { "max-width": this.valueMaxWidth } }, attr.format
      ? feature.properties[attr.name].toLocaleString({}, this.parseFormat(attr.format))
      : feature.properties[attr.name]))));
  }
  generateOptions(feature) {
    let opts = [];
    for (let prop in feature.properties) {
      opts.push({
        name: prop,
      });
    }
    return opts;
  }
  render() {
    if (this.features == undefined || this.features.length === 0)
      return null;
    let items = [];
    for (let feature of this.features.slice(0, this.limit)) {
      let header = this.headerAttribute != undefined
        ? feature.properties[this.headerAttribute]
        : this.header;
      items.push(h("ion-item-divider", null, h("ion-label", null, header)));
      let featureOpts = this.options || this.generateOptions(feature);
      Array.prototype.push.apply(items, this.getItemsForFeature(feature, featureOpts));
    }
    return h("ion-list", null, items);
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "attributeOptions": ["parseAttributeOptions"]
  }; }
};
AttributeValues.style = attributeValuesCss;

export { AttributeValues as gl_attribute_values };

//# sourceMappingURL=gl-attribute-values.entry.js.map