import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-ae373651.js';
import { e as defaultIconPack, i as useLanguage } from './p-5b3a7f00.js';
import { S as SyncWithStore } from './p-070aa695.js';
import { d as defineCustomElement$3 } from './p-85587a5c.js';
import { d as defineCustomElement$2 } from './p-3e0452c4.js';
import { d as defineCustomElement$1 } from './p-e6245534.js';

const EMOJI_ASSET_URL = 'https://rtk-assets.realtime.cloudflare.com/assets/emojis-data.json';
let cachedEmojis;
/**
 * fetches the latest emoji list from CDN
 * @returns list of emojis
 */
const fetchEmojis = async () => {
    if (!cachedEmojis) {
        const emojis = await fetch(EMOJI_ASSET_URL);
        cachedEmojis = emojis.json();
    }
    return cachedEmojis;
};

const rtkEmojiPickerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{width:100%}.emoji-parent{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-64, 256px);width:100%;max-width:640px;flex-direction:column;padding:var(--rtk-space-2, 8px);padding-bottom:var(--rtk-space-0, 0px);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.close-parent{display:flex;flex:1 1 0%;justify-content:flex-end;padding:var(--rtk-space-0, 0px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}#emoji-grid{margin-top:var(--rtk-space-2, 8px);box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:scroll;height:100%;grid-auto-rows:minmax(min-content, max-content)}#loader{display:flex;height:100%;width:100%;align-items:center;justify-content:center}input{display:block;height:var(--rtk-space-8, 32px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);font-size:14px;border-width:var(--rtk-border-width-none, 0);border-style:solid;border-style:none;border-color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-800, 30 30 30) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-900, 255 255 255 / 0.88))}input::-moz-placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input::placeholder{color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}input{border-radius:var(--rtk-border-radius-sm, 4px);outline:2px solid transparent;outline-offset:2px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}input:focus{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-border-opacity));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--rtk-colors-brand-300, 73 124 253) / var(--tw-ring-opacity));--tw-ring-opacity:0.3}.emoji{height:var(--rtk-space-10, 40px);width:var(--rtk-space-10, 40px);font-size:20px;color:rgb(var(--rtk-colors-text-1000, 255 255 255))}";
const RtkEmojiPickerStyle0 = rtkEmojiPickerCss;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const RtkEmojiPicker = /*@__PURE__*/ proxyCustomElement(class RtkEmojiPicker extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.pickerClose = createEvent(this, "pickerClose", 7);
        this.emojiClicked = createEvent(this, "rtkEmojiClicked", 7);
        /** Icon pack */
        this.iconPack = defaultIconPack;
        /** Language */
        this.t = useLanguage();
        /** Controls whether or not to focus on mount */
        this.focusWhenOpened = true;
        this.filterVal = '';
        this.filteredEmojis = [];
    }
    componentWillLoad() {
        // Don't use async here as it will block the render
        fetchEmojis().then((e) => {
            this.emojiList = e;
            this.handleInputChange(this.inputElement);
        });
    }
    componentDidLoad() {
        if (this.focusWhenOpened) {
            this.inputElement.focus();
        }
    }
    handleInputChange(target) {
        this.filterVal = target.value;
        const regex = new RegExp(`([^,]*?${this.filterVal}[^,]*):(\\d+)`, 'g');
        this.filteredEmojis = Array.from(this.emojiList['search'].matchAll(regex)).map((m) => {
            return { name: m[1], emoji: this.emojiList['emojis'][m[2]] };
        });
    }
    handleEmojiClick(emoji) {
        this.emojiClicked.emit(emoji);
    }
    mapEmojiList() {
        var _a;
        if (((_a = this.emojiList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            return (h("div", { id: "loader" }, h("rtk-spinner", { iconPack: this.iconPack })));
        }
        return (h("div", { id: "emoji-grid", class: "scrollbar max-w-40" }, this.filteredEmojis.map((e) => (h("rtk-button", { key: `emoji-button-${e.name}`, class: "emoji", variant: "ghost", kind: "icon", title: e.name, onClick: () => this.handleEmojiClick(e.emoji) }, e.emoji)))));
    }
    render() {
        return (h(Host, { key: 'e2b74cd93028974812eeba320368eb7d645b8e6d' }, h("div", { key: '4656f9afbcde1e6a952a5eb7229649e3d9f7bf8a', class: 'close-parent' }, h("rtk-button", { key: '03759c6ee2b3b8bedcf965d340425bf9b7a9f370', variant: "ghost", kind: "icon", class: "close", onClick: () => { var _a; return (_a = this.pickerClose) === null || _a === void 0 ? void 0 : _a.emit(); }, "aria-label": this.t('close') }, h("rtk-icon", { key: 'b5b746e6c18e2a67a57f550f35bb32ea4de37cb9', icon: this.iconPack.dismiss }))), h("div", { key: '73235fd8e554ece4539e4d2fc9b086c32e43bd47', class: 'emoji-parent' }, h("input", { key: '315f45bcc6560f61d7c8448fee7d2e36ca04784d', value: this.filterVal, onInput: (event) => this.handleInputChange(event.target), placeholder: this.t('search'), ref: (el) => (this.inputElement = el) }), this.mapEmojiList())));
    }
    static get style() { return RtkEmojiPickerStyle0; }
}, [1, "rtk-emoji-picker", {
        "iconPack": [16],
        "t": [16],
        "focusWhenOpened": [4, "focus-when-opened"],
        "emojiList": [32],
        "filterVal": [32],
        "filteredEmojis": [32]
    }]);
__decorate([
    SyncWithStore()
], RtkEmojiPicker.prototype, "iconPack", void 0);
__decorate([
    SyncWithStore()
], RtkEmojiPicker.prototype, "t", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-emoji-picker", "rtk-button", "rtk-icon", "rtk-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-emoji-picker":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkEmojiPicker);
            }
            break;
        case "rtk-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "rtk-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "rtk-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { RtkEmojiPicker as R, defineCustomElement as d };
