@kelvininc/ui-components
Version:
Kelvin UI Components
69 lines (65 loc) • 21.1 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';
const actionButtonCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--text-color-default-primary:var(--kv-text, #fff);--text-color-default-secondary:var(--kv-text, #fff);--text-color-default-tertiary:var(--kv-text, #fff);--text-color-default-ghost:var(--kv-text, #fff);--text-color-default-danger:var(--kv-text, #fff);--text-color-hover-primary:var(--kv-text, #fff);--text-color-hover-secondary:var(--kv-text, #fff);--text-color-hover-tertiary:var(--kv-neutral-2, #e5e5e5);--text-color-hover-ghost:var(--kv-neutral-2, #e5e5e5);--text-color-hover-danger:var(--kv-text, #fff);--text-color-focus-primary:var(--kv-text, #fff);--text-color-focus-secondary:var(--kv-text, #fff);--text-color-focus-tertiary:var(--kv-text, #fff);--text-color-focus-ghost:var(--kv-text, #fff);--text-color-focus-danger:var(--kv-text, #fff);--text-color-disabled-primary:var(--kv-neutral-5, #707070);--text-color-disabled-secondary:var(--kv-neutral-5, #707070);--text-color-disabled-tertiary:var(--kv-neutral-5, #707070);--text-color-disabled-ghost:var(--kv-neutral-5, #707070);--text-color-disabled-danger:var(--kv-text, #fff);--text-color-active-primary:var(--kv-text, #fff);--text-color-active-secondary:var(--kv-text, #fff);--text-color-active-tertiary:var(--kv-neutral-2, #e5e5e5);--text-color-active-ghost:var(--kv-neutral-2, #e5e5e5);--text-color-active-danger:var(--kv-text, #fff);--background-color-default-primary:var(--kv-primary, #005cc7);--background-color-default-secondary:var(--kv-neutral-6, #3f3f3f);--background-color-default-tertiary:transparent;--background-color-default-ghost:transparent;--background-color-default-danger:var(--kv-error, #e11900);--background-color-hover-primary:var(--kv-primary-dark, #103d73);--background-color-hover-secondary:var(--kv-neutral-5, #707070);--background-color-hover-tertiary:transparent;--background-color-hover-ghost:var(--kv-neutral-7, #2a2a2a);--background-color-hover-danger:var(--kv-error-dark, #c61600);--background-color-focus-primary:var(--kv-primary, #005cc7);--background-color-focus-secondary:var(--kv-neutral-6, #3f3f3f);--background-color-focus-tertiary:transparent;--background-color-focus-ghost:var(--kv-neutral-7, #2a2a2a);--background-color-focus-danger:var(--kv-error, #e11900);--background-color-disabled-primary:var(--kv-neutral-3, #ddd);--background-color-disabled-secondary:var(--kv-neutral-3, #ddd);--background-color-disabled-tertiary:transparent;--background-color-disabled-ghost:transparent;--background-color-disabled-danger:var(--kv-error-light, #f9d1cc);--background-color-active-primary:var(--kv-primary-dark, #103d73);--background-color-active-secondary:var(--kv-neutral-5, #707070);--background-color-active-tertiary:transparent;--background-color-active-ghost:var(--kv-neutral-7, #2a2a2a);--background-color-active-danger:var(--kv-error-dark, #c61600);--border-color-default-primary:var(--kv-primary, #005cc7);--border-color-default-secondary:var(--kv-neutral-6, #3f3f3f);--border-color-default-tertiary:var(--kv-neutral-0, #fff);--border-color-default-ghost:transparent;--border-color-default-danger:var(--kv-error, #e11900);--border-color-hover-primary:var(--kv-primary-dark, #103d73);--border-color-hover-secondary:var(--kv-neutral-5, #707070);--border-color-hover-tertiary:var(--kv-neutral-2, #e5e5e5);--border-color-hover-ghost:var(--kv-neutral-7, #2a2a2a);--border-color-hover-danger:var(--kv-error-dark, #c61600);--border-color-focus-primary:var(--kv-primary, #005cc7);--border-color-focus-secondary:var(--kv-neutral-0, #fff);--border-color-focus-tertiary:transparent;--border-color-focus-ghost:var(--kv-neutral-7, #2a2a2a);--border-color-focus-danger:transparent;--border-color-disabled-primary:var(--kv-neutral-3, #ddd);--border-color-disabled-secondary:var(--kv-neutral-3, #ddd);--border-color-disabled-tertiary:var(--kv-neutral-5, #707070);--border-color-disabled-ghost:transparent;--border-color-disabled-danger:var(--kv-error-light, #f9d1cc);--border-color-active-primary:var(--kv-primary-dark, #103d73);--border-color-active-secondary:var(--kv-neutral-5, #707070);--border-color-active-tertiary:var(--kv-neutral-2, #e5e5e5);--border-color-active-ghost:var(--kv-neutral-7, #2a2a2a);--border-color-active-danger:var(--kv-error-dark, #c61600);--button-height-large:36px;--button-height-small:28px;--button-padding-x-large:var(--kv-spacing-4x, 16px);--button-padding-x-small:var(--kv-spacing-3x, 12px)}.action-button{text-decoration:none;position:relative;user-select:none;cursor:pointer;display:inline-flex;align-items:center;border-radius:4px;box-sizing:border-box}.action-button--type-primary{color:var(--text-color-default-primary);background:linear-gradient(45deg, var(--background-color-hover-primary) 50%, var(--background-color-default-primary) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-primary);background-position:right bottom;transition:background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;border:1px solid var(--border-color-default-primary)}.action-button--type-primary ::slotted(kv-icon){--icon-color:var(--text-color-default-primary)}.action-button--type-primary:hover:not(.action-button--disabled){color:var(--text-color-hover-primary)}.action-button--type-primary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-hover-primary)}.action-button--type-primary:focus:not(.action-button--disabled){color:var(--text-color-focus-primary)}.action-button--type-primary:focus:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-focus-primary)}.action-button--type-primary.action-button--disabled{color:var(--text-color-disabled-primary)}.action-button--type-primary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--text-color-disabled-primary)}.action-button--type-primary.action-button--active{color:var(--text-color-active-primary)}.action-button--type-primary.action-button--active ::slotted(kv-icon){--icon-color:var(--text-color-active-primary)}.action-button--type-primary:hover:not(.action-button--disabled){background-position:left top}.action-button--type-primary:focus:not(.action-button--disabled){background:var(--background-color-focus-primary)}.action-button--type-primary.action-button--disabled{background:var(--background-color-disabled-primary)}.action-button--type-primary.action-button--active{background:var(--background-color-active-primary)}.action-button--type-primary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-primary);border-right-color:var(--border-color-hover-primary);border-bottom-color:var(--border-color-hover-primary);border-left-color:var(--border-color-hover-primary)}.action-button--type-primary:focus:not(.action-button--disabled)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:1px solid var(--border-color-focus-primary)}.action-button--type-primary.action-button--disabled{border:1px solid var(--border-color-disabled-primary)}.action-button--type-primary.action-button--active{border:1px solid var(--border-color-active-primary)}.action-button--type-secondary{color:var(--text-color-default-secondary);background:linear-gradient(45deg, var(--background-color-hover-secondary) 50%, var(--background-color-default-secondary) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-secondary);background-position:right bottom;transition:background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;border:1px solid var(--border-color-default-secondary)}.action-button--type-secondary ::slotted(kv-icon){--icon-color:var(--text-color-default-secondary)}.action-button--type-secondary:hover:not(.action-button--disabled){color:var(--text-color-hover-secondary)}.action-button--type-secondary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-hover-secondary)}.action-button--type-secondary:focus:not(.action-button--disabled){color:var(--text-color-focus-secondary)}.action-button--type-secondary:focus:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-focus-secondary)}.action-button--type-secondary.action-button--disabled{color:var(--text-color-disabled-secondary)}.action-button--type-secondary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--text-color-disabled-secondary)}.action-button--type-secondary.action-button--active{color:var(--text-color-active-secondary)}.action-button--type-secondary.action-button--active ::slotted(kv-icon){--icon-color:var(--text-color-active-secondary)}.action-button--type-secondary:hover:not(.action-button--disabled){background-position:left top}.action-button--type-secondary:focus:not(.action-button--disabled){background:var(--background-color-focus-secondary)}.action-button--type-secondary.action-button--disabled{background:var(--background-color-disabled-secondary)}.action-button--type-secondary.action-button--active{background:var(--background-color-active-secondary)}.action-button--type-secondary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-secondary);border-right-color:var(--border-color-hover-secondary);border-bottom-color:var(--border-color-hover-secondary);border-left-color:var(--border-color-hover-secondary)}.action-button--type-secondary:focus:not(.action-button--disabled)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:1px solid var(--border-color-focus-secondary)}.action-button--type-secondary.action-button--disabled{border:1px solid var(--border-color-disabled-secondary)}.action-button--type-secondary.action-button--active{border:1px solid var(--border-color-active-secondary)}.action-button--type-tertiary{color:var(--text-color-default-tertiary);background:linear-gradient(45deg, var(--background-color-hover-tertiary) 50%, var(--background-color-default-tertiary) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-tertiary);background-position:right bottom;transition:background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;border:1px solid var(--border-color-default-tertiary)}.action-button--type-tertiary ::slotted(kv-icon){--icon-color:var(--text-color-default-tertiary)}.action-button--type-tertiary:hover:not(.action-button--disabled){color:var(--text-color-hover-tertiary)}.action-button--type-tertiary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-hover-tertiary)}.action-button--type-tertiary:focus:not(.action-button--disabled){color:var(--text-color-focus-tertiary)}.action-button--type-tertiary:focus:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-focus-tertiary)}.action-button--type-tertiary.action-button--disabled{color:var(--text-color-disabled-tertiary)}.action-button--type-tertiary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--text-color-disabled-tertiary)}.action-button--type-tertiary.action-button--active{color:var(--text-color-active-tertiary)}.action-button--type-tertiary.action-button--active ::slotted(kv-icon){--icon-color:var(--text-color-active-tertiary)}.action-button--type-tertiary:hover:not(.action-button--disabled){background-position:left top}.action-button--type-tertiary:focus:not(.action-button--disabled){background:var(--background-color-focus-tertiary)}.action-button--type-tertiary.action-button--disabled{background:var(--background-color-disabled-tertiary)}.action-button--type-tertiary.action-button--active{background:var(--background-color-active-tertiary)}.action-button--type-tertiary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-tertiary);border-right-color:var(--border-color-hover-tertiary);border-bottom-color:var(--border-color-hover-tertiary);border-left-color:var(--border-color-hover-tertiary)}.action-button--type-tertiary:focus:not(.action-button--disabled)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:1px solid var(--border-color-focus-tertiary)}.action-button--type-tertiary.action-button--disabled{border:1px solid var(--border-color-disabled-tertiary)}.action-button--type-tertiary.action-button--active{border:1px solid var(--border-color-active-tertiary)}.action-button--type-tertiary.action-button--loading{border-color:transparent;overflow:hidden}.action-button--type-tertiary.action-button--loading::before{content:\"\";background-image:conic-gradient(transparent, var(--kv-neutral-6, #3f3f3f), transparent);width:150%;aspect-ratio:1/1;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(0deg);animation:loadingrotate 3s infinite linear;border-radius:inherit;z-index:-1}.action-button--type-ghost{color:var(--text-color-default-ghost);background:linear-gradient(45deg, var(--background-color-hover-ghost) 50%, var(--background-color-default-ghost) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-ghost);background-position:right bottom;transition:background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;border:1px solid var(--border-color-default-ghost)}.action-button--type-ghost ::slotted(kv-icon){--icon-color:var(--text-color-default-ghost)}.action-button--type-ghost:hover:not(.action-button--disabled){color:var(--text-color-hover-ghost)}.action-button--type-ghost:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-hover-ghost)}.action-button--type-ghost:focus:not(.action-button--disabled){color:var(--text-color-focus-ghost)}.action-button--type-ghost:focus:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-focus-ghost)}.action-button--type-ghost.action-button--disabled{color:var(--text-color-disabled-ghost)}.action-button--type-ghost.action-button--disabled ::slotted(kv-icon){--icon-color:var(--text-color-disabled-ghost)}.action-button--type-ghost.action-button--active{color:var(--text-color-active-ghost)}.action-button--type-ghost.action-button--active ::slotted(kv-icon){--icon-color:var(--text-color-active-ghost)}.action-button--type-ghost:hover:not(.action-button--disabled){background-position:left top}.action-button--type-ghost:focus:not(.action-button--disabled){background:var(--background-color-focus-ghost)}.action-button--type-ghost.action-button--disabled{background:var(--background-color-disabled-ghost)}.action-button--type-ghost.action-button--active{background:var(--background-color-active-ghost)}.action-button--type-ghost:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-ghost);border-right-color:var(--border-color-hover-ghost);border-bottom-color:var(--border-color-hover-ghost);border-left-color:var(--border-color-hover-ghost)}.action-button--type-ghost:focus:not(.action-button--disabled)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:1px solid var(--border-color-focus-ghost)}.action-button--type-ghost.action-button--disabled{border:1px solid var(--border-color-disabled-ghost)}.action-button--type-ghost.action-button--active{border:1px solid var(--border-color-active-ghost)}.action-button--type-danger{color:var(--text-color-default-danger);background:linear-gradient(45deg, var(--background-color-hover-danger) 50%, var(--background-color-default-danger) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-danger);background-position:right bottom;transition:background-position 0.5s ease-out, border-top-color 0.5s ease-out, border-right-color 0.5s ease-out, border-bottom-color 0.25s ease-in-out, border-left-color 0.25s ease-in-out;border:1px solid var(--border-color-default-danger)}.action-button--type-danger ::slotted(kv-icon){--icon-color:var(--text-color-default-danger)}.action-button--type-danger:hover:not(.action-button--disabled){color:var(--text-color-hover-danger)}.action-button--type-danger:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-hover-danger)}.action-button--type-danger:focus:not(.action-button--disabled){color:var(--text-color-focus-danger)}.action-button--type-danger:focus:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--text-color-focus-danger)}.action-button--type-danger.action-button--disabled{color:var(--text-color-disabled-danger)}.action-button--type-danger.action-button--disabled ::slotted(kv-icon){--icon-color:var(--text-color-disabled-danger)}.action-button--type-danger.action-button--active{color:var(--text-color-active-danger)}.action-button--type-danger.action-button--active ::slotted(kv-icon){--icon-color:var(--text-color-active-danger)}.action-button--type-danger:hover:not(.action-button--disabled){background-position:left top}.action-button--type-danger:focus:not(.action-button--disabled){background:var(--background-color-focus-danger)}.action-button--type-danger.action-button--disabled{background:var(--background-color-disabled-danger)}.action-button--type-danger.action-button--active{background:var(--background-color-active-danger)}.action-button--type-danger:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-danger);border-right-color:var(--border-color-hover-danger);border-bottom-color:var(--border-color-hover-danger);border-left-color:var(--border-color-hover-danger)}.action-button--type-danger:focus:not(.action-button--disabled)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:1px solid var(--border-color-focus-danger)}.action-button--type-danger.action-button--disabled{border:1px solid var(--border-color-disabled-danger)}.action-button--type-danger.action-button--active{border:1px solid var(--border-color-active-danger)}.action-button--size-small{height:var(--button-height-small);padding:0 var(--button-padding-x-small)}.action-button--size-large{height:var(--button-height-large);padding:0 var(--button-padding-x-large)}.action-button--disabled{cursor:not-allowed;user-select:none}@keyframes loadingrotate{100%{transform:translate(-50%, -50%) rotate(360deg)}}";
const KvActionButton = /*@__PURE__*/ proxyCustomElement(class KvActionButton 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;
this.onClickButton = (event) => {
if (this.disabled) {
return;
}
this.clickButton.emit(event);
};
this.onFocusButton = (event) => {
this.focusButton.emit(event);
};
this.onBlurButton = (event) => {
this.blurButton.emit(event);
};
}
render() {
return (h(Host, { key: '3e18d5791a3b2fccac940f8be92c319014ab0982', "aria-disabled": this.disabled, onClick: this.onClickButton }, h("div", { key: 'feb959be50e3e33455d8b8395fdb32e030456348', class: {
'action-button': true,
'action-button--disabled': this.disabled,
'action-button--active': this.active,
'action-button--loading': this.loading,
[`action-button--type-${this.type}`]: true,
[`action-button--size-${this.size}`]: true
}, tabIndex: this.disabled ? -1 : 0, part: "button", onFocus: this.onFocusButton, onBlur: this.onBlurButton }, h("slot", { key: '4bf1f9c8c8cf6179c7204a16b51600eb984010e7' }))));
}
static get style() { return actionButtonCss; }
}, [1, "kv-action-button", {
"type": [513],
"disabled": [516],
"active": [516],
"loading": [516],
"size": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-action-button"];
components.forEach(tagName => { switch (tagName) {
case "kv-action-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvActionButton);
}
break;
} });
}
defineCustomElement();
export { KvActionButton as K, defineCustomElement as d };