import { r as registerInstance, h, H as Host } from './index-442cf464.js';
import { g as getIconAssetUrl } from './config-3830f549.js';

const iconFinderCss = ":host section{margin-bottom:6em}:host h2{padding-top:0.125em;padding-bottom:0.125em;background:#222222;color:#f1f1f1;text-align:center}:host ul{columns:4 15em;column-gap:2em;column-rule:0.0625em solid #f1f1f1;list-style:none}:host li{display:flex;align-items:center;margin-bottom:1em;line-height:1.5em;box-shadow:0 0.0625em 0 0 #f1f1f1}:host lu-icon{color:#222222;font-size:2em}:host span{text-indent:0.5em}";

const IconFinder = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.findCategory = (name) => name.split("-")[0];
  }
  makeIconCategories(icons) {
    return icons
      .filter((icon, index, array) => {
      const isLastIndex = index === array.length - 1;
      return isLastIndex
        ? this.findCategory(icon.name)
        : this.findCategory(icon.name) !==
          this.findCategory(array[index + 1].name);
    })
      .map(icon => this.findCategory(icon.name));
  }
  groupIconsByCategory(icons, categories) {
    return categories.map(c => icons.filter(icon => c === this.findCategory(icon.name)));
  }
  async componentWillLoad() {
    return fetch(
    // replaced the icon api with a variable so we can replace the variable on build for production
    // Please look at the rollup replace plugin in stencil.config.ts
    `${getIconAssetUrl()}icon-manifest.json`)
      .then(response => response.json())
      .then(icons => {
      this.iconCategories = this.makeIconCategories(icons);
      this.iconsByCategory = this.groupIconsByCategory(icons, this.iconCategories);
    })
      .catch(error => console.error(error));
  }
  render() {
    return (h(Host, null, this.iconCategories.map((category, index) => (h("section", null, h("h2", null, category.toUpperCase()), h("ul", null, this.iconsByCategory[index].map(icon => (h("li", null, h("lu-icon", { name: icon.name }), h("span", null, icon.name))))))))));
  }
};
IconFinder.style = iconFinderCss;

export { IconFinder as lu_icon_finder };

//# sourceMappingURL=lu-icon-finder.entry.js.map