@kelvininc/ui-components
Version:
Kelvin UI Components
56 lines (52 loc) • 3.12 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, t as EIconName, K as h, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.js';
const inputWrapperCss = "@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{display:block}.input-container{background-color:var(--transparent);padding:0 var(--spacing-2xl);height:32px;display:flex;align-items:center}.input-container kv-icon{visibility:hidden}.input-container--content-hidden:hover{background-color:var(--background-interactive-slider-list-hover);cursor:pointer}.input-container--content-hidden:hover kv-icon{--icon-color:var(--icon-surface-neutral-primary);visibility:visible}.input-container .label-container{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--text-container-neutral-default)}.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: '80b3abbba9ee9bccd764818b64922b10a053ebb0' }, h("div", { key: '180134974d4de7dabbb1096f7cf1ae718da8d011', 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; }
}, [257, "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 };