Mike Phares
5c9f0d1aff
Remove GetEngineeringSpcReview Better error message EnforceCodeStyleInBuild NginxFileSystem Remove Reactors and Working Directory AppSettings Delete self contained Thunder Tests Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter
48 lines
3.3 KiB
JavaScript
48 lines
3.3 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
const index = require('./index-ca0e0765.js');
|
|
const icons = require('./icons-d2a85d59.js');
|
|
|
|
const iconsPreviewCss = ".container{display:flex;flex-direction:column;gap:10px}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace;position:relative}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:\"Nunito Sans\";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:1000;content:\"copied!\";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}";
|
|
|
|
const IconsPreview = class {
|
|
constructor(hostRef) {
|
|
index.registerInstance(this, hostRef);
|
|
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.icons) {
|
|
this.iconsArray.push(icon);
|
|
}
|
|
}
|
|
render() {
|
|
return (index.h("div", { class: 'container' }, index.h("div", { class: 'html-wrapper' }, index.h("span", { class: "html-tag" }, "<"), index.h("span", { class: "component-name" }, "ifx-icon"), index.h("span", { class: "attribute-name" }, " icon"), "=", index.h("span", { class: "attribute-value" }, this.iconName), index.h("span", { class: "html-tag" }, ">"), index.h("span", { class: "html-tag" }, "</"), index.h("span", { class: "component-name" }, "ifx-icon"), index.h("span", { class: "html-tag" }, ">"), index.h("button", { onClick: () => this.copyHtmlString() }, this.isCopied ? 'Copied' : 'Copy')), index.h("div", { class: "preview__container" }, this.iconsArray.map((icon, index$1) => index.h("div", { class: `preview__container-item ${this.isCopied && this.copiedIndex === index$1 ? 'copied' : ""}`, onClick: () => this.copyIconText(icon) }, index.h("ifx-icon", { icon: icon }))))));
|
|
}
|
|
get el() { return index.getElement(this); }
|
|
};
|
|
IconsPreview.style = iconsPreviewCss;
|
|
|
|
exports.ifx_icons_preview = IconsPreview;
|
|
|
|
//# sourceMappingURL=ifx-icons-preview.cjs.entry.js.map
|