import { h } from "@stencil/core";
import { icons } from "@infineon/infineon-icons";
export class IconsPreview {
  constructor() {
    this.iconsArray = [];
    this.isCopied = false;
    this.copiedIndex = undefined;
    this.htmlTag = '<ifx-icon icon="calendar-16"></ifx-icon>';
    this.iconName = `"c-info-24"`;
  }
  handleCopiedText() {
    this.isCopied = true;
    setTimeout(() => {
      this.isCopied = false;
    }, 2000);
  }
  copyIconText(icon) {
    this.htmlTag = `<ifx-icon icon="${icon}"></ifx-icon>`;
    this.iconName = `"${icon}"`;
  }
  copyHtmlString() {
    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;
    navigator.clipboard.writeText(copiedTag);
    this.handleCopiedText();
  }
  componentWillLoad() {
    for (let icon in icons) {
      this.iconsArray.push(icon);
    }
  }
  render() {
    return (h("div", { class: 'container' }, h("div", { class: 'html-wrapper' }, h("span", { class: "html-tag" }, "<"), h("span", { class: "component-name" }, "ifx-icon"), h("span", { class: "attribute-name" }, " icon"), "=", h("span", { class: "attribute-value" }, this.iconName), h("span", { class: "html-tag" }, ">"), h("span", { class: "html-tag" }, "</"), h("span", { class: "component-name" }, "ifx-icon"), h("span", { class: "html-tag" }, ">"), h("button", { onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), h("div", { class: "preview__container" }, this.iconsArray.map((icon, index) => h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, h("ifx-icon", { icon: icon }))))));
  }
  static get is() { return "ifx-icons-preview"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["./icons-preview.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["icons-preview.css"]
    };
  }
  static get states() {
    return {
      "iconsArray": {},
      "isCopied": {},
      "copiedIndex": {},
      "htmlTag": {},
      "iconName": {}
    };
  }
  static get elementRef() { return "el"; }
}
//# sourceMappingURL=icons-preview.js.map