@kelvininc/ui-components
Version:
Kelvin UI Components
57 lines (53 loc) • 3.14 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
const inputWrapperCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{display:block}.input-container{background-color:var(--kv-neutral-7, #2a2a2a);padding:0 var(--kv-spacing-4x, 16px);height:32px;display:flex;align-items:center}.input-container kv-icon{visibility:hidden}.input-container--content-hidden:hover{background-color:var(--kv-neutral-6, #3f3f3f);cursor:pointer}.input-container--content-hidden:hover kv-icon{visibility:visible}.input-container .label-container{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:12px;font-weight:400;font-stretch:normal;font-style:normal;line-height:18px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--kv-neutral-4, #bebebe)}.input-container .slot-container{width:100%}";
const KvInputWrapper = /*@__PURE__*/ proxyCustomElement(class KvInputWrapper extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.contentClick = createEvent(this, "contentClick", 7);
/** @inheritdoc */
this.contentHidden = false;
/** @inheritdoc */
this.icon = EIconName.Edit;
this.handleContentClick = () => {
if (!this.contentVisible && !this.contentHidden) {
this.contentClick.emit(this.contentVisible);
}
};
}
render() {
return (h(Host, { key: 'e3bdb69251bc0585c247ffb151cdde63a08602b4' }, h("div", { key: '85a07478335d00c75866ae1c4cc1b50e8e41fca1', class: {
'input-container': true,
'input-container--content-hidden': !this.contentVisible && !this.contentHidden
}, onClick: this.handleContentClick }, this.contentVisible && !this.contentHidden ? (h("div", { class: "slot-container" }, h("slot", null))) : (h("div", { class: "label-container" }, h("div", { class: "label" }, this.label), h("kv-icon", { name: this.icon }))))));
}
static get style() { return inputWrapperCss; }
}, [1, "kv-input-wrapper", {
"contentVisible": [4, "content-visible"],
"contentHidden": [4, "content-hidden"],
"label": [1],
"icon": [1]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-input-wrapper", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-input-wrapper":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvInputWrapper);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvInputWrapper as K, defineCustomElement as d };