@kelvininc/ui-components
Version:
Kelvin UI Components
68 lines (64 loc) • 35.2 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';
const actionButtonCss = "@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{--_icon-color-default-primary:var(--button-primary-icon-color-default);--_icon-color-default-secondary:var(--button-secondary-icon-color-default);--_icon-color-default-tertiary:var(--button-tertiary-icon-color-default);--_icon-color-default-text:var(--button-text-icon-color-default);--_icon-color-default-danger:var(--button-danger-icon-color-default);--_icon-color-hover-primary:var(--button-primary-icon-color-default);--_icon-color-hover-secondary:var(--button-secondary-icon-color-subtle);--_icon-color-hover-tertiary:var(--button-tertiary-icon-color-subtle);--_icon-color-hover-text:var(--button-text-icon-color-default);--_icon-color-hover-danger:var(--button-danger-icon-color-default);--_icon-color-focus-primary:var(--button-primary-icon-color-default);--_icon-color-focus-secondary:var(--button-secondary-icon-color-default);--_icon-color-focus-tertiary:var(--button-tertiary-icon-color-default);--_icon-color-focus-text:var(--button-text-icon-color-default);--_icon-color-focus-danger:var(--button-danger-icon-color-default);--_icon-color-disabled-primary:var(--button-primary-icon-color-disabled);--_icon-color-disabled-secondary:var(--button-secondary-icon-color-disabled);--_icon-color-disabled-tertiary:var(--button-tertiary-icon-color-disabled);--_icon-color-disabled-text:var(--button-text-icon-color-disabled);--_icon-color-disabled-danger:var(--button-danger-icon-color-disabled);--_icon-color-active-primary:var(--button-primary-icon-color-default);--_icon-color-active-secondary:var(--button-secondary-icon-color-subtle);--_icon-color-active-tertiary:var(--button-tertiary-icon-color-subtle);--_icon-color-active-text:var(--button-text-icon-color-default);--_icon-color-active-danger:var(--button-danger-icon-color-default);--_text-color-default-primary:var(--button-primary-label-default);--_text-color-default-secondary:var(--button-secondary-label-default);--_text-color-default-tertiary:var(--button-tertiary-label-default);--_text-color-default-text:var(--button-text-label-default);--_text-color-default-danger:var(--button-danger-label-default);--_text-color-hover-primary:var(--button-primary-label-default);--_text-color-hover-secondary:var(--button-secondary-label-subtle);--_text-color-hover-tertiary:var(--button-tertiary-label-subtle);--_text-color-hover-text:var(--button-text-label-default);--_text-color-hover-danger:var(--button-danger-label-default);--_text-color-focus-primary:var(--button-primary-label-default);--_text-color-focus-secondary:var(--button-secondary-label-default);--_text-color-focus-tertiary:var(--button-tertiary-label-default);--_text-color-focus-text:var(--button-text-label-default);--_text-color-focus-danger:var(--button-danger-label-default);--_text-color-disabled-primary:var(--button-primary-label-disabled);--_text-color-disabled-secondary:var(--button-secondary-label-disabled);--_text-color-disabled-tertiary:var(--button-tertiary-label-disabled);--_text-color-disabled-text:var(--button-text-label-disabled);--_text-color-disabled-danger:var(--button-danger-label-disabled);--_text-color-active-primary:var(--button-primary-label-default);--_text-color-active-secondary:var(--button-secondary-label-subtle);--_text-color-active-tertiary:var(--button-tertiary-label-subtle);--_text-color-active-text:var(--button-text-label-default);--_text-color-active-danger:var(--button-danger-label-default);--_background-color-default-primary:var(--button-primary-background-default);--_background-color-default-secondary:var(--transparent);--_background-color-default-tertiary:var(--transparent);--_background-color-default-text:var(--transparent);--_background-color-default-danger:var(--button-danger-background-default);--_background-color-hover-primary:var(--button-primary-background-hover);--_background-color-hover-secondary:var(--button-secondary-background-hover);--_background-color-hover-tertiary:var(--button-tertiary-background-hover);--_background-color-hover-text:var(--transparent);--_background-color-hover-danger:var(--button-danger-background-hover);--_background-color-focus-primary:var(--button-primary-background-default);--_background-color-focus-secondary:var(--transparent);--_background-color-focus-tertiary:var(--transparent);--_background-color-focus-text:var(--transparent);--_background-color-focus-danger:var(--button-danger-background-default);--_background-color-disabled-primary:var(--button-primary-background-disabled);--_background-color-disabled-secondary:var(--button-secondary-background-disabled);--_background-color-disabled-tertiary:var(--button-tertiary-background-disabled);--_background-color-disabled-text:var(--transparent);--_background-color-disabled-danger:var(--button-danger-background-disabled);--_background-color-active-primary:var(--button-primary-background-pressed);--_background-color-active-secondary:var(--button-secondary-background-pressed);--_background-color-active-tertiary:var(--button-tertiary-background-pressed);--_background-color-active-text:var(--transparent);--_background-color-active-danger:var(--button-danger-background-pressed);--_border-color-default-primary:var(--button-primary-background-default);--_border-color-default-secondary:var(--button-secondary-border-color-default);--_border-color-default-tertiary:var(--transparent);--_border-color-default-text:var(--transparent);--_border-color-default-danger:var(--button-danger-background-default);--_border-color-hover-primary:var(--button-primary-background-hover);--_border-color-hover-secondary:var(--button-secondary-border-color-default);--_border-color-hover-tertiary:var(--button-tertiary-background-hover);--_border-color-hover-text:var(--transparent);--_border-color-hover-danger:var(--button-danger-background-hover);--_border-color-focus-primary:var(--button-primary-background-default);--_border-color-focus-secondary:var(--button-secondary-border-color-default);--_border-color-focus-tertiary:var(--transparent);--_border-color-focus-text:var(--transparent);--_border-color-focus-danger:var(--button-danger-background-default);--_border-color-disabled-primary:var(--button-primary-background-disabled);--_border-color-disabled-secondary:var(--button-secondary-background-disabled);--_border-color-disabled-tertiary:var(--button-tertiary-background-disabled);--_border-color-disabled-text:var(--transparent);--_border-color-disabled-danger:var(--button-danger-background-disabled);--_border-color-active-primary:var(--button-primary-background-pressed);--_border-color-active-secondary:var(--button-secondary-border-color-pressed);--_border-color-active-tertiary:var(--button-tertiary-background-pressed);--_border-color-active-text:var(--transparent);--_border-color-active-danger:var(--button-danger-background-pressed);--button-gap-large:var(--button-gap-regular);--button-gap-small:var(--button-gap-compact);--button-height-large:var(--button-height-regular);--button-height-small:var(--button-height-compact);--button-padding-x-large:var(--button-padding-x-regular);--button-padding-y-large:var(--button-padding-y-regular);--button-padding-x-small:var(--button-padding-x-compact);--button-padding-y-small:var(--button-padding-y-compact);--button-border-thickness:var(--button-secondary-border-thickness-default);--button-border-radius-large:var(--button-radius-regular);--button-border-radius-small:var(--button-radius-compact);--button-icon-size-primary-large:var(--button-primary-icon-size-regular);--button-icon-size-primary-small:var(--button-primary-icon-size-compact);--button-icon-size-secondary-large:var(--button-secondary-icon-size-regular);--button-icon-size-secondary-small:var(--button-secondary-icon-size-compact);--button-icon-size-tertiary-large:var(--button-tertiary-icon-size-regular);--button-icon-size-tertiary-small:var(--button-tertiary-icon-size-compact);--button-icon-size-text-large:var(--button-text-icon-size-regular);--button-icon-size-text-small:var(--button-text-icon-size-regular);--button-icon-size-danger-large:var(--button-danger-icon-size-regular);--button-icon-size-danger-small:var(--button-danger-icon-size-compact)}.action-button{text-decoration:none;position:relative;user-select:none;cursor:pointer;display:inline-flex;align-items:center;box-sizing:border-box}.action-button--size-small{border-radius:var(--button-border-radius-small);gap:var(--button-gap-small)}.action-button--size-large{border-radius:var(--button-border-radius-large);gap:var(--button-gap-large)}.action-button--type-primary{color:var(--text-color-default-primary, var(--_text-color-default-primary));background:linear-gradient(45deg, var(--background-color-hover-primary, var(--_background-color-hover-primary)) 50%, var(--background-color-default-primary, var(--_background-color-default-primary)) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-primary, 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:var(--button-border-thickness) solid var(--border-color-default-primary, var(--_border-color-default-primary))}.action-button--type-primary ::slotted(kv-icon){--icon-color:var(--icon-color-default-primary, var(--_icon-color-default-primary))}.action-button--type-primary:hover:not(.action-button--disabled){color:var(--text-color-hover-primary, var(--_text-color-hover-primary))}.action-button--type-primary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--icon-color-hover-primary, var(--_icon-color-hover-primary))}.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active){color:var(--text-color-focus-primary, var(--_text-color-focus-primary))}.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon){--icon-color:var(--icon-color-focus-primary, var(--_icon-color-focus-primary))}.action-button--type-primary.action-button--disabled{color:var(--text-color-disabled-primary, var(--_text-color-disabled-primary))}.action-button--type-primary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--icon-color-disabled-primary, var(--_icon-color-disabled-primary))}.action-button--type-primary:active:not(.action-button--disabled),.action-button--type-primary.action-button--active{color:var(--text-color-active-primary, var(--_text-color-active-primary))}.action-button--type-primary:active:not(.action-button--disabled) ::slotted(kv-icon),.action-button--type-primary.action-button--active ::slotted(kv-icon){--icon-color:var(--icon-color-active-primary, var(--_icon-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):not(.action-button--active){background:var(--background-color-focus-primary, var(--_background-color-focus-primary))}.action-button--type-primary.action-button--disabled{background:var(--background-color-disabled-primary, var(--_background-color-disabled-primary))}.action-button--type-primary:active:not(.action-button--disabled),.action-button--type-primary.action-button--active{background:var(--background-color-active-primary, var(--_background-color-active-primary))}.action-button--type-primary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-primary, var(--_border-color-hover-primary));border-right-color:var(--border-color-hover-primary, var(--_border-color-hover-primary));border-bottom-color:var(--border-color-hover-primary, var(--_border-color-hover-primary));border-left-color:var(--border-color-hover-primary, var(--_border-color-hover-primary))}.action-button--type-primary:focus:not(.action-button--disabled):not(.action-button--active)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:var(--button-border-thickness) solid var(--border-color-focus-primary, var(--_border-color-focus-primary))}.action-button--type-primary.action-button--disabled{border:var(--button-border-thickness) solid var(--border-color-disabled-primary, var(--_border-color-disabled-primary))}.action-button--type-primary:active:not(.action-button--disabled),.action-button--type-primary.action-button--active{border:var(--button-border-thickness) solid var(--border-color-active-primary, var(--_border-color-active-primary))}.action-button--type-primary.action-button--size-small{height:var(--button-height-small);padding:var(--button-padding-y-small, 0) var(--button-padding-x-small)}.action-button--type-primary.action-button--size-small ::slotted(kv-icon){--icon-width:var(--button-icon-size-primary-small);--icon-height:var(--button-icon-size-primary-small)}.action-button--type-primary.action-button--size-large{height:var(--button-height-large);padding:var(--button-padding-y-large, 0) var(--button-padding-x-large)}.action-button--type-primary.action-button--size-large ::slotted(kv-icon){--icon-width:var(--button-icon-size-primary-large);--icon-height:var(--button-icon-size-primary-large)}.action-button--type-secondary{color:var(--text-color-default-secondary, var(--_text-color-default-secondary));background:linear-gradient(45deg, var(--background-color-hover-secondary, var(--_background-color-hover-secondary)) 50%, var(--background-color-default-secondary, var(--_background-color-default-secondary)) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-secondary, 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:var(--button-border-thickness) solid var(--border-color-default-secondary, var(--_border-color-default-secondary))}.action-button--type-secondary ::slotted(kv-icon){--icon-color:var(--icon-color-default-secondary, var(--_icon-color-default-secondary))}.action-button--type-secondary:hover:not(.action-button--disabled){color:var(--text-color-hover-secondary, var(--_text-color-hover-secondary))}.action-button--type-secondary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--icon-color-hover-secondary, var(--_icon-color-hover-secondary))}.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active){color:var(--text-color-focus-secondary, var(--_text-color-focus-secondary))}.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon){--icon-color:var(--icon-color-focus-secondary, var(--_icon-color-focus-secondary))}.action-button--type-secondary.action-button--disabled{color:var(--text-color-disabled-secondary, var(--_text-color-disabled-secondary))}.action-button--type-secondary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--icon-color-disabled-secondary, var(--_icon-color-disabled-secondary))}.action-button--type-secondary:active:not(.action-button--disabled),.action-button--type-secondary.action-button--active{color:var(--text-color-active-secondary, var(--_text-color-active-secondary))}.action-button--type-secondary:active:not(.action-button--disabled) ::slotted(kv-icon),.action-button--type-secondary.action-button--active ::slotted(kv-icon){--icon-color:var(--icon-color-active-secondary, var(--_icon-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):not(.action-button--active){background:var(--background-color-focus-secondary, var(--_background-color-focus-secondary))}.action-button--type-secondary.action-button--disabled{background:var(--background-color-disabled-secondary, var(--_background-color-disabled-secondary))}.action-button--type-secondary:active:not(.action-button--disabled),.action-button--type-secondary.action-button--active{background:var(--background-color-active-secondary, var(--_background-color-active-secondary))}.action-button--type-secondary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-secondary, var(--_border-color-hover-secondary));border-right-color:var(--border-color-hover-secondary, var(--_border-color-hover-secondary));border-bottom-color:var(--border-color-hover-secondary, var(--_border-color-hover-secondary));border-left-color:var(--border-color-hover-secondary, var(--_border-color-hover-secondary))}.action-button--type-secondary:focus:not(.action-button--disabled):not(.action-button--active)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:var(--button-border-thickness) solid var(--border-color-focus-secondary, var(--_border-color-focus-secondary))}.action-button--type-secondary.action-button--disabled{border:var(--button-border-thickness) solid var(--border-color-disabled-secondary, var(--_border-color-disabled-secondary))}.action-button--type-secondary:active:not(.action-button--disabled),.action-button--type-secondary.action-button--active{border:var(--button-border-thickness) solid var(--border-color-active-secondary, var(--_border-color-active-secondary))}.action-button--type-secondary.action-button--size-small{height:var(--button-height-small);padding:var(--button-padding-y-small, 0) var(--button-padding-x-small)}.action-button--type-secondary.action-button--size-small ::slotted(kv-icon){--icon-width:var(--button-icon-size-secondary-small);--icon-height:var(--button-icon-size-secondary-small)}.action-button--type-secondary.action-button--size-large{height:var(--button-height-large);padding:var(--button-padding-y-large, 0) var(--button-padding-x-large)}.action-button--type-secondary.action-button--size-large ::slotted(kv-icon){--icon-width:var(--button-icon-size-secondary-large);--icon-height:var(--button-icon-size-secondary-large)}.action-button--type-tertiary{color:var(--text-color-default-tertiary, var(--_text-color-default-tertiary));background:linear-gradient(45deg, var(--background-color-hover-tertiary, var(--_background-color-hover-tertiary)) 50%, var(--background-color-default-tertiary, var(--_background-color-default-tertiary)) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-tertiary, 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:var(--button-border-thickness) solid var(--border-color-default-tertiary, var(--_border-color-default-tertiary))}.action-button--type-tertiary ::slotted(kv-icon){--icon-color:var(--icon-color-default-tertiary, var(--_icon-color-default-tertiary))}.action-button--type-tertiary:hover:not(.action-button--disabled){color:var(--text-color-hover-tertiary, var(--_text-color-hover-tertiary))}.action-button--type-tertiary:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--icon-color-hover-tertiary, var(--_icon-color-hover-tertiary))}.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active){color:var(--text-color-focus-tertiary, var(--_text-color-focus-tertiary))}.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon){--icon-color:var(--icon-color-focus-tertiary, var(--_icon-color-focus-tertiary))}.action-button--type-tertiary.action-button--disabled{color:var(--text-color-disabled-tertiary, var(--_text-color-disabled-tertiary))}.action-button--type-tertiary.action-button--disabled ::slotted(kv-icon){--icon-color:var(--icon-color-disabled-tertiary, var(--_icon-color-disabled-tertiary))}.action-button--type-tertiary:active:not(.action-button--disabled),.action-button--type-tertiary.action-button--active{color:var(--text-color-active-tertiary, var(--_text-color-active-tertiary))}.action-button--type-tertiary:active:not(.action-button--disabled) ::slotted(kv-icon),.action-button--type-tertiary.action-button--active ::slotted(kv-icon){--icon-color:var(--icon-color-active-tertiary, var(--_icon-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):not(.action-button--active){background:var(--background-color-focus-tertiary, var(--_background-color-focus-tertiary))}.action-button--type-tertiary.action-button--disabled{background:var(--background-color-disabled-tertiary, var(--_background-color-disabled-tertiary))}.action-button--type-tertiary:active:not(.action-button--disabled),.action-button--type-tertiary.action-button--active{background:var(--background-color-active-tertiary, var(--_background-color-active-tertiary))}.action-button--type-tertiary:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));border-right-color:var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));border-bottom-color:var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary));border-left-color:var(--border-color-hover-tertiary, var(--_border-color-hover-tertiary))}.action-button--type-tertiary:focus:not(.action-button--disabled):not(.action-button--active)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:var(--button-border-thickness) solid var(--border-color-focus-tertiary, var(--_border-color-focus-tertiary))}.action-button--type-tertiary.action-button--disabled{border:var(--button-border-thickness) solid var(--border-color-disabled-tertiary, var(--_border-color-disabled-tertiary))}.action-button--type-tertiary:active:not(.action-button--disabled),.action-button--type-tertiary.action-button--active{border:var(--button-border-thickness) solid var(--border-color-active-tertiary, 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(--background-surface-skeleton-base), 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-tertiary.action-button--size-small{height:var(--button-height-small);padding:var(--button-padding-y-small, 0) var(--button-padding-x-small)}.action-button--type-tertiary.action-button--size-small ::slotted(kv-icon){--icon-width:var(--button-icon-size-tertiary-small);--icon-height:var(--button-icon-size-tertiary-small)}.action-button--type-tertiary.action-button--size-large{height:var(--button-height-large);padding:var(--button-padding-y-large, 0) var(--button-padding-x-large)}.action-button--type-tertiary.action-button--size-large ::slotted(kv-icon){--icon-width:var(--button-icon-size-tertiary-large);--icon-height:var(--button-icon-size-tertiary-large)}.action-button--type-text{color:var(--text-color-default-text, var(--_text-color-default-text));background:linear-gradient(45deg, var(--background-color-hover-text, var(--_background-color-hover-text)) 50%, var(--background-color-default-text, var(--_background-color-default-text)) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-text, var(--_background-color-default-text));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:var(--button-border-thickness) solid var(--border-color-default-text, var(--_border-color-default-text))}.action-button--type-text ::slotted(kv-icon){--icon-color:var(--icon-color-default-text, var(--_icon-color-default-text))}.action-button--type-text:hover:not(.action-button--disabled){color:var(--text-color-hover-text, var(--_text-color-hover-text))}.action-button--type-text:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--icon-color-hover-text, var(--_icon-color-hover-text))}.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active){color:var(--text-color-focus-text, var(--_text-color-focus-text))}.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon){--icon-color:var(--icon-color-focus-text, var(--_icon-color-focus-text))}.action-button--type-text.action-button--disabled{color:var(--text-color-disabled-text, var(--_text-color-disabled-text))}.action-button--type-text.action-button--disabled ::slotted(kv-icon){--icon-color:var(--icon-color-disabled-text, var(--_icon-color-disabled-text))}.action-button--type-text:active:not(.action-button--disabled),.action-button--type-text.action-button--active{color:var(--text-color-active-text, var(--_text-color-active-text))}.action-button--type-text:active:not(.action-button--disabled) ::slotted(kv-icon),.action-button--type-text.action-button--active ::slotted(kv-icon){--icon-color:var(--icon-color-active-text, var(--_icon-color-active-text))}.action-button--type-text:hover:not(.action-button--disabled){background-position:left top}.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active){background:var(--background-color-focus-text, var(--_background-color-focus-text))}.action-button--type-text.action-button--disabled{background:var(--background-color-disabled-text, var(--_background-color-disabled-text))}.action-button--type-text:active:not(.action-button--disabled),.action-button--type-text.action-button--active{background:var(--background-color-active-text, var(--_background-color-active-text))}.action-button--type-text:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-text, var(--_border-color-hover-text));border-right-color:var(--border-color-hover-text, var(--_border-color-hover-text));border-bottom-color:var(--border-color-hover-text, var(--_border-color-hover-text));border-left-color:var(--border-color-hover-text, var(--_border-color-hover-text))}.action-button--type-text:focus:not(.action-button--disabled):not(.action-button--active)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:var(--button-border-thickness) solid var(--border-color-focus-text, var(--_border-color-focus-text))}.action-button--type-text.action-button--disabled{border:var(--button-border-thickness) solid var(--border-color-disabled-text, var(--_border-color-disabled-text))}.action-button--type-text:active:not(.action-button--disabled),.action-button--type-text.action-button--active{border:var(--button-border-thickness) solid var(--border-color-active-text, var(--_border-color-active-text))}.action-button--type-text.action-button--size-small{height:var(--button-height-small);padding:var(--button-padding-y-small, 0) var(--button-padding-x-small)}.action-button--type-text.action-button--size-small ::slotted(kv-icon){--icon-width:var(--button-icon-size-text-small);--icon-height:var(--button-icon-size-text-small)}.action-button--type-text.action-button--size-large{height:var(--button-height-large);padding:var(--button-padding-y-large, 0) var(--button-padding-x-large)}.action-button--type-text.action-button--size-large ::slotted(kv-icon){--icon-width:var(--button-icon-size-text-large);--icon-height:var(--button-icon-size-text-large)}.action-button--type-danger{color:var(--text-color-default-danger, var(--_text-color-default-danger));background:linear-gradient(45deg, var(--background-color-hover-danger, var(--_background-color-hover-danger)) 50%, var(--background-color-default-danger, var(--_background-color-default-danger)) 50%);background-size:350% 100%;background-repeat:no-repeat;background-color:var(--background-color-default-danger, 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:var(--button-border-thickness) solid var(--border-color-default-danger, var(--_border-color-default-danger))}.action-button--type-danger ::slotted(kv-icon){--icon-color:var(--icon-color-default-danger, var(--_icon-color-default-danger))}.action-button--type-danger:hover:not(.action-button--disabled){color:var(--text-color-hover-danger, var(--_text-color-hover-danger))}.action-button--type-danger:hover:not(.action-button--disabled) ::slotted(kv-icon){--icon-color:var(--icon-color-hover-danger, var(--_icon-color-hover-danger))}.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active){color:var(--text-color-focus-danger, var(--_text-color-focus-danger))}.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active) ::slotted(kv-icon){--icon-color:var(--icon-color-focus-danger, var(--_icon-color-focus-danger))}.action-button--type-danger.action-button--disabled{color:var(--text-color-disabled-danger, var(--_text-color-disabled-danger))}.action-button--type-danger.action-button--disabled ::slotted(kv-icon){--icon-color:var(--icon-color-disabled-danger, var(--_icon-color-disabled-danger))}.action-button--type-danger:active:not(.action-button--disabled),.action-button--type-danger.action-button--active{color:var(--text-color-active-danger, var(--_text-color-active-danger))}.action-button--type-danger:active:not(.action-button--disabled) ::slotted(kv-icon),.action-button--type-danger.action-button--active ::slotted(kv-icon){--icon-color:var(--icon-color-active-danger, var(--_icon-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):not(.action-button--active){background:var(--background-color-focus-danger, var(--_background-color-focus-danger))}.action-button--type-danger.action-button--disabled{background:var(--background-color-disabled-danger, var(--_background-color-disabled-danger))}.action-button--type-danger:active:not(.action-button--disabled),.action-button--type-danger.action-button--active{background:var(--background-color-active-danger, var(--_background-color-active-danger))}.action-button--type-danger:hover:not(.action-button--disabled){border-top-color:var(--border-color-hover-danger, var(--_border-color-hover-danger));border-right-color:var(--border-color-hover-danger, var(--_border-color-hover-danger));border-bottom-color:var(--border-color-hover-danger, var(--_border-color-hover-danger));border-left-color:var(--border-color-hover-danger, var(--_border-color-hover-danger))}.action-button--type-danger:focus:not(.action-button--disabled):not(.action-button--active)::before{content:\"\";filter:blur(2px);position:absolute;z-index:-1;border:var(--button-border-thickness) solid var(--border-color-focus-danger, var(--_border-color-focus-danger))}.action-button--type-danger.action-button--disabled{border:var(--button-border-thickness) solid var(--border-color-disabled-danger, var(--_border-color-disabled-danger))}.action-button--type-danger:active:not(.action-button--disabled),.action-button--type-danger.action-button--active{border:var(--button-border-thickness) solid var(--border-color-active-danger, var(--_border-color-active-danger))}.action-button--type-danger.action-button--size-small{height:var(--button-height-small);padding:var(--button-padding-y-small, 0) var(--button-padding-x-small)}.action-button--type-danger.action-button--size-small ::slotted(kv-icon){--icon-width:var(--button-icon-size-danger-small);--icon-height:var(--button-icon-size-danger-small)}.action-button--type-danger.action-button--size-large{height:var(--button-height-large);padding:var(--button-padding-y-large, 0) var(--button-padding-x-large)}.action-button--type-danger.action-button--size-large ::slotted(kv-icon){--icon-width:var(--button-icon-size-danger-large);--icon-height:var(--button-icon-size-danger-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: '428b9bdb0556ab2c03057f272b7810be92b833e3', "aria-disabled": this.disabled, onClick: this.onClickButton }, h("div", { key: '3fbb9c30e71dfb77bc3e81bed030ab32347c3f81', 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: '1ddf11741f630424be0340c9a6bf410f63b8ac5c' }))));
}
static get style() { return actionButtonCss; }
}, [257, "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 };