@kelvininc/ui-components
Version:
Kelvin UI Components
75 lines (71 loc) • 4.43 kB
JavaScript
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$3 } from './p-CsQJZTqg.js';
import { d as defineCustomElement$2 } from './p-BOySlV0g.js';
import { d as defineCustomElement$1 } from './p-B41PGLQm.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const actionButtonIconCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--button-size-large:36px;--button-size-small:28px;--button-icon-large-width:24px;--button-icon-large-height:24px;--button-icon-small-height:20px;--button-icon-small-width:20px;position:relative}.action-button-icon--size-large kv-action-button::part(button){width:var(--button-size-large)}.action-button-icon--size-large kv-icon{--icon-width:var(--button-icon-large-width);--icon-height:var(--button-icon-large-height)}.action-button-icon--size-small kv-action-button::part(button){width:var(--button-size-small)}.action-button-icon--size-small kv-icon{--icon-width:var(--button-icon-small-width);--icon-height:var(--button-icon-small-height)}kv-action-button{--background-color-active-tertiary:var(--kv-neutral-5, #707070);--border-color-active-tertiary:var(--kv-neutral-4, #bebebe);--text-color-active-tertiary:var(--kv-neutral-4, #bebebe);--button-padding-x-small:0;--button-height-large:var(--button-size-large);--button-height-small:var(--button-size-small);display:flex}kv-action-button::part(button){justify-content:center}.button-badge{position:absolute;z-index:1;top:-5px;right:-5px}";
const KvActionButtonIcon = /*@__PURE__*/ proxyCustomElement(class KvActionButtonIcon extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.clickButton = createEvent(this, "clickButton", 7);
this.focusButton = createEvent(this, "focusButton", 7);
this.blurButton = createEvent(this, "blurButton", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.active = false;
/** @inheritdoc */
this.loading = false;
/** @inheritdoc */
this.size = EComponentSize.Small;
}
render() {
return (h(Host, { key: '25dbc3f7db60a9da257979cc7282d23cbd5a7cdd' }, h("div", { key: '1b8e9ce8e9592f88e65e65dbe99e845befdd1359', class: {
'action-button-icon': true,
[`action-button-icon--size-${this.size}`]: true
} }, h("kv-action-button", { key: '1e36e61292a0c4d82a3df7fe0f477c13ee4874af', type: this.type, active: this.active, loading: this.loading, size: this.size, disabled: this.disabled, exportparts: "button" }, h("kv-icon", { key: '8ea12e905429bd969581935046dc8bbf5aa7f89f', name: this.icon, exportparts: "icon" }), !isEmpty(this.badgeLabel) && (h("div", { key: '0bcf0b5bef891aaa284b01df38a3cfd346428dcf', class: "button-badge", exportparts: "badge" }, h("kv-badge", { key: 'd4abe78228d53bca4a7bade95f2d6de67712d9b1', state: this.badgeState }, this.badgeLabel)))))));
}
static get style() { return actionButtonIconCss; }
}, [1, "kv-action-button-icon", {
"icon": [513],
"type": [513],
"disabled": [516],
"active": [516],
"loading": [516],
"size": [513],
"badgeLabel": [513, "badge-label"],
"badgeState": [513, "badge-state"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-action-button-icon", "kv-action-button", "kv-badge", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvActionButtonIcon);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvActionButtonIcon as K, defineCustomElement as d };