132 lines
4.4 KiB
JavaScript
Executable File
132 lines
4.4 KiB
JavaScript
Executable File
import{i as b,r as v,e as g,a as h,b as l}from"./index-B6fu-u6K.js";import{n as r,c as w}from"./if-defined-D6swbWyQ.js";import"./index-CuJMoJHR.js";import"./index-DUZ-8KUm.js";const p=b`
|
|
button {
|
|
border: none;
|
|
border-radius: var(--wui-border-radius-3xl);
|
|
}
|
|
|
|
button[data-variant='main'] {
|
|
background-color: var(--wui-color-accent-100);
|
|
color: var(--wui-color-inverse-100);
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
|
|
}
|
|
|
|
button[data-variant='accent'] {
|
|
background-color: var(--wui-color-accent-glass-010);
|
|
color: var(--wui-color-accent-100);
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
|
|
}
|
|
|
|
button[data-variant='gray'] {
|
|
background-color: transparent;
|
|
color: var(--wui-color-fg-200);
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
|
|
}
|
|
|
|
button[data-variant='shade'] {
|
|
background-color: transparent;
|
|
color: var(--wui-color-accent-100);
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
|
|
}
|
|
|
|
button[data-size='sm'] {
|
|
height: 32px;
|
|
padding: 0 var(--wui-spacing-s);
|
|
}
|
|
|
|
button[data-size='md'] {
|
|
height: 40px;
|
|
padding: 0 var(--wui-spacing-l);
|
|
}
|
|
|
|
button[data-size='sm'] > wui-image {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
button[data-size='md'] > wui-image {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
button[data-size='sm'] > wui-icon {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
button[data-size='md'] > wui-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
wui-image {
|
|
border-radius: var(--wui-border-radius-3xl);
|
|
overflow: hidden;
|
|
}
|
|
|
|
button.disabled > wui-icon,
|
|
button.disabled > wui-image {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
button[data-variant='main'] > wui-image {
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
|
|
}
|
|
|
|
button[data-variant='shade'] > wui-image,
|
|
button[data-variant='gray'] > wui-image {
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
button[data-variant='main']:focus-visible {
|
|
background-color: var(--wui-color-accent-090);
|
|
}
|
|
|
|
button[data-variant='main']:hover:enabled {
|
|
background-color: var(--wui-color-accent-090);
|
|
}
|
|
|
|
button[data-variant='main']:active:enabled {
|
|
background-color: var(--wui-color-accent-080);
|
|
}
|
|
|
|
button[data-variant='accent']:hover:enabled {
|
|
background-color: var(--wui-color-accent-glass-015);
|
|
}
|
|
|
|
button[data-variant='accent']:active:enabled {
|
|
background-color: var(--wui-color-accent-glass-020);
|
|
}
|
|
|
|
button[data-variant='shade']:focus-visible,
|
|
button[data-variant='gray']:focus-visible,
|
|
button[data-variant='shade']:hover,
|
|
button[data-variant='gray']:hover {
|
|
background-color: var(--wui-color-gray-glass-002);
|
|
}
|
|
|
|
button[data-variant='gray']:active,
|
|
button[data-variant='shade']:active {
|
|
background-color: var(--wui-color-gray-glass-005);
|
|
}
|
|
}
|
|
|
|
button.disabled {
|
|
color: var(--wui-color-gray-glass-020);
|
|
background-color: var(--wui-color-gray-glass-002);
|
|
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
|
|
pointer-events: none;
|
|
}
|
|
`;var i=function(n,t,e,s){var c=arguments.length,o=c<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,t,e,s);else for(var d=n.length-1;d>=0;d--)(u=n[d])&&(o=(c<3?u(o):c>3?u(t,e,o):u(t,e))||o);return c>3&&o&&Object.defineProperty(t,e,o),o};let a=class extends h{constructor(){super(...arguments),this.variant="accent",this.imageSrc="",this.disabled=!1,this.icon="externalLink",this.size="md",this.text=""}render(){const t=this.size==="sm"?"small-600":"paragraph-600";return l`
|
|
<button
|
|
class=${this.disabled?"disabled":""}
|
|
data-variant=${this.variant}
|
|
data-size=${this.size}
|
|
?disabled=${this.disabled}
|
|
>
|
|
${this.imageSrc?l`<wui-image src=${this.imageSrc}></wui-image>`:null}
|
|
<wui-text variant=${t} color="inherit"> ${this.text} </wui-text>
|
|
${this.icon?l`<wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>`:null}
|
|
</button>
|
|
`}};a.styles=[v,g,p];i([r()],a.prototype,"variant",void 0);i([r()],a.prototype,"imageSrc",void 0);i([r({type:Boolean})],a.prototype,"disabled",void 0);i([r()],a.prototype,"icon",void 0);i([r()],a.prototype,"size",void 0);i([r()],a.prototype,"text",void 0);a=i([w("wui-chip-button")],a);
|