@kelvininc/ui-components/dist/peacock-ui/p-eff3c0b0.entry.js

Kelvin UI Components

import{r as o,c as t,h as r,H as a}from"./p-D-JVwta2.js";import{a as e}from"./p-DzZLIMy0.js";import"./p-DwRzddFC.js";const n=class{constructor(r){o(this,r),this.clickButton=t(this,"clickButton",7),this.focusButton=t(this,"focusButton",7),this.blurButton=t(this,"blurButton",7),this.disabled=!1,this.active=!1,this.loading=!1,this.size=e.Large,this.onClickButton=o=>{this.disabled||this.clickButton.emit(o)},this.onFocusButton=o=>{this.focusButton.emit(o)},this.onBlurButton=o=>{this.blurButton.emit(o)}}render(){return r(a,{key:"3e18d5791a3b2fccac940f8be92c319014ab0982","aria-disabled":this.disabled,onClick:this.onClickButton},r("div",{key:"feb959be50e3e33455d8b8395fdb32e030456348",class:{"action-button":!0,"action-button--disabled":this.disabled,"action-button--active":this.active,"action-button--loading":this.loading,[`action-button--type-${this.type}`]:!0,[`action-button--size-${this.size}`]:!0},tabIndex:this.disabled?-1:0,part:"button",onFocus:this.onFocusButton,onBlur:this.onBlurButton},r("slot",{key:"4bf1f9c8c8cf6179c7204a16b51600eb984010e7"})))}};n.style='@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)}}';export{n as kv_action_button}