@acorex/components 22.2.10 → 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":";;;;;;MA4Ba,yBAAyB,CAAA;AAmDpC,IAAA,WAAA,GAAA;AAlDiB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,EAAC,UAAuB,EAAC;AAC5C,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAExC,IAAA,CAAA,MAAM,GAAG,KAAK,CAAqB,EAAE;mFAAC;QAEtC,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,EAAE;iFAAC;;QAGhB,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK;qFAAC;AAEjC;;;;AAIG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,CAAC;uFAAC;AAE9B;;;;AAIG;QACM,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,KAAK;yFAAC;AAEpC;;;;AAIG;QACM,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAC,IAAI;gGAAC;AAE1C;;AAEG;QACM,IAAA,CAAA,QAAQ,GAAG,MAAM,EAAW;AAErC;;AAEG;QACM,IAAA,CAAA,cAAc,GAAG,MAAM,EAAW;AAExB,QAAA,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC/C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,gBAAA,OAAO,IAAI,CAAC,MAAM,EAAE;YACtB;AAEA,YAAA,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QAClD,CAAC;0FAAC;AAGA,QAAA,MAAM,CAAC,CAAC,SAAS,KAAI;YACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE;gBAC1F;YACF;AAEA,YAAA,MAAM,eAAe,GAAG,CAAC,KAAiB,KAAU;AAClD,gBAAA,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;oBAChE;gBACF;AAEA,gBAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AACzB,YAAA,CAAC;AAED,YAAA,MAAM,SAAS,GAAG,UAAU,CAAC,UAAU,CAAC,MAAK;gBAC3C,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,CAAC;YAChE,CAAC,EAAE,CAAC,CAAC;YAEL,SAAS,CAAC,MAAK;AACb,gBAAA,UAAU,CAAC,YAAY,CAAC,SAAS,CAAC;gBAClC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,CAAC;AACnE,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,cAAc,CAAC,KAAY,EAAA;QACnC,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;IACpC;AAEQ,IAAA,WAAW,CAAC,KAAc,EAAA;AAChC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE;YAC7B;QACF;AAEA,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;IACjC;8GAxFW,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,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,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,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,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,SAAA,EAFzB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,yBAAyB,EAAE,CAAC,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1B/E,g4BAyBA,48IDAY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAGf,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBATrC,SAAS;+BACE,oBAAoB,EAAA,aAAA,EAGf,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,gBAAgB,CAAC,EAAA,SAAA,EAChB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAA,yBAA2B,EAAE,CAAC,EAAA,QAAA,EAAA,g4BAAA,EAAA,MAAA,EAAA,CAAA,o5IAAA,CAAA,EAAA;;;MEnBlE,sBAAsB,CAAA;8GAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAtB,sBAAsB,EAAA,OAAA,EAAA,CAHvB,yBAAyB,CAAA,EAAA,OAAA,EAAA,CACzB,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAExB,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,sBAAsB,YAHvB,yBAAyB,CAAA,EAAA,CAAA,CAAA;;2FAGxB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,yBAAyB,CAAC;oBACpC,OAAO,EAAE,CAAC,yBAAyB,CAAC;AACrC,iBAAA;;;ACND;;AAEG;;;;"}

package/fesm2022/acorex-components-map.mjs

@@ -3255,6 +3255,13 @@ class AXMapComponent extends NXComponent {
     async refreshPois() {
         return this.leafletService.refreshPois();
     }
+    /**
+     * Recalculates Leaflet tile layout after the map container is resized
+     * (for example after entering or exiting fullscreen).
+     */
+    invalidateSize() {
+        this.leafletService.getMap()?.invalidateSize();
+    }
     /**
      * Cleanup function that destroys the map and unsubscribes from all subscriptions.
      */