@acorex/components 22.2.11 → 22.2.12

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

@@ -0,0 +1,111 @@
+import { AXComponent } from '@acorex/cdk/common';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DOCUMENT, PLATFORM_ID, input, signal, output, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { AXEmojiComponent } from '@acorex/components/emoji';
+
+class AXInlineReactionComponent {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.emojis = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emojis" }] : /* istanbul ignore next */ []));
+        this.size = input(24, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Whether the reaction bar is expanded to show all emojis. */
+        this.expanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum number of emojis to display in the bar.
+         *
+         * @defaultValue 8
+         */
+        this.maxVisible = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, hides the expand button and always shows the collapsed bar only.
+         *
+         * @defaultValue false
+         */
+        this.showExpanded = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExpanded" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, collapses the bar when the user clicks outside the component.
+         *
+         * @defaultValue true
+         */
+        this.closeOnClickOutside = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the user clicks a quick reaction.
+         */
+        this.selected = output();
+        /**
+         * Emits when the expanded state changes (expand button or click outside).
+         */
+        this.expandedChange = output();
+        this.visibleEmojis = computed(() => {
+            if (this.expanded()) {
+                return this.emojis();
+            }
+            return this.emojis().slice(0, this.maxVisible());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleEmojis" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            if (!isPlatformBrowser(this.platformId) || !this.closeOnClickOutside() || !this.expanded()) {
+                return;
+            }
+            const onDocumentClick = (event) => {
+                if (this.elementRef.nativeElement.contains(event.target)) {
+                    return;
+                }
+                this.setExpanded(false);
+            };
+            const timeoutId = globalThis.setTimeout(() => {
+                this.document.addEventListener('click', onDocumentClick, true);
+            }, 0);
+            onCleanup(() => {
+                globalThis.clearTimeout(timeoutId);
+                this.document.removeEventListener('click', onDocumentClick, true);
+            });
+        });
+    }
+    toggleExpanded(event) {
+        event.stopPropagation();
+        this.setExpanded(!this.expanded());
+    }
+    setExpanded(value) {
+        if (this.expanded() === value) {
+            return;
+        }
+        this.expanded.set(value);
+        this.expandedChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXInlineReactionComponent, isStandalone: true, selector: "ax-inline-reaction", inputs: { emojis: { classPropertyName: "emojis", publicName: "emojis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, showExpanded: { classPropertyName: "showExpanded", publicName: "showExpanded", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", expandedChange: "expandedChange" }, providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], ngImport: i0, template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-inline-reaction', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXEmojiComponent], providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], showExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpanded", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+
+class AXInlineReactionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent], exports: [AXInlineReactionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXInlineReactionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXInlineReactionComponent],
+                    exports: [AXInlineReactionComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXInlineReactionComponent, AXInlineReactionModule };
+//# sourceMappingURL=acorex-components-inline-reaction.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-inline-reaction.mjs","sources":["../../../../packages/components/inline-reaction/src/lib/inline-reaction.component.ts","../../../../packages/components/inline-reaction/src/lib/inline-reaction.component.html","../../../../packages/components/inline-reaction/src/lib/inline-reaction.module.ts","../../../../packages/components/inline-reaction/src/acorex-components-inline-reaction.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXEmoji } from '@acorex/core/constants';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DOCUMENT,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  PLATFORM_ID,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXEmojiComponent } from '@acorex/components/emoji';\n\n@Component({\n  selector: 'ax-inline-reaction',\n  templateUrl: './inline-reaction.component.html',\n  styleUrls: ['./inline-reaction.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AXEmojiComponent],\n  providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }],\n})\nexport class AXInlineReactionComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly document = inject(DOCUMENT);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly emojis = input<readonly AXEmoji[]>([]);\n\n  readonly size = input(24);\n\n  /** Whether the reaction bar is expanded to show all emojis. */\n  readonly expanded = signal(false);\n\n  /**\n   * Maximum number of emojis to display in the bar.\n   *\n   * @defaultValue 8\n   */\n  readonly maxVisible = input(8);\n\n  /**\n   * When true, hides the expand button and always shows the collapsed bar only.\n   *\n   * @defaultValue false\n   */\n  readonly showExpanded = input(false);\n\n  /**\n   * When true, collapses the bar when the user clicks outside the component.\n   *\n   * @defaultValue true\n   */\n  readonly closeOnClickOutside = input(true);\n\n  /**\n   * Emits when the user clicks a quick reaction.\n   */\n  readonly selected = output<AXEmoji>();\n\n  /**\n   * Emits when the expanded state changes (expand button or click outside).\n   */\n  readonly expandedChange = output<boolean>();\n\n  protected readonly visibleEmojis = computed(() => {\n    if (this.expanded()) {\n      return this.emojis();\n    }\n\n    return this.emojis().slice(0, this.maxVisible());\n  });\n\n  constructor() {\n    effect((onCleanup) => {\n      if (!isPlatformBrowser(this.platformId) || !this.closeOnClickOutside() || !this.expanded()) {\n        return;\n      }\n\n      const onDocumentClick = (event: MouseEvent): void => {\n        if (this.elementRef.nativeElement.contains(event.target as Node)) {\n          return;\n        }\n\n        this.setExpanded(false);\n      };\n\n      const timeoutId = globalThis.setTimeout(() => {\n        this.document.addEventListener('click', onDocumentClick, true);\n      }, 0);\n\n      onCleanup(() => {\n        globalThis.clearTimeout(timeoutId);\n        this.document.removeEventListener('click', onDocumentClick, true);\n      });\n    });\n  }\n\n  protected toggleExpanded(event: Event): void {\n    event.stopPropagation();\n    this.setExpanded(!this.expanded());\n  }\n\n  private setExpanded(value: boolean): void {\n    if (this.expanded() === value) {\n      return;\n    }\n\n    this.expanded.set(value);\n    this.expandedChange.emit(value);\n  }\n}\n","<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXInlineReactionComponent } from './inline-reaction.component';\n\n@NgModule({\n  imports: [AXInlineReactionComponent],\n  exports: [AXInlineReactionComponent],\n})\nexport class AXInlineReactionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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":"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"}