@kelvininc/ui-components
Version:
Kelvin UI Components
43 lines (39 loc) • 2.71 kB
JavaScript
import { H as proxyCustomElement, I as H, K as h, L as Host } from './p-BP5CxQcH.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { g as getConfig } from './p-B6zr3BG3.js';
const iconCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--icon-color:var(--icon-surface-neutral-primary);--icon-height:var(--size-md);--icon-width:var(--size-md);--icon-rotation:0deg}.icon{display:flex;fill:var(--icon-color);width:var(--icon-width);height:var(--icon-height);transform:rotate(var(--icon-rotation));}.icon.icon-8{width:8px;height:8px}.icon.icon-12{width:12px;height:12px}.icon.icon-16{width:16px;height:16px}.icon.icon-20{width:20px;height:20px}.icon.icon-24{width:24px;height:24px}.icon.icon-40{width:40px;height:40px}.icon.icon-full-size{width:100%;height:100%}.icon.rotate-0{transform:rotate(0deg)}.icon.rotate-45{transform:rotate(45deg)}.icon.rotate-90{transform:rotate(90deg)}.icon.rotate-135{transform:rotate(135deg)}.icon.rotate-180{transform:rotate(180deg)}.icon.rotate-225{transform:rotate(225deg)}.icon.rotate-270{transform:rotate(270deg)}.icon.rotate-315{transform:rotate(315deg)}";
const KvIcon = /*@__PURE__*/ proxyCustomElement(class KvIcon extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
/** @inheritdoc */
this.customClass = '';
/** (optional) Icon custom color */
this.customColor = '';
}
render() {
const { baseAssetsUrl, symbolsFileName } = getConfig();
return (h(Host, { key: '201a1dd05bca7cc1cd500dcf3a3691532a52585e' }, h("svg", { key: '2be52a1c929f1e7953c7c98c299ebcbb2316af49', part: "icon", xmlns: "http://www.w3.org/2000/svg", class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { icon: true }), style: { fill: this.customColor } }, h("use", { key: 'b7dbcbc78785c4453a6c12a2ac36b03e2922256a', href: `${baseAssetsUrl}${symbolsFileName}#${this.name}` }))));
}
static get style() { return iconCss; }
}, [257, "kv-icon", {
"name": [513],
"customClass": [513, "custom-class"],
"customColor": [513, "custom-color"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-icon":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvIcon);
}
break;
} });
}
defineCustomElement();
export { KvIcon as K, defineCustomElement as d };