nacadmin
/
xic-presale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
xic-presale/assets/index-CaabtizE.js

264 lines
10 KiB
JavaScript
Executable File
Raw Blame History

import{i as v,r as b,e as p,a as w,b as d}from"./index-B6fu-u6K.js";import{n as r,c as h}from"./if-defined-D6swbWyQ.js";import"./index-BqLefJXm.js";const x=v`
:host {
width: var(--local-width);
position: relative;
}
button {
border: none;
border-radius: var(--local-border-radius);
width: var(--local-width);
white-space: nowrap;
}
/* -- Sizes --------------------------------------------------- */
button[data-size='xs'] {
padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
height: 24px;
}
button[data-size='xs'][data-icon-left='true'][data-icon-right='false'] {
padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
}
button[data-size='xs'][data-icon-right='true'][data-icon-left='false'] {
padding: var(--wui-spacing-3xs) var(--wui-spacing-s) var(--wui-spacing-3xs) var(--wui-spacing-s);
}
button[data-size='sm'] {
padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
height: 32px;
}
button[data-size='sm'][data-icon-left='true'][data-icon-right='false'] {
padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
}
button[data-size='sm'][data-icon-right='true'][data-icon-left='false'] {
padding: 7.2px var(--wui-spacing-s) 7.2px var(--wui-spacing-s);
}
button[data-size='md'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
height: 36px;
}
button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
}
button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
}
button[data-size='lg'] {
padding: var(--wui-spacing-m) var(--wui-spacing-2l);
height: 48px;
}
/* -- Variants --------------------------------------------------------- */
button[data-variant='main'] {
background-color: var(--wui-color-accent-100);
color: var(--wui-color-inverse-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
}
button[data-variant='inverse'] {
background-color: var(--wui-color-inverse-100);
color: var(--wui-color-inverse-000);
border: none;
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);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
button[data-variant='accent-error'] {
background: var(--wui-color-error-glass-015);
color: var(--wui-color-error-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
}
button[data-variant='accent-success'] {
background: var(--wui-color-success-glass-015);
color: var(--wui-color-success-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
}
button[data-variant='neutral'] {
background: transparent;
color: var(--wui-color-fg-100);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
button[data-variant='shade'] {
background: var(--wui-color-gray-glass-002);
color: var(--wui-color-fg-200);
border: none;
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
}
/* -- Focus states --------------------------------------------------- */
button[data-variant='main']:focus-visible:enabled {
background-color: var(--wui-color-accent-090);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='inverse']:focus-visible:enabled {
background-color: var(--wui-color-inverse-100);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent']:focus-visible:enabled {
background-color: var(--wui-color-accent-glass-010);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0 0 0 4px var(--wui-color-accent-glass-020);
}
button[data-variant='accent-error']:focus-visible:enabled {
background: var(--wui-color-error-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-error-100),
0 0 0 4px var(--wui-color-error-glass-020);
}
button[data-variant='accent-success']:focus-visible:enabled {
background: var(--wui-color-success-glass-015);
box-shadow:
inset 0 0 0 1px var(--wui-color-success-100),
0 0 0 4px var(--wui-color-success-glass-020);
}
button[data-variant='neutral']:focus-visible:enabled {
background: var(--wui-color-gray-glass-005);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-gray-glass-002);
}
button[data-variant='shade']:focus-visible:enabled {
background: var(--wui-color-gray-glass-005);
box-shadow:
inset 0 0 0 1px var(--wui-color-gray-glass-010),
0 0 0 4px var(--wui-color-gray-glass-002);
}
/* -- Hover & Active states ----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
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='accent-error']:hover:enabled {
background: var(--wui-color-error-glass-020);
color: var(--wui-color-error-100);
}
button[data-variant='accent-error']:active:enabled {
background: var(--wui-color-error-glass-030);
color: var(--wui-color-error-100);
}
button[data-variant='accent-success']:hover:enabled {
background: var(--wui-color-success-glass-020);
color: var(--wui-color-success-100);
}
button[data-variant='accent-success']:active:enabled {
background: var(--wui-color-success-glass-030);
color: var(--wui-color-success-100);
}
button[data-variant='neutral']:hover:enabled {
background: var(--wui-color-gray-glass-002);
}
button[data-variant='neutral']:active:enabled {
background: var(--wui-color-gray-glass-005);
}
button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
padding-left: var(--wui-spacing-m);
}
button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
padding-right: var(--wui-spacing-m);
}
button[data-variant='shade']:hover:enabled {
background: var(--wui-color-gray-glass-002);
}
button[data-variant='shade']:active:enabled {
background: var(--wui-color-gray-glass-005);
}
}
/* -- Disabled state --------------------------------------------------- */
button:disabled {
background-color: var(--wui-color-gray-glass-002);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
color: var(--wui-color-gray-glass-020);
cursor: not-allowed;
}
button > wui-text {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
::slotted(*) {
transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
will-change: opacity;
opacity: var(--local-opacity-100);
}
wui-loading-spinner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: var(--local-opacity-000);
}
`;var t=function(e,o,s,n){var c=arguments.length,i=c<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,o,s,n);else for(var u=e.length-1;u>=0;u--)(l=e[u])&&(i=(c<3?l(i):c>3?l(o,s,i):l(o,s))||i);return c>3&&i&&Object.defineProperty(o,s,i),i};const g={main:"inverse-100",inverse:"inverse-000",accent:"accent-100","accent-error":"error-100","accent-success":"success-100",neutral:"fg-100",disabled:"gray-glass-020",shade:"fg-100"},f={lg:"paragraph-600",md:"small-600",sm:"small-600",xs:"tiny-600"},y={lg:"md",md:"md",sm:"sm",xs:"sm"};let a=class extends w{constructor(){super(...arguments),this.size="lg",this.disabled=!1,this.fullWidth=!1,this.loading=!1,this.variant="main",this.hasIconLeft=!1,this.hasIconRight=!1,this.borderRadius="m"}render(){this.style.cssText=`
--local-width: ${this.fullWidth?"100%":"auto"};
--local-opacity-100: ${this.loading?0:1};
--local-opacity-000: ${this.loading?1:0};
--local-border-radius: var(--wui-border-radius-${this.borderRadius});
`;const o=this.textVariant??f[this.size];return d`
<button
data-variant=${this.variant}
data-icon-left=${this.hasIconLeft}
data-icon-right=${this.hasIconRight}
data-size=${this.size}
?disabled=${this.disabled}
>
${this.loadingTemplate()}
<slot name="iconLeft" @slotchange=${()=>this.handleSlotLeftChange()}></slot>
<wui-text variant=${o} color="inherit">
<slot></slot>
</wui-text>
<slot name="iconRight" @slotchange=${()=>this.handleSlotRightChange()}></slot>
</button>
`}handleSlotLeftChange(){this.hasIconLeft=!0}handleSlotRightChange(){this.hasIconRight=!0}loadingTemplate(){if(this.loading){const o=y[this.size],s=this.disabled?g.disabled:g[this.variant];return d`<wui-loading-spinner color=${s} size=${o}></wui-loading-spinner>`}return d``}};a.styles=[b,p,x];t([r()],a.prototype,"size",void 0);t([r({type:Boolean})],a.prototype,"disabled",void 0);t([r({type:Boolean})],a.prototype,"fullWidth",void 0);t([r({type:Boolean})],a.prototype,"loading",void 0);t([r()],a.prototype,"variant",void 0);t([r({type:Boolean})],a.prototype,"hasIconLeft",void 0);t([r({type:Boolean})],a.prototype,"hasIconRight",void 0);t([r()],a.prototype,"borderRadius",void 0);t([r()],a.prototype,"textVariant",void 0);a=t([h("wui-button")],a);
Reference in New Issue View Git Blame Copy Permalink