@acorex/components 22.2.10 → 22.2.12

package/fesm2022/acorex-components-message-status.mjs

@@ -0,0 +1,71 @@
+import * as i0 from '@angular/core';
+import { input, inject, signal, effect, Component, NgModule } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+const check = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z" fill="#09090B"/>
+</svg>`;
+const checkCheck = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929C1.68342 10.9024 2.31658 10.9024 2.70711 11.2929L7 15.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289Z" fill="#09090B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.7071 9.29289C23.0976 9.68342 23.0976 10.3166 22.7071 10.7071L15.2071 18.2071C14.8166 18.5976 14.1834 18.5976 13.7929 18.2071L12.2929 16.7071C11.9024 16.3166 11.9024 15.6834 12.2929 15.2929C12.6834 14.9024 13.3166 14.9024 13.7071 15.2929L14.5 16.0858L21.2929 9.29289C21.6834 8.90237 22.3166 8.90237 22.7071 9.29289Z" fill="#09090B"/>
+</svg>
+`;
+const timer = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H10C9.44772 3 9 2.55228 9 2Z" fill="#09090B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071C10.9024 14.3166 10.9024 13.6834 11.2929 13.2929L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z" fill="#09090B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7C8.13401 7 5 10.134 5 14C5 17.866 8.13401 21 12 21C15.866 21 19 17.866 19 14C19 10.134 15.866 7 12 7ZM3 14C3 9.02944 7.02944 5 12 5C16.9706 5 21 9.02944 21 14C21 18.9706 16.9706 23 12 23C7.02944 23 3 18.9706 3 14Z" fill="#09090B"/>
+</svg>
+`;
+
+class AXMessageStatusComponent {
+    constructor() {
+        this.status = input('pending', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.sanetizer = inject(DomSanitizer);
+        this.htmlContent = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "htmlContent" }] : /* istanbul ignore next */ []));
+        this.#eff = effect(() => {
+            switch (this.status()) {
+                case 'pending':
+                    this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(timer));
+                    return;
+                case 'send':
+                    this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(check));
+                    return;
+                case 'delivered':
+                    this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(checkCheck));
+                    return;
+                default:
+                    this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(checkCheck));
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMessageStatusComponent, isStandalone: true, selector: "ax-message-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<i [innerHTML]=\"htmlContent()\"></i>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-message-status', imports: [], template: "<i [innerHTML]=\"htmlContent()\"></i>\n" }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }] } });
+
+class AXMessageStatusModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXMessageStatusComponent, AXMessageStatusModule };
+//# sourceMappingURL=acorex-components-message-status.mjs.map

package/fesm2022/acorex-components-message-status.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-message-status.mjs","sources":["../../../../packages/components/message-status/src/lib/icons.ts","../../../../packages/components/message-status/src/lib/message-status.component.ts","../../../../packages/components/message-status/src/lib/message-status.component.html","../../../../packages/components/message-status/src/lib/message-status.module.ts","../../../../packages/components/message-status/src/acorex-components-message-status.ts"],"sourcesContent":["export const check = `<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20.7071 5.29289C21.0976 5.68342 21.0976 6.31658 20.7071 6.70711L9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L19.2929 5.29289C19.6834 4.90237 20.3166 4.90237 20.7071 5.29289Z\" fill=\"#09090B\"/>\n</svg>`;\nexport const checkCheck = `<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929C1.68342 10.9024 2.31658 10.9024 2.70711 11.2929L7 15.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289Z\" fill=\"#09090B\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M22.7071 9.29289C23.0976 9.68342 23.0976 10.3166 22.7071 10.7071L15.2071 18.2071C14.8166 18.5976 14.1834 18.5976 13.7929 18.2071L12.2929 16.7071C11.9024 16.3166 11.9024 15.6834 12.2929 15.2929C12.6834 14.9024 13.3166 14.9024 13.7071 15.2929L14.5 16.0858L21.2929 9.29289C21.6834 8.90237 22.3166 8.90237 22.7071 9.29289Z\" fill=\"#09090B\"/>\n</svg>\n`;\nexport const timer = `<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9 2C9 1.44772 9.44772 1 10 1H14C14.5523 1 15 1.44772 15 2C15 2.55228 14.5523 3 14 3H10C9.44772 3 9 2.55228 9 2Z\" fill=\"#09090B\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.7071 10.2929C16.0976 10.6834 16.0976 11.3166 15.7071 11.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071C10.9024 14.3166 10.9024 13.6834 11.2929 13.2929L14.2929 10.2929C14.6834 9.90237 15.3166 9.90237 15.7071 10.2929Z\" fill=\"#09090B\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 7C8.13401 7 5 10.134 5 14C5 17.866 8.13401 21 12 21C15.866 21 19 17.866 19 14C19 10.134 15.866 7 12 7ZM3 14C3 9.02944 7.02944 5 12 5C16.9706 5 21 9.02944 21 14C21 18.9706 16.9706 23 12 23C7.02944 23 3 18.9706 3 14Z\" fill=\"#09090B\"/>\n</svg>\n`;\n","import { Component, effect, inject, input, signal } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { check, checkCheck, timer } from './icons';\nimport { MessageStatus } from './message-status.modal';\n\n@Component({\n  selector: 'ax-message-status',\n  templateUrl: './message-status.component.html',\n  imports: [],\n})\nexport class AXMessageStatusComponent {\n  status = input<MessageStatus>('pending');\n\n  private sanetizer = inject(DomSanitizer);\n  protected htmlContent = signal<SafeHtml>(null);\n\n  #eff = effect(() => {\n    switch (this.status()) {\n      case 'pending':\n        this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(timer));\n        return;\n      case 'send':\n        this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(check));\n        return;\n      case 'delivered':\n        this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(checkCheck));\n        return;\n      default:\n        this.htmlContent.set(this.sanetizer.bypassSecurityTrustHtml(checkCheck));\n    }\n  });\n}\n","<i [innerHTML]=\"htmlContent()\"></i>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [CommonModule],\n})\nexport class AXMessageStatusModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAO,MAAM,KAAK,GAAG,CAAA;;OAEd;AACA,MAAM,UAAU,GAAG,CAAA;;;;CAIzB;AACM,MAAM,KAAK,GAAG,CAAA;;;;;CAKpB;;MCHY,wBAAwB,CAAA;AALrC,IAAA,WAAA,GAAA;QAME,IAAA,CAAA,MAAM,GAAG,KAAK,CAAgB,SAAS;mFAAC;AAEhC,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;QAC9B,IAAA,CAAA,WAAW,GAAG,MAAM,CAAW,IAAI;wFAAC;AAE9C,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,MAAK;AACjB,YAAA,QAAQ,IAAI,CAAC,MAAM,EAAE;AACnB,gBAAA,KAAK,SAAS;AACZ,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACnE;AACF,gBAAA,KAAK,MAAM;AACT,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACnE;AACF,gBAAA,KAAK,WAAW;AACd,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;oBACxE;AACF,gBAAA;AACE,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,UAAU,CAAC,CAAC;;QAE9E,CAAC;iFAAC;AACH,IAAA;AAfC,IAAA,IAAI;8GANO,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,oNCVrC,yCACA,EAAA,CAAA,CAAA;;2FDSa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBALpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WAEpB,EAAE,EAAA,QAAA,EAAA,yCAAA,EAAA;;;MEFA,qBAAqB,CAAA;8GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAFtB,YAAY,CAAA,EAAA,CAAA,CAAA;AAEX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAFtB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAEX,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAHjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/acorex-components-message-time.mjs

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { input, Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class AXMessageTimeComponent {
+    constructor() {
+        this.time = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "time" }] : /* istanbul ignore next */ []));
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMessageTimeComponent, isStandalone: true, selector: "ax-message-time", inputs: { time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span class=\"ax-message-time\">\n  {{ time() }}\n</span>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-message-time', template: "<span class=\"ax-message-time\">\n  {{ time() }}\n</span>\n" }]
+        }], ctorParameters: () => [], propDecorators: { time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }] } });
+
+class AXMessageTimeModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXMessageTimeComponent, AXMessageTimeModule };
+//# sourceMappingURL=acorex-components-message-time.mjs.map

package/fesm2022/acorex-components-message-time.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-message-time.mjs","sources":["../../../../packages/components/message-time/src/lib/message-time.component.ts","../../../../packages/components/message-time/src/lib/message-time.component.html","../../../../packages/components/message-time/src/lib/message-time.module.ts","../../../../packages/components/message-time/src/acorex-components-message-time.ts"],"sourcesContent":["import { Component, input, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'ax-message-time',\n  templateUrl: 'message-time.component.html',\n})\nexport class AXMessageTimeComponent implements OnInit {\n  constructor() {}\n\n  time = input<string>();\n\n  ngOnInit() {}\n}\n","<span class=\"ax-message-time\">\n  {{ time() }}\n</span>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\n@NgModule({\n  imports: [CommonModule],\n})\nexport class AXMessageTimeModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAMa,sBAAsB,CAAA;AACjC,IAAA,WAAA,GAAA;AAEA,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAAU;IAFP;AAIf,IAAA,QAAQ,KAAI;8GALD,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,4MCNnC,6DAGA,EAAA,CAAA,CAAA;;2FDGa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;+BACE,iBAAiB,EAAA,QAAA,EAAA,6DAAA,EAAA;;;MEGhB,mBAAmB,CAAA;8GAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAFpB,YAAY,CAAA,EAAA,CAAA,CAAA;AAEX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAFpB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAEX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAH/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACxB,iBAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/acorex-components-message.mjs

@@ -0,0 +1,120 @@
+import * as i0 from '@angular/core';
+import { input, output, viewChild, computed, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { AXComponent } from '@acorex/cdk/common';
+import { AXAvatarComponent } from '@acorex/components/avatar';
+import { AXBubbleComponent } from '@acorex/components/bubble';
+import { AXDecoratorGenericComponent } from '@acorex/components/decorators';
+import { AXImageComponent } from '@acorex/components/image';
+import { AXContextMenuComponent } from '@acorex/components/menu';
+import { NgTemplateOutlet } from '@angular/common';
+import { cloneDeep } from 'lodash-es';
+import { AXInlineReactionComponent } from '@acorex/components/inline-reaction';
+import { AXMessageStatusComponent } from '@acorex/components/message-status';
+import { AXMessageTimeComponent } from '@acorex/components/message-time';
+
+class AXMessageComponent {
+    constructor() {
+        this.templateData = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "templateData" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.layout = input('ping-pong', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Own message: aligned end in ping-pong and styled via inner ax-bubble. */
+        this.isown = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isown" }] : /* istanbul ignore next */ []));
+        this.text = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.avatarSrc = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "avatarSrc" }] : /* istanbul ignore next */ []));
+        this.avatarSize = input(32, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "avatarSize" }] : /* istanbul ignore next */ []));
+        this.showAvatar = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAvatar" }] : /* istanbul ignore next */ []));
+        this.status = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        this.time = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []));
+        /** Quick reactions shown in the context menu header. */
+        this.quickReactions = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "quickReactions" }] : /* istanbul ignore next */ []));
+        /** Context menu action items. Parent can also append via `contextMenuOpening`. */
+        this.contextMenuItems = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contextMenuItems" }] : /* istanbul ignore next */ []));
+        /** Whether right-click context menu is enabled on the bubble. */
+        this.contextMenuEnabled = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contextMenuEnabled" }] : /* istanbul ignore next */ []));
+        /** Emoji size in pixels inside the context menu reaction bar. */
+        this.reactionSize = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reactionSize" }] : /* istanbul ignore next */ []));
+        /** Emits when a quick reaction or picker emoji is selected from the context menu. */
+        this.reactionSelected = output();
+        /** Emits while the context menu opens so the parent can customize `event.items`. */
+        this.contextMenuOpening = output();
+        /** Emits when a context menu action item is clicked. */
+        this.menuItemClick = output();
+        this.contextMenu = viewChild(AXContextMenuComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        this.hasTemplate = computed(() => !!this.itemTemplate(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTemplate" }] : /* istanbul ignore next */ []));
+        this.showReactionBar = computed(() => this.quickReactions().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showReactionBar" }] : /* istanbul ignore next */ []));
+        this.hostClass = computed(() => {
+            const layout = this.layout();
+            if (layout === 'stack') {
+                return 'ax-message ax-message-stack';
+            }
+            return `ax-message ax-message-ping-pong ax-message-${this.isown() ? 'end' : 'start'}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    }
+    onContextMenuOpening(event) {
+        event.items.push(...cloneDeep(this.contextMenuItems()));
+        this.contextMenuOpening.emit(event);
+    }
+    onReactionSelected(emoji) {
+        this.reactionSelected.emit(emoji);
+        this.contextMenu()?.close();
+    }
+    onMenuItemClick(event) {
+        this.menuItemClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMessageComponent, isStandalone: true, selector: "ax-message", inputs: { templateData: { classPropertyName: "templateData", publicName: "templateData", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, isown: { classPropertyName: "isown", publicName: "isown", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, avatarSrc: { classPropertyName: "avatarSrc", publicName: "avatarSrc", isSignal: true, isRequired: false, transformFunction: null }, avatarSize: { classPropertyName: "avatarSize", publicName: "avatarSize", isSignal: true, isRequired: false, transformFunction: null }, showAvatar: { classPropertyName: "showAvatar", publicName: "showAvatar", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null }, quickReactions: { classPropertyName: "quickReactions", publicName: "quickReactions", isSignal: true, isRequired: false, transformFunction: null }, contextMenuItems: { classPropertyName: "contextMenuItems", publicName: "contextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, contextMenuEnabled: { classPropertyName: "contextMenuEnabled", publicName: "contextMenuEnabled", isSignal: true, isRequired: false, transformFunction: null }, reactionSize: { classPropertyName: "reactionSize", publicName: "reactionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reactionSelected: "reactionSelected", contextMenuOpening: "contextMenuOpening", menuItemClick: "menuItemClick" }, host: { properties: { "class": "hostClass()" } }, providers: [{ provide: AXComponent, useExisting: AXMessageComponent }], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: AXContextMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <div class=\"ax-message-body\">\n    @if (showAvatar()) {\n      <ax-avatar class=\"ax-message-avatar\" [size]=\"avatarSize()\">\n        @if (avatarSrc()) {\n          <ax-image [src]=\"avatarSrc()!\" [alt]=\"''\" />\n        }\n      </ax-avatar>\n    }\n\n    <div class=\"ax-message-bubble-target\" #bubbleTarget>\n      <ax-bubble [isown]=\"isown()\">\n        @if (text()) {\n          <ax-content>\n            <span class=\"ax-message-text\">\n              {{ text() }}\n            </span>\n          </ax-content>\n        }\n\n        <ng-content />\n\n        @if (status() || time()) {\n          <ax-footer class=\"ax-message-status-container\">\n            <ax-message-status [status]=\"status()!\" />\n            <ax-message-time [time]=\"time()\"></ax-message-time>\n          </ax-footer>\n        }\n      </ax-bubble>\n    </div>\n\n    @if (contextMenuEnabled()) {\n      <ax-context-menu\n        [target]=\"bubbleTarget\"\n        (onOpening)=\"onContextMenuOpening($event)\"\n        (onItemClick)=\"onMenuItemClick($event)\"\n      >\n        @if (showReactionBar()) {\n          <ax-header>\n            <ax-inline-reaction\n              [emojis]=\"quickReactions()\"\n              [size]=\"reactionSize()\"\n              [showExpanded]=\"true\"\n              (selected)=\"onReactionSelected($event)\"\n            />\n          </ax-header>\n        }\n      </ax-context-menu>\n    }\n  </div>\n}\n", styles: ["@layer components{ax-message{--ax-comp-bubble-radius: var(--ax-sys-border-radius);--ax-comp-bubble-tail-self: 0;display:flex;width:100%;max-width:100%}ax-message.ax-message-ping-pong.ax-message-start{justify-content:flex-start}ax-message.ax-message-ping-pong.ax-message-end{justify-content:flex-end}ax-message.ax-message-ping-pong .ax-message-body{display:inline-flex;max-width:85%;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-message.ax-message-ping-pong.ax-message-start .ax-message-body{flex-direction:row}ax-message.ax-message-ping-pong.ax-message-end .ax-message-body{flex-direction:row-reverse}ax-message.ax-message-stack{justify-content:flex-end}ax-message.ax-message-stack ax-bubble{border-radius:var(--ax-comp-bubble-radius);border-end-end-radius:var(--ax-comp-bubble-tail-self)}ax-message.ax-message-stack .ax-message-body{display:inline-flex;max-width:85%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:row-reverse;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-message .ax-message-avatar{flex-shrink:0;align-self:flex-end}ax-message .ax-message-text{overflow-wrap:break-word;white-space:pre-wrap}ax-message .ax-message-status-container{display:flex;justify-content:flex-end}ax-message .ax-message-bubble-target{min-width:calc(var(--spacing, .25rem) * 0)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "component", type: AXBubbleComponent, selector: "ax-bubble", inputs: ["isown", "templateData", "itemTemplate"] }, { kind: "component", type: AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "component", type: AXMessageStatusComponent, selector: "ax-message-status", inputs: ["status"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXMessageTimeComponent, selector: "ax-message-time", inputs: ["time"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "component", type: AXInlineReactionComponent, selector: "ax-inline-reaction", inputs: ["emojis", "size", "maxVisible", "showExpanded", "closeOnClickOutside"], outputs: ["selected", "expandedChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-message', imports: [
+                        NgTemplateOutlet,
+                        AXAvatarComponent,
+                        AXBubbleComponent,
+                        AXImageComponent,
+                        AXMessageStatusComponent,
+                        AXDecoratorGenericComponent,
+                        AXMessageTimeComponent,
+                        AXContextMenuComponent,
+                        AXInlineReactionComponent,
+                    ], encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClass()',
+                    }, providers: [{ provide: AXComponent, useExisting: AXMessageComponent }], template: "@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <div class=\"ax-message-body\">\n    @if (showAvatar()) {\n      <ax-avatar class=\"ax-message-avatar\" [size]=\"avatarSize()\">\n        @if (avatarSrc()) {\n          <ax-image [src]=\"avatarSrc()!\" [alt]=\"''\" />\n        }\n      </ax-avatar>\n    }\n\n    <div class=\"ax-message-bubble-target\" #bubbleTarget>\n      <ax-bubble [isown]=\"isown()\">\n        @if (text()) {\n          <ax-content>\n            <span class=\"ax-message-text\">\n              {{ text() }}\n            </span>\n          </ax-content>\n        }\n\n        <ng-content />\n\n        @if (status() || time()) {\n          <ax-footer class=\"ax-message-status-container\">\n            <ax-message-status [status]=\"status()!\" />\n            <ax-message-time [time]=\"time()\"></ax-message-time>\n          </ax-footer>\n        }\n      </ax-bubble>\n    </div>\n\n    @if (contextMenuEnabled()) {\n      <ax-context-menu\n        [target]=\"bubbleTarget\"\n        (onOpening)=\"onContextMenuOpening($event)\"\n        (onItemClick)=\"onMenuItemClick($event)\"\n      >\n        @if (showReactionBar()) {\n          <ax-header>\n            <ax-inline-reaction\n              [emojis]=\"quickReactions()\"\n              [size]=\"reactionSize()\"\n              [showExpanded]=\"true\"\n              (selected)=\"onReactionSelected($event)\"\n            />\n          </ax-header>\n        }\n      </ax-context-menu>\n    }\n  </div>\n}\n", styles: ["@layer components{ax-message{--ax-comp-bubble-radius: var(--ax-sys-border-radius);--ax-comp-bubble-tail-self: 0;display:flex;width:100%;max-width:100%}ax-message.ax-message-ping-pong.ax-message-start{justify-content:flex-start}ax-message.ax-message-ping-pong.ax-message-end{justify-content:flex-end}ax-message.ax-message-ping-pong .ax-message-body{display:inline-flex;max-width:85%;min-width:calc(var(--spacing, .25rem) * 0);align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-message.ax-message-ping-pong.ax-message-start .ax-message-body{flex-direction:row}ax-message.ax-message-ping-pong.ax-message-end .ax-message-body{flex-direction:row-reverse}ax-message.ax-message-stack{justify-content:flex-end}ax-message.ax-message-stack ax-bubble{border-radius:var(--ax-comp-bubble-radius);border-end-end-radius:var(--ax-comp-bubble-tail-self)}ax-message.ax-message-stack .ax-message-body{display:inline-flex;max-width:85%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:row-reverse;align-items:flex-end;gap:calc(var(--spacing, .25rem) * 2)}ax-message .ax-message-avatar{flex-shrink:0;align-self:flex-end}ax-message .ax-message-text{overflow-wrap:break-word;white-space:pre-wrap}ax-message .ax-message-status-container{display:flex;justify-content:flex-end}ax-message .ax-message-bubble-target{min-width:calc(var(--spacing, .25rem) * 0)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { templateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateData", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], isown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isown", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSize", required: false }] }], showAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatar", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], quickReactions: [{ type: i0.Input, args: [{ isSignal: true, alias: "quickReactions", required: false }] }], contextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuItems", required: false }] }], contextMenuEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuEnabled", required: false }] }], reactionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "reactionSize", required: false }] }], reactionSelected: [{ type: i0.Output, args: ["reactionSelected"] }], contextMenuOpening: [{ type: i0.Output, args: ["contextMenuOpening"] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], contextMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXContextMenuComponent), { isSignal: true }] }] } });
+
+class AXMessageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXMessageModule, imports: [AXMessageComponent], exports: [AXMessageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageModule, imports: [AXMessageComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMessageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXMessageComponent],
+                    exports: [AXMessageComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXMessageComponent, AXMessageModule };
+//# sourceMappingURL=acorex-components-message.mjs.map

package/fesm2022/acorex-components-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-message.mjs","sources":["../../../../packages/components/message/src/lib/message.component.ts","../../../../packages/components/message/src/lib/message.component.html","../../../../packages/components/message/src/lib/message.module.ts","../../../../packages/components/message/src/acorex-components-message.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXAvatarComponent } from '@acorex/components/avatar';\nimport { AXBubbleComponent } from '@acorex/components/bubble';\nimport { AXDecoratorGenericComponent } from '@acorex/components/decorators';\nimport { AXImageComponent } from '@acorex/components/image';\nimport {\n  AXContextMenuComponent,\n  AXContextMenuItemsClickEvent,\n  AXContextMenuOpeningEvent,\n  AXMenuItem,\n} from '@acorex/components/menu';\nimport { AXEmoji } from '@acorex/core/constants';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, input, output, TemplateRef, viewChild, ViewEncapsulation } from '@angular/core';\nimport { cloneDeep } from 'lodash-es';\nimport { AXInlineReactionComponent } from '@acorex/components/inline-reaction';\nimport { AXMessageStatusComponent, MessageStatus } from '@acorex/components/message-status';\nimport { AXMessageTimeComponent } from '@acorex/components/message-time';\nimport type { AXMessageLayout, AXMessageTemplateContext } from './message.type';\n\n@Component({\n  selector: 'ax-message',\n  templateUrl: './message.component.html',\n  styleUrls: ['./message.component.css'],\n  imports: [\n    NgTemplateOutlet,\n    AXAvatarComponent,\n    AXBubbleComponent,\n    AXImageComponent,\n    AXMessageStatusComponent,\n    AXDecoratorGenericComponent,\n    AXMessageTimeComponent,\n    AXContextMenuComponent,\n    AXInlineReactionComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClass()',\n  },\n  providers: [{ provide: AXComponent, useExisting: AXMessageComponent }],\n})\nexport class AXMessageComponent<T = unknown> {\n  templateData = input<T>();\n\n  itemTemplate = input<TemplateRef<AXMessageTemplateContext<T>> | null>(null);\n\n  layout = input<AXMessageLayout>('ping-pong');\n\n  /** Own message: aligned end in ping-pong and styled via inner ax-bubble. */\n  isown = input(false);\n\n  text = input<string>('');\n\n  avatarSrc = input<string | null>(null);\n\n  avatarSize = input(32);\n\n  showAvatar = input(true);\n\n  status = input<MessageStatus | null>(null);\n\n  time = input<string | null>(null);\n\n  /** Quick reactions shown in the context menu header. */\n  quickReactions = input<readonly AXEmoji[]>([]);\n\n  /** Context menu action items. Parent can also append via `contextMenuOpening`. */\n  contextMenuItems = input<readonly AXMenuItem[]>([]);\n\n  /** Whether right-click context menu is enabled on the bubble. */\n  contextMenuEnabled = input(true);\n\n  /** Emoji size in pixels inside the context menu reaction bar. */\n  reactionSize = input(20);\n\n  /** Emits when a quick reaction or picker emoji is selected from the context menu. */\n  reactionSelected = output<AXEmoji>();\n\n  /** Emits while the context menu opens so the parent can customize `event.items`. */\n  contextMenuOpening = output<AXContextMenuOpeningEvent>();\n\n  /** Emits when a context menu action item is clicked. */\n  menuItemClick = output<AXContextMenuItemsClickEvent>();\n\n  private readonly contextMenu = viewChild(AXContextMenuComponent);\n\n  protected readonly hasTemplate = computed(() => !!this.itemTemplate());\n\n  protected readonly showReactionBar = computed(() => this.quickReactions().length > 0);\n\n  protected readonly hostClass = computed(() => {\n    const layout = this.layout();\n\n    if (layout === 'stack') {\n      return 'ax-message ax-message-stack';\n    }\n\n    return `ax-message ax-message-ping-pong ax-message-${this.isown() ? 'end' : 'start'}`;\n  });\n\n  protected onContextMenuOpening(event: AXContextMenuOpeningEvent): void {\n    event.items.push(...cloneDeep(this.contextMenuItems()));\n    this.contextMenuOpening.emit(event);\n  }\n\n  protected onReactionSelected(emoji: AXEmoji): void {\n    this.reactionSelected.emit(emoji);\n    this.contextMenu()?.close();\n  }\n\n  protected onMenuItemClick(event: AXContextMenuItemsClickEvent): void {\n    this.menuItemClick.emit(event);\n  }\n}\n","@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <div class=\"ax-message-body\">\n    @if (showAvatar()) {\n      <ax-avatar class=\"ax-message-avatar\" [size]=\"avatarSize()\">\n        @if (avatarSrc()) {\n          <ax-image [src]=\"avatarSrc()!\" [alt]=\"''\" />\n        }\n      </ax-avatar>\n    }\n\n    <div class=\"ax-message-bubble-target\" #bubbleTarget>\n      <ax-bubble [isown]=\"isown()\">\n        @if (text()) {\n          <ax-content>\n            <span class=\"ax-message-text\">\n              {{ text() }}\n            </span>\n          </ax-content>\n        }\n\n        <ng-content />\n\n        @if (status() || time()) {\n          <ax-footer class=\"ax-message-status-container\">\n            <ax-message-status [status]=\"status()!\" />\n            <ax-message-time [time]=\"time()\"></ax-message-time>\n          </ax-footer>\n        }\n      </ax-bubble>\n    </div>\n\n    @if (contextMenuEnabled()) {\n      <ax-context-menu\n        [target]=\"bubbleTarget\"\n        (onOpening)=\"onContextMenuOpening($event)\"\n        (onItemClick)=\"onMenuItemClick($event)\"\n      >\n        @if (showReactionBar()) {\n          <ax-header>\n            <ax-inline-reaction\n              [emojis]=\"quickReactions()\"\n              [size]=\"reactionSize()\"\n              [showExpanded]=\"true\"\n              (selected)=\"onReactionSelected($event)\"\n            />\n          </ax-header>\n        }\n      </ax-context-menu>\n    }\n  </div>\n}\n","import { NgModule } from '@angular/core';\nimport { AXMessageComponent } from './message.component';\n\n@NgModule({\n  imports: [AXMessageComponent],\n  exports: [AXMessageComponent],\n})\nexport class AXMessageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;MAyCa,kBAAkB,CAAA;AArB/B,IAAA,WAAA,GAAA;AAsBE,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK;oGAAK;QAEzB,IAAA,CAAA,YAAY,GAAG,KAAK,CAAkD,IAAI;yFAAC;QAE3E,IAAA,CAAA,MAAM,GAAG,KAAK,CAAkB,WAAW;mFAAC;;QAG5C,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,KAAK;kFAAC;QAEpB,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;QAExB,IAAA,CAAA,SAAS,GAAG,KAAK,CAAgB,IAAI;sFAAC;QAEtC,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,EAAE;uFAAC;QAEtB,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,IAAI;uFAAC;QAExB,IAAA,CAAA,MAAM,GAAG,KAAK,CAAuB,IAAI;mFAAC;QAE1C,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgB,IAAI;iFAAC;;QAGjC,IAAA,CAAA,cAAc,GAAG,KAAK,CAAqB,EAAE;2FAAC;;QAG9C,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAwB,EAAE;6FAAC;;QAGnD,IAAA,CAAA,kBAAkB,GAAG,KAAK,CAAC,IAAI;+FAAC;;QAGhC,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,EAAE;yFAAC;;QAGxB,IAAA,CAAA,gBAAgB,GAAG,MAAM,EAAW;;QAGpC,IAAA,CAAA,kBAAkB,GAAG,MAAM,EAA6B;;QAGxD,IAAA,CAAA,aAAa,GAAG,MAAM,EAAgC;QAErC,IAAA,CAAA,WAAW,GAAG,SAAS,CAAC,sBAAsB;wFAAC;QAE7C,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;wFAAC;AAEnD,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM,GAAG,CAAC;4FAAC;AAElE,QAAA,IAAA,CAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAE5B,YAAA,IAAI,MAAM,KAAK,OAAO,EAAE;AACtB,gBAAA,OAAO,6BAA6B;YACtC;AAEA,YAAA,OAAO,CAAA,2CAAA,EAA8C,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,OAAO,EAAE;QACvF,CAAC;sFAAC;AAeH,IAAA;AAbW,IAAA,oBAAoB,CAAC,KAAgC,EAAA;AAC7D,QAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;AACvD,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;IACrC;AAEU,IAAA,kBAAkB,CAAC,KAAc,EAAA;AACzC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AACjC,QAAA,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE;IAC7B;AAEU,IAAA,eAAe,CAAC,KAAmC,EAAA;AAC3D,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;8GAvEW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,aAAA,EAAA,EAAA,EAAA,SAAA,EAFlB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,kBAAkB,EAAE,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA6C7B,sBAAsB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpFjE,sjDAqDA,EAAA,MAAA,EAAA,CAAA,+4CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5BI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,iBAAiB,yGACjB,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,aAAA,EAAA,KAAA,EAAA,KAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,wBAAwB,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACxB,2BAA2B,EAAA,QAAA,EAAA,8IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC3B,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtB,sBAAsB,qMACtB,yBAAyB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,MAAA,EAAA,YAAA,EAAA,cAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAQhB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBArB9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,OAAA,EAGb;wBACP,gBAAgB;wBAChB,iBAAiB;wBACjB,iBAAiB;wBACjB,gBAAgB;wBAChB,wBAAwB;wBACxB,2BAA2B;wBAC3B,sBAAsB;wBACtB,sBAAsB;wBACtB,yBAAyB;qBAC1B,EAAA,aAAA,EACc,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,aAAa;qBACzB,EAAA,SAAA,EACU,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,kBAAoB,EAAE,CAAC,EAAA,QAAA,EAAA,sjDAAA,EAAA,MAAA,EAAA,CAAA,+4CAAA,CAAA,EAAA;8pDA6C7B,sBAAsB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ME7EpD,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAf,eAAe,EAAA,OAAA,EAAA,CAHhB,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAClB,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAEjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAHhB,kBAAkB,CAAA,EAAA,CAAA,CAAA;;2FAGjB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,OAAO,EAAE,CAAC,kBAAkB,CAAC;AAC9B,iBAAA;;;ACND;;AAEG;;;;"}

package/fesm2022/acorex-components-reaction.mjs

@@ -0,0 +1,144 @@
+import { AXComponent } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { AXEmojiComponent } from '@acorex/components/emoji';
+import { AXEmojiPickerComponent } from '@acorex/components/emojipicker';
+import { AXPopoverComponent } from '@acorex/components/popover';
+
+/**
+ * Telegram-style reaction chips for chat messages.
+ * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}
+ * inside {@link AXPopoverComponent} when editable.
+ *
+ * @category Components
+ */
+class AXReactionComponent {
+    constructor() {
+        /**
+         * Aggregated reactions to display.
+         *
+         * @defaultValue []
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * Rendered emoji size in pixels.
+         *
+         * @defaultValue 18
+         */
+        this.size = input(18, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, reactions are interactive and an add button opens the emoji picker popover.
+         *
+         * @defaultValue false
+         */
+        this.editable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, the emoji picker popover is opened.
+         *
+         * @defaultValue false
+         */
+        this.showPicker = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPicker" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the user selects a new reaction or an unselected existing one.
+         */
+        this.add = output();
+        /**
+         * Emits when the user removes their own reaction.
+         */
+        this.remove = output();
+        this.pickerPopover = viewChild('pickerPopover', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerPopover" }] : /* istanbul ignore next */ []));
+        /** Whether the emoji picker popover is currently open. */
+        this.pickerOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []));
+        /** Whether the add button should appear pressed while the picker is open. */
+        this.isPickerVisible = computed(() => this.showPicker() || this.pickerOpen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPickerVisible" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const show = this.showPicker();
+            const popover = this.pickerPopover();
+            if (!popover) {
+                return;
+            }
+            if (show && !popover.isOpen) {
+                void popover.open();
+            }
+        });
+    }
+    /** Toggles a reaction without mutating counts; parent owns state. */
+    onItemClick(item) {
+        if (!this.editable()) {
+            return;
+        }
+        if (item.selected) {
+            this.remove.emit(item.emoji);
+            return;
+        }
+        this.add.emit(item.emoji);
+    }
+    /** Opens or closes the emoji picker popover. */
+    togglePicker(event) {
+        event?.preventDefault();
+        event?.stopPropagation();
+        const popover = this.pickerPopover();
+        if (!popover) {
+            return;
+        }
+        if (popover.isOpen) {
+            popover.close();
+            return;
+        }
+        void popover.open();
+    }
+    /** Forwards a picker selection as `add` and closes the popover. */
+    onPickerSelected(emoji) {
+        this.add.emit(emoji);
+        this.pickerPopover()?.close();
+    }
+    /** Syncs the add-button pressed state when the popover opens. */
+    onPickerOpened() {
+        this.pickerOpen.set(true);
+    }
+    /** Syncs the add-button pressed state when the popover closes. */
+    onPickerClosed() {
+        this.pickerOpen.set(false);
+    }
+    /** Accessible name for an existing reaction chip. */
+    itemAriaLabel(item) {
+        const selected = item.selected ? ', selected' : '';
+        return `${item.emoji.name}, ${item.count}${selected}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXReactionComponent, isStandalone: true, selector: "ax-reaction", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, showPicker: { classPropertyName: "showPicker", publicName: "showPicker", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { add: "add", remove: "remove" }, host: { properties: { "class.ax-reaction-editable": "editable()" }, classAttribute: "ax-reaction-host" }, providers: [{ provide: AXComponent, useExisting: AXReactionComponent }], viewQueries: [{ propertyName: "pickerPopover", first: true, predicate: ["pickerPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-reaction{--ax-comp-reaction-gap: .25rem;--ax-comp-reaction-item-gap: .25rem;--ax-comp-reaction-item-padding-x: .4rem;--ax-comp-reaction-item-padding-y: .125rem;--ax-comp-reaction-item-min-height: 1.5rem;--ax-comp-reaction-item-radius: 9999px;--ax-comp-reaction-item-font-size: .6875rem;--ax-comp-reaction-item-bg: var(--color-surface);--ax-comp-reaction-item-border: var(--color-border-lightest);--ax-comp-reaction-item-color: var(--color-on-surface);--ax-comp-reaction-item-hover-bg: var(--color-lightest);--ax-comp-reaction-item-selected-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-reaction-item-selected-border: var(--color-border-primary);position:relative;display:inline-flex;align-items:center}@supports (color: color-mix(in lab,red,red)){ax-reaction{--ax-comp-reaction-item-selected-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-reaction .ax-reaction{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ax-comp-reaction-gap)}ax-reaction .ax-reaction-item{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;gap:var(--ax-comp-reaction-item-gap);min-height:var(--ax-comp-reaction-item-min-height);padding:var(--ax-comp-reaction-item-padding-y) var(--ax-comp-reaction-item-padding-x);border-radius:var(--ax-comp-reaction-item-radius);border-color:var(--ax-comp-reaction-item-border);background-color:var(--ax-comp-reaction-item-bg);color:var(--ax-comp-reaction-item-color);font-size:var(--ax-comp-reaction-item-font-size);line-height:1;cursor:default}ax-reaction .ax-reaction-item ax-emoji{pointer-events:none}ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add{cursor:pointer}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):hover{background-color:var(--ax-comp-reaction-item-hover-bg);border-color:var(--color-border-light)}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-reaction .ax-reaction-item-selected{background-color:var(--ax-comp-reaction-item-selected-bg);border-color:var(--ax-comp-reaction-item-selected-border)}ax-reaction .ax-reaction-count{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--ax-comp-reaction-item-color);opacity:.7}ax-reaction .ax-reaction-item-selected .ax-reaction-count{color:var(--color-primary);opacity:.95}ax-reaction .ax-reaction-add{aspect-ratio:1 / 1;min-width:1.5rem;padding-inline:calc(var(--spacing, .25rem) * 0)}ax-reaction .ax-reaction-add-icon{position:relative;display:block;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5)}ax-reaction .ax-reaction-add-icon:before,ax-reaction .ax-reaction-add-icon:after{position:absolute;inset:calc(var(--spacing, .25rem) * 0);margin:auto;border-radius:calc(infinity * 1px);content:\"\";background-color:currentColor}ax-reaction .ax-reaction-add-icon:before{width:100%;height:1.5px}ax-reaction .ax-reaction-add-icon:after{width:1.5px;height:100%}ax-reaction ax-popover{display:contents}.ax-reaction-picker-panel ax-emoji-picker{width:min(22rem,92vw);border:none;box-shadow:none;border-radius:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }, { kind: "component", type: AXEmojiPickerComponent, selector: "ax-emoji-picker", inputs: ["items", "size", "appearance", "showSearch", "showRecent", "columns", "searchPlaceholder", "excludeCategories", "excludeCodes", "excludeUnicode", "recentItems"], outputs: ["selected", "recentChanged"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-reaction', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ax-reaction-host',
+                        '[class.ax-reaction-editable]': 'editable()',
+                    }, imports: [AXEmojiComponent, AXEmojiPickerComponent, AXPopoverComponent], providers: [{ provide: AXComponent, useExisting: AXReactionComponent }], template: "<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-reaction{--ax-comp-reaction-gap: .25rem;--ax-comp-reaction-item-gap: .25rem;--ax-comp-reaction-item-padding-x: .4rem;--ax-comp-reaction-item-padding-y: .125rem;--ax-comp-reaction-item-min-height: 1.5rem;--ax-comp-reaction-item-radius: 9999px;--ax-comp-reaction-item-font-size: .6875rem;--ax-comp-reaction-item-bg: var(--color-surface);--ax-comp-reaction-item-border: var(--color-border-lightest);--ax-comp-reaction-item-color: var(--color-on-surface);--ax-comp-reaction-item-hover-bg: var(--color-lightest);--ax-comp-reaction-item-selected-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-reaction-item-selected-border: var(--color-border-primary);position:relative;display:inline-flex;align-items:center}@supports (color: color-mix(in lab,red,red)){ax-reaction{--ax-comp-reaction-item-selected-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-reaction .ax-reaction{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ax-comp-reaction-gap)}ax-reaction .ax-reaction-item{display:inline-flex;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;gap:var(--ax-comp-reaction-item-gap);min-height:var(--ax-comp-reaction-item-min-height);padding:var(--ax-comp-reaction-item-padding-y) var(--ax-comp-reaction-item-padding-x);border-radius:var(--ax-comp-reaction-item-radius);border-color:var(--ax-comp-reaction-item-border);background-color:var(--ax-comp-reaction-item-bg);color:var(--ax-comp-reaction-item-color);font-size:var(--ax-comp-reaction-item-font-size);line-height:1;cursor:default}ax-reaction .ax-reaction-item ax-emoji{pointer-events:none}ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add{cursor:pointer}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):hover{background-color:var(--ax-comp-reaction-item-hover-bg);border-color:var(--color-border-light)}:is(ax-reaction .ax-reaction-item-interactive,ax-reaction .ax-reaction-add):focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-reaction .ax-reaction-item-selected{background-color:var(--ax-comp-reaction-item-selected-bg);border-color:var(--ax-comp-reaction-item-selected-border)}ax-reaction .ax-reaction-count{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);color:var(--ax-comp-reaction-item-color);opacity:.7}ax-reaction .ax-reaction-item-selected .ax-reaction-count{color:var(--color-primary);opacity:.95}ax-reaction .ax-reaction-add{aspect-ratio:1 / 1;min-width:1.5rem;padding-inline:calc(var(--spacing, .25rem) * 0)}ax-reaction .ax-reaction-add-icon{position:relative;display:block;width:calc(var(--spacing, .25rem) * 2.5);height:calc(var(--spacing, .25rem) * 2.5)}ax-reaction .ax-reaction-add-icon:before,ax-reaction .ax-reaction-add-icon:after{position:absolute;inset:calc(var(--spacing, .25rem) * 0);margin:auto;border-radius:calc(infinity * 1px);content:\"\";background-color:currentColor}ax-reaction .ax-reaction-add-icon:before{width:100%;height:1.5px}ax-reaction .ax-reaction-add-icon:after{width:1.5px;height:100%}ax-reaction ax-popover{display:contents}.ax-reaction-picker-panel ax-emoji-picker{width:min(22rem,92vw);border:none;box-shadow:none;border-radius:0}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-ordinal{syntax: \"*\"; inherits: false;}@property --tw-slashed-zero{syntax: \"*\"; inherits: false;}@property --tw-numeric-figure{syntax: \"*\"; inherits: false;}@property --tw-numeric-spacing{syntax: \"*\"; inherits: false;}@property --tw-numeric-fraction{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-ordinal: initial;--tw-slashed-zero: initial;--tw-numeric-figure: initial;--tw-numeric-spacing: initial;--tw-numeric-fraction: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], showPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPicker", required: false }] }], add: [{ type: i0.Output, args: ["add"] }], remove: [{ type: i0.Output, args: ["remove"] }], pickerPopover: [{ type: i0.ViewChild, args: ['pickerPopover', { isSignal: true }] }] } });
+
+class AXReactionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, imports: [AXReactionComponent], exports: [AXReactionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, imports: [AXReactionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXReactionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXReactionComponent],
+                    exports: [AXReactionComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXReactionComponent, AXReactionModule };
+//# sourceMappingURL=acorex-components-reaction.mjs.map

package/fesm2022/acorex-components-reaction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-reaction.mjs","sources":["../../../../packages/components/reaction/src/lib/reaction.component.ts","../../../../packages/components/reaction/src/lib/reaction.component.html","../../../../packages/components/reaction/src/lib/reaction.module.ts","../../../../packages/components/reaction/src/acorex-components-reaction.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXEmoji } from '@acorex/core/constants';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXEmojiComponent } from '@acorex/components/emoji';\nimport { AXEmojiPickerComponent } from '@acorex/components/emojipicker';\nimport { AXPopoverComponent } from '@acorex/components/popover';\nimport { AXReactionItem } from './reaction.type';\n\n/**\n * Telegram-style reaction chips for chat messages.\n * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}\n * inside {@link AXPopoverComponent} when editable.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-reaction',\n  templateUrl: './reaction.component.html',\n  styleUrls: ['./reaction.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ax-reaction-host',\n    '[class.ax-reaction-editable]': 'editable()',\n  },\n  imports: [AXEmojiComponent, AXEmojiPickerComponent, AXPopoverComponent],\n  providers: [{ provide: AXComponent, useExisting: AXReactionComponent }],\n})\nexport class AXReactionComponent {\n  /**\n   * Aggregated reactions to display.\n   *\n   * @defaultValue []\n   */\n  readonly items = input<readonly AXReactionItem[]>([]);\n\n  /**\n   * Rendered emoji size in pixels.\n   *\n   * @defaultValue 18\n   */\n  readonly size = input(18);\n\n  /**\n   * When true, reactions are interactive and an add button opens the emoji picker popover.\n   *\n   * @defaultValue false\n   */\n  readonly editable = input(false);\n\n  /**\n   * When true, the emoji picker popover is opened.\n   *\n   * @defaultValue false\n   */\n  readonly showPicker = input(false);\n\n  /**\n   * Emits when the user selects a new reaction or an unselected existing one.\n   */\n  readonly add = output<AXEmoji>();\n\n  /**\n   * Emits when the user removes their own reaction.\n   */\n  readonly remove = output<AXEmoji>();\n\n  private readonly pickerPopover = viewChild<AXPopoverComponent>('pickerPopover');\n\n  /** Whether the emoji picker popover is currently open. */\n  protected readonly pickerOpen = signal(false);\n\n  /** Whether the add button should appear pressed while the picker is open. */\n  protected readonly isPickerVisible = computed(() => this.showPicker() || this.pickerOpen());\n\n  constructor() {\n    effect(() => {\n      const show = this.showPicker();\n      const popover = this.pickerPopover();\n      if (!popover) {\n        return;\n      }\n\n      if (show && !popover.isOpen) {\n        void popover.open();\n      }\n    });\n  }\n\n  /** Toggles a reaction without mutating counts; parent owns state. */\n  protected onItemClick(item: AXReactionItem): void {\n    if (!this.editable()) {\n      return;\n    }\n\n    if (item.selected) {\n      this.remove.emit(item.emoji);\n      return;\n    }\n\n    this.add.emit(item.emoji);\n  }\n\n  /** Opens or closes the emoji picker popover. */\n  protected togglePicker(event?: Event): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    const popover = this.pickerPopover();\n    if (!popover) {\n      return;\n    }\n\n    if (popover.isOpen) {\n      popover.close();\n      return;\n    }\n\n    void popover.open();\n  }\n\n  /** Forwards a picker selection as `add` and closes the popover. */\n  protected onPickerSelected(emoji: AXEmoji): void {\n    this.add.emit(emoji);\n    this.pickerPopover()?.close();\n  }\n\n  /** Syncs the add-button pressed state when the popover opens. */\n  protected onPickerOpened(): void {\n    this.pickerOpen.set(true);\n  }\n\n  /** Syncs the add-button pressed state when the popover closes. */\n  protected onPickerClosed(): void {\n    this.pickerOpen.set(false);\n  }\n\n  /** Accessible name for an existing reaction chip. */\n  protected itemAriaLabel(item: AXReactionItem): string {\n    const selected = item.selected ? ', selected' : '';\n    return `${item.emoji.name}, ${item.count}${selected}`;\n  }\n}\n","<div class=\"ax-reaction\">\n  @for (item of items(); track item.emoji.code) {\n    <button\n      type=\"button\"\n      class=\"ax-reaction-item\"\n      [class.ax-reaction-item-selected]=\"item.selected\"\n      [class.ax-reaction-item-interactive]=\"editable()\"\n      [attr.aria-label]=\"itemAriaLabel(item)\"\n      [attr.aria-pressed]=\"item.selected ? true : null\"\n      [title]=\"item.emoji.name\"\n      (click)=\"onItemClick(item)\"\n    >\n      <ax-emoji [emoji]=\"item.emoji\" [size]=\"size()\" />\n\n      <span class=\"ax-reaction-count\">\n        {{ item.count }}\n      </span>\n    </button>\n  }\n\n  @if (editable()) {\n    <button\n      #addButton\n      type=\"button\"\n      class=\"ax-reaction-item ax-reaction-add\"\n      [class.ax-reaction-item-selected]=\"isPickerVisible()\"\n      [attr.aria-label]=\"'Add reaction'\"\n      [attr.aria-expanded]=\"isPickerVisible()\"\n      [attr.aria-haspopup]=\"true\"\n      title=\"Add reaction\"\n      (click)=\"togglePicker($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n    >\n      <span class=\"ax-reaction-add-icon\" aria-hidden=\"true\"></span>\n    </button>\n\n    <ax-popover\n      #pickerPopover\n      [target]=\"addButton\"\n      [openOn]=\"'manual'\"\n      [closeOn]=\"'clickOut'\"\n      [placement]=\"'bottom-start'\"\n      panelClass=\"ax-reaction-picker-panel\"\n      (onOpened)=\"onPickerOpened()\"\n      (onClosed)=\"onPickerClosed()\"\n    >\n      <ax-emoji-picker (selected)=\"onPickerSelected($event)\" />\n    </ax-popover>\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXReactionComponent } from './reaction.component';\n\n@NgModule({\n  imports: [AXReactionComponent],\n  exports: [AXReactionComponent],\n})\nexport class AXReactionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}