@kelvininc/ui-components
Version:
Kelvin UI Components
148 lines (144 loc) • 6.33 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h } from './p-D6GMjtmE.js';
import { b as EIconName, E as EActionButtonType } from './p-DBphUUgi.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$b } from './p-CsQJZTqg.js';
import { d as defineCustomElement$a } from './p-C7UGguL_.js';
import { d as defineCustomElement$9 } from './p-BOySlV0g.js';
import { d as defineCustomElement$8 } from './p-BJSKhyhi.js';
import { d as defineCustomElement$7 } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$6 } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$5 } from './p-B41PGLQm.js';
import { d as defineCustomElement$4 } from './p-BIWUEm1f.js';
import { d as defineCustomElement$3 } from './p-DMity2tp.js';
import { d as defineCustomElement$2 } from './p-GHnCHOez.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.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}}.select-create-option{display:flex;align-items:flex-start;gap:var(--kv-spacing-3x, 12px)}.form{flex:1;overflow:auto}.actions{display:flex;align-items:center;gap:var(--kv-spacing, 4px)}";
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();
}
};
this.onCreate = () => {
if (!this.canSubmit) {
return;
}
this.clickCreate.emit();
};
this.onCancel = () => {
this.clickCancel.emit();
};
}
/** 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: 'c8ccebfa424bcf032d5dab34ed1b32ba2ca541f7', class: "select-create-option" }, h("div", { key: '3d38f0ac952e6616361311bfe818494a5b4f881e', class: "form" }, h("kv-text-field", Object.assign({ key: 'e90e6969aa10f7b94e52b60336dac224d9258522', 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: '0832568dbd3c07c40fb0940f6d0db20482c782dc', class: "actions" }, h("kv-action-button-icon", { key: 'd0a109b2282462d0daa18cf3f3a3c610fd714904', type: EActionButtonType.Tertiary, icon: EIconName.Close, size: this.size, onClickButton: this.onCancel, part: "cancel-button" }), h("kv-action-button-icon", { key: 'd106162544014b86468c070ac2381a295157c7e2', type: EActionButtonType.Primary, icon: EIconName.DoneAll, size: this.size, disabled: !this.canSubmit, onClickButton: this.onCreate, part: "create-button" }))));
}
static get style() { return selectCreateOptionCss; }
}, [0, "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 };