Mike Phares
127634f5ab
Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter Color Sorting
58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
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
|