@kelvininc/ui-components
Version:
Kelvin UI Components
97 lines (92 loc) • 4.22 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$7 } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$6 } from './p-CgqRIP0M.js';
import { d as defineCustomElement$5 } from './p-s9JMr6UQ.js';
import { d as defineCustomElement$4 } from './p-BVkWAv-0.js';
import { d as defineCustomElement$3 } from './p-DdZmrasC.js';
import { d as defineCustomElement$2 } from './p-DFBbXuLI.js';
const toggleButtonGroupCss = "@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{display:flex;gap:var(--spacing-xs);--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: 'b6340ed668eb3bfa6b7774e2ea7655a551cbd1b3' }, this.buttons.map(button => {
var _a;
return (h("kv-toggle-button", { part: "toggle-button-container", exportparts: "toggle-button", icon: button.icon, value: button.value, label: button.label, tooltip: button.tooltip, size: (_a = this.size) !== null && _a !== void 0 ? _a : button.size, preventDefault: button.preventDefault, checked: this.selectedButtons[button.value] || button.checked, disabled: this.disabled || this.disabledButtons[button.value] || button.disabled, withRadio: this.withRadio || this.radioButtons[button.value] || button.withRadio, customAttributes: button.customAttributes }));
})));
}
static get style() { return toggleButtonGroupCss; }
}, [257, "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-portal", "kv-radio", "kv-toggle-button", "kv-tooltip", "kv-tooltip-text"];
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$7();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-toggle-button":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const KvToggleButtonGroup = KvToggleButtonGroup$1;
const defineCustomElement = defineCustomElement$1;
export { KvToggleButtonGroup, defineCustomElement };