@kelvininc/ui-components/components/kv-toggle-button-group.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 './p-DBphUUgi.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { d as defineCustomElement$4 } from './p-B41PGLQm.js';
import { d as defineCustomElement$3 } from './p-BeCwHLdO.js';
import { d as defineCustomElement$2 } from './p-7k8390l6.js';

const toggleButtonGroupCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{display:flex;gap:var(--kv-spacing, 4px);--toggle-group-width:unset}:host>kv-toggle-button{width:var(--toggle-group-width)}";

const KvToggleButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class KvToggleButtonGroup extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.checkedChange = createEvent(this, "checkedChange", 7);
        /** @inheritdoc */
        this.buttons = [];
        /** @inheritdoc */
        this.withRadio = false;
        /** @inheritdoc */
        this.disabled = false;
        /** @inheritdoc */
        this.size = EComponentSize.Small;
        /** @inheritdoc */
        this.selectedButtons = {};
        /** @inheritdoc */
        this.disabledButtons = {};
        /** @inheritdoc */
        this.radioButtons = {};
    }
    render() {
        return (h(Host, { key: 'a61b9b7fe554e7337be7b82a0b315d5ef5187ea0' }, this.buttons.map(button => {
            var _a;
            return (h("kv-toggle-button", { part: "toggle-button-container", exportparts: "toggle-button", value: button.value, label: button.label, icon: button.icon, preventDefault: button.preventDefault, size: (_a = this.size) !== null && _a !== void 0 ? _a : button.size, disabled: this.disabled || this.disabledButtons[button.value] || button.disabled, checked: this.selectedButtons[button.value] || button.checked, withRadio: this.withRadio || this.radioButtons[button.value] || button.withRadio }));
        })));
    }
    static get style() { return toggleButtonGroupCss; }
}, [1, "kv-toggle-button-group", {
        "buttons": [16],
        "withRadio": [516, "with-radio"],
        "disabled": [516],
        "size": [513],
        "selectedButtons": [16, "selected-buttons"],
        "disabledButtons": [16, "disabled-buttons"],
        "radioButtons": [16, "radio-buttons"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["kv-toggle-button-group", "kv-icon", "kv-radio", "kv-toggle-button"];
    components.forEach(tagName => { switch (tagName) {
        case "kv-toggle-button-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, KvToggleButtonGroup$1);
            }
            break;
        case "kv-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "kv-radio":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "kv-toggle-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const KvToggleButtonGroup = KvToggleButtonGroup$1;
const defineCustomElement = defineCustomElement$1;

export { KvToggleButtonGroup, defineCustomElement };