coinley-checkout
Version:
A React SDK for Coinley cryptocurrency payment processing with multi-network support
1,173 lines (1,131 loc) • 38.3 kB
JavaScript
import { B as u, D as f$2, i as i$3, r as resetStyles, a as i$4, x, n as E, F as T, o as colorStyles, e as elementStyles } from "./core-be16e657.mjs";
const UiHelperUtil = {
getSpacingStyles(spacing, index) {
if (Array.isArray(spacing)) {
return spacing[index] ? `var(--wui-spacing-${spacing[index]})` : void 0;
} else if (typeof spacing === "string") {
return `var(--wui-spacing-${spacing})`;
}
return void 0;
},
getFormattedDate(date) {
return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" }).format(date);
},
getHostName(url) {
try {
const newUrl = new URL(url);
return newUrl.hostname;
} catch (error) {
return "";
}
},
getTruncateString({ string, charsStart, charsEnd, truncate }) {
if (string.length <= charsStart + charsEnd) {
return string;
}
if (truncate === "end") {
return `${string.substring(0, charsStart)}...`;
} else if (truncate === "start") {
return `...${string.substring(string.length - charsEnd)}`;
}
return `${string.substring(0, Math.floor(charsStart))}...${string.substring(string.length - Math.floor(charsEnd))}`;
},
generateAvatarColors(address) {
const hash = address.toLowerCase().replace(/^0x/iu, "").replace(/[^a-f0-9]/gu, "");
const baseColor = hash.substring(0, 6).padEnd(6, "0");
const rgbColor = this.hexToRgb(baseColor);
const masterBorderRadius = getComputedStyle(document.documentElement).getPropertyValue("--w3m-border-radius-master");
const radius = Number(masterBorderRadius?.replace("px", ""));
const edge = 100 - 3 * radius;
const gradientCircle = `${edge}% ${edge}% at 65% 40%`;
const colors = [];
for (let i3 = 0; i3 < 5; i3 += 1) {
const tintedColor = this.tintColor(rgbColor, 0.15 * i3);
colors.push(`rgb(${tintedColor[0]}, ${tintedColor[1]}, ${tintedColor[2]})`);
}
return `
--local-color-1: ${colors[0]};
--local-color-2: ${colors[1]};
--local-color-3: ${colors[2]};
--local-color-4: ${colors[3]};
--local-color-5: ${colors[4]};
--local-radial-circle: ${gradientCircle}
`;
},
hexToRgb(hex) {
const bigint = parseInt(hex, 16);
const r2 = bigint >> 16 & 255;
const g = bigint >> 8 & 255;
const b = bigint & 255;
return [r2, g, b];
},
tintColor(rgb, tint) {
const [r2, g, b] = rgb;
const tintedR = Math.round(r2 + (255 - r2) * tint);
const tintedG = Math.round(g + (255 - g) * tint);
const tintedB = Math.round(b + (255 - b) * tint);
return [tintedR, tintedG, tintedB];
},
isNumber(character) {
const regex = {
number: /^[0-9]+$/u
};
return regex.number.test(character);
},
getColorTheme(theme) {
if (theme) {
return theme;
} else if (typeof window !== "undefined" && window.matchMedia) {
if (window.matchMedia("(prefers-color-scheme: dark)")?.matches) {
return "dark";
}
return "light";
}
return "dark";
},
splitBalance(input) {
const parts = input.split(".");
if (parts.length === 2) {
return [parts[0], parts[1]];
}
return ["0", "00"];
},
roundNumber(number, threshold, fixed) {
const roundedNumber = number.toString().length >= threshold ? Number(number).toFixed(fixed) : number;
return roundedNumber;
},
formatNumberToLocalString(value, decimals = 2) {
if (value === void 0) {
return "0.00";
}
if (typeof value === "number") {
return value.toLocaleString("en-US", {
maximumFractionDigits: decimals,
minimumFractionDigits: decimals
});
}
return parseFloat(value).toLocaleString("en-US", {
maximumFractionDigits: decimals,
minimumFractionDigits: decimals
});
}
};
function standardCustomElement(tagName, descriptor) {
const { kind, elements } = descriptor;
return {
kind,
elements,
finisher(clazz) {
if (!customElements.get(tagName)) {
customElements.define(tagName, clazz);
}
}
};
}
function legacyCustomElement(tagName, clazz) {
if (!customElements.get(tagName)) {
customElements.define(tagName, clazz);
}
return clazz;
}
function customElement(tagName) {
return function create(classOrDescriptor) {
return typeof classOrDescriptor === "function" ? legacyCustomElement(tagName, classOrDescriptor) : standardCustomElement(tagName, classOrDescriptor);
};
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const o$2 = { attribute: true, type: String, converter: u, reflect: false, hasChanged: f$2 }, r$2 = (t2 = o$2, e2, r2) => {
const { kind: n2, metadata: i3 } = r2;
let s2 = globalThis.litPropertyMetadata.get(i3);
if (void 0 === s2 && globalThis.litPropertyMetadata.set(i3, s2 = /* @__PURE__ */ new Map()), "setter" === n2 && ((t2 = Object.create(t2)).wrapped = true), s2.set(r2.name, t2), "accessor" === n2) {
const { name: o2 } = r2;
return { set(r3) {
const n3 = e2.get.call(this);
e2.set.call(this, r3), this.requestUpdate(o2, n3, t2);
}, init(e3) {
return void 0 !== e3 && this.C(o2, void 0, t2, e3), e3;
} };
}
if ("setter" === n2) {
const { name: o2 } = r2;
return function(r3) {
const n3 = this[o2];
e2.call(this, r3), this.requestUpdate(o2, n3, t2);
};
}
throw Error("Unsupported decorator location: " + n2);
};
function n$2(t2) {
return (e2, o2) => "object" == typeof o2 ? r$2(t2, e2, o2) : ((t3, e3, o3) => {
const r2 = e3.hasOwnProperty(o3);
return e3.constructor.createProperty(o3, t3), r2 ? Object.getOwnPropertyDescriptor(e3, o3) : void 0;
})(t2, e2, o2);
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
function r$1(r2) {
return n$2({ ...r2, state: true, attribute: false });
}
const styles$6 = i$3`
:host {
display: flex;
width: inherit;
height: inherit;
}
`;
var __decorate$6 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiFlex = class WuiFlex2 extends i$4 {
render() {
this.style.cssText = `
flex-direction: ${this.flexDirection};
flex-wrap: ${this.flexWrap};
flex-basis: ${this.flexBasis};
flex-grow: ${this.flexGrow};
flex-shrink: ${this.flexShrink};
align-items: ${this.alignItems};
justify-content: ${this.justifyContent};
column-gap: ${this.columnGap && `var(--wui-spacing-${this.columnGap})`};
row-gap: ${this.rowGap && `var(--wui-spacing-${this.rowGap})`};
gap: ${this.gap && `var(--wui-spacing-${this.gap})`};
padding-top: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 0)};
padding-right: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 1)};
padding-bottom: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 2)};
padding-left: ${this.padding && UiHelperUtil.getSpacingStyles(this.padding, 3)};
margin-top: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 0)};
margin-right: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 1)};
margin-bottom: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 2)};
margin-left: ${this.margin && UiHelperUtil.getSpacingStyles(this.margin, 3)};
`;
return x`<slot></slot>`;
}
};
WuiFlex.styles = [resetStyles, styles$6];
__decorate$6([
n$2()
], WuiFlex.prototype, "flexDirection", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "flexWrap", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "flexBasis", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "flexGrow", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "flexShrink", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "alignItems", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "justifyContent", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "columnGap", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "rowGap", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "gap", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "padding", void 0);
__decorate$6([
n$2()
], WuiFlex.prototype, "margin", void 0);
WuiFlex = __decorate$6([
customElement("wui-flex")
], WuiFlex);
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const o$1 = (o2) => o2 ?? E;
/**
* @license
* Copyright 2020 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const i$2 = (o2) => null === o2 || "object" != typeof o2 && "function" != typeof o2, f$1 = (o2) => void 0 === o2.strings;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$1 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
let i$1 = class i {
constructor(t2) {
}
get _$AU() {
return this._$AM._$AU;
}
_$AT(t2, e2, i3) {
this._$Ct = t2, this._$AM = e2, this._$Ci = i3;
}
_$AS(t2, e2) {
return this.update(t2, e2);
}
update(t2, e2) {
return this.render(...e2);
}
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const s$1 = (i3, t2) => {
const e2 = i3._$AN;
if (void 0 === e2)
return false;
for (const i4 of e2)
i4._$AO?.(t2, false), s$1(i4, t2);
return true;
}, o = (i3) => {
let t2, e2;
do {
if (void 0 === (t2 = i3._$AM))
break;
e2 = t2._$AN, e2.delete(i3), i3 = t2;
} while (0 === e2?.size);
}, r = (i3) => {
for (let t2; t2 = i3._$AM; i3 = t2) {
let e2 = t2._$AN;
if (void 0 === e2)
t2._$AN = e2 = /* @__PURE__ */ new Set();
else if (e2.has(i3))
break;
e2.add(i3), c$1(t2);
}
};
function h$1(i3) {
void 0 !== this._$AN ? (o(this), this._$AM = i3, r(this)) : this._$AM = i3;
}
function n$1(i3, t2 = false, e2 = 0) {
const r2 = this._$AH, h2 = this._$AN;
if (void 0 !== h2 && 0 !== h2.size)
if (t2)
if (Array.isArray(r2))
for (let i4 = e2; i4 < r2.length; i4++)
s$1(r2[i4], false), o(r2[i4]);
else
null != r2 && (s$1(r2, false), o(r2));
else
s$1(this, i3);
}
const c$1 = (i3) => {
i3.type == t.CHILD && (i3._$AP ??= n$1, i3._$AQ ??= h$1);
};
class f extends i$1 {
constructor() {
super(...arguments), this._$AN = void 0;
}
_$AT(i3, t2, e2) {
super._$AT(i3, t2, e2), r(this), this.isConnected = i3._$AU;
}
_$AO(i3, t2 = true) {
i3 !== this.isConnected && (this.isConnected = i3, i3 ? this.reconnected?.() : this.disconnected?.()), t2 && (s$1(this, i3), o(this));
}
setValue(t2) {
if (f$1(this._$Ct))
this._$Ct._$AI(t2, this);
else {
const i3 = [...this._$Ct._$AH];
i3[this._$Ci] = t2, this._$Ct._$AI(i3, this, 0);
}
}
disconnected() {
}
reconnected() {
}
}
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
class s {
constructor(t2) {
this.G = t2;
}
disconnect() {
this.G = void 0;
}
reconnect(t2) {
this.G = t2;
}
deref() {
return this.G;
}
}
class i2 {
constructor() {
this.Y = void 0, this.Z = void 0;
}
get() {
return this.Y;
}
pause() {
this.Y ??= new Promise((t2) => this.Z = t2);
}
resume() {
this.Z?.(), this.Y = this.Z = void 0;
}
}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const n = (t2) => !i$2(t2) && "function" == typeof t2.then, h = 1073741823;
class c extends f {
constructor() {
super(...arguments), this._$Cwt = h, this._$Cbt = [], this._$CK = new s(this), this._$CX = new i2();
}
render(...s2) {
return s2.find((t2) => !n(t2)) ?? T;
}
update(s2, i3) {
const e2 = this._$Cbt;
let r2 = e2.length;
this._$Cbt = i3;
const o2 = this._$CK, c2 = this._$CX;
this.isConnected || this.disconnected();
for (let t2 = 0; t2 < i3.length && !(t2 > this._$Cwt); t2++) {
const s3 = i3[t2];
if (!n(s3))
return this._$Cwt = t2, s3;
t2 < r2 && s3 === e2[t2] || (this._$Cwt = h, r2 = 0, Promise.resolve(s3).then(async (t3) => {
for (; c2.get(); )
await c2.get();
const i4 = o2.deref();
if (void 0 !== i4) {
const e3 = i4._$Cbt.indexOf(s3);
e3 > -1 && e3 < i4._$Cwt && (i4._$Cwt = e3, i4.setValue(t3));
}
}));
}
return T;
}
disconnected() {
this._$CK.disconnect(), this._$CX.pause();
}
reconnected() {
this._$CK.reconnect(this), this._$CX.resume();
}
}
const m = e$1(c);
class CacheUtil {
constructor() {
this.cache = /* @__PURE__ */ new Map();
}
set(key, value) {
this.cache.set(key, value);
}
get(key) {
return this.cache.get(key);
}
has(key) {
return this.cache.has(key);
}
delete(key) {
this.cache.delete(key);
}
clear() {
this.cache.clear();
}
}
const globalSvgCache = new CacheUtil();
const styles$5 = i$3`
:host {
display: flex;
aspect-ratio: var(--local-aspect-ratio);
color: var(--local-color);
width: var(--local-width);
}
svg {
width: inherit;
height: inherit;
object-fit: contain;
object-position: center;
}
.fallback {
width: var(--local-width);
height: var(--local-height);
}
`;
var __decorate$5 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
const ICONS = {
add: async () => (await import("./add-ecdd1212.mjs")).addSvg,
allWallets: async () => (await import("./all-wallets-3f5ae9f6.mjs")).allWalletsSvg,
arrowBottomCircle: async () => (await import("./arrow-bottom-circle-de29efb9.mjs")).arrowBottomCircleSvg,
appStore: async () => (await import("./app-store-d9a3cf7a.mjs")).appStoreSvg,
apple: async () => (await import("./apple-0b906524.mjs")).appleSvg,
arrowBottom: async () => (await import("./arrow-bottom-80e5f522.mjs")).arrowBottomSvg,
arrowLeft: async () => (await import("./arrow-left-829a9582.mjs")).arrowLeftSvg,
arrowRight: async () => (await import("./arrow-right-e26cd24c.mjs")).arrowRightSvg,
arrowTop: async () => (await import("./arrow-top-e0205cb6.mjs")).arrowTopSvg,
bank: async () => (await import("./bank-a77f02bf.mjs")).bankSvg,
browser: async () => (await import("./browser-86b6170d.mjs")).browserSvg,
card: async () => (await import("./card-cf27c7d6.mjs")).cardSvg,
checkmark: async () => (await import("./checkmark-b89154c1.mjs")).checkmarkSvg,
checkmarkBold: async () => (await import("./checkmark-bold-933bda6f.mjs")).checkmarkBoldSvg,
chevronBottom: async () => (await import("./chevron-bottom-3668b829.mjs")).chevronBottomSvg,
chevronLeft: async () => (await import("./chevron-left-5034d815.mjs")).chevronLeftSvg,
chevronRight: async () => (await import("./chevron-right-feded2ea.mjs")).chevronRightSvg,
chevronTop: async () => (await import("./chevron-top-c25359ed.mjs")).chevronTopSvg,
chromeStore: async () => (await import("./chrome-store-e3f7a845.mjs")).chromeStoreSvg,
clock: async () => (await import("./clock-36fb3357.mjs")).clockSvg,
close: async () => (await import("./close-d1394d8a.mjs")).closeSvg,
compass: async () => (await import("./compass-759e424a.mjs")).compassSvg,
coinPlaceholder: async () => (await import("./coinPlaceholder-9369db9a.mjs")).coinPlaceholderSvg,
copy: async () => (await import("./copy-db2e7ac6.mjs")).copySvg,
cursor: async () => (await import("./cursor-79ec2991.mjs")).cursorSvg,
cursorTransparent: async () => (await import("./cursor-transparent-feb9c888.mjs")).cursorTransparentSvg,
desktop: async () => (await import("./desktop-f2a1b961.mjs")).desktopSvg,
disconnect: async () => (await import("./disconnect-8bac3c88.mjs")).disconnectSvg,
discord: async () => (await import("./discord-2280ac6b.mjs")).discordSvg,
etherscan: async () => (await import("./etherscan-c6821cf7.mjs")).etherscanSvg,
extension: async () => (await import("./extension-2d6b175f.mjs")).extensionSvg,
externalLink: async () => (await import("./external-link-b8a2d205.mjs")).externalLinkSvg,
facebook: async () => (await import("./facebook-20c7121e.mjs")).facebookSvg,
farcaster: async () => (await import("./farcaster-6172898e.mjs")).farcasterSvg,
filters: async () => (await import("./filters-af90dbcd.mjs")).filtersSvg,
github: async () => (await import("./github-1d687b0c.mjs")).githubSvg,
google: async () => (await import("./google-bc5ac391.mjs")).googleSvg,
helpCircle: async () => (await import("./help-circle-d9014337.mjs")).helpCircleSvg,
image: async () => (await import("./image-ab86100c.mjs")).imageSvg,
id: async () => (await import("./id-cf8da149.mjs")).idSvg,
infoCircle: async () => (await import("./info-circle-81a5ab4c.mjs")).infoCircleSvg,
lightbulb: async () => (await import("./lightbulb-3cab8f9b.mjs")).lightbulbSvg,
mail: async () => (await import("./mail-9904c24d.mjs")).mailSvg,
mobile: async () => (await import("./mobile-0bdc7631.mjs")).mobileSvg,
more: async () => (await import("./more-c26729c0.mjs")).moreSvg,
networkPlaceholder: async () => (await import("./network-placeholder-0b2ce204.mjs")).networkPlaceholderSvg,
nftPlaceholder: async () => (await import("./nftPlaceholder-426365b1.mjs")).nftPlaceholderSvg,
off: async () => (await import("./off-1479d755.mjs")).offSvg,
playStore: async () => (await import("./play-store-5130ba18.mjs")).playStoreSvg,
plus: async () => (await import("./plus-86a87bff.mjs")).plusSvg,
qrCode: async () => (await import("./qr-code-92f66397.mjs")).qrCodeIcon,
recycleHorizontal: async () => (await import("./recycle-horizontal-0212e3d9.mjs")).recycleHorizontalSvg,
refresh: async () => (await import("./refresh-e94b7a74.mjs")).refreshSvg,
search: async () => (await import("./search-2eb32207.mjs")).searchSvg,
send: async () => (await import("./send-1259e674.mjs")).sendSvg,
swapHorizontal: async () => (await import("./swapHorizontal-b898701b.mjs")).swapHorizontalSvg,
swapHorizontalMedium: async () => (await import("./swapHorizontalMedium-93660720.mjs")).swapHorizontalMediumSvg,
swapHorizontalBold: async () => (await import("./swapHorizontalBold-db3d3358.mjs")).swapHorizontalBoldSvg,
swapHorizontalRoundedBold: async () => (await import("./swapHorizontalRoundedBold-9d27f848.mjs")).swapHorizontalRoundedBoldSvg,
swapVertical: async () => (await import("./swapVertical-de14a688.mjs")).swapVerticalSvg,
telegram: async () => (await import("./telegram-737e9aee.mjs")).telegramSvg,
threeDots: async () => (await import("./three-dots-28d9f195.mjs")).threeDotsSvg,
twitch: async () => (await import("./twitch-2bddfd1c.mjs")).twitchSvg,
twitter: async () => (await import("./x-08b1aac7.mjs")).xSvg,
twitterIcon: async () => (await import("./twitterIcon-37b15f75.mjs")).twitterIconSvg,
verify: async () => (await import("./verify-ca82e0e0.mjs")).verifySvg,
verifyFilled: async () => (await import("./verify-filled-08b6aa48.mjs")).verifyFilledSvg,
wallet: async () => (await import("./wallet-01add9fc.mjs")).walletSvg,
walletConnect: async () => (await import("./walletconnect-0f4ef73a.mjs")).walletConnectSvg,
walletConnectLightBrown: async () => (await import("./walletconnect-0f4ef73a.mjs")).walletConnectLightBrownSvg,
walletConnectBrown: async () => (await import("./walletconnect-0f4ef73a.mjs")).walletConnectBrownSvg,
walletPlaceholder: async () => (await import("./wallet-placeholder-4bf6ee44.mjs")).walletPlaceholderSvg,
warningCircle: async () => (await import("./warning-circle-710c3d75.mjs")).warningCircleSvg,
x: async () => (await import("./x-08b1aac7.mjs")).xSvg,
info: async () => (await import("./info-8b39cc2a.mjs")).infoSvg,
exclamationTriangle: async () => (await import("./exclamation-triangle-c90996cf.mjs")).exclamationTriangleSvg,
reown: async () => (await import("./reown-logo-43840bf0.mjs")).reownSvg
};
async function getSvg(name) {
if (globalSvgCache.has(name)) {
return globalSvgCache.get(name);
}
const importFn = ICONS[name] ?? ICONS.copy;
const svgPromise = importFn();
globalSvgCache.set(name, svgPromise);
return svgPromise;
}
let WuiIcon = class WuiIcon2 extends i$4 {
constructor() {
super(...arguments);
this.size = "md";
this.name = "copy";
this.color = "fg-300";
this.aspectRatio = "1 / 1";
}
render() {
this.style.cssText = `
--local-color: ${`var(--wui-color-${this.color});`}
--local-width: ${`var(--wui-icon-size-${this.size});`}
--local-aspect-ratio: ${this.aspectRatio}
`;
return x`${m(getSvg(this.name), x`<div class="fallback"></div>`)}`;
}
};
WuiIcon.styles = [resetStyles, colorStyles, styles$5];
__decorate$5([
n$2()
], WuiIcon.prototype, "size", void 0);
__decorate$5([
n$2()
], WuiIcon.prototype, "name", void 0);
__decorate$5([
n$2()
], WuiIcon.prototype, "color", void 0);
__decorate$5([
n$2()
], WuiIcon.prototype, "aspectRatio", void 0);
WuiIcon = __decorate$5([
customElement("wui-icon")
], WuiIcon);
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const e = e$1(class extends i$1 {
constructor(t$1) {
if (super(t$1), t$1.type !== t.ATTRIBUTE || "class" !== t$1.name || t$1.strings?.length > 2)
throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
}
render(t2) {
return " " + Object.keys(t2).filter((s2) => t2[s2]).join(" ") + " ";
}
update(s2, [i3]) {
if (void 0 === this.st) {
this.st = /* @__PURE__ */ new Set(), void 0 !== s2.strings && (this.nt = new Set(s2.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
for (const t2 in i3)
i3[t2] && !this.nt?.has(t2) && this.st.add(t2);
return this.render(i3);
}
const r2 = s2.element.classList;
for (const t2 of this.st)
t2 in i3 || (r2.remove(t2), this.st.delete(t2));
for (const t2 in i3) {
const s3 = !!i3[t2];
s3 === this.st.has(t2) || this.nt?.has(t2) || (s3 ? (r2.add(t2), this.st.add(t2)) : (r2.remove(t2), this.st.delete(t2)));
}
return T;
}
});
const styles$4 = i$3`
:host {
display: inline-flex !important;
}
slot {
width: 100%;
display: inline-block;
font-style: normal;
font-family: var(--wui-font-family);
font-feature-settings:
'tnum' on,
'lnum' on,
'case' on;
line-height: 130%;
font-weight: var(--wui-font-weight-regular);
overflow: inherit;
text-overflow: inherit;
text-align: var(--local-align);
color: var(--local-color);
}
.wui-line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.wui-line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.wui-font-medium-400 {
font-size: var(--wui-font-size-medium);
font-weight: var(--wui-font-weight-light);
letter-spacing: var(--wui-letter-spacing-medium);
}
.wui-font-medium-600 {
font-size: var(--wui-font-size-medium);
letter-spacing: var(--wui-letter-spacing-medium);
}
.wui-font-title-600 {
font-size: var(--wui-font-size-title);
letter-spacing: var(--wui-letter-spacing-title);
}
.wui-font-title-6-600 {
font-size: var(--wui-font-size-title-6);
letter-spacing: var(--wui-letter-spacing-title-6);
}
.wui-font-mini-700 {
font-size: var(--wui-font-size-mini);
letter-spacing: var(--wui-letter-spacing-mini);
text-transform: uppercase;
}
.wui-font-large-500,
.wui-font-large-600,
.wui-font-large-700 {
font-size: var(--wui-font-size-large);
letter-spacing: var(--wui-letter-spacing-large);
}
.wui-font-2xl-500,
.wui-font-2xl-600,
.wui-font-2xl-700 {
font-size: var(--wui-font-size-2xl);
letter-spacing: var(--wui-letter-spacing-2xl);
}
.wui-font-paragraph-400,
.wui-font-paragraph-500,
.wui-font-paragraph-600,
.wui-font-paragraph-700 {
font-size: var(--wui-font-size-paragraph);
letter-spacing: var(--wui-letter-spacing-paragraph);
}
.wui-font-small-400,
.wui-font-small-500,
.wui-font-small-600 {
font-size: var(--wui-font-size-small);
letter-spacing: var(--wui-letter-spacing-small);
}
.wui-font-tiny-400,
.wui-font-tiny-500,
.wui-font-tiny-600 {
font-size: var(--wui-font-size-tiny);
letter-spacing: var(--wui-letter-spacing-tiny);
}
.wui-font-micro-700,
.wui-font-micro-600 {
font-size: var(--wui-font-size-micro);
letter-spacing: var(--wui-letter-spacing-micro);
text-transform: uppercase;
}
.wui-font-tiny-400,
.wui-font-small-400,
.wui-font-medium-400,
.wui-font-paragraph-400 {
font-weight: var(--wui-font-weight-light);
}
.wui-font-large-700,
.wui-font-paragraph-700,
.wui-font-micro-700,
.wui-font-mini-700 {
font-weight: var(--wui-font-weight-bold);
}
.wui-font-medium-600,
.wui-font-medium-title-600,
.wui-font-title-6-600,
.wui-font-large-600,
.wui-font-paragraph-600,
.wui-font-small-600,
.wui-font-tiny-600,
.wui-font-micro-600 {
font-weight: var(--wui-font-weight-medium);
}
:host([disabled]) {
opacity: 0.4;
}
`;
var __decorate$4 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiText = class WuiText2 extends i$4 {
constructor() {
super(...arguments);
this.variant = "paragraph-500";
this.color = "fg-300";
this.align = "left";
this.lineClamp = void 0;
}
render() {
const classes = {
[`wui-font-${this.variant}`]: true,
[`wui-color-${this.color}`]: true,
[`wui-line-clamp-${this.lineClamp}`]: this.lineClamp ? true : false
};
this.style.cssText = `
--local-align: ${this.align};
--local-color: var(--wui-color-${this.color});
`;
return x`<slot class=${e(classes)}></slot>`;
}
};
WuiText.styles = [resetStyles, styles$4];
__decorate$4([
n$2()
], WuiText.prototype, "variant", void 0);
__decorate$4([
n$2()
], WuiText.prototype, "color", void 0);
__decorate$4([
n$2()
], WuiText.prototype, "align", void 0);
__decorate$4([
n$2()
], WuiText.prototype, "lineClamp", void 0);
WuiText = __decorate$4([
customElement("wui-text")
], WuiText);
const styles$3 = i$3`
:host {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
background-color: var(--wui-color-gray-glass-020);
border-radius: var(--local-border-radius);
border: var(--local-border);
box-sizing: content-box;
width: var(--local-size);
height: var(--local-size);
min-height: var(--local-size);
min-width: var(--local-size);
}
(background: color-mix(in srgb, white 50%, black)) {
:host {
background-color: color-mix(in srgb, var(--local-bg-value) var(--local-bg-mix), transparent);
}
}
`;
var __decorate$3 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiIconBox = class WuiIconBox2 extends i$4 {
constructor() {
super(...arguments);
this.size = "md";
this.backgroundColor = "accent-100";
this.iconColor = "accent-100";
this.background = "transparent";
this.border = false;
this.borderColor = "wui-color-bg-125";
this.icon = "copy";
}
render() {
const iconSize = this.iconSize || this.size;
const isLg = this.size === "lg";
const isXl = this.size === "xl";
const bgMix = isLg ? "12%" : "16%";
const borderRadius = isLg ? "xxs" : isXl ? "s" : "3xl";
const isGray = this.background === "gray";
const isOpaque = this.background === "opaque";
const isColorChange = this.backgroundColor === "accent-100" && isOpaque || this.backgroundColor === "success-100" && isOpaque || this.backgroundColor === "error-100" && isOpaque || this.backgroundColor === "inverse-100" && isOpaque;
let bgValueVariable = `var(--wui-color-${this.backgroundColor})`;
if (isColorChange) {
bgValueVariable = `var(--wui-icon-box-bg-${this.backgroundColor})`;
} else if (isGray) {
bgValueVariable = `var(--wui-color-gray-${this.backgroundColor})`;
}
this.style.cssText = `
--local-bg-value: ${bgValueVariable};
--local-bg-mix: ${isColorChange || isGray ? `100%` : bgMix};
--local-border-radius: var(--wui-border-radius-${borderRadius});
--local-size: var(--wui-icon-box-size-${this.size});
--local-border: ${this.borderColor === "wui-color-bg-125" ? `2px` : `1px`} solid ${this.border ? `var(--${this.borderColor})` : `transparent`}
`;
return x` <wui-icon color=${this.iconColor} size=${iconSize} name=${this.icon}></wui-icon> `;
}
};
WuiIconBox.styles = [resetStyles, elementStyles, styles$3];
__decorate$3([
n$2()
], WuiIconBox.prototype, "size", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "backgroundColor", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "iconColor", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "iconSize", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "background", void 0);
__decorate$3([
n$2({ type: Boolean })
], WuiIconBox.prototype, "border", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "borderColor", void 0);
__decorate$3([
n$2()
], WuiIconBox.prototype, "icon", void 0);
WuiIconBox = __decorate$3([
customElement("wui-icon-box")
], WuiIconBox);
const styles$2 = i$3`
:host {
display: block;
width: var(--local-width);
height: var(--local-height);
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: inherit;
}
`;
var __decorate$2 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiImage = class WuiImage2 extends i$4 {
constructor() {
super(...arguments);
this.src = "./path/to/image.jpg";
this.alt = "Image";
this.size = void 0;
}
render() {
this.style.cssText = `
--local-width: ${this.size ? `var(--wui-icon-size-${this.size});` : "100%"};
--local-height: ${this.size ? `var(--wui-icon-size-${this.size});` : "100%"};
`;
return x`<img src=${this.src} alt=${this.alt} =${this.handleImageError} />`;
}
handleImageError() {
this.dispatchEvent(new CustomEvent("onLoadError", { bubbles: true, composed: true }));
}
};
WuiImage.styles = [resetStyles, colorStyles, styles$2];
__decorate$2([
n$2()
], WuiImage.prototype, "src", void 0);
__decorate$2([
n$2()
], WuiImage.prototype, "alt", void 0);
__decorate$2([
n$2()
], WuiImage.prototype, "size", void 0);
WuiImage = __decorate$2([
customElement("wui-image")
], WuiImage);
const styles$1 = i$3`
:host {
display: flex;
justify-content: center;
align-items: center;
height: var(--wui-spacing-m);
padding: 0 var(--wui-spacing-3xs) !important;
border-radius: var(--wui-border-radius-5xs);
transition:
border-radius var(--wui-duration-lg) var(--wui-ease-out-power-1),
background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
will-change: border-radius, background-color;
}
:host > wui-text {
transform: translateY(5%);
}
:host([data-variant='main']) {
background-color: var(--wui-color-accent-glass-015);
color: var(--wui-color-accent-100);
}
:host([data-variant='shade']) {
background-color: var(--wui-color-gray-glass-010);
color: var(--wui-color-fg-200);
}
:host([data-variant='success']) {
background-color: var(--wui-icon-box-bg-success-100);
color: var(--wui-color-success-100);
}
:host([data-variant='error']) {
background-color: var(--wui-icon-box-bg-error-100);
color: var(--wui-color-error-100);
}
:host([data-size='lg']) {
padding: 11px 5px !important;
}
:host([data-size='lg']) > wui-text {
transform: translateY(2%);
}
`;
var __decorate$1 = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiTag = class WuiTag2 extends i$4 {
constructor() {
super(...arguments);
this.variant = "main";
this.size = "lg";
}
render() {
this.dataset["variant"] = this.variant;
this.dataset["size"] = this.size;
const textVariant = this.size === "md" ? "mini-700" : "micro-700";
return x`
<wui-text data-variant=${this.variant} variant=${textVariant} color="inherit">
<slot></slot>
</wui-text>
`;
}
};
WuiTag.styles = [resetStyles, styles$1];
__decorate$1([
n$2()
], WuiTag.prototype, "variant", void 0);
__decorate$1([
n$2()
], WuiTag.prototype, "size", void 0);
WuiTag = __decorate$1([
customElement("wui-tag")
], WuiTag);
const styles = i$3`
:host {
display: flex;
}
:host([data-size='sm']) > svg {
width: 12px;
height: 12px;
}
:host([data-size='md']) > svg {
width: 16px;
height: 16px;
}
:host([data-size='lg']) > svg {
width: 24px;
height: 24px;
}
:host([data-size='xl']) > svg {
width: 32px;
height: 32px;
}
svg {
animation: rotate 2s linear infinite;
}
circle {
fill: none;
stroke: var(--local-color);
stroke-width: 4px;
stroke-dasharray: 1, 124;
stroke-dashoffset: 0;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
:host([data-size='md']) > svg > circle {
stroke-width: 6px;
}
:host([data-size='sm']) > svg > circle {
stroke-width: 8px;
}
rotate {
100% {
transform: rotate(360deg);
}
}
dash {
0% {
stroke-dasharray: 1, 124;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 124;
stroke-dashoffset: -35;
}
100% {
stroke-dashoffset: -125;
}
}
`;
var __decorate = globalThis && globalThis.__decorate || function(decorators, target, key, desc) {
var c2 = arguments.length, r2 = c2 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r2 = Reflect.decorate(decorators, target, key, desc);
else
for (var i3 = decorators.length - 1; i3 >= 0; i3--)
if (d = decorators[i3])
r2 = (c2 < 3 ? d(r2) : c2 > 3 ? d(target, key, r2) : d(target, key)) || r2;
return c2 > 3 && r2 && Object.defineProperty(target, key, r2), r2;
};
let WuiLoadingSpinner = class WuiLoadingSpinner2 extends i$4 {
constructor() {
super(...arguments);
this.color = "accent-100";
this.size = "lg";
}
render() {
this.style.cssText = `--local-color: ${this.color === "inherit" ? "inherit" : `var(--wui-color-${this.color})`}`;
this.dataset["size"] = this.size;
return x`<svg viewBox="25 25 50 50">
<circle r="20" cy="50" cx="50"></circle>
</svg>`;
}
};
WuiLoadingSpinner.styles = [resetStyles, styles];
__decorate([
n$2()
], WuiLoadingSpinner.prototype, "color", void 0);
__decorate([
n$2()
], WuiLoadingSpinner.prototype, "size", void 0);
WuiLoadingSpinner = __decorate([
customElement("wui-loading-spinner")
], WuiLoadingSpinner);
export {
UiHelperUtil as U,
e as a,
customElement as c,
e$1 as e,
f,
n$2 as n,
o$1 as o,
r$1 as r
};
//# sourceMappingURL=index-e8592264.mjs.map