import * as i0 from '@angular/core';
import { InjectionToken, inject, LOCALE_ID, input, output, signal, Component, ElementRef, ViewContainerRef, Injector, DestroyRef, Directive } from '@angular/core';
import { Skeleton } from '@ngstarter-ui/components/skeleton';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { Directionality } from '@angular/cdk/bidi';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { _getEventTarget } from '@angular/cdk/platform';
import { TemplatePortal } from '@angular/cdk/portal';
import { PositionManager } from '@ngstarter-ui/components/overlay';

const EMOJI_PICKER_TRIGGER_FOR = new InjectionToken('EMOJI_PICKER_TRIGGER_FOR');

const loadedEmoji = new Map();
const loadGroups = (language) => {
    const imports = {
        en: import('emojibase-data/en/messages.json'),
        bn: import('emojibase-data/bn/messages.json'),
        da: import('emojibase-data/da/messages.json'),
        de: import('emojibase-data/de/messages.json'),
        es: import('emojibase-data/es/messages.json'),
        et: import('emojibase-data/et/messages.json'),
        fi: import('emojibase-data/fi/messages.json'),
        fr: import('emojibase-data/fr/messages.json'),
        hi: import('emojibase-data/hi/messages.json'),
        hu: import('emojibase-data/hu/messages.json'),
        it: import('emojibase-data/it/messages.json'),
        ja: import('emojibase-data/ja/messages.json'),
        ko: import('emojibase-data/ko/messages.json'),
        lt: import('emojibase-data/lt/messages.json'),
        ms: import('emojibase-data/ms/messages.json'),
        nb: import('emojibase-data/nb/messages.json'),
        nl: import('emojibase-data/nl/messages.json'),
        pl: import('emojibase-data/pl/messages.json'),
        pt: import('emojibase-data/pt/messages.json'),
        ru: import('emojibase-data/ru/messages.json'),
        sv: import('emojibase-data/sv/messages.json'),
        th: import('emojibase-data/th/messages.json'),
        uk: import('emojibase-data/uk/messages.json'),
        vi: import('emojibase-data/vi/messages.json'),
        zh: import('emojibase-data/zh/messages.json'),
    };
    if (imports[language]) {
        return imports[language];
    }
    return imports['en'];
};
const loadData = (language) => {
    const imports = {
        en: import('emojibase-data/en/data.json').then(m => m.default),
        bn: import('emojibase-data/bn/data.json').then(m => m.default),
        da: import('emojibase-data/da/data.json').then(m => m.default),
        de: import('emojibase-data/de/data.json').then(m => m.default),
        es: import('emojibase-data/es/data.json').then(m => m.default),
        et: import('emojibase-data/et/data.json').then(m => m.default),
        fi: import('emojibase-data/fi/data.json').then(m => m.default),
        fr: import('emojibase-data/fr/data.json').then(m => m.default),
        hi: import('emojibase-data/hi/data.json').then(m => m.default),
        hu: import('emojibase-data/hu/data.json').then(m => m.default),
        it: import('emojibase-data/it/data.json').then(m => m.default),
        ja: import('emojibase-data/ja/data.json').then(m => m.default),
        ko: import('emojibase-data/ko/data.json').then(m => m.default),
        lt: import('emojibase-data/lt/data.json').then(m => m.default),
        ms: import('emojibase-data/ms/data.json').then(m => m.default),
        nb: import('emojibase-data/nb/data.json').then(m => m.default),
        nl: import('emojibase-data/nl/data.json').then(m => m.default),
        pl: import('emojibase-data/pl/data.json').then(m => m.default),
        pt: import('emojibase-data/pt/data.json').then(m => m.default),
        ru: import('emojibase-data/ru/data.json').then(m => m.default),
        sv: import('emojibase-data/sv/data.json').then(m => m.default),
        th: import('emojibase-data/th/data.json').then(m => m.default),
        uk: import('emojibase-data/uk/data.json').then(m => m.default),
        vi: import('emojibase-data/vi/data.json').then(m => m.default),
        zh: import('emojibase-data/zh/data.json').then(m => m.default),
    };
    if (imports[language]) {
        return imports[language];
    }
    return imports['en'];
};
class EmojiPicker {
    _trigger = inject(EMOJI_PICKER_TRIGGER_FOR, { optional: true });
    _localeId = inject(LOCALE_ID);
    language = input('', ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
    selectEmojiLabel = input('Select an emoji...', ...(ngDevMode ? [{ debugName: "selectEmojiLabel" }] : /* istanbul ignore next */ []));
    emojiSelected = output();
    loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
    groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
    _hoveredEmoji = signal(null, ...(ngDevMode ? [{ debugName: "_hoveredEmoji" }] : /* istanbul ignore next */ []));
    _skeletonEmoji = signal(Array(42).fill(1).map((x, y) => x + y), ...(ngDevMode ? [{ debugName: "_skeletonEmoji" }] : /* istanbul ignore next */ []));
    async ngOnInit() {
        let language = this.language();
        if (!language) {
            language = this._localeId.split('-')[0];
        }
        if (loadedEmoji.has(language)) {
            this.groups.set(loadedEmoji.get(language)?.groups);
        }
        else {
            const groupsSubgroups = await loadGroups(language);
            const data = await loadData(language);
            const groups = [];
            const groupKeyMap = new Map();
            groupsSubgroups.groups.forEach((group, index) => {
                if (group.key === 'component') {
                    return;
                }
                groupKeyMap.set(group.key, index);
            });
            groupsSubgroups.groups.forEach((group) => {
                if (group.key === 'component') {
                    return;
                }
                const emoji = data.filter((emoji) => {
                    if (emoji.emoji === '🫩') {
                        return false;
                    }
                    return emoji.group === groupKeyMap.get(group.key);
                });
                groups.push({
                    name: group.message,
                    emoji
                });
            });
            this.groups.set(groups);
            loadedEmoji.set(this.language(), { groups });
        }
        this.loaded.set(true);
    }
    select(emoji) {
        this.emojiSelected.emit(emoji.emoji);
        if (this._trigger) {
            this._trigger.api.close();
        }
    }
    hoverEmoji(emoji) {
        this._hoveredEmoji.set(emoji);
    }
    onMouseLeave() {
        this._hoveredEmoji.set(null);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmojiPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EmojiPicker, isStandalone: true, selector: "ngs-emoji-picker", inputs: { language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, selectEmojiLabel: { classPropertyName: "selectEmojiLabel", publicName: "selectEmojiLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { emojiSelected: "emojiSelected" }, host: { classAttribute: "ngs-emoji-picker" }, exportAs: ["ngsEmojiPicker"], ngImport: i0, template: "@if (loaded()) {\n  <dl class=\"list\" (mouseleave)=\"onMouseLeave()\">\n    @for (group of groups(); track group) {\n      <dt class=\"px-2\">{{ group.name }}</dt>\n      <dd>\n        <div class=\"emoji-container\">\n          @for (emoji of group.emoji; track emoji) {\n            <button class=\"button\"\n                    (click)=\"select(emoji)\"\n                    (mouseover)=\"hoverEmoji(emoji)\">\n              {{ emoji.emoji }}\n            </button>\n          }\n        </div>\n      </dd>\n    }\n  </dl>\n  <div class=\"hovered-emoji\">\n    @if (_hoveredEmoji()) {\n      <span class=\"emoji-preview\">{{ _hoveredEmoji().emoji }}</span>\n      <span class=\"emoji-label\">{{ _hoveredEmoji().label }}</span>\n    } @else {\n      <span class=\"select-message\">{{ selectEmojiLabel() }}</span>\n    }\n  </div>\n} @else {\n  <div class=\"list\">\n    <ngs-skeleton class=\"h-3 skeleton-heading my-2\"/>\n    <div class=\"skeleton-list\">\n      @for (block of _skeletonEmoji(); track block) {\n        <ngs-skeleton class=\"size-8 rounded-sm\"/>\n      }\n    </div>\n  </div>\n  <div class=\"hovered-emoji\">\n    <ngs-skeleton class=\"h-4 w-full\"/>\n  </div>\n}\n", styles: [":host{--ngs-emoji-picker-border: none;--ngs-emoji-picker-shadow: var(--ngs-dropdown-shadow);--ngs-emoji-picker-border-radius: var(--ngs-dropdown-radius);--ngs-emoji-picker-bg: var(--ngs-dropdown-bg);--ngs-emoji-picker-margin: calc(var(--spacing, .25rem) * 2.5);--ngs-emoji-picker-list-width: 278px;--ngs-emoji-picker-list-height: 260px;display:block;width:var(--ngs-emoji-picker-list-width);background:var(--ngs-emoji-picker-bg);border-radius:var(--ngs-emoji-picker-border-radius);border:var(--ngs-emoji-picker-border);box-shadow:var(--ngs-emoji-picker-shadow);animation:.15s ngs-emoji-picker-animation;margin:var(--ngs-emoji-picker-margin) 0;outline:var(--ngs-menu-border, var(--ngs-dropdown-border))}:host ngs-skeleton{--ngs-skeleton-from-bg: var(--ngs-color-surface-container-high);--ngs-skeleton-to-bg: var(--ngs-color-surface-container-highest)}:host .list{padding:calc(var(--spacing, .25rem) * 0) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 2);height:var(--ngs-emoji-picker-list-height);overflow-x:hidden;overflow-y:auto}:host .hovered-emoji{height:calc(var(--spacing, .25rem) * 11);display:flex;padding:0 calc(var(--spacing, .25rem) * 4);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-subtle)}:host .emoji-preview{font-size:var(--ngs-font-size-xl)}:host .emoji-label,:host .select-message{font-size:var(--ngs-font-size-xs)}:host .select-message{color:var(--ngs-color-neutral-500)}:host dt{position:sticky;top:0;left:0;right:0;height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;font-weight:600;font-size:var(--ngs-font-size-sm);background:var(--ngs-emoji-picker-bg)}:host .skeleton-list,:host .emoji-container{display:flex;flex-wrap:wrap}:host .skeleton-list{align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}:host .button{display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex:none;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}:host .button:hover{background:var(--ngs-color-surface-container-highest)}:host .skeleton-button{flex:none}@keyframes ngs-emoji-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(html.dark) ngs-skeleton{--ngs-skeleton-from-bg: var(--ngs-color-surface-container-low);--ngs-skeleton-to-bg: var(--ngs-color-surface-container-lowest)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Skeleton, selector: "ngs-skeleton", inputs: ["roundedFull"], exportAs: ["ngsSkeleton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmojiPicker, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-emoji-picker', exportAs: 'ngsEmojiPicker', imports: [
                        Skeleton
                    ], host: {
                        'class': 'ngs-emoji-picker',
                    }, template: "@if (loaded()) {\n  <dl class=\"list\" (mouseleave)=\"onMouseLeave()\">\n    @for (group of groups(); track group) {\n      <dt class=\"px-2\">{{ group.name }}</dt>\n      <dd>\n        <div class=\"emoji-container\">\n          @for (emoji of group.emoji; track emoji) {\n            <button class=\"button\"\n                    (click)=\"select(emoji)\"\n                    (mouseover)=\"hoverEmoji(emoji)\">\n              {{ emoji.emoji }}\n            </button>\n          }\n        </div>\n      </dd>\n    }\n  </dl>\n  <div class=\"hovered-emoji\">\n    @if (_hoveredEmoji()) {\n      <span class=\"emoji-preview\">{{ _hoveredEmoji().emoji }}</span>\n      <span class=\"emoji-label\">{{ _hoveredEmoji().label }}</span>\n    } @else {\n      <span class=\"select-message\">{{ selectEmojiLabel() }}</span>\n    }\n  </div>\n} @else {\n  <div class=\"list\">\n    <ngs-skeleton class=\"h-3 skeleton-heading my-2\"/>\n    <div class=\"skeleton-list\">\n      @for (block of _skeletonEmoji(); track block) {\n        <ngs-skeleton class=\"size-8 rounded-sm\"/>\n      }\n    </div>\n  </div>\n  <div class=\"hovered-emoji\">\n    <ngs-skeleton class=\"h-4 w-full\"/>\n  </div>\n}\n", styles: [":host{--ngs-emoji-picker-border: none;--ngs-emoji-picker-shadow: var(--ngs-dropdown-shadow);--ngs-emoji-picker-border-radius: var(--ngs-dropdown-radius);--ngs-emoji-picker-bg: var(--ngs-dropdown-bg);--ngs-emoji-picker-margin: calc(var(--spacing, .25rem) * 2.5);--ngs-emoji-picker-list-width: 278px;--ngs-emoji-picker-list-height: 260px;display:block;width:var(--ngs-emoji-picker-list-width);background:var(--ngs-emoji-picker-bg);border-radius:var(--ngs-emoji-picker-border-radius);border:var(--ngs-emoji-picker-border);box-shadow:var(--ngs-emoji-picker-shadow);animation:.15s ngs-emoji-picker-animation;margin:var(--ngs-emoji-picker-margin) 0;outline:var(--ngs-menu-border, var(--ngs-dropdown-border))}:host ngs-skeleton{--ngs-skeleton-from-bg: var(--ngs-color-surface-container-high);--ngs-skeleton-to-bg: var(--ngs-color-surface-container-highest)}:host .list{padding:calc(var(--spacing, .25rem) * 0) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 2) calc(var(--spacing, .25rem) * 2);height:var(--ngs-emoji-picker-list-height);overflow-x:hidden;overflow-y:auto}:host .hovered-emoji{height:calc(var(--spacing, .25rem) * 11);display:flex;padding:0 calc(var(--spacing, .25rem) * 4);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-top:1px solid var(--ngs-color-subtle)}:host .emoji-preview{font-size:var(--ngs-font-size-xl)}:host .emoji-label,:host .select-message{font-size:var(--ngs-font-size-xs)}:host .select-message{color:var(--ngs-color-neutral-500)}:host dt{position:sticky;top:0;left:0;right:0;height:calc(var(--spacing, .25rem) * 10);display:flex;align-items:center;font-weight:600;font-size:var(--ngs-font-size-sm);background:var(--ngs-emoji-picker-bg)}:host .skeleton-list,:host .emoji-container{display:flex;flex-wrap:wrap}:host .skeleton-list{align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}:host .button{display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex:none;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}:host .button:hover{background:var(--ngs-color-surface-container-highest)}:host .skeleton-button{flex:none}@keyframes ngs-emoji-picker-animation{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}:host-context(html.dark) ngs-skeleton{--ngs-skeleton-from-bg: var(--ngs-color-surface-container-low);--ngs-skeleton-to-bg: var(--ngs-color-surface-container-lowest)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], selectEmojiLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectEmojiLabel", required: false }] }], emojiSelected: [{ type: i0.Output, args: ["emojiSelected"] }] } });

class EmojiPickerTriggerForDirective {
    _overlay = inject(Overlay);
    _elementRef = inject(ElementRef);
    _directionality = inject(Directionality, { optional: true });
    _viewContainerRef = inject(ViewContainerRef);
    _injector = inject(Injector);
    _overlayRef = null;
    _destroyRef = inject(DestroyRef);
    for = input.required({ ...(ngDevMode ? { debugName: "for" } : /* istanbul ignore next */ {}), alias: 'ngsEmojiPickerTriggerFor' });
    position = input('below-start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
    opened = output();
    closed = output();
    get api() {
        return {
            close: () => this._close()
        };
    }
    _onClick(event) {
        event.stopPropagation();
        event.preventDefault();
        this.opened.emit();
        this._overlayRef = this._overlay.create(this._getOverlayConfig());
        this._overlayRef.attach(this._getPopoverContentPortal());
        this._subscribeToOutsideClicks();
    }
    _close() {
        this.closed.emit();
        this._overlayRef?.detach();
    }
    _subscribeToOutsideClicks() {
        if (this._overlayRef) {
            this._overlayRef
                .outsidePointerEvents()
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(event => {
                const target = _getEventTarget(event);
                const element = this._elementRef.nativeElement;
                if (target !== element && !element.contains(target)) {
                    this._close();
                }
            });
        }
    }
    _getPopoverContentPortal() {
        const injector = Injector.create({
            providers: [
                {
                    provide: EMOJI_PICKER_TRIGGER_FOR,
                    useValue: this,
                }
            ],
            parent: this._injector
        });
        return new TemplatePortal(this.for(), this._viewContainerRef, null, injector);
    }
    _getOverlayConfig() {
        return new OverlayConfig({
            positionStrategy: this._getOverlayPositionStrategy(),
            scrollStrategy: this._overlay.scrollStrategies.reposition(),
            direction: this._directionality || undefined
        });
    }
    _getOverlayPositionStrategy() {
        return this._overlay
            .position()
            .flexibleConnectedTo(this._elementRef)
            .setOrigin(this._elementRef)
            .withGrowAfterOpen()
            .withPositions(this._getOverlayPositions());
    }
    _getOverlayPositions() {
        return (new PositionManager()).build(this.position());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmojiPickerTriggerForDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: EmojiPickerTriggerForDirective, isStandalone: true, selector: "[ngsEmojiPickerTriggerFor]", inputs: { for: { classPropertyName: "for", publicName: "ngsEmojiPickerTriggerFor", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "_onClick($event)" } }, exportAs: ["ngsEmojiPickerTriggerFor"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EmojiPickerTriggerForDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsEmojiPickerTriggerFor]',
                    exportAs: 'ngsEmojiPickerTriggerFor',
                    host: {
                        '(click)': '_onClick($event)'
                    }
                }]
        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngsEmojiPickerTriggerFor", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { EmojiPicker, EmojiPickerTriggerForDirective };
//# sourceMappingURL=ngstarter-ui-components-emoji-picker.mjs.map
