@kelvininc/ui-components
Version:
Kelvin UI Components
94 lines (89 loc) • 5.91 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, e as EComponentSize, K as h, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$4 } from './p-0XA6IHyr.js';
import { d as defineCustomElement$3 } from './p-DviRLduP.js';
import { d as defineCustomElement$2 } from './p-DQ7v6WT-.js';
const actionButtonSplitCss = "@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{--button-split-height-large:var(--button-height-regular);--button-split-height-small:var(--button-height-compact);--button-split-padding-x-large:var(--icon-button-padding-x-regular);--button-split-padding-y-large:var(--icon-button-padding-y-regular);--button-split-padding-x-small:var(--icon-button-padding-x-compact);--button-split-padding-y-small:var(--icon-button-padding-y-compact);--button-split-icon-width:var(--icon-button-primary-icon-size-regular);--button-split-icon-height:var(--icon-button-primary-icon-size-regular)}.action-button-split{display:flex;align-items:center}.action-button-split:hover kv-action-button-text::part(button){border-right-color:transparent}.action-button-split:hover kv-action-button::part(button){border-left-color:transparent}kv-action-button-text::part(button){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0.5px}kv-action-button::part(button){--button-height-large:var(--button-split-height-large);--button-height-small:var(--button-split-height-small);--button-padding-x-large:var(--button-split-padding-x-large);--button-padding-y-large:var(--button-split-padding-y-large);--button-padding-x-small:var(--button-split-padding-x-small);--button-padding-y-small:var(--button-split-padding-y-small);display:flex;margin-left:-1px;border-left-width:0.5px;border-top-left-radius:0;border-bottom-left-radius:0}kv-icon{--icon-width:var(--button-split-icon-width);--icon-height:var(--button-split-icon-width)}";
const KvActionButtonSplit$1 = /*@__PURE__*/ proxyCustomElement(class KvActionButtonSplit extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.clickLeftButton = createEvent(this, "clickLeftButton", 7);
this.clickRightButton = createEvent(this, "clickRightButton", 7);
this.focusLeftButton = createEvent(this, "focusLeftButton", 7);
this.focusRightButton = createEvent(this, "focusRightButton", 7);
this.blurLeftButton = createEvent(this, "blurLeftButton", 7);
this.blurRightButton = createEvent(this, "blurRightButton", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
this.onClickLeftButton = (event) => {
this.clickLeftButton.emit(event.detail);
};
this.onClickRightButton = (event) => {
this.clickRightButton.emit(event.detail);
};
this.onFocusLeftButton = (event) => {
this.focusLeftButton.emit(event.detail);
};
this.onFocusRightButton = (event) => {
this.focusRightButton.emit(event.detail);
};
this.onBlurLeftButton = (event) => {
this.blurLeftButton.emit(event.detail);
};
this.onBlurRightButton = (event) => {
this.blurRightButton.emit(event.detail);
};
}
render() {
return (h(Host, { key: 'e3e5a501fff3c8b55dbb4e62d5df567b5ac36728' }, h("div", { key: '722b4d86f44eb0f50450ce2cf01a33ea208e43e8', class: "action-button-split" }, h("kv-action-button-text", { key: '2abaaddc33827eaa1354f6160efdafeef425c202', type: this.type, text: this.text, icon: this.icon, disabled: this.disabled, size: this.size, loading: this.loading, onClickButton: this.onClickLeftButton, onFocusButton: this.onFocusLeftButton, onBlurButton: this.onBlurLeftButton, exportparts: "button" }), h("kv-action-button", { key: '7ebcca6b6384259abdd485b17e8246cab5214987', type: this.type, disabled: this.disabled, size: this.size, loading: this.loading, onClickButton: this.onClickRightButton, onFocusButton: this.onFocusRightButton, onBlurButton: this.onBlurRightButton, exportparts: "button" }, h("kv-icon", { key: '239efa1775440dded42426632c0cd519757c8e1a', name: this.splitIcon, exportparts: "icon" })))));
}
static get style() { return actionButtonSplitCss; }
}, [257, "kv-action-button-split", {
"splitIcon": [513, "split-icon"],
"text": [513],
"icon": [513],
"type": [513],
"disabled": [516],
"active": [516],
"loading": [516],
"size": [513]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-action-button-split", "kv-action-button", "kv-action-button-text", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-action-button-split":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvActionButtonSplit$1);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvActionButtonSplit = KvActionButtonSplit$1;
const defineCustomElement = defineCustomElement$1;
export { KvActionButtonSplit, defineCustomElement };