@skyra/discord-components-core
Version:
Web components to easily build and display fake Discord messages on your webpages.
604 lines (546 loc) • 101 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-e5e4d9b4.js');
const options = require('./options-2e2e9e25.js');
const discordActionRowCss = ".discord-action-row{display:flex;flex-wrap:nowrap}";
const DiscordActionRow = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { class: "discord-action-row" }, index.h("slot", null)));
}
};
DiscordActionRow.style = discordActionRowCss;
const padZeroes = (value) => {
const [month, day, year] = value.split('/');
return `${month.padStart(2, '0')}/${day.padStart(2, '0')}/${year}`;
};
const formatDate = (value) => {
if (!(value instanceof Date))
return value;
return padZeroes(`${value.getMonth() + 1}/${value.getDate()}/${value.getFullYear()}`);
};
const formatTime = (value, hour24 = false) => {
if (!(value instanceof Date))
return value;
if (hour24)
return `${value.getHours()}:${value.getMinutes().toString().padStart(2, '0')}`;
const hour = value.getHours() % 12 || 12;
const meridiem = value.getHours() < 12 ? 'AM' : 'PM';
return `${hour}:${value.getMinutes().toString().padStart(2, '0')} ${meridiem}`;
};
const handleTimestamp = (value, useTime = false, hour24 = false) => {
if (!(value instanceof Date) && typeof value !== 'string') {
throw new TypeError('Timestamp prop must be a Date object or a string.');
}
return useTime ? formatTime(value, hour24) : formatDate(value);
};
const IMAGE_EXTENSION = /\.(bmp|jpe?g|png|gif|webp|tiff)$/i;
const validateImageExtension = (url) => {
if (!IMAGE_EXTENSION.test(url))
throw new Error(`The url of an image for discord-attachment should match the regex ${IMAGE_EXTENSION}`);
};
const getGlobalEmojiUrl = (emojiName) => { var _a, _b; return (_b = (_a = window.$discordMessage) === null || _a === void 0 ? void 0 : _a.emojis) === null || _b === void 0 ? void 0 : _b[emojiName]; };
const discordAttachmentCss = ".discord-attachment{color:#dcddde;display:flex;font-size:13px;line-height:150%;margin-bottom:8px;margin-top:8px}.discord-attachment .discord-image-wrapper{display:block;position:relative;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;overflow:hidden;border-radius:3px}";
const DiscordAttachment = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.url = undefined;
this.height = undefined;
this.width = undefined;
this.alt = 'discord attachment';
}
componentWillRender() {
validateImageExtension(this.url);
}
render() {
return (index.h(index.Host, { class: "discord-attachment" }, index.h("div", { class: "discord-image-wrapper", style: { height: `${this.height}px`, width: `${this.width}px` } }, index.h("img", { alt: this.alt, src: this.url, height: this.height, width: this.width }))));
}
get el() { return index.getElement(this); }
};
DiscordAttachment.style = discordAttachmentCss;
const discordAttachmentsCss = ".discord-message .discord-attachments{display:grid;grid-auto-flow:row;grid-row-gap:0.25rem;text-indent:0;min-height:0;min-width:0;padding-top:0.125rem;padding-bottom:0.125rem;position:relative}.discord-message .discord-attachments>*{justify-self:start;-ms-flex-item-align:start;align-self:start}";
const DiscordAttachments = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { class: "discord-attachments" }, index.h("slot", null)));
}
};
DiscordAttachments.style = discordAttachmentsCss;
const DiscordBold = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h("strong", null, index.h("slot", null)));
}
};
function Fragment(_props, children) {
return [...children];
}
function LaunchIcon(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "16", height: "16", viewBox: "0 0 24 24" }),
index.h("path", { fill: "currentColor", d: "M10 5V3H5.375C4.06519 3 3 4.06519 3 5.375V18.625C3 19.936 4.06519 21 5.375 21H18.625C19.936 21 21 19.936 21 18.625V14H19V19H5V5H10Z" }),
index.h("path", { fill: "currentColor", d: "M21 2.99902H14V4.99902H17.586L9.29297 13.292L10.707 14.706L19 6.41302V9.99902H21V2.99902Z" })));
}
const discordButtonCss = ".discord-button{display:flex;justify-content:center;align-items:center;cursor:pointer;margin:4px 8px 4px 0;padding:2px 16px;width:auto;height:32px;min-width:60px;min-height:32px;-webkit-transition:background-color 0.17s ease, color 0.17s ease;transition:background-color 0.17s ease, color 0.17s ease;border-radius:3px;font-size:14px;font-weight:500;line-height:16px;text-decoration:none !important}.discord-button.discord-button-success{color:#fff;background-color:#3ba55d}.discord-button.discord-button-success.discord-button-hoverable:hover{background-color:#2d7d46}.discord-button.discord-button-destructive{color:#fff;background-color:#ed4245}.discord-button.discord-button-destructive.discord-button-hoverable:hover{background-color:#c03537}.discord-button.discord-button-primary{color:#fff;background-color:#5865f2}.discord-button.discord-button-primary.discord-button-hoverable:hover{background-color:#4752c4}.discord-button.discord-button-secondary{color:#fff;background-color:#4f545c}.discord-button.discord-button-secondary.discord-button-hoverable:hover{background-color:#5d6269}.discord-button.discord-button-disabled{cursor:not-allowed;opacity:0.5}.discord-button .discord-button-launch{margin-left:8px}.discord-button .discord-button-emoji{margin-right:4px;object-fit:contain;width:1.375em;height:1.375em;vertical-align:bottom}";
const DiscordButton = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.emoji = undefined;
this.emojiName = 'emoji';
this.url = undefined;
this.disabled = false;
this.type = 'secondary';
}
handleType(value) {
if (typeof value !== 'string') {
throw new TypeError('DiscordButton `type` prop must be a string.');
}
else if (!['primary', 'secondary', 'success', 'destructive'].includes(value)) {
throw new RangeError("DiscordButton `type` prop must be one of: 'primary', 'secondary', 'success', 'destructive'");
}
}
render() {
const parent = this.el.parentElement;
if (parent.tagName.toLowerCase() !== 'discord-action-row') {
throw new Error('All <discord-button> components must be direct children of <discord-action-row>.');
}
const content = (index.h(Fragment, null, this.emoji && index.h("img", { src: this.emoji, alt: this.emojiName, draggable: false, class: "discord-button-emoji" }), index.h("span", null, index.h("slot", null)), this.url && index.h(LaunchIcon, { class: "discord-button-launch" })));
return this.url && !this.disabled ? (index.h("a", { class: "discord-button discord-button-secondary", href: this.url, target: "_blank", rel: "noopener noreferrer" }, content)) : (index.h(index.Host, { class: `discord-button discord-button-${this.type} discord-button-${this.disabled ? 'disabled' : 'hoverable'}` }, content));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"type": ["handleType"]
}; }
};
DiscordButton.style = discordButtonCss;
function CommandIcon(props) {
return (index.h("svg", Object.assign({}, props, { width: "6", height: "10", viewBox: "0 0 6 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }),
index.h("path", { d: "M4.61241 0L6 0.845294L1.38759 10L0 9.15471L4.61241 0Z", fill: "currentColor" })));
}
const discordCommandCss = ".discord-replied-message.discord-executed-command .discord-command-name{color:#00aff4;font-weight:500}.discord-replied-message.discord-executed-command .discord-command-name:hover{color:#00aff4;text-decoration:underline}.discord-replied-message.discord-executed-command .discord-replied-message-username{margin-right:0}.discord-replied-message{color:#b9bbbe;display:flex;font-size:0.875rem;font-family:Whitney, 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\tsans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';padding-top:2px;margin-left:56px;margin-bottom:4px;align-items:center;line-height:1.125rem;position:relative;white-space:pre;user-select:none}.discord-light-theme .discord-replied-message{color:#4f5660}.discord-compact-mode .discord-replied-message{margin-left:62px;margin-bottom:0}.discord-replied-message:before{content:'';display:block;position:absolute;top:50%;right:100%;bottom:0;left:-36px;margin-right:4px;margin-top:-1px;margin-left:-1px;margin-bottom:-2px;border-left:2px solid #4f545c;border-bottom:0 solid #4f545c;border-right:0 solid #4f545c;border-top:2px solid #4f545c;border-top-left-radius:6px}.discord-light-theme .discord-replied-message:before{border-color:#747f8d}.discord-replied-message .discord-replied-message-avatar,.discord-replied-message .discord-reply-badge{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:16px;height:16px;border-radius:50%;user-select:none;margin-right:0.25rem}.discord-replied-message .discord-reply-badge{display:flex;align-items:center;justify-content:center;color:#b9bbbe;background:#202225}.discord-light-theme .discord-replied-message .discord-reply-badge{color:#4f5660;background:#e3e5e8}.discord-replied-message .discord-application-tag{background-color:hsl(235, 85.6%, 64.7%);color:#fff;font-size:0.625rem;margin-right:0.25rem;line-height:100%;text-transform:uppercase;display:flex;align-items:center;height:0.9375rem;padding:0 0.275rem;margin-top:0.075em;border-radius:0.1875rem}.discord-replied-message .discord-application-tag .discord-application-tag-verified{width:0.9375rem;height:0.9375rem;margin-left:-0.1rem}.discord-replied-message .discord-application-tag.discord-application-tag-op{background-color:#c9cdfb;color:#4752c4;border-radius:0.4rem}.discord-replied-message .discord-replied-message-username{flex-shrink:0;font-size:inherit;line-height:inherit;margin-right:0.25rem;opacity:0.64;font-weight:500;color:#fff}.discord-replied-message .discord-replied-message-content{color:inherit;font-size:inherit;line-height:inherit;white-space:pre;text-overflow:ellipsis;user-select:none;cursor:pointer}.discord-replied-message .discord-replied-message-content:hover{color:#fff}.discord-light-theme .discord-replied-message .discord-replied-message-content:hover{color:#000}.discord-replied-message .discord-replied-message-content .discord-message-edited{margin-left:0.25rem}.discord-replied-message .discord-replied-message-content-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:20px;height:20px;margin-left:4px}.discord-message .discord-author-info{display:inline-flex;align-items:center;font-size:16px;margin-right:0.25rem}.discord-compact-mode .discord-message .discord-author-info{margin-right:0}.discord-message .discord-author-info .discord-author-username{color:#fff;font-size:1em;font-weight:500}.discord-light-theme .discord-message .discord-author-info .discord-author-username{color:#23262a}.discord-message .discord-author-info .discord-application-tag{background-color:#5865f2;color:#fff;font-size:0.625em;margin-left:4px;border-radius:3px;line-height:100%;text-transform:uppercase;display:flex;align-items:center;height:0.9375rem;padding:0 0.275rem;margin-top:0.075em;border-radius:0.1875rem}.discord-message .discord-author-info .discord-application-tag.discord-application-tag-op{background-color:#c9cdfb;color:#4752c4;border-radius:0.4rem}.discord-message .discord-author-info .discord-application-tag-verified{display:inline-block;width:0.9375rem;height:0.9375rem;margin-left:-0.25rem}.discord-message .discord-author-info .discord-author-role-icon{margin-left:0.25rem;vertical-align:top;height:calc(1rem + 4px);width:calc(1rem + 4px)}.discord-compact-mode .discord-message .discord-author-info .discord-author-username{margin-left:8px;margin-right:4px}.discord-compact-mode .discord-message .discord-author-info .discord-application-tag{margin-left:0;margin-left:5px;margin-right:5px;padding-left:10px;padding-right:4px}.discord-compact-mode .discord-message .discord-author-info .discord-application-tag-verified{margin-right:0.7em;margin-left:-0.7em}";
const DiscordCommand = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.profile = undefined;
this.author = 'User';
this.avatar = undefined;
this.roleColor = undefined;
this.command = undefined;
}
render() {
var _a, _b, _c;
const parent = this.el.parentElement;
if (parent.tagName.toLowerCase() !== 'discord-message') {
throw new Error('All <discord-command> components must be direct children of <discord-message>.');
}
const resolveAvatar = (avatar) => { var _a, _b; return (_b = (_a = options.avatars[avatar]) !== null && _a !== void 0 ? _a : avatar) !== null && _b !== void 0 ? _b : options.avatars.default; };
const defaultData = { author: this.author, bot: false, verified: false, server: false, roleColor: this.roleColor };
const profileData = (_a = Reflect.get(options.profiles, this.profile)) !== null && _a !== void 0 ? _a : {};
const profile = Object.assign(Object.assign(Object.assign({}, defaultData), profileData), { avatar: resolveAvatar((_b = profileData.avatar) !== null && _b !== void 0 ? _b : this.avatar) });
const messageParent = parent.parentElement;
return (index.h(index.Host, { class: "discord-replied-message discord-executed-command" }, messageParent.compactMode ? (index.h("div", { class: "discord-reply-badge" }, index.h(CommandIcon, null))) : (index.h("img", { class: "discord-replied-message-avatar", src: profile.avatar, alt: profile.author })), index.h("span", { class: "discord-replied-message-username", style: { color: (_c = profile.roleColor) !== null && _c !== void 0 ? _c : '' } }, profile.author), ' used ', index.h("div", { class: "discord-replied-message-content discord-command-name" }, this.command)));
}
get el() { return index.getElement(this); }
};
DiscordCommand.style = discordCommandCss;
const discordCustomEmojiCss = ".discord-custom-emoji{display:inline-block;cursor:pointer}.discord-custom-emoji .discord-custom-emoji-image{object-fit:contain;width:1.375rem;height:1.375rem;vertical-align:bottom}.discord-embed-custom-emoji{display:inline-block}.discord-embed-custom-emoji .discord-embed-custom-emoji-image{width:18px;height:18px;vertical-align:bottom}";
const DiscordCustomEmoji = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.name = undefined;
this.url = undefined;
this.embedEmoji = undefined;
}
componentWillRender() {
var _a, _b, _c, _d;
if (!this.url && Boolean(this.name)) {
const emojiFromGlobal = getGlobalEmojiUrl(this.name);
if (emojiFromGlobal) {
(_a = this.url) !== null && _a !== void 0 ? _a : (this.url = (_b = emojiFromGlobal.url) !== null && _b !== void 0 ? _b : '');
(_c = this.embedEmoji) !== null && _c !== void 0 ? _c : (this.embedEmoji = (_d = emojiFromGlobal.embedEmoji) !== null && _d !== void 0 ? _d : false);
}
}
}
render() {
const name = `:${this.name}:`;
const emojiClassName = this.embedEmoji ? 'discord-embed-custom-emoji' : 'discord-custom-emoji';
const emojiImageClassName = this.embedEmoji ? 'discord-embed-custom-emoji-image' : 'discord-custom-emoji-image';
return (index.h("span", { class: emojiClassName }, index.h("img", { "aria-label": name, src: this.url, alt: name, draggable: false, class: emojiImageClassName })));
}
get el() { return index.getElement(this); }
};
DiscordCustomEmoji.style = discordCustomEmojiCss;
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
const discordEmbedCss = ".discord-embed{color:#dcddde;display:flex;font-size:13px;line-height:150%;margin-bottom:8px;margin-top:8px}.discord-light-theme .discord-embed{color:#2e3338}.discord-embed .discord-left-border{background-color:#202225;border-radius:4px 0 0 4px;flex-shrink:0;width:4px}.discord-light-theme .discord-embed .discord-left-border{background-color:#e3e5e8}.discord-embed .discord-embed-root{display:grid;grid-auto-flow:row;grid-row-gap:0.25rem;min-height:0;min-width:0;text-indent:0}.discord-embed .discord-embed-wrapper{background-color:#2f3136;max-width:520px;border:1px solid rgba(46, 48, 54, 0.6);border-radius:0 4px 4px 0;justify-self:start;align-self:start;display:grid;box-sizing:border-box}.discord-light-theme .discord-embed .discord-embed-wrapper{background-color:rgba(249, 249, 249, 0.3);border-color:rgba(205, 205, 205, 0.3)}.discord-embed .discord-embed-wrapper .discord-embed-grid{display:inline-grid;grid-template-columns:auto -webkit-min-content;grid-template-columns:auto min-content;grid-template-columns:auto;grid-template-rows:auto;padding:0.5rem 1rem 1rem 0.75rem}.discord-embed .discord-embed-thumbnail{border-radius:4px;flex-shrink:0;grid-column:2/2;grid-row:1/8;justify-self:end;margin-left:16px;margin-top:8px;max-height:80px;max-width:80px;object-fit:contain;object-position:top center}.discord-embed .discord-embed-author{-webkit-box-align:center;align-items:center;color:#fff;font-size:14px;display:flex;font-weight:600;grid-column:1 / 1;margin-top:8px;min-width:0}.discord-light-theme .discord-embed .discord-embed-author{color:#4f545c}.discord-embed .discord-embed-author a{color:#fff;font-weight:600}.discord-light-theme .discord-embed .discord-embed-author a{color:#4f545c}.discord-embed .discord-embed-author .discord-author-image{border-radius:50%;height:24px;margin-right:8px;width:24px}.discord-embed .discord-embed-provider{font-size:0.75rem;line-height:1rem;font-weight:400;grid-column:1/1;margin-top:8px;unicode-bidi:plaintext;text-align:left}.discord-light-theme .discord-embed .discord-embed-provider{color:#4f545c}.discord-embed .discord-embed-title{-webkit-box-align:center;align-items:center;color:#fff;display:inline-block;font-size:1rem;font-weight:600;grid-column:1 / 1;margin-top:8px;min-width:0}.discord-embed .discord-embed-title a{color:#00aff4;font-weight:600}.discord-embed .discord-embed-image{border-radius:4px;max-width:100%}.discord-embed .discord-embed-media{border-radius:4px;contain:paint;display:block;grid-column:1/1;margin-top:16px}.discord-embed .discord-embed-media.discord-embed-media-video{height:225px}.discord-embed .discord-embed.media .discord-embed-image{overflow:hidden;position:relative;user-select:text}.discord-embed .discord-embed-media .discord-embed-video{-webkit-box-align:center;-webkit-box-pack:center;align-items:center;border-radius:0;cursor:pointer;display:flex;height:100%;justify-content:center;max-height:100%;width:100%;width:400px;height:225px;left:0px;top:0px}.discord-embed-custom-emoji{display:inline-block}.discord-embed-custom-emoji .discord-embed-custom-emoji-image{width:18px;height:18px;vertical-align:bottom}";
const DiscordEmbed = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.hasPerformedRerenderChecks = 'pristine';
this.color = undefined;
this.authorName = undefined;
this.authorImage = undefined;
this.authorUrl = undefined;
this.embedTitle = undefined;
this.url = undefined;
this.thumbnail = undefined;
this.image = undefined;
this.video = undefined;
this.provider = undefined;
this.hasProvidedDescriptionSlot = true;
}
componentDidRender() {
if (this.hasPerformedRerenderChecks === 'pristine') {
try {
const discordEmbedDescriptionChild = this.el.querySelector('.discord-embed-description');
this.hasProvidedDescriptionSlot = Boolean(discordEmbedDescriptionChild === null || discordEmbedDescriptionChild === void 0 ? void 0 : discordEmbedDescriptionChild.innerHTML.trim());
}
finally {
this.hasPerformedRerenderChecks = 'dirty';
}
}
}
render() {
const emojiParsedAuthorName = this.parseTitle(this.authorName);
const emojiParsedEmbedTitle = this.parseTitle(this.embedTitle);
return (index.h("div", { class: "discord-embed" }, index.h("div", { style: { 'background-color': this.color }, class: "discord-left-border" }), index.h("div", { class: "discord-embed-root" }, index.h("div", { class: "discord-embed-wrapper" }, index.h("div", { class: "discord-embed-grid" }, this.provider && (index.h("div", { class: "discord-embed-provider" }, index.h(Fragment, null, this.provider))), emojiParsedAuthorName && (index.h("div", { class: "discord-embed-author" }, this.authorImage ? index.h("img", { src: this.authorImage, alt: "", class: "discord-author-image" }) : '', this.authorUrl ? (index.h("a", { href: this.authorUrl, target: "_blank", rel: "noopener noreferrer" }, ...emojiParsedAuthorName)) : (index.h(Fragment, null, ...emojiParsedAuthorName)))), emojiParsedEmbedTitle && (index.h("div", { class: "discord-embed-title" }, this.url ? (index.h("a", { href: this.url, target: "_blank", rel: "noopener noreferrer" }, ...emojiParsedEmbedTitle)) : (index.h(Fragment, null, ...emojiParsedEmbedTitle)))), this.hasProvidedDescriptionSlot && index.h("slot", { name: "description" }), index.h("slot", { name: "fields" }), this.image || this.video ? (index.h("div", { class: clsx('discord-embed-media', { 'discord-embed-media-video': Boolean(this.video) }) }, this.renderMedia())) : null, this.thumbnail ? index.h("img", { src: this.thumbnail, alt: "", class: "discord-embed-thumbnail" }) : '', index.h("slot", { name: "footer" }))))));
}
renderMedia() {
if (this.video) {
return (index.h("video", { controls: true, muted: true, preload: "none", poster: this.image, src: this.video, height: "225", width: "400", class: "discord-embed-video" }, index.h("img", { src: this.image, alt: "Discord embed media", class: "discord-embed-image" })));
}
else if (this.image) {
return index.h("img", { src: this.image, alt: "Discord embed media", class: "discord-embed-image" });
}
return null;
}
parseTitle(title) {
if (!title)
return null;
const words = title.split(' ');
return words.map((word, idx) => {
var _a;
const emoji = (_a = getGlobalEmojiUrl(word)) !== null && _a !== void 0 ? _a : {};
let el = '';
if (emoji.name) {
el = (index.h("span", { class: "discord-embed-custom-emoji" }, index.h("img", { src: emoji.url, alt: emoji.name, class: "discord-embed-custom-emoji-image" }), index.h("span", null, "\u00A0")));
}
else {
el = idx < words.length - 1 ? `${word} ` : word;
}
return el;
});
}
get el() { return index.getElement(this); }
};
DiscordEmbed.style = discordEmbedCss;
const discordEmbedDescriptionCss = ".discord-embed .discord-embed-description{font-size:0.875rem;font-weight:400;grid-column:1/1;line-height:1.125rem;margin-top:8px;min-width:0;white-space:pre-line}.discord-embed .discord-embed-description code{background-color:#202225;padding:2.5px;border-radius:3px}.discord-light-theme .discord-embed-description code{background-color:#e3e5e8}.discord-embed .discord-embed-description code.multiline{display:block;padding:7px;border-radius:4px;white-space:break-spaces}.discord-embed .discord-embed-description pre{margin:0;margin-top:6px}.discord-embed .discord-embed-description img.emoji{width:22px;height:22px}.discord-embed .discord-embed-description blockquote{position:relative;padding:0 8px 0 12px;margin:0}.discord-embed .discord-embed-description blockquote::before{content:'';display:block;position:absolute;left:0;height:100%;width:4px;border-radius:4px;background-color:#4f545c}.discord-light-theme .discord-embed-description blockquote::before{background-color:#c7ccd1}.discord-embed .discord-embed-description .spoiler{background-color:#202225;color:transparent;cursor:pointer}.discord-light-theme .discord-embed .discord-embed-description .spoiler{background-color:#b9bbbe}.discord-embed .discord-embed-description .spoiler:hover{background-color:rgba(32, 34, 37, 0.8)}.discord-light-theme .discord-embed .discord-embed-description .spoiler:hover{background-color:rgba(185, 187, 190, 0.8)}.discord-embed .discord-embed-description .spoiler:active{color:inherit;background-color:hsla(0, 0%, 100%, 0.1)}.discord-light-theme .discord-embed .discord-embed-description .spoiler:active{background-color:rgba(0, 0, 0, 0.1)}";
const DiscordEmbedDescription = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
const parent = this.el.parentElement;
if (parent.tagName.toLowerCase() !== 'div') {
throw new Error('All <discord-embed-description> components must be direct children of <discord-embed>.');
}
return (index.h(index.Host, { class: "discord-embed-description" }, index.h("slot", null)));
}
get el() { return index.getElement(this); }
};
DiscordEmbedDescription.style = discordEmbedDescriptionCss;
const discordEmbedFieldCss = ".discord-embed .discord-embed-field{font-size:0.875rem;line-height:1.125rem;min-width:0;font-weight:400;grid-column:1/13}.discord-embed .discord-embed-field .discord-field-title{color:#ffffff;font-weight:600;font-size:0.875rem;line-height:1.125rem;min-width:0;margin-bottom:2px}.discord-embed .discord-embed-field.discord-inline-field{flex-grow:1;flex-basis:auto;min-width:150px}.discord-light-theme .discord-embed .discord-embed-field .discord-field-title{color:#747f8d}.discord-embed-inline-field-3{grid-column:9/13 !important}.discord-embed-inline-field-2{grid-column:5/9 !important}.discord-embed-inline-field-1{grid-column:1/5 !important}";
const DiscordEmbedField = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.validInlineIndices = new Set([1, 2, 3]);
this.fieldTitle = undefined;
this.inline = false;
this.inlineIndex = 1;
}
checkInlineIndex(value) {
if (!this.validInlineIndices.has(Number(value)))
throw new RangeError('DiscordEmbedField `inlineIndex` prop must be one of: 1, 2, or 3');
}
componentWillRender() {
this.checkInlineIndex(this.inlineIndex);
}
render() {
const parent = this.el.parentElement;
if (parent.tagName.toLowerCase() !== 'discord-embed-fields') {
throw new SyntaxError('All <discord-embed-field> components must be direct children of <discord-embed-fields>.');
}
const emojiParsedEmbedFieldTitle = this.parseTitle(this.fieldTitle);
return (index.h(index.Host, { class: clsx({
'discord-embed-inline-field': this.inline,
'discord-embed-inline-field-1': this.inline && this.inlineIndex === 1,
'discord-embed-inline-field-2': this.inline && this.inlineIndex === 2,
'discord-embed-inline-field-3': this.inline && this.inlineIndex === 3
}, 'discord-embed-field') }, emojiParsedEmbedFieldTitle && index.h("div", { class: "discord-field-title" }, [...emojiParsedEmbedFieldTitle]), index.h("slot", null)));
}
parseTitle(title) {
if (!title)
return null;
const words = title.split(' ');
return words.map((word, idx) => {
var _a;
const emoji = (_a = getGlobalEmojiUrl(word)) !== null && _a !== void 0 ? _a : {};
let el = '';
if (emoji.name) {
el = (index.h("span", { class: "discord-embed-custom-emoji" }, index.h("img", { src: emoji.url, alt: emoji.name, class: "discord-embed-custom-emoji-image" }), index.h("span", null, "\u00A0")));
}
else {
el = idx < words.length - 1 ? `${word} ` : word;
}
return el;
});
}
get el() { return index.getElement(this); }
static get watchers() { return {
"inlineIndex": ["checkInlineIndex"]
}; }
};
DiscordEmbedField.style = discordEmbedFieldCss;
const discordEmbedFieldsCss = ".discord-embed .discord-embed-fields{display:grid;grid-column:1/1;margin-top:8px;grid-gap:8px}";
const DiscordEmbedFields = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h(index.Host, { class: "discord-embed-fields" }, index.h("slot", null)));
}
};
DiscordEmbedFields.style = discordEmbedFieldsCss;
const discordEmbedFooterCss = ".discord-embed-footer{-webkit-box-align:center;align-items:center;color:#dcddde;display:flex;font-size:12px;line-height:16px;font-weight:500;grid-column:1/3;grid-row:auto/auto;margin-top:8px}.discord-embed-footer .discord-footer-image{border-radius:50%;flex-shrink:0;height:20px;margin-right:8px;width:20px}.discord-embed-footer .discord-footer-separator{color:#dcddde;font-weight:500;display:inline-block;margin:0 4px}.discord-light-theme .discord-embed-footer .discord-footer-separator{color:#e4e4e4}";
const DiscordEmbedFooter = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.footerImage = undefined;
this.timestamp = undefined;
}
updateTimestamp(value) {
if (!value || isNaN(new Date(value).getTime()))
return null;
return handleTimestamp(new Date(value));
}
componentWillRender() {
this.timestamp = this.updateTimestamp(this.timestamp);
}
render() {
const parent = this.el.parentElement;
if (parent.tagName.toLowerCase() !== 'div') {
throw new Error('All <discord-embed-footer> components must be direct children of <discord-embed>.');
}
return (index.h(index.Host, { class: "discord-embed-footer" }, this.footerImage ? index.h("img", { src: this.footerImage, alt: "", class: "discord-footer-image" }) : '', index.h(Fragment, null, index.h("slot", null), this.timestamp ? index.h("span", { class: "discord-footer-separator" }, "\u2022") : '', this.timestamp ? index.h(Fragment, null, this.timestamp) : '')));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"timestamp": ["updateTimestamp"]
}; }
};
DiscordEmbedFooter.style = discordEmbedFooterCss;
const DiscordInlineCode = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h("code", null, index.h("slot", null)));
}
};
function GuildBadge(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "16", height: "16", viewBox: "0 0 16 15.2" }),
index.h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "m16 7.6c0 .79-1.28 1.38-1.52 2.09s.44 2 0 2.59-1.84.35-2.46.8-.79 1.84-1.54 2.09-1.67-.8-2.47-.8-1.75 1-2.47.8-.92-1.64-1.54-2.09-2-.18-2.46-.8.23-1.84 0-2.59-1.54-1.3-1.54-2.09 1.28-1.38 1.52-2.09-.44-2 0-2.59 1.85-.35 2.48-.8.78-1.84 1.53-2.12 1.67.83 2.47.83 1.75-1 2.47-.8.91 1.64 1.53 2.09 2 .18 2.46.8-.23 1.84 0 2.59 1.54 1.3 1.54 2.09z" })));
}
const PartnerBadgeOverlay = () => (index.h("svg", { "aria-hidden": "false", width: "16", height: "16", viewBox: "0 0 16 16" },
index.h("path", { d: "M10.5906 6.39993L9.19223 7.29993C8.99246 7.39993 8.89258 7.39993 8.69281 7.29993C8.59293 7.19993 8.39317 7.09993 8.29328 6.99993C7.89375 6.89993 7.5941 6.99993 7.29445 7.19993L6.79504 7.49993L4.29797 9.19993C3.69867 9.49993 2.99949 9.39993 2.69984 8.79993C2.30031 8.29993 2.50008 7.59993 2.99949 7.19993L5.99598 5.19993C6.79504 4.69993 7.79387 4.49993 8.69281 4.69993C9.49188 4.89993 10.0912 5.29993 10.5906 5.89993C10.7904 6.09993 10.6905 6.29993 10.5906 6.39993Z", fill: "currentColor" }),
index.h("path", { d: "M13.4871 7.79985C13.4871 8.19985 13.2874 8.59985 12.9877 8.79985L9.89135 10.7999C9.29206 11.1999 8.69276 11.3999 7.99358 11.3999C7.69393 11.3999 7.49417 11.3999 7.19452 11.2999C6.39545 11.0999 5.79616 10.6999 5.29674 10.0999C5.19686 9.89985 5.29674 9.69985 5.39663 9.59985L6.79499 8.69985C6.89487 8.59985 7.09463 8.59985 7.19452 8.69985C7.39428 8.79985 7.59405 8.89985 7.69393 8.99985C8.09346 8.99985 8.39311 8.99985 8.69276 8.79985L9.39194 8.39985L11.3896 6.99985L11.6892 6.79985C12.1887 6.49985 12.9877 6.59985 13.2874 7.09985C13.4871 7.39985 13.4871 7.59985 13.4871 7.79985Z", fill: "currentColor" })));
const VerifiedBadgeOverlay = () => (index.h("svg", { "aria-hidden": "false", width: "16", height: "16", viewBox: "0 0 16 15.2" },
index.h("path", { d: "M7.4,11.17,4,8.62,5,7.26l2,1.53L10.64,4l1.36,1Z", fill: "currentColor" })));
const discordInviteCss = ".discord-invite{background-color:#2f3136;border-radius:4px;padding:16px;width:432px}.discord-light-theme .discord-invite{background-color:#f2f3f5}.discord-invite .discord-invite-header{font-weight:700;font-size:12px;line-height:16px;margin-bottom:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-transform:uppercase;color:#b9bbbe}.discord-light-theme .discord-invite .discord-invite-header{color:#4f5660}.discord-invite .discord-invite-root{display:flex;flex-flow:row nowrap}.discord-invite .discord-invite-icon{background-color:#36393f;border-radius:15px;margin-right:16px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:50px;height:50px}.discord-light-theme .discord-invite .discord-invite-icon{background-color:#fff}.discord-invite .discord-invite-info{font-family:Whitney, 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n\t\tsans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center}.discord-invite .discord-invite-title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:2px;color:white;font-size:16px;line-height:20px;font-weight:700;display:flex;flex-direction:row}.discord-light-theme .discord-invite .discord-invite-title{color:#060607}.discord-invite .discord-invite-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.discord-invite .discord-invite-counts{display:flex;align-items:center;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#b9bbbe;line-height:16px}.discord-invite .discord-invite-status{display:block;margin-right:4px;width:8px;height:8px;border-radius:50%;background-color:#747f8d}.discord-invite .discord-invite-status-online{background-color:#3ba55d}.discord-invite .discord-invite-count{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;margin-right:8px;color:#b9bbbe;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.discord-invite .discord-invite-join{display:flex;justify-content:center;align-items:center;height:40px;padding:0 20px;align-self:center;margin-left:10px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;line-height:20px;border-radius:3px;font-size:14px;font-weight:600;color:white !important;background-color:#3ba55d;-webkit-transition:background-color 0.17s ease;transition:background-color 0.17s ease}.discord-invite .discord-invite-join:hover{background-color:#2d7d46;text-decoration:none}.discord-invite .discord-invite-badge{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:16px;height:16px;align-self:center;position:relative}.discord-invite .discord-invite-badge-verified{color:#3ba55d}.discord-invite .discord-invite-badge-partnered{color:#5865f2}.discord-invite .discord-invite-badge-container{position:absolute;top:-0.05px;left:0.05px;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:white}.discord-light-theme .discord-invite .discord-invite-counts,.discord-light-theme .discord-invite .discord-invite-count{color:#4f5660}";
const DiscordInvite = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.icon = options.defaultDiscordAvatars.blue;
this.name = 'Discord Server';
this.url = undefined;
this.online = 0;
this.members = 0;
this.verified = false;
this.partnered = false;
this.inviteTitle = "You've been invited to join a server";
this.joinBtn = 'Join';
}
render() {
return (index.h("div", { class: "discord-invite" }, index.h("div", { class: "discord-invite-header" }, this.inviteTitle), index.h("div", { class: "discord-invite-root" }, index.h("img", { class: "discord-invite-icon", src: this.icon, alt: this.name }), index.h("div", { class: "discord-invite-info" }, index.h("div", { class: "discord-invite-title" }, ((this.verified && !this.partnered) || (!this.verified && this.partnered)) && (index.h("div", { class: "discord-invite-badge" }, index.h(GuildBadge, { "aria-label": this.partnered ? 'Discord Partner' : 'Verified', class: `discord-invite-badge-${this.partnered ? 'partnered' : 'verified'}` }), index.h("div", { class: "discord-invite-badge-container" }, this.partnered ? index.h(PartnerBadgeOverlay, null) : index.h(VerifiedBadgeOverlay, null)))), index.h("span", { class: "discord-invite-name" }, this.name)), index.h("div", { class: "discord-invite-counts" }, index.h("i", { class: "discord-invite-status discord-invite-status-online" }), index.h("span", { class: "discord-invite-count" }, this.online.toLocaleString(), " Online"), index.h("i", { class: "discord-invite-status" }), index.h("span", { class: "discord-invite-count" }, this.members.toLocaleString(), " Members"))), index.h("a", { class: "discord-invite-join", href: this.url, target: "_blank", rel: "noopener noreferrer" }, this.joinBtn))));
}
get el() { return index.getElement(this); }
};
DiscordInvite.style = discordInviteCss;
const DiscordItalic = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
}
render() {
return (index.h("em", null, index.h("slot", null)));
}
};
var removeHash = function removeHash(hex) {
return hex.charAt(0) === '#' ? hex.slice(1) : hex;
};
var parseHex = function parseHex(nakedHex) {
var isShort = nakedHex.length === 3 || nakedHex.length === 4;
var twoDigitHexR = isShort ? "".concat(nakedHex.slice(0, 1)).concat(nakedHex.slice(0, 1)) : nakedHex.slice(0, 2);
var twoDigitHexG = isShort ? "".concat(nakedHex.slice(1, 2)).concat(nakedHex.slice(1, 2)) : nakedHex.slice(2, 4);
var twoDigitHexB = isShort ? "".concat(nakedHex.slice(2, 3)).concat(nakedHex.slice(2, 3)) : nakedHex.slice(4, 6);
var twoDigitHexA = (isShort ? "".concat(nakedHex.slice(3, 4)).concat(nakedHex.slice(3, 4)) : nakedHex.slice(6, 8)) || 'ff'; // const numericA = +((parseInt(a, 16) / 255).toFixed(2));
return {
r: twoDigitHexR,
g: twoDigitHexG,
b: twoDigitHexB,
a: twoDigitHexA
};
};
var hexToDecimal = function hexToDecimal(hex) {
return parseInt(hex, 16);
};
var hexesToDecimals = function hexesToDecimals(_ref) {
var r = _ref.r,
g = _ref.g,
b = _ref.b,
a = _ref.a;
return {
r: hexToDecimal(r),
g: hexToDecimal(g),
b: hexToDecimal(b),
a: +(hexToDecimal(a) / 255).toFixed(2)
};
};
var isNumeric = function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}; // eslint-disable-line no-restricted-globals, max-len
var formatRgb = function formatRgb(decimalObject, parameterA) {
var r = decimalObject.r,
g = decimalObject.g,
b = decimalObject.b,
parsedA = decimalObject.a;
var a = isNumeric(parameterA) ? parameterA : parsedA;
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
};
/**
* Turns an old-fashioned css hex color value into a rgb color value.
*
* If you specify an alpha value, you'll get a rgba() value instead.
*
* @param The hex value to convert. ('123456'. '#123456', ''123', '#123')
* @param An alpha value to apply. (optional) ('0.5', '0.25')
* @return An rgb or rgba value. ('rgb(11, 22, 33)'. 'rgba(11, 22, 33, 0.5)')
*/
var hexToRgba = function hexToRgba(hex, a) {
var hashlessHex = removeHash(hex);
var hexObject = parseHex(hashlessHex);
var decimalObject = hexesToDecimals(hexObject);
return formatRgb(decimalObject, a);
};
var build = hexToRgba;
function ChannelForum(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "24", height: "24", viewBox: "0 0 20 20", fill: "none" }),
index.h("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.56929 14.6869H2.34375C1.97079 14.6869 1.61311 14.5387 1.34938 14.275C1.08566 14.0113 0.9375 13.6536 0.9375 13.2806V8.12437C0.9375 6.38389 1.6289 4.7147 2.85961 3.484C4.09032 2.25329 5.75951 1.56189 7.49999 1.56189C9.24047 1.56189 10.9097 2.25329 12.1404 3.484C12.6953 4.03895 13.1406 4.68307 13.4623 5.38267C14.9101 5.5973 16.2513 6.29124 17.2655 7.36251C18.4194 8.58133 19.0625 10.1959 19.0625 11.8744V17.0306C19.0625 17.4036 18.9144 17.7613 18.6506 18.025C18.3869 18.2887 18.0292 18.4369 17.6563 18.4369H12.5C11.1428 18.4369 9.81899 18.0162 8.71072 17.2328C7.7871 16.58 7.05103 15.7019 6.56929 14.6869ZM4.18544 4.80982C5.06451 3.93075 6.25679 3.43689 7.49999 3.43689C8.74319 3.43689 9.93549 3.93075 10.8146 4.80983C11.6936 5.6889 12.1875 6.88119 12.1875 8.12439C12.1875 9.36759 11.6936 10.5599 10.8146 11.439C9.93549 12.318 8.74321 12.8119 7.50001 12.8119H7.20268C7.19767 12.8118 7.19266 12.8118 7.18764 12.8119H2.8125V8.12438C2.8125 6.88118 3.30636 5.6889 4.18544 4.80982ZM8.672 14.5814C8.97763 15.0132 9.35591 15.3928 9.79299 15.7017C10.5847 16.2614 11.5305 16.5619 12.5 16.5619H17.1875V11.8744C17.1875 10.6755 16.7281 9.52219 15.9039 8.65159C15.3804 8.09865 14.735 7.68644 14.027 7.44246C14.0506 7.66798 14.0625 7.89557 14.0625 8.12439C14.0625 9.86487 13.3711 11.5341 12.1404 12.7648C11.1896 13.7156 9.97697 14.3445 8.672 14.5814Z" })));
}
function ChannelIcon(props) {
return (index.h("svg", Object.assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }),
index.h("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z" })));
}
function ChannelThread(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "24", height: "24", viewBox: "0 0 24 24" }),
index.h("path", { fill: "currentColor", d: "M5.43309 21C5.35842 21 5.30189 20.9325 5.31494 20.859L5.99991 17H2.14274C2.06819 17 2.01168 16.9327 2.02453 16.8593L2.33253 15.0993C2.34258 15.0419 2.39244 15 2.45074 15H6.34991L7.40991 9H3.55274C3.47819 9 3.42168 8.93274 3.43453 8.85931L3.74253 7.09931C3.75258 7.04189 3.80244 7 3.86074 7H7.75991L8.45234 3.09903C8.46251 3.04174 8.51231 3 8.57049 3H10.3267C10.4014 3 10.4579 3.06746 10.4449 3.14097L9.75991 7H15.7599L16.4523 3.09903C16.4625 3.04174 16.5123 3 16.5705 3H18.3267C18.4014 3 18.4579 3.06746 18.4449 3.14097L17.7599 7H21.6171C21.6916 7 21.7481 7.06725 21.7353 7.14069L21.4273 8.90069C21.4172 8.95811 21.3674 9 21.3091 9H17.4099L17.0495 11.04H15.05L15.4104 9H9.41035L8.35035 15H10.5599V17H7.99991L7.30749 20.901C7.29732 20.9583 7.24752 21 7.18934 21H5.43309Z" }),
index.h("path", { fill: "currentColor", d: "M13.4399 12.96C12.9097 12.96 12.4799 13.3898 12.4799 13.92V20.2213C12.4799 20.7515 12.9097 21.1813 13.4399 21.1813H14.3999C14.5325 21.1813 14.6399 21.2887 14.6399 21.4213V23.4597C14.6399 23.6677 14.8865 23.7773 15.0408 23.6378L17.4858 21.4289C17.6622 21.2695 17.8916 21.1813 18.1294 21.1813H22.5599C23.0901 21.1813 23.5199 20.7515 23.5199 20.2213V13.92C23.5199 13.3898 23.0901 12.96 22.5599 12.96H13.4399Z" })));
}
function LockedVoiceChannel(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "24", height: "24", viewBox: "0 0 24 24" }),
index.h("path", { fill: "currentColor", d: "M17 11V7C17 4.243 14.756 2 12 2C9.242 2 7 4.243 7 7V11C5.897 11 5 11.896 5 13V20C5 21.103 5.897 22 7 22H17C18.103 22 19 21.103 19 20V13C19 11.896 18.103 11 17 11ZM12 18C11.172 18 10.5 17.328 10.5 16.5C10.5 15.672 11.172 15 12 15C12.828 15 13.5 15.672 13.5 16.5C13.5 17.328 12.828 18 12 18ZM15 11H9V7C9 5.346 10.346 4 12 4C13.654 4 15 5.346 15 7V11Z", "aria-hidden": "true" })));
}
function VoiceChannel(props) {
return (index.h("svg", Object.assign({}, props, { "aria-hidden": "false", width: "24", height: "24", viewBox: "0 0 24 24" }),
index.h("path", { fill: "currentColor", "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z", "aria-hidden": "true" })));
}
const discordMentionCss = ".discord-message .discord-mention{color:#e3e7f8;background-color:hsla(235, 85.6%, 64.7%, 0.3);font-weight:500;padding:0 2px;border-radius:3px;unicode-bidi:-moz-plaintext;unicode-bidi:plaintext;-webkit-transition:background-color 50ms ease-out, color 50ms ease-out;transition:background-color 50ms ease-out, color 50ms ease-out;cursor:pointer}.discord-message .discord-mention:hover{color:#fff;background-color:hsl(235, 85.6%, 64.7%)}.discord-message .discord-mention.discord-channel-mention{padding-left:1.2rem !important;position:relative}.discord-message .discord-mention.discord-voice-mention,.discord-message .discord-mention.discord-locked-mention,.discord-message .discord-mention.discord-thread-mention,.discord-message .discord-mention.discord-forum-mention{padding-left:1.25rem !important;position:relative}.discord-light-theme .discord-message .discord-mention{color:#687dc6;background-color:hsla(235, 85.6%, 64.7%, 0.15)}.discord-light-theme .discord-message .discord-mention:hover{color:#ffffff;background-color:hsl(235, 85.6%, 64.7%)}.discord-message .discord-mention .discord-mention-icon{width:1rem;height:1rem;object-fit:contain;position:absolute;left:0.125rem;top:0.125rem}";
const DiscordMention = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.highlight = false;
this.color = undefined;
this.type = 'user';
}
handleType(value) {
if (typeof value !== 'string') {
throw new TypeError('DiscordMention `type` prop must be a string.');
}
else if (!['user', 'channel', 'role', 'voice', 'locked', 'thread', 'forum', 'slash'].includes(value)) {
throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice', 'locked', 'thread', 'forum', 'slash'");
}
}
componentWillRender() {
this.handleType(this.type);
}
componentDidLoad() {
if (this.color && this.type === 'role') {
this.el.addEventListener('mouseover', this.setHoverColor.bind(this));
this.el.addEventListener('mouseout', this.resetHoverColor.bind(this));
}
}
disconnectedCallback() {
if (this.color && this.type === 'role') {
this.el.removeEventListener('mouseover', this.setHoverColor.bind(this));
this.el.removeEventListener('mouseout', this.resetHoverColor.bind(this));
}
}
setHoverColor() {
this.el.style.backgroundColor = build(this.color, 0.3);
}
resetHoverColor() {
this.el.style.backgroundColor = build(this.color, 0.1);
}
render() {
const { color, type } = this;
const colorStyle = !color || type !== 'role' ? {} : { color, 'background-color': build(color, 0.1) };
let mentionPrepend = '';
switch (this.type) {
case 'channel':
mentionPrepend = index.h(ChannelIcon, { class: "discord-mention-icon" });
break;
case 'user':
case 'role':
mentionPrepend = '@';
break;
case 'voice':
mentionPrepend = index.h(VoiceChannel, { class: "discord-mention-icon" });
break;
case 'locked':
mentionPrepend = index.h(LockedVoiceChannel, { class: "discord-mention-icon" });
break;
case 'thread':
mentionPrepend = index.h(ChannelThread, { class: "discord-mention-icon" });
break;
case 'forum':
mentionPrepend = index.h(ChannelForum, { class: "discord-mention-icon" });
break;
case 'slash':
mentionPrepend = '/';
break;
}
return (index.h(index.Host, { style: colorStyle, class: `discord-mention discord-${type}-mention` }, mentionPrepend, index.h("slot", null)));
}
get el() { return index.getElement(this); }
static get watchers() { return {
"type": ["handleType"]
}; }
};
DiscordMention.style = discordMentionCss;
const VerifiedTick = () => (index.h("svg", { class: "discord-application-tag-verified", "aria-label": "Verified Bot", "aria-hidden": "false", width: "16", height: "16", viewBox: "0 0 16 15.2" },
index.h("path", { d: "M7.4,11.17,4,8.62,5,7.26l2,1.53L10.64,4l1.36,1Z", fill: "currentColor" })));
const AuthorInfo = ({ author, bot, server, op, roleColor, roleIcon, roleName, verified, compact }) => (index.h("span", { class: "discord-author-info" },
!compact && (index.h(Fragment, null,