@acorex/components 21.0.3-next.39 → 21.0.3-next.40

package/fesm2022/acorex-components-conversation-index-3V2b14I0.mjs

@@ -0,0 +1,184 @@
+import * as i1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { output, signal, computed, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+/**
+ * Emoji Tab Component
+ * Emoji picker for composer popup
+ */
+let emojiCategoriesCache = null;
+async function loadEmojiCategories() {
+    if (emojiCategoriesCache) {
+        return emojiCategoriesCache;
+    }
+    const module = await import('./acorex-components-conversation-emoji-categories-C7Gm95V0.mjs');
+    emojiCategoriesCache =
+        module.default ??
+            module;
+    return emojiCategoriesCache;
+}
+class AXConversationEmojiTabComponent {
+    constructor() {
+        /** Emoji selected event */
+        this.itemSelected = output();
+        /** Search query */
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        /** Active category */
+        this.activeCategoryId = signal('smileys', ...(ngDevMode ? [{ debugName: "activeCategoryId" }] : /* istanbul ignore next */ []));
+        /** Categories */
+        this.categories = signal([], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+        /** Filtered emojis */
+        this.filteredEmojis = computed(() => {
+            const query = this.searchQuery().toLowerCase().trim();
+            const categoryId = this.activeCategoryId();
+            if (query) {
+                // Search across all categories by name and keywords
+                return this.categories()
+                    .flatMap((cat) => cat.emojis)
+                    .filter((emoji) => {
+                    const searchText = `${emoji.name} ${emoji.keywords.join(' ')}`.toLowerCase();
+                    return searchText.includes(query);
+                });
+            }
+            else {
+                // Show active category
+                const category = this.categories().find((c) => c.id === categoryId);
+                return category ? category.emojis : [];
+            }
+        }, ...(ngDevMode ? [{ debugName: "filteredEmojis" }] : /* istanbul ignore next */ []));
+        void loadEmojiCategories().then((categories) => this.categories.set(categories));
+    }
+    /** Select category */
+    selectCategory(categoryId) {
+        this.activeCategoryId.set(categoryId);
+        this.searchQuery.set('');
+    }
+    /** Get category CSS classes */
+    getCategoryClasses(categoryId) {
+        const classes = ['category-button'];
+        if (this.activeCategoryId() === categoryId) {
+            classes.push('category-button-active');
+        }
+        return classes.join(' ');
+    }
+    onSearchChange(event) {
+        this.searchQuery.set(event?.value || '');
+    }
+    /** Select emoji */
+    selectEmoji(emoji) {
+        this.itemSelected.emit(emoji);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationEmojiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXConversationEmojiTabComponent, isStandalone: true, selector: "ax-conversation-emoji-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: `
+    <div class="emoji-tab">
+      <!-- Search -->
+      <div class="emoji-search">
+        <ax-search-box
+          [value]="searchQuery()"
+          [placeholder]="'Search emoji...'"
+          (onValueChanged)="onSearchChange($event)"
+        ></ax-search-box>
+      </div>
+
+      <!-- Categories -->
+      <div class="emoji-categories">
+        @for (category of categories(); track category.id) {
+          <button
+            type="button"
+            [class]="getCategoryClasses(category.id)"
+            (click)="selectCategory(category.id)"
+            [attr.aria-label]="category.name"
+            [title]="category.name"
+          >
+            {{ category.icon }}
+          </button>
+        }
+      </div>
+
+      <!-- Emoji Grid -->
+      <div class="emoji-grid">
+        @for (emoji of filteredEmojis(); track emoji.char) {
+          <button
+            type="button"
+            class="emoji-button"
+            (click)="selectEmoji(emoji.char)"
+            [attr.aria-label]="emoji.name"
+            [title]="emoji.name"
+          >
+            {{ emoji.char }}
+          </button>
+        }
+      </div>
+
+      @if (filteredEmojis().length === 0) {
+        <div class="emoji-empty">
+          <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".emoji-tab{display:flex;flex-direction:column;height:100%}.emoji-search{position:sticky;top:0;z-index:10;padding-block:.75rem}.emoji-categories{display:flex;align-items:center;flex-shrink:0;gap:.25rem;margin-bottom:.75rem;padding-bottom:.75rem;overflow-x:auto;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.category-button{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;padding:.25rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.25rem;transition:all .15s;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.category-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.category-button-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,32px);gap:.25rem;max-height:240px}.emoji-button{width:2rem;height:2rem;padding:.25rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.5rem;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.emoji-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.emoji-empty{padding:2rem;text-align:center;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationEmojiTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-emoji-tab', imports: [CommonModule, FormsModule, AXSearchBoxModule, AXTranslationModule], template: `
+    <div class="emoji-tab">
+      <!-- Search -->
+      <div class="emoji-search">
+        <ax-search-box
+          [value]="searchQuery()"
+          [placeholder]="'Search emoji...'"
+          (onValueChanged)="onSearchChange($event)"
+        ></ax-search-box>
+      </div>
+
+      <!-- Categories -->
+      <div class="emoji-categories">
+        @for (category of categories(); track category.id) {
+          <button
+            type="button"
+            [class]="getCategoryClasses(category.id)"
+            (click)="selectCategory(category.id)"
+            [attr.aria-label]="category.name"
+            [title]="category.name"
+          >
+            {{ category.icon }}
+          </button>
+        }
+      </div>
+
+      <!-- Emoji Grid -->
+      <div class="emoji-grid">
+        @for (emoji of filteredEmojis(); track emoji.char) {
+          <button
+            type="button"
+            class="emoji-button"
+            (click)="selectEmoji(emoji.char)"
+            [attr.aria-label]="emoji.name"
+            [title]="emoji.name"
+          >
+            {{ emoji.char }}
+          </button>
+        }
+      </div>
+
+      @if (filteredEmojis().length === 0) {
+        <div class="emoji-empty">
+          <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>
+        </div>
+      }
+    </div>
+  `, styles: [".emoji-tab{display:flex;flex-direction:column;height:100%}.emoji-search{position:sticky;top:0;z-index:10;padding-block:.75rem}.emoji-categories{display:flex;align-items:center;flex-shrink:0;gap:.25rem;margin-bottom:.75rem;padding-bottom:.75rem;overflow-x:auto;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.category-button{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;padding:.25rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.25rem;transition:all .15s;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.category-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.category-button-active{background:rgb(var(--ax-sys-color-primary-lightest-surface));color:rgb(var(--ax-sys-color-on-primary-lightest-surface))}.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,32px);gap:.25rem;max-height:240px}.emoji-button{width:2rem;height:2rem;padding:.25rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.5rem;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.emoji-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.emoji-empty{padding:2rem;text-align:center;opacity:.6}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+/**
+ * Emoji Tab Component
+ */
+
+export { AXConversationEmojiTabComponent };
+//# sourceMappingURL=acorex-components-conversation-index-3V2b14I0.mjs.map

package/fesm2022/acorex-components-conversation-index-3V2b14I0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-index-3V2b14I0.mjs","sources":["../../../../packages/components/conversation/src/lib/plugins/composer/components/emoji-tab/emoji-tab.component.ts","../../../../packages/components/conversation/src/lib/plugins/composer/components/emoji-tab/index.ts"],"sourcesContent":["/**\n * Emoji Tab Component\n * Emoji picker for composer popup\n */\n\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { Component, computed, output, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\ninterface AXConversationEmoji {\n  char: string;\n  name: string;\n  keywords: string[];\n}\n\ninterface AXConversationEmojiCategory {\n  id: string;\n  name: string;\n  icon: string;\n  emojis: AXConversationEmoji[];\n}\n\nlet emojiCategoriesCache: AXConversationEmojiCategory[] | null = null;\n\nasync function loadEmojiCategories(): Promise<AXConversationEmojiCategory[]> {\n  if (emojiCategoriesCache) {\n    return emojiCategoriesCache;\n  }\n  const module = await import('./emoji-categories.json');\n  emojiCategoriesCache =\n    (module as { default: AXConversationEmojiCategory[] }).default ??\n    (module as unknown as AXConversationEmojiCategory[]);\n  return emojiCategoriesCache;\n}\n\n@Component({\n  selector: 'ax-conversation-emoji-tab',\n  imports: [CommonModule, FormsModule, AXSearchBoxModule, AXTranslationModule],\n  template: `\n    <div class=\"emoji-tab\">\n      <!-- Search -->\n      <div class=\"emoji-search\">\n        <ax-search-box\n          [value]=\"searchQuery()\"\n          [placeholder]=\"'Search emoji...'\"\n          (onValueChanged)=\"onSearchChange($event)\"\n        ></ax-search-box>\n      </div>\n\n      <!-- Categories -->\n      <div class=\"emoji-categories\">\n        @for (category of categories(); track category.id) {\n          <button\n            type=\"button\"\n            [class]=\"getCategoryClasses(category.id)\"\n            (click)=\"selectCategory(category.id)\"\n            [attr.aria-label]=\"category.name\"\n            [title]=\"category.name\"\n          >\n            {{ category.icon }}\n          </button>\n        }\n      </div>\n\n      <!-- Emoji Grid -->\n      <div class=\"emoji-grid\">\n        @for (emoji of filteredEmojis(); track emoji.char) {\n          <button\n            type=\"button\"\n            class=\"emoji-button\"\n            (click)=\"selectEmoji(emoji.char)\"\n            [attr.aria-label]=\"emoji.name\"\n            [title]=\"emoji.name\"\n          >\n            {{ emoji.char }}\n          </button>\n        }\n      </div>\n\n      @if (filteredEmojis().length === 0) {\n        <div class=\"emoji-empty\">\n          <p>{{ '@acorex:chat.empty.no-emojis-found' | translate | async }}</p>\n        </div>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      .emoji-tab {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .emoji-search {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        padding-block: 0.75rem;\n      }\n\n      .emoji-categories {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        gap: 0.25rem;\n        margin-bottom: 0.75rem;\n        padding-bottom: 0.75rem;\n        overflow-x: auto;\n        border-bottom: 1px solid rgb(var(--ax-sys-color-border-light-surface));\n      }\n\n      .category-button {\n        height: 2rem;\n        width: 2rem;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        padding: 0.25rem;\n        border: none;\n        background: transparent;\n        border-radius: 0.375rem;\n        cursor: pointer;\n        font-size: 1.25rem;\n        transition: all 0.15s;\n        font-family:\n          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      .category-button:hover {\n        background: rgb(var(--ax-sys-color-light-surface));\n      }\n\n      .category-button-active {\n        background: rgb(var(--ax-sys-color-primary-lightest-surface));\n        color: rgb(var(--ax-sys-color-on-primary-lightest-surface));\n      }\n\n      .emoji-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 32px);\n        gap: 0.25rem;\n        max-height: 240px;\n      }\n\n      .emoji-button {\n        width: 2rem;\n        height: 2rem;\n        padding: 0.25rem;\n        border: none;\n        background: transparent;\n        border-radius: 0.375rem;\n        cursor: pointer;\n        font-size: 1.5rem;\n        transition: all 0.15s;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family:\n          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      .emoji-button:hover {\n        background: rgb(var(--ax-sys-color-light-surface));\n      }\n\n      .emoji-empty {\n        padding: 2rem;\n        text-align: center;\n        opacity: 0.6;\n      }\n    `,\n  ],\n})\nexport class AXConversationEmojiTabComponent {\n  /** Emoji selected event */\n  readonly itemSelected = output<string>();\n\n  /** Search query */\n  readonly searchQuery = signal('');\n\n  /** Active category */\n  private readonly activeCategoryId = signal<string>('smileys');\n\n  /** Categories */\n  readonly categories = signal<AXConversationEmojiCategory[]>([]);\n\n  constructor() {\n    void loadEmojiCategories().then((categories) => this.categories.set(categories));\n  }\n\n  /** Filtered emojis */\n  readonly filteredEmojis = computed(() => {\n    const query = this.searchQuery().toLowerCase().trim();\n    const categoryId = this.activeCategoryId();\n\n    if (query) {\n      // Search across all categories by name and keywords\n      return this.categories()\n        .flatMap((cat) => cat.emojis)\n        .filter((emoji) => {\n          const searchText = `${emoji.name} ${emoji.keywords.join(' ')}`.toLowerCase();\n          return searchText.includes(query);\n        });\n    } else {\n      // Show active category\n      const category = this.categories().find((c) => c.id === categoryId);\n      return category ? category.emojis : [];\n    }\n  });\n\n  /** Select category */\n  selectCategory(categoryId: string): void {\n    this.activeCategoryId.set(categoryId);\n    this.searchQuery.set('');\n  }\n\n  /** Get category CSS classes */\n  getCategoryClasses(categoryId: string): string {\n    const classes = ['category-button'];\n    if (this.activeCategoryId() === categoryId) {\n      classes.push('category-button-active');\n    }\n    return classes.join(' ');\n  }\n\n  onSearchChange(event: { value?: string }): void {\n    this.searchQuery.set(event?.value || '');\n  }\n\n  /** Select emoji */\n  selectEmoji(emoji: string): void {\n    this.itemSelected.emit(emoji);\n  }\n}\n","/**\n * Emoji Tab Component\n */\n\nexport { AXConversationEmojiTabComponent } from './emoji-tab.component';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-conversation-index-MCvfr9Zd.mjs

@@ -0,0 +1,266 @@
+import * as i1$1 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i1 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, output, signal, effect, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { firstValueFrom } from 'rxjs';
+
+/**
+ * Sticker Tab Component
+ * Sticker picker for composer popup
+ */
+const AX_CONVERSATION_STICKER_API_KEY = new InjectionToken('AX_CONVERSATION_STICKER_API_KEY', {
+    providedIn: 'root',
+    factory: () => 'sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh',
+});
+// Sticker categories using Giphy API
+const AX_CONVERSATION_STICKER_CATEGORIES = [
+    { id: 'trending', name: 'Trending', icon: '🔥', searchTerm: 'trending' },
+    { id: 'happy', name: 'Happy', icon: '😊', searchTerm: 'happy' },
+    { id: 'love', name: 'Love', icon: '❤️', searchTerm: 'love' },
+    { id: 'funny', name: 'Funny', icon: '😂', searchTerm: 'funny' },
+    { id: 'cool', name: 'Cool', icon: '😎', searchTerm: 'cool' },
+    { id: 'party', name: 'Party', icon: '🎉', searchTerm: 'party' },
+];
+class AXConversationStickerTabComponent {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.destroyRef = inject(DestroyRef);
+        this.apiKey = inject(AX_CONVERSATION_STICKER_API_KEY);
+        this.itemSelected = output();
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+        this.activeStickers = signal([], ...(ngDevMode ? [{ debugName: "activeStickers" }] : /* istanbul ignore next */ []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.stickerCategories = AX_CONVERSATION_STICKER_CATEGORIES;
+        this.skeletonItems = Array.from({ length: 20 }, (_, i) => i);
+        this.activeCategoryId = signal('trending', ...(ngDevMode ? [{ debugName: "activeCategoryId" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const categoryId = this.activeCategoryId();
+            const query = this.searchQuery();
+            if (query.trim()) {
+                this.searchStickers(query);
+            }
+            else {
+                this.loadStickers(categoryId);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            if (this.searchTimeout)
+                clearTimeout(this.searchTimeout);
+        });
+    }
+    async loadStickers(categoryId) {
+        this.loading.set(true);
+        try {
+            const category = AX_CONVERSATION_STICKER_CATEGORIES.find((c) => c.id === categoryId);
+            if (!category)
+                return;
+            const endpoint = categoryId === 'trending'
+                ? `https://api.giphy.com/v1/stickers/trending?api_key=${this.apiKey}&limit=20`
+                : `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${category.searchTerm}&limit=20`;
+            const response = await firstValueFrom(this.http.get(endpoint));
+            this.activeStickers.set(this.mapGiphyStickers(response, categoryId));
+        }
+        catch (error) {
+            console.error('Failed to load stickers:', error);
+            this.activeStickers.set([]);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    /** Select category */
+    selectPack(categoryId) {
+        this.activeCategoryId.set(categoryId);
+        this.searchQuery.set('');
+    }
+    async searchStickers(query) {
+        if (!query.trim()) {
+            this.loadStickers(this.activeCategoryId());
+            return;
+        }
+        this.loading.set(true);
+        try {
+            const endpoint = `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${encodeURIComponent(query)}&limit=20`;
+            const response = await firstValueFrom(this.http.get(endpoint));
+            this.activeStickers.set(this.mapGiphyStickers(response, 'search'));
+        }
+        catch (error) {
+            console.error('Failed to search stickers:', error);
+            this.activeStickers.set([]);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    onSearchChange(event) {
+        const query = event?.value || '';
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchQuery.set(query);
+        }, 500);
+    }
+    /** Get category CSS classes */
+    getPackClasses(categoryId) {
+        const classes = ['pack-button'];
+        if (this.activeCategoryId() === categoryId) {
+            classes.push('pack-button-active');
+        }
+        return classes.join(' ');
+    }
+    mapGiphyStickers(response, packId) {
+        if (!response?.data)
+            return [];
+        return response.data.map((item) => ({
+            type: 'sticker',
+            id: item.id,
+            packId,
+            url: item.images.fixed_height.url,
+            animated: item.images.fixed_height.url.endsWith('.gif'),
+            width: Number(item.images.fixed_height.width),
+            height: Number(item.images.fixed_height.height),
+            emoji: item.title || 'Sticker',
+        }));
+    }
+    selectSticker(sticker) {
+        this.itemSelected.emit(sticker);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationStickerTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXConversationStickerTabComponent, isStandalone: true, selector: "ax-conversation-sticker-tab", outputs: { itemSelected: "itemSelected" }, ngImport: i0, template: `
+    <div class="sticker-tab">
+      <!-- Search -->
+      <div class="sticker-search">
+        <ax-search-box
+          [value]="searchQuery()"
+          [placeholder]="'Search stickers...'"
+          (onValueChanged)="onSearchChange($event)"
+        ></ax-search-box>
+      </div>
+
+      <!-- Categories -->
+      <div class="sticker-packs">
+        @for (category of stickerCategories; track category.id) {
+          <button
+            type="button"
+            [class]="getPackClasses(category.id)"
+            (click)="selectPack(category.id)"
+            [attr.aria-label]="category.name"
+            [title]="category.name"
+          >
+            {{ category.icon }}
+          </button>
+        }
+      </div>
+
+      <!-- Loading State -->
+      @if (loading()) {
+        <div class="sticker-grid">
+          @for (i of skeletonItems; track i) {
+            <div class="sticker-skeleton">
+              <ax-skeleton [animated]="true" class="skeleton-item"></ax-skeleton>
+            </div>
+          }
+        </div>
+      }
+
+      <!-- Stickers Grid -->
+      @if (!loading() && activeStickers().length > 0) {
+        <div class="sticker-grid">
+          @for (sticker of activeStickers(); track sticker.id) {
+            <button
+              type="button"
+              class="sticker-button"
+              (click)="selectSticker(sticker)"
+              [attr.aria-label]="sticker.emoji"
+            >
+              <img [src]="sticker.url" [alt]="sticker.emoji || 'Sticker'" class="sticker-image" loading="lazy" />
+            </button>
+          }
+        </div>
+      }
+
+      <!-- Empty State -->
+      @if (!loading() && activeStickers().length === 0) {
+        <div class="sticker-empty">
+          <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".sticker-tab{display:flex;flex-direction:column;height:100%}.sticker-search{position:sticky;top:0;z-index:10;padding-block:.75rem}.sticker-packs{display:flex;gap:.25rem;padding-top:.75rem;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.pack-button{width:3rem;height:3rem;padding:.5rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.25rem;transition:all .15s;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pack-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.pack-button-active{background:rgb(var(--ax-sys-color-primary-lightest-surface))}.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;overflow-y:auto;max-height:240px}.sticker-button{padding:.5rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;transition:all .15s;aspect-ratio:1}.sticker-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.sticker-image{width:100%;height:100%;object-fit:contain}.sticker-empty{padding:2rem;text-align:center;opacity:.6}.sticker-skeleton{height:5rem;aspect-ratio:1;border-radius:.375rem;overflow:hidden}.skeleton-item{width:100%;height:100%;border-radius:.375rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXConversationStickerTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-sticker-tab', imports: [CommonModule, FormsModule, AXSkeletonModule, AXSearchBoxModule, AXTranslationModule], template: `
+    <div class="sticker-tab">
+      <!-- Search -->
+      <div class="sticker-search">
+        <ax-search-box
+          [value]="searchQuery()"
+          [placeholder]="'Search stickers...'"
+          (onValueChanged)="onSearchChange($event)"
+        ></ax-search-box>
+      </div>
+
+      <!-- Categories -->
+      <div class="sticker-packs">
+        @for (category of stickerCategories; track category.id) {
+          <button
+            type="button"
+            [class]="getPackClasses(category.id)"
+            (click)="selectPack(category.id)"
+            [attr.aria-label]="category.name"
+            [title]="category.name"
+          >
+            {{ category.icon }}
+          </button>
+        }
+      </div>
+
+      <!-- Loading State -->
+      @if (loading()) {
+        <div class="sticker-grid">
+          @for (i of skeletonItems; track i) {
+            <div class="sticker-skeleton">
+              <ax-skeleton [animated]="true" class="skeleton-item"></ax-skeleton>
+            </div>
+          }
+        </div>
+      }
+
+      <!-- Stickers Grid -->
+      @if (!loading() && activeStickers().length > 0) {
+        <div class="sticker-grid">
+          @for (sticker of activeStickers(); track sticker.id) {
+            <button
+              type="button"
+              class="sticker-button"
+              (click)="selectSticker(sticker)"
+              [attr.aria-label]="sticker.emoji"
+            >
+              <img [src]="sticker.url" [alt]="sticker.emoji || 'Sticker'" class="sticker-image" loading="lazy" />
+            </button>
+          }
+        </div>
+      }
+
+      <!-- Empty State -->
+      @if (!loading() && activeStickers().length === 0) {
+        <div class="sticker-empty">
+          <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>
+        </div>
+      }
+    </div>
+  `, styles: [".sticker-tab{display:flex;flex-direction:column;height:100%}.sticker-search{position:sticky;top:0;z-index:10;padding-block:.75rem}.sticker-packs{display:flex;gap:.25rem;padding-top:.75rem;margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.pack-button{width:3rem;height:3rem;padding:.5rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;font-size:1.25rem;transition:all .15s;font-family:\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\",\"Apple Color Emoji\",Twemoji Mozilla,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pack-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.pack-button-active{background:rgb(var(--ax-sys-color-primary-lightest-surface))}.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;overflow-y:auto;max-height:240px}.sticker-button{padding:.5rem;border:none;background:transparent;border-radius:.375rem;cursor:pointer;transition:all .15s;aspect-ratio:1}.sticker-button:hover{background:rgb(var(--ax-sys-color-light-surface))}.sticker-image{width:100%;height:100%;object-fit:contain}.sticker-empty{padding:2rem;text-align:center;opacity:.6}.sticker-skeleton{height:5rem;aspect-ratio:1;border-radius:.375rem;overflow:hidden}.skeleton-item{width:100%;height:100%;border-radius:.375rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+export { AXConversationStickerTabComponent, AX_CONVERSATION_STICKER_API_KEY };
+//# sourceMappingURL=acorex-components-conversation-index-MCvfr9Zd.mjs.map

package/fesm2022/acorex-components-conversation-index-MCvfr9Zd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-conversation-index-MCvfr9Zd.mjs","sources":["../../../../packages/components/conversation/src/lib/plugins/composer/components/sticker-tab/sticker-tab.component.ts"],"sourcesContent":["/**\n * Sticker Tab Component\n * Sticker picker for composer popup\n */\n\nimport { AXSearchBoxModule } from '@acorex/components/search-box';\nimport { AXSkeletonModule } from '@acorex/components/skeleton';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { Component, DestroyRef, InjectionToken, effect, inject, output, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { firstValueFrom } from 'rxjs';\nimport { AXConversationStickerPayload } from '../../../../models';\n\ninterface AXConversationGiphyImage {\n  url: string;\n  width: string;\n  height: string;\n}\n\ninterface AXConversationGiphySticker {\n  id: string;\n  title: string;\n  images: {\n    fixed_height: AXConversationGiphyImage;\n  };\n}\n\ninterface AXConversationGiphyResponse {\n  data: AXConversationGiphySticker[];\n}\n\nexport const AX_CONVERSATION_STICKER_API_KEY = new InjectionToken<string>('AX_CONVERSATION_STICKER_API_KEY', {\n  providedIn: 'root',\n  factory: () => 'sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh',\n});\n\ninterface AXConversationStickerCategory {\n  id: string;\n  name: string;\n  icon: string;\n  searchTerm: string;\n}\n\n// Sticker categories using Giphy API\nconst AX_CONVERSATION_STICKER_CATEGORIES: AXConversationStickerCategory[] = [\n  { id: 'trending', name: 'Trending', icon: '🔥', searchTerm: 'trending' },\n  { id: 'happy', name: 'Happy', icon: '😊', searchTerm: 'happy' },\n  { id: 'love', name: 'Love', icon: '❤️', searchTerm: 'love' },\n  { id: 'funny', name: 'Funny', icon: '😂', searchTerm: 'funny' },\n  { id: 'cool', name: 'Cool', icon: '😎', searchTerm: 'cool' },\n  { id: 'party', name: 'Party', icon: '🎉', searchTerm: 'party' },\n];\n\n@Component({\n  selector: 'ax-conversation-sticker-tab',\n  imports: [CommonModule, FormsModule, AXSkeletonModule, AXSearchBoxModule, AXTranslationModule],\n  template: `\n    <div class=\"sticker-tab\">\n      <!-- Search -->\n      <div class=\"sticker-search\">\n        <ax-search-box\n          [value]=\"searchQuery()\"\n          [placeholder]=\"'Search stickers...'\"\n          (onValueChanged)=\"onSearchChange($event)\"\n        ></ax-search-box>\n      </div>\n\n      <!-- Categories -->\n      <div class=\"sticker-packs\">\n        @for (category of stickerCategories; track category.id) {\n          <button\n            type=\"button\"\n            [class]=\"getPackClasses(category.id)\"\n            (click)=\"selectPack(category.id)\"\n            [attr.aria-label]=\"category.name\"\n            [title]=\"category.name\"\n          >\n            {{ category.icon }}\n          </button>\n        }\n      </div>\n\n      <!-- Loading State -->\n      @if (loading()) {\n        <div class=\"sticker-grid\">\n          @for (i of skeletonItems; track i) {\n            <div class=\"sticker-skeleton\">\n              <ax-skeleton [animated]=\"true\" class=\"skeleton-item\"></ax-skeleton>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Stickers Grid -->\n      @if (!loading() && activeStickers().length > 0) {\n        <div class=\"sticker-grid\">\n          @for (sticker of activeStickers(); track sticker.id) {\n            <button\n              type=\"button\"\n              class=\"sticker-button\"\n              (click)=\"selectSticker(sticker)\"\n              [attr.aria-label]=\"sticker.emoji\"\n            >\n              <img [src]=\"sticker.url\" [alt]=\"sticker.emoji || 'Sticker'\" class=\"sticker-image\" loading=\"lazy\" />\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Empty State -->\n      @if (!loading() && activeStickers().length === 0) {\n        <div class=\"sticker-empty\">\n          <p>{{ '@acorex:chat.empty.no-stickers-available' | translate | async }}</p>\n        </div>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      .sticker-tab {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .sticker-search {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        padding-block: 0.75rem;\n      }\n\n      .sticker-packs {\n        display: flex;\n        gap: 0.25rem;\n        padding-top: 0.75rem;\n        margin-bottom: 0.75rem;\n        padding-bottom: 0.75rem;\n        border-bottom: 1px solid rgb(var(--ax-sys-color-border-light-surface));\n      }\n\n      .pack-button {\n        width: 3rem;\n        height: 3rem;\n        padding: 0.5rem;\n        border: none;\n        background: transparent;\n        border-radius: 0.375rem;\n        cursor: pointer;\n        font-size: 1.25rem;\n        transition: all 0.15s;\n        font-family:\n          'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Apple Color Emoji', 'Twemoji Mozilla', sans-serif;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      .pack-button:hover {\n        background: rgb(var(--ax-sys-color-light-surface));\n      }\n\n      .pack-button-active {\n        background: rgb(var(--ax-sys-color-primary-lightest-surface));\n      }\n\n      .sticker-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 0.5rem;\n        overflow-y: auto;\n        max-height: 240px;\n      }\n\n      .sticker-button {\n        padding: 0.5rem;\n        border: none;\n        background: transparent;\n        border-radius: 0.375rem;\n        cursor: pointer;\n        transition: all 0.15s;\n        aspect-ratio: 1;\n      }\n\n      .sticker-button:hover {\n        background: rgb(var(--ax-sys-color-light-surface));\n      }\n\n      .sticker-image {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n\n      .sticker-empty {\n        padding: 2rem;\n        text-align: center;\n        opacity: 0.6;\n      }\n\n      .sticker-skeleton {\n        height: 5rem;\n        aspect-ratio: 1;\n        border-radius: 0.375rem;\n        overflow: hidden;\n      }\n\n      .skeleton-item {\n        width: 100%;\n        height: 100%;\n        border-radius: 0.375rem;\n      }\n    `,\n  ],\n})\nexport class AXConversationStickerTabComponent {\n  private readonly http = inject(HttpClient);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly apiKey = inject(AX_CONVERSATION_STICKER_API_KEY);\n\n  readonly itemSelected = output<AXConversationStickerPayload>();\n  readonly searchQuery = signal('');\n  readonly activeStickers = signal<AXConversationStickerPayload[]>([]);\n  readonly loading = signal(false);\n  readonly stickerCategories = AX_CONVERSATION_STICKER_CATEGORIES;\n  readonly skeletonItems = Array.from({ length: 20 }, (_, i) => i);\n\n  private readonly activeCategoryId = signal<string>('trending');\n  private searchTimeout?: ReturnType<typeof setTimeout>;\n\n  constructor() {\n    effect(() => {\n      const categoryId = this.activeCategoryId();\n      const query = this.searchQuery();\n\n      if (query.trim()) {\n        this.searchStickers(query);\n      } else {\n        this.loadStickers(categoryId);\n      }\n    });\n\n    this.destroyRef.onDestroy(() => {\n      if (this.searchTimeout) clearTimeout(this.searchTimeout);\n    });\n  }\n\n  private async loadStickers(categoryId: string): Promise<void> {\n    this.loading.set(true);\n    try {\n      const category = AX_CONVERSATION_STICKER_CATEGORIES.find((c) => c.id === categoryId);\n      if (!category) return;\n\n      const endpoint =\n        categoryId === 'trending'\n          ? `https://api.giphy.com/v1/stickers/trending?api_key=${this.apiKey}&limit=20`\n          : `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${category.searchTerm}&limit=20`;\n\n      const response = await firstValueFrom(this.http.get<AXConversationGiphyResponse>(endpoint));\n      this.activeStickers.set(this.mapGiphyStickers(response, categoryId));\n    } catch (error) {\n      console.error('Failed to load stickers:', error);\n      this.activeStickers.set([]);\n    } finally {\n      this.loading.set(false);\n    }\n  }\n\n  /** Select category */\n  selectPack(categoryId: string): void {\n    this.activeCategoryId.set(categoryId);\n    this.searchQuery.set('');\n  }\n\n  private async searchStickers(query: string): Promise<void> {\n    if (!query.trim()) {\n      this.loadStickers(this.activeCategoryId());\n      return;\n    }\n\n    this.loading.set(true);\n    try {\n      const endpoint = `https://api.giphy.com/v1/stickers/search?api_key=${this.apiKey}&q=${encodeURIComponent(query)}&limit=20`;\n      const response = await firstValueFrom(this.http.get<AXConversationGiphyResponse>(endpoint));\n      this.activeStickers.set(this.mapGiphyStickers(response, 'search'));\n    } catch (error) {\n      console.error('Failed to search stickers:', error);\n      this.activeStickers.set([]);\n    } finally {\n      this.loading.set(false);\n    }\n  }\n\n  onSearchChange(event: { value?: string }): void {\n    const query = event?.value || '';\n\n    if (this.searchTimeout) {\n      clearTimeout(this.searchTimeout);\n    }\n\n    this.searchTimeout = setTimeout(() => {\n      this.searchQuery.set(query);\n    }, 500);\n  }\n\n  /** Get category CSS classes */\n  getPackClasses(categoryId: string): string {\n    const classes = ['pack-button'];\n    if (this.activeCategoryId() === categoryId) {\n      classes.push('pack-button-active');\n    }\n    return classes.join(' ');\n  }\n\n  private mapGiphyStickers(response: AXConversationGiphyResponse, packId: string): AXConversationStickerPayload[] {\n    if (!response?.data) return [];\n    return response.data.map((item) => ({\n      type: 'sticker' as const,\n      id: item.id,\n      packId,\n      url: item.images.fixed_height.url,\n      animated: item.images.fixed_height.url.endsWith('.gif'),\n      width: Number(item.images.fixed_height.width),\n      height: Number(item.images.fixed_height.height),\n      emoji: item.title || 'Sticker',\n    }));\n  }\n\n  selectSticker(sticker: AXConversationStickerPayload): void {\n    this.itemSelected.emit(sticker);\n  }\n}\n"],"names":["i3","i4"],"mappings":"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"}