@safe-stars/components
Version:
React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.
267 lines (234 loc) • 6.73 kB
JavaScript
import { i as w, r as g, h, a as v, x as l } from "./index-B5pm1jHN.js";
import { n as a, c as x, e as m, o as c } from "./if-defined-CTZGcMnO.js";
import { e as b, n as f } from "./ref-DA0ZQ_wt.js";
const y = w`
: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 e = function(s, t, o, r) {
var p = arguments.length, n = p < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, o) : r, u;
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") n = Reflect.decorate(s, t, o, r);
else for (var d = s.length - 1; d >= 0; d--) (u = s[d]) && (n = (p < 3 ? u(n) : p > 3 ? u(t, o, n) : u(t, o)) || n);
return p > 3 && n && Object.defineProperty(t, o, n), n;
};
let i = class extends v {
constructor() {
super(...arguments), this.inputElementRef = b(), this.size = "md", this.disabled = !1, this.placeholder = "", this.type = "text", this.value = "";
}
render() {
const t = `wui-padding-right-${this.inputRightPadding}`, r = {
[`wui-size-${this.size}`]: !0,
[t]: !!this.inputRightPadding
};
return l`${this.templateIcon()}
<input
data-testid="wui-input-text"
${f(this.inputElementRef)}
class=${m(r)}
type=${this.type}
enterkeyhint=${c(this.enterKeyHint)}
?disabled=${this.disabled}
placeholder=${this.placeholder}
=${this.dispatchInputChangeEvent.bind(this)}
.value=${this.value || ""}
tabindex=${c(this.tabIdx)}
/>
<slot></slot>`;
}
templateIcon() {
return this.icon ? l`<wui-icon
data-input=${this.size}
size=${this.size}
color="inherit"
name=${this.icon}
></wui-icon>` : null;
}
dispatchInputChangeEvent() {
var t;
this.dispatchEvent(new CustomEvent("inputChange", {
detail: (t = this.inputElementRef.value) == null ? void 0 : t.value,
bubbles: !0,
composed: !0
}));
}
};
i.styles = [g, h, y];
e([
a()
], i.prototype, "size", void 0);
e([
a()
], i.prototype, "icon", void 0);
e([
a({ type: Boolean })
], i.prototype, "disabled", void 0);
e([
a()
], i.prototype, "placeholder", void 0);
e([
a()
], i.prototype, "type", void 0);
e([
a()
], i.prototype, "keyHint", void 0);
e([
a()
], i.prototype, "value", void 0);
e([
a()
], i.prototype, "inputRightPadding", void 0);
e([
a()
], i.prototype, "tabIdx", void 0);
i = e([
x("wui-input-text")
], i);
//# sourceMappingURL=index-BpSv5JPn.js.map