@kelvininc/ui-components/components/kv-action-button-split.js

Kelvin UI Components

import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import { d as defineCustomElement$4 } from './p-CsQJZTqg.js';
import { d as defineCustomElement$3 } from './p-yJnlG5V9.js';
import { d as defineCustomElement$2 } from './p-B41PGLQm.js';

const actionButtonSplitCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--button-split-height-large:36px;--button-split-height-small:28px;--button-split-padding-x-large:var(--kv-spacing-2x, 8px);--button-split-padding-x-small:var(--kv-spacing, 4px);--button-split-icon-width:24px;--button-split-icon-height:24px}.action-button-split{display:flex;align-items:center}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-x-small:var(--button-split-padding-x-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: '6b76c82ff7fce00226146d654edb3825545b0b2c' }, h("div", { key: '83f19a6741d38f4b30bac48b94dd287ab4dbed63', class: "action-button-split" }, h("kv-action-button-text", { key: 'd83a2f2d3118467f5996ddab8bc68a53dcad04ba', 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: 'f30104f281919cfb44a8a4fac2eb490691adff7f', 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: 'e3909052a9d97c6c7f550ecd8d0d2ae954b9c11d', name: this.splitIcon, exportparts: "icon" })))));
    }
    static get style() { return actionButtonSplitCss; }
}, [1, "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 };