@kelvininc/ui-components
Version:
Kelvin UI Components
144 lines (140 loc) • 6.35 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, t as EIconName, m as EActionButtonType } from './p-BP5CxQcH.js';
import { d as defineCustomElement$b } from './p-0XA6IHyr.js';
import { d as defineCustomElement$a } from './p-DFvvqEwa.js';
import { d as defineCustomElement$9 } from './p-CJTppmYq.js';
import { d as defineCustomElement$8 } from './p-CcHqOBLS.js';
import { d as defineCustomElement$7 } from './p-BOKt4LQl.js';
import { d as defineCustomElement$6 } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$5 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$4 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$3 } from './p-sG4FxOig.js';
import { d as defineCustomElement$2 } from './p-DdZmrasC.js';
import { d as defineCustomElement$1 } from './p-DFBbXuLI.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const selectCreateOptionCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.select-create-option{display:flex;align-items:flex-start;gap:var(--spacing-xl)}.form{flex:1;overflow:auto}.actions{display:flex;align-items:center;gap:var(--spacing-xs)}";
const KvSelectCreateOption = /*@__PURE__*/ proxyCustomElement(class KvSelectCreateOption extends H {
constructor() {
super();
this.__registerHost();
this.clickCreate = createEvent(this, "clickCreate", 7);
this.clickCancel = createEvent(this, "clickCancel", 7);
this.valueChanged = createEvent(this, "valueChanged", 7);
/** @inheritdoc */
this.value = '';
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.size = EComponentSize.Small;
/** @inheritdoc */
this.inputConfig = {};
this.onKeyPress = (event) => {
if (event.key === 'Enter') {
this.onCreate(event);
}
};
this.onCreate = (event) => {
if (!this.canSubmit) {
return;
}
this.clickCreate.emit(event);
};
this.onCancel = (event) => {
this.clickCancel.emit(event);
};
}
/** Focus the input */
async focusInput() {
this.input.focus();
}
/** Blur the input */
async blurInput() {
this.input.blur();
}
get canSubmit() {
return !isEmpty(this.value) && !this.disabled;
}
componentDidLoad() {
this.input.focusInput();
}
render() {
return (h("div", { key: 'f20feed8fd2ae01a278d014cbd458d0df5ab9f90', class: "select-create-option" }, h("div", { key: '7ec9a6729bbbfa9ee1fa816d62482c14958b94ed', class: "form" }, h("kv-text-field", Object.assign({ key: 'c32c84f6b693e6d5e56adce4206b1a00a20780e8', ref: element => (this.input = element), inputDisabled: this.disabled, size: this.size, value: this.value }, this.inputConfig, { onKeyPress: this.onKeyPress, onTextChange: ({ detail: newValue }) => this.valueChanged.emit(newValue), part: "text-field" }))), h("div", { key: 'dc6d04fd4a9e3acf873f9b29236e441febb10bd6', class: "actions" }, h("kv-action-button-icon", { key: '0cc04c37b03005d34f31efcbde277fc9f672e16b', type: EActionButtonType.Tertiary, icon: EIconName.Close, size: this.size, onClickButton: ({ detail: event }) => this.onCancel(event), part: "cancel-button" }), h("kv-action-button-icon", { key: 'abdb94566f88a5a9d435f00f7d4d3d040eed6d35', type: EActionButtonType.Primary, icon: EIconName.DoneAll, size: this.size, disabled: !this.canSubmit, onClickButton: ({ detail: event }) => this.onCreate(event), part: "create-button" }))));
}
static get style() { return selectCreateOptionCss; }
}, [256, "kv-select-create-option", {
"value": [513],
"disabled": [516],
"size": [513],
"inputConfig": [16, "input-config"],
"focusInput": [64],
"blurInput": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-select-create-option", "kv-action-button", "kv-action-button-icon", "kv-badge", "kv-dirty-dot", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-portal", "kv-text-field", "kv-tooltip", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-select-create-option":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvSelectCreateOption);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvSelectCreateOption as K, defineCustomElement as d };