@kelvininc/ui-components
Version:
Kelvin UI Components
73 lines (68 loc) • 6.9 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 actionButtonMagicCss = ":host kv-action-button-text::part(button){--button-height-large:var(--magic-button-height-regular);--button-height-small:var(--magic-button-height-compact);--button-gap-large:var(--magic-button-gap-regular);--button-gap-small:var(--magic-button-gap-compact);--button-padding-x-large:var(--magic-button-padding-x-regular);--button-padding-y-large:var(--magic-button-padding-y-regular);--button-padding-x-small:var(--magic-button-padding-x-compact);--button-padding-y-small:var(--magic-button-padding-y-compact);--button-border-thickness:var(--magic-button-secondary-border-thickness-default);--button-border-radius-large:var(--magic-button-radius-regular);--button-border-radius-small:var(--magic-button-radius-compact);--button-icon-size-primary-large:var(--magic-button-primary-icon-size-regular);--button-icon-size-primary-small:var(--magic-button-primary-icon-size-compact);--button-icon-size-secondary-large:var(--magic-button-secondary-icon-size-regular);--button-icon-size-secondary-small:var(--magic-button-secondary-icon-size-compact);--icon-color-default-primary:var(--magic-button-primary-icon-color-default);--icon-color-default-secondary:var(--magic-button-secondary-icon-color-default);--icon-color-hover-primary:var(--magic-button-primary-icon-color-default);--icon-color-hover-secondary:var(--magic-button-secondary-icon-color-subtle);--icon-color-focus-primary:var(--magic-button-primary-icon-color-default);--icon-color-focus-secondary:var(--magic-button-secondary-icon-color-default);--icon-color-disabled-primary:var(--magic-button-primary-icon-color-disabled);--icon-color-disabled-secondary:var(--magic-button-secondary-icon-color-disabled);--icon-color-active-primary:var(--magic-button-primary-icon-color-default);--icon-color-active-secondary:var(--magic-button-secondary-icon-color-subtle);--text-color-default-primary:var(--magic-button-primary-label-default);--text-color-default-secondary:var(--magic-button-secondary-label-default);--text-color-hover-primary:var(--magic-button-primary-label-default);--text-color-hover-secondary:var(--magic-button-secondary-label-subtle);--text-color-focus-primary:var(--magic-button-primary-label-default);--text-color-focus-secondary:var(--magic-button-secondary-label-default);--text-color-disabled-primary:var(--magic-button-primary-label-disabled);--text-color-disabled-secondary:var(--magic-button-secondary-label-disabled);--text-color-active-primary:var(--magic-button-primary-label-default);--text-color-active-secondary:var(--magic-button-secondary-label-subtle);--background-color-default-primary:var(--magic-button-primary-background-default);--background-color-default-secondary:var(--transparent);--background-color-hover-primary:var(--magic-button-primary-background-hover);--background-color-hover-secondary:var(--magic-button-secondary-background-hover);--background-color-focus-primary:var(--magic-button-primary-background-default);--background-color-focus-secondary:var(--transparent);--background-color-disabled-primary:var(--magic-button-primary-background-disabled);--background-color-disabled-secondary:var(--magic-button-secondary-background-disabled);--background-color-active-primary:var(--magic-button-primary-background-pressed);--background-color-active-secondary:var(--magic-button-secondary-background-pressed);--border-color-default-primary:var(--magic-button-primary-background-default);--border-color-default-secondary:var(--magic-button-secondary-border-color-default);--border-color-hover-primary:var(--magic-button-primary-background-hover);--border-color-hover-secondary:var(--magic-button-secondary-border-color-hover);--border-color-focus-primary:var(--magic-button-primary-background-default);--border-color-focus-secondary:var(--magic-button-secondary-border-color-hover);--border-color-disabled-primary:var(--magic-button-primary-background-disabled);--border-color-disabled-secondary:var(--magic-button-secondary-background-disabled);--border-color-active-primary:var(--magic-button-primary-background-pressed);--border-color-active-secondary:var(--magic-button-secondary-border-color-pressed)}";
const KvActionButtonMagic$1 = /*@__PURE__*/ proxyCustomElement(class KvActionButtonMagic 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.Large;
}
render() {
return (h(Host, { key: 'b45ca772f317b931ab015ced431d811be5adafde' }, h("kv-action-button-text", { key: '8755dcac326d88deacf81dd33eb7da64ce0386e0', text: this.text, icon: this.icon, rightIcon: this.rightIcon, type: this.type, disabled: this.disabled, active: this.active, loading: this.loading, size: this.size, exportparts: "button, button-text, icon" })));
}
static get style() { return actionButtonMagicCss; }
}, [257, "kv-action-button-magic", {
"text": [513],
"icon": [513],
"rightIcon": [513, "right-icon"],
"type": [513],
"disabled": [516],
"active": [516],
"loading": [516],
"size": [513]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-action-button-magic", "kv-action-button", "kv-action-button-text", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-action-button-magic":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvActionButtonMagic$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 KvActionButtonMagic = KvActionButtonMagic$1;
const defineCustomElement = defineCustomElement$1;
export { KvActionButtonMagic, defineCustomElement };