@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
204 lines (171 loc) • 6.39 kB
JavaScript
"use strict";const s=require("./index-CtZaCMo8.cjs"),i=require("./if-defined-MmHKu2JE.cjs"),c=require("./ref-D1Ke0Dq9.cjs"),w=s.i`
:host {
position: relative;
width: 100%;
display: inline-block;
color: var(--wui-color-fg-275);
}
input {
width: 100%;
border-radius: var(--wui-border-radius-xs);
box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
background: var(--wui-color-gray-glass-002);
font-size: var(--wui-font-size-paragraph);
letter-spacing: var(--wui-letter-spacing-paragraph);
color: var(--wui-color-fg-100);
transition:
background-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
border-color var(--wui-ease-inout-power-1) var(--wui-duration-md),
box-shadow var(--wui-ease-inout-power-1) var(--wui-duration-md);
will-change: background-color, border-color, box-shadow;
caret-color: var(--wui-color-accent-100);
}
input:disabled {
cursor: not-allowed;
border: 1px solid var(--wui-color-gray-glass-010);
}
input:disabled::placeholder,
input:disabled + wui-icon {
color: var(--wui-color-fg-300);
}
input::placeholder {
color: var(--wui-color-fg-275);
}
input:focus:enabled {
background-color: var(--wui-color-gray-glass-005);
-webkit-box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0px 0px 0px 4px var(--wui-box-shadow-blue);
-moz-box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0px 0px 0px 4px var(--wui-box-shadow-blue);
box-shadow:
inset 0 0 0 1px var(--wui-color-accent-100),
0px 0px 0px 4px var(--wui-box-shadow-blue);
}
input:hover:enabled {
background-color: var(--wui-color-gray-glass-005);
}
wui-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.wui-size-sm {
padding: 9px var(--wui-spacing-m) 10px var(--wui-spacing-s);
}
wui-icon + .wui-size-sm {
padding: 9px var(--wui-spacing-m) 10px 36px;
}
wui-icon[data-input='sm'] {
left: var(--wui-spacing-s);
}
.wui-size-md {
padding: 15px var(--wui-spacing-m) var(--wui-spacing-l) var(--wui-spacing-m);
}
wui-icon + .wui-size-md,
wui-loading-spinner + .wui-size-md {
padding: 10.5px var(--wui-spacing-3xl) 10.5px var(--wui-spacing-3xl);
}
wui-icon[data-input='md'] {
left: var(--wui-spacing-l);
}
.wui-size-lg {
padding: var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-s) var(--wui-spacing-l);
letter-spacing: var(--wui-letter-spacing-medium-title);
font-size: var(--wui-font-size-medium-title);
font-weight: var(--wui-font-weight-light);
line-height: 130%;
color: var(--wui-color-fg-100);
height: 64px;
}
.wui-padding-right-xs {
padding-right: var(--wui-spacing-xs);
}
.wui-padding-right-s {
padding-right: var(--wui-spacing-s);
}
.wui-padding-right-m {
padding-right: var(--wui-spacing-m);
}
.wui-padding-right-l {
padding-right: var(--wui-spacing-l);
}
.wui-padding-right-xl {
padding-right: var(--wui-spacing-xl);
}
.wui-padding-right-2xl {
padding-right: var(--wui-spacing-2xl);
}
.wui-padding-right-3xl {
padding-right: var(--wui-spacing-3xl);
}
.wui-padding-right-4xl {
padding-right: var(--wui-spacing-4xl);
}
.wui-padding-right-5xl {
padding-right: var(--wui-spacing-5xl);
}
wui-icon + .wui-size-lg,
wui-loading-spinner + .wui-size-lg {
padding-left: 50px;
}
wui-icon[data-input='lg'] {
left: var(--wui-spacing-l);
}
.wui-size-mdl {
padding: 17.25px var(--wui-spacing-m) 17.25px var(--wui-spacing-m);
}
wui-icon + .wui-size-mdl,
wui-loading-spinner + .wui-size-mdl {
padding: 17.25px var(--wui-spacing-3xl) 17.25px 40px;
}
wui-icon[data-input='mdl'] {
left: var(--wui-spacing-m);
}
input:placeholder-shown ~ ::slotted(wui-input-element),
input:placeholder-shown ~ ::slotted(wui-icon) {
opacity: 0;
pointer-events: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
::slotted(wui-input-element),
::slotted(wui-icon) {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
::slotted(wui-input-element) {
right: var(--wui-spacing-m);
}
::slotted(wui-icon) {
right: 0px;
}
`;var n=function(p,e,o,r){var u=arguments.length,a=u<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(p,e,o,r);else for(var l=p.length-1;l>=0;l--)(d=p[l])&&(a=(u<3?d(a):u>3?d(e,o,a):d(e,o))||a);return u>3&&a&&Object.defineProperty(e,o,a),a};let t=class extends s.i$1{constructor(){super(...arguments),this.inputElementRef=c.e(),this.size="md",this.disabled=!1,this.placeholder="",this.type="text",this.value=""}render(){const e=`wui-padding-right-${this.inputRightPadding}`,r={[`wui-size-${this.size}`]:!0,[e]:!!this.inputRightPadding};return s.x`${this.templateIcon()}
<input
data-testid="wui-input-text"
${c.n(this.inputElementRef)}
class=${i.e(r)}
type=${this.type}
enterkeyhint=${i.o(this.enterKeyHint)}
?disabled=${this.disabled}
placeholder=${this.placeholder}
=${this.dispatchInputChangeEvent.bind(this)}
.value=${this.value||""}
tabindex=${i.o(this.tabIdx)}
/>
<slot></slot>`}templateIcon(){return this.icon?s.x`<wui-icon
data-input=${this.size}
size=${this.size}
color="inherit"
name=${this.icon}
></wui-icon>`:null}dispatchInputChangeEvent(){var e;this.dispatchEvent(new CustomEvent("inputChange",{detail:(e=this.inputElementRef.value)==null?void 0:e.value,bubbles:!0,composed:!0}))}};t.styles=[s.resetStyles,s.elementStyles,w];n([i.n()],t.prototype,"size",void 0);n([i.n()],t.prototype,"icon",void 0);n([i.n({type:Boolean})],t.prototype,"disabled",void 0);n([i.n()],t.prototype,"placeholder",void 0);n([i.n()],t.prototype,"type",void 0);n([i.n()],t.prototype,"keyHint",void 0);n([i.n()],t.prototype,"value",void 0);n([i.n()],t.prototype,"inputRightPadding",void 0);n([i.n()],t.prototype,"tabIdx",void 0);t=n([i.customElement("wui-input-text")],t);
//# sourceMappingURL=index-BQl9E2h4.cjs.map