@acorex/components 22.2.10 → 22.2.12

package/emoji/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/emoji
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/emoji`.

package/emojipicker/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/emojipicker
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/emojipicker`.

package/fesm2022/acorex-components-bubble.mjs

@@ -0,0 +1,71 @@
+import { MXColorLookComponent, AXComponent } from '@acorex/cdk/common';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, contentChild, computed, HostBinding, ViewEncapsulation, Component, NgModule } from '@angular/core';
+
+class AXBubbleComponent extends MXColorLookComponent {
+    constructor() {
+        super(...arguments);
+        this.isown = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isown" }] : /* istanbul ignore next */ []));
+        // tail = input<AXBubbleTail>('none');
+        this.templateData = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templateData" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        this.axheader = contentChild('ax-header', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axheader" }] : /* istanbul ignore next */ []));
+        this.axfooter = contentChild('ax-footer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axfooter" }] : /* istanbul ignore next */ []));
+        this.axcontent = contentChild('ax-content', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axcontent" }] : /* istanbul ignore next */ []));
+        this.axprefix = contentChild('ax-prefix', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axprefix" }] : /* istanbul ignore next */ []));
+        this.axsuffix = contentChild('ax-suffix', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axsuffix" }] : /* istanbul ignore next */ []));
+        this.hasTemplate = computed(() => !!this.itemTemplate(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTemplate" }] : /* istanbul ignore next */ []));
+    }
+    get __hostClass() {
+        return [this.isown() ? 'ax-isown' : ''].filter(Boolean).join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXBubbleComponent, isStandalone: true, selector: "ax-bubble", inputs: { isown: { classPropertyName: "isown", publicName: "isown", isSignal: true, isRequired: false, transformFunction: null }, templateData: { classPropertyName: "templateData", publicName: "templateData", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: AXComponent,
+                useExisting: AXBubbleComponent,
+            },
+        ], queries: [{ propertyName: "axheader", first: true, predicate: ["ax-header"], descendants: true, isSignal: true }, { propertyName: "axfooter", first: true, predicate: ["ax-footer"], descendants: true, isSignal: true }, { propertyName: "axcontent", first: true, predicate: ["ax-content"], descendants: true, isSignal: true }, { propertyName: "axprefix", first: true, predicate: ["ax-prefix"], descendants: true, isSignal: true }, { propertyName: "axsuffix", first: true, predicate: ["ax-suffix"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-bubble-content\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-bubble-content-inner\">\n      <ng-content select=\"ax-content\"></ng-content>\n\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n}\n", styles: ["@layer properties;@layer components{ax-bubble{--ax-comp-bubble-radius: 12px;--ax-comp-bubble-padding-x: 8px;--ax-comp-bubble-padding-y: 4px;--ax-comp-bubble-font-size: .875rem;--ax-comp-bubble-line-height: 1.375rem;--ax-comp-bubble-color: var(--color-text-default);--ax-comp-bubble-bg: var(--color-lightest);--ax-comp-bubble-bg-self: var(--color-primary-lighter);--ax-comp-bubble-color-self: var(--color-on-primary-lighter);--ax-comp-bubble-tail-self: 0;--ax-comp-bubble-tail-other: 0;--ax-comp-bubble-border-width: 1px;--ax-comp-bubble-border: var(--color-border-lightest);--ax-comp-bubble-border-self: var(--color-border-primary-lightest);position:relative;display:inline-flex;width:fit-content;max-width:100%;flex-direction:column;gap:2px;min-width:0;overflow:visible;color:var(--ax-comp-bubble-color);background-color:var(--ax-comp-bubble-bg);border-radius:var(--ax-comp-bubble-radius);padding:var(--ax-comp-bubble-padding-y) var(--ax-comp-bubble-padding-x);font-size:var(--ax-comp-bubble-font-size);line-height:var(--ax-comp-bubble-line-height)}ax-bubble.ax-isown{color:var(--ax-comp-bubble-color-self);border-color:var(--ax-comp-bubble-border-self);border-width:var(--ax-comp-bubble-border-width);background-color:var(--ax-comp-bubble-bg-self);border-end-end-radius:var(--ax-comp-bubble-tail-self)}ax-bubble.ax-isown .ax-bubble-content{display:flex;flex-direction:row-reverse}ax-bubble:not(.ax-isown){border-color:var(--ax-comp-bubble-border);border-width:var(--ax-comp-bubble-border-width);border-end-start-radius:0;border-end-end-radius:var(--ax-comp-bubble-radius)}ax-bubble .ax-bubble-content{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-bubble .ax-bubble-content-inner{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-bubble', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXComponent,
+                            useExisting: AXBubbleComponent,
+                        },
+                    ], template: "@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-bubble-content\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-bubble-content-inner\">\n      <ng-content select=\"ax-content\"></ng-content>\n\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n}\n", styles: ["@layer properties;@layer components{ax-bubble{--ax-comp-bubble-radius: 12px;--ax-comp-bubble-padding-x: 8px;--ax-comp-bubble-padding-y: 4px;--ax-comp-bubble-font-size: .875rem;--ax-comp-bubble-line-height: 1.375rem;--ax-comp-bubble-color: var(--color-text-default);--ax-comp-bubble-bg: var(--color-lightest);--ax-comp-bubble-bg-self: var(--color-primary-lighter);--ax-comp-bubble-color-self: var(--color-on-primary-lighter);--ax-comp-bubble-tail-self: 0;--ax-comp-bubble-tail-other: 0;--ax-comp-bubble-border-width: 1px;--ax-comp-bubble-border: var(--color-border-lightest);--ax-comp-bubble-border-self: var(--color-border-primary-lightest);position:relative;display:inline-flex;width:fit-content;max-width:100%;flex-direction:column;gap:2px;min-width:0;overflow:visible;color:var(--ax-comp-bubble-color);background-color:var(--ax-comp-bubble-bg);border-radius:var(--ax-comp-bubble-radius);padding:var(--ax-comp-bubble-padding-y) var(--ax-comp-bubble-padding-x);font-size:var(--ax-comp-bubble-font-size);line-height:var(--ax-comp-bubble-line-height)}ax-bubble.ax-isown{color:var(--ax-comp-bubble-color-self);border-color:var(--ax-comp-bubble-border-self);border-width:var(--ax-comp-bubble-border-width);background-color:var(--ax-comp-bubble-bg-self);border-end-end-radius:var(--ax-comp-bubble-tail-self)}ax-bubble.ax-isown .ax-bubble-content{display:flex;flex-direction:row-reverse}ax-bubble:not(.ax-isown){border-color:var(--ax-comp-bubble-border);border-width:var(--ax-comp-bubble-border-width);border-end-start-radius:0;border-end-end-radius:var(--ax-comp-bubble-radius)}ax-bubble .ax-bubble-content{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 2)}ax-bubble .ax-bubble-content-inner{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { isown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isown", required: false }] }], templateData: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateData", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], axheader: [{ type: i0.ContentChild, args: ['ax-header', { isSignal: true }] }], axfooter: [{ type: i0.ContentChild, args: ['ax-footer', { isSignal: true }] }], axcontent: [{ type: i0.ContentChild, args: ['ax-content', { isSignal: true }] }], axprefix: [{ type: i0.ContentChild, args: ['ax-prefix', { isSignal: true }] }], axsuffix: [{ type: i0.ContentChild, args: ['ax-suffix', { isSignal: true }] }], __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXBubbleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleModule, imports: [AXBubbleComponent], exports: [AXBubbleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXBubbleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXBubbleComponent],
+                    exports: [AXBubbleComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXBubbleComponent, AXBubbleModule };
+//# sourceMappingURL=acorex-components-bubble.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-bubble.mjs","sources":["../../../../packages/components/bubble/src/lib/bubble.component.ts","../../../../packages/components/bubble/src/lib/bubble.component.html","../../../../packages/components/bubble/src/lib/bubble.module.ts","../../../../packages/components/bubble/src/acorex-components-bubble.ts"],"sourcesContent":["import { AXComponent, MXColorLookComponent } from '@acorex/cdk/common';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, computed, contentChild, HostBinding, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-bubble',\n  templateUrl: './bubble.component.html',\n  styleUrls: ['./bubble.component.css'],\n  imports: [NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: AXComponent,\n      useExisting: AXBubbleComponent,\n    },\n  ],\n})\nexport class AXBubbleComponent extends MXColorLookComponent {\n  isown = input<boolean>(false);\n\n  // tail = input<AXBubbleTail>('none');\n\n  templateData = input(null);\n\n  itemTemplate = input(null);\n\n  private readonly axheader = contentChild('ax-header');\n  private readonly axfooter = contentChild('ax-footer');\n  private readonly axcontent = contentChild('ax-content');\n  private readonly axprefix = contentChild('ax-prefix');\n  private readonly axsuffix = contentChild('ax-suffix');\n\n  protected readonly hasTemplate = computed(() => !!this.itemTemplate());\n\n  @HostBinding('class')\n  private get __hostClass(): string {\n    return [this.isown() ? 'ax-isown' : ''].filter(Boolean).join(' ');\n  }\n}\n","@if (hasTemplate()) {\n  <ng-container [ngTemplateOutlet]=\"itemTemplate()\" [ngTemplateOutletContext]=\"{ $implicit: templateData() }\" />\n} @else {\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-bubble-content\">\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <div class=\"ax-bubble-content-inner\">\n      <ng-content select=\"ax-content\"></ng-content>\n\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n}\n","\nimport { NgModule } from '@angular/core';\nimport { AXBubbleComponent } from './bubble.component';\n\n@NgModule({\n  imports: [ AXBubbleComponent],\n  exports: [AXBubbleComponent],\n})\nexport class AXBubbleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAiBM,MAAO,iBAAkB,SAAQ,oBAAoB,CAAA;AAb3D,IAAA,WAAA,GAAA;;QAcE,IAAA,CAAA,KAAK,GAAG,KAAK,CAAU,KAAK;kFAAC;;QAI7B,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,IAAI;yFAAC;QAE1B,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,IAAI;yFAAC;QAET,IAAA,CAAA,QAAQ,GAAG,YAAY,CAAC,WAAW;qFAAC;QACpC,IAAA,CAAA,QAAQ,GAAG,YAAY,CAAC,WAAW;qFAAC;QACpC,IAAA,CAAA,SAAS,GAAG,YAAY,CAAC,YAAY;sFAAC;QACtC,IAAA,CAAA,QAAQ,GAAG,YAAY,CAAC,WAAW;qFAAC;QACpC,IAAA,CAAA,QAAQ,GAAG,YAAY,CAAC,WAAW;qFAAC;QAElC,IAAA,CAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE;wFAAC;AAMvE,IAAA;AAJC,IAAA,IACY,WAAW,GAAA;QACrB,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACnE;8GApBW,iBAAiB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAPjB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,WAAW;AACpB,gBAAA,WAAW,EAAE,iBAAiB;AAC/B,aAAA;SACF,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,YAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,UAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfH,2iBAeA,yxEDPY,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FASf,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;+BACE,WAAW,EAAA,OAAA,EAGZ,CAAC,gBAAgB,CAAC,iBACZ,iBAAiB,CAAC,IAAI,EAAA,SAAA,EAC1B;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,WAAW;AACpB,4BAAA,WAAW,EAAA,iBAAmB;AAC/B,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,2iBAAA,EAAA,MAAA,EAAA,CAAA,iuEAAA,CAAA,EAAA;AAWwC,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,WAAW,qEACX,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,SAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CACV,YAAY,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CACb,WAAW,qEACX,WAAW,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA;sBAInD,WAAW;uBAAC,OAAO;;;ME1BT,cAAc,CAAA;8GAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAd,cAAc,EAAA,OAAA,EAAA,CAHd,iBAAiB,CAAA,EAAA,OAAA,EAAA,CAClB,iBAAiB,CAAA,EAAA,CAAA,CAAA;+GAEhB,cAAc,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAJ1B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAE,iBAAiB,CAAC;oBAC7B,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC7B,iBAAA;;;ACPD;;AAEG;;;;"}

package/fesm2022/acorex-components-combo-box.mjs

@@ -42,11 +42,15 @@ class AXComboBoxComponent extends NXValueComponent {
     #platform;
     #destroyRef;
     #translation;
+    /** Applied (debounced) search query used for filtering and highlighting. */
+    #appliedFilterQuery;
     #document;
     #isUserInteraction;
     #lastValue;
     #lastExpanded;
     #sheetSearchFocused;
+    #searchDebounce;
+    #SEARCH_DEBOUNCE_MS;
     constructor() {
         super();
         this.#platform = inject(AXPlatform);
@@ -202,6 +206,9 @@ class AXComboBoxComponent extends NXValueComponent {
         /** Query typed in the actionsheet search field (independent of the trigger display text). */
         this.sheetSearchText = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sheetSearchText" }] : /* istanbul ignore next */ []));
+        /** Applied (debounced) search query used for filtering and highlighting. */
+        this.#appliedFilterQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#appliedFilterQuery" }] : /* istanbul ignore next */ []));
         /** The current selection normalized to an array of submitted values. */
         this.selectedValues = computed(() => {
             const value = this.value();
@@ -264,7 +271,7 @@ class AXComboBoxComponent extends NXValueComponent {
         /** The listbox selection (item ids), kept in sync with the selected value(s). */
         this.selection = linkedSignal(() => this.selectedItems().map((item) => item.id), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        /** Active search query used for filtering and highlighting. */
+        /** Resolved search query from the trigger or sheet input (debounced before filtering). */
         this.searchQuery = computed(() => {
             if (!this.searchable()) {
                 return '';
@@ -289,30 +296,19 @@ class AXComboBoxComponent extends NXValueComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
         /** Query passed to result-item highlighting (empty when disabled). */
-        this.highlightQuery = computed(() => (this.highlightSearch() ? this.searchQuery() : ''), /* @ts-ignore */
+        this.highlightQuery = computed(() => (this.highlightSearch() ? this.#appliedFilterQuery() : ''), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []));
-        /** Items filtered by typed query against `id` when the combo box is searchable. */
+        /** Items filtered by typed query against `id` and `text` when the combo box is searchable. */
         this.filteredItems = computed(() => {
             const items = this.items();
             if (!this.searchable()) {
                 return items;
             }
-            const query = this.searchQuery().toLowerCase();
+            const query = this.#appliedFilterQuery().toLowerCase();
             if (!query) {
                 return items;
             }
-            return items.filter((item) => {
-                const idMatch = item.id.toLowerCase().includes(query);
-                if (idMatch) {
-                    return true;
-                }
-                const rawText = (item.text ?? '').toLowerCase();
-                if (rawText.includes(query)) {
-                    return true;
-                }
-                const translatedText = this.#translateItemText(item.text ?? '').toLowerCase();
-                return translatedText.includes(query);
-            });
+            return items.filter((item) => this.#matchesItem(item, query));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
         /** Whether the filtered list is empty (empty-state vs hidden listbox). */
@@ -335,6 +331,7 @@ class AXComboBoxComponent extends NXValueComponent {
         this.#lastValue = undefined;
         this.#lastExpanded = undefined;
         this.#sheetSearchFocused = false;
+        this.#SEARCH_DEBOUNCE_MS = 300;
         effect(() => this.#emitValueChanged(this.value()));
         effect(() => this.#emitOpenedOrClosed(this.expanded()));
         effect(() => {
@@ -381,6 +378,11 @@ class AXComboBoxComponent extends NXValueComponent {
             }
             this.#tryFocusSheetSearch();
         });
+        effect(() => {
+            const query = this.searchQuery();
+            untracked(() => this.#applyFilterDebounced(query));
+        });
+        this.#destroyRef.onDestroy(() => this.#clearSearchDebounce());
     }
     /** Scrolls the selected option into view after the popover overlay is open and laid out. */
     onPopoverOpened() {
@@ -566,6 +568,7 @@ class AXComboBoxComponent extends NXValueComponent {
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
+        this.#flushPendingFilter();
         if (this.#shouldClearOnEmptyEnter()) {
             if (!this.multiple()) {
                 this.reset(true);
@@ -638,6 +641,7 @@ class AXComboBoxComponent extends NXValueComponent {
         this.expanded.set(false);
         this.searchText.set(this.multiple() ? '' : this.translatedDisplayText());
         this.#clearSheetSearch();
+        this.#applyFilterNow('');
     }
     /**
      * Removes a single chip from the multi selection.
@@ -731,6 +735,9 @@ class AXComboBoxComponent extends NXValueComponent {
         this.commit();
     }
     commit(event) {
+        if (event?.type !== 'click') {
+            this.#flushPendingFilter();
+        }
         if (event?.type !== 'click' && this.#shouldClearOnEmptyEnter()) {
             if (!this.multiple()) {
                 this.reset(true);
@@ -862,8 +869,54 @@ class AXComboBoxComponent extends NXValueComponent {
         const origin = this.originRef()?.nativeElement;
         return Boolean(origin?.contains(node));
     }
-    #translateItemText(text) {
-        return this.#translation.translateSync(text, { waitForLoad: true });
+    #applyFilterNow(query) {
+        this.#clearSearchDebounce();
+        this.#appliedFilterQuery.set(query);
+    }
+    #applyFilterDebounced(query) {
+        this.#clearSearchDebounce();
+        if (!query) {
+            this.#applyFilterNow('');
+            return;
+        }
+        this.#searchDebounce = setTimeout(() => {
+            this.#searchDebounce = undefined;
+            this.#appliedFilterQuery.set(query);
+        }, this.#SEARCH_DEBOUNCE_MS);
+    }
+    #flushPendingFilter() {
+        if (!this.#searchDebounce) {
+            return;
+        }
+        this.#applyFilterNow(this.searchQuery());
+    }
+    #clearSearchDebounce() {
+        if (!this.#searchDebounce) {
+            return;
+        }
+        clearTimeout(this.#searchDebounce);
+        this.#searchDebounce = undefined;
+    }
+    #matchesItem(item, query) {
+        if (item.id.toLowerCase().includes(query)) {
+            return true;
+        }
+        const text = String(item.text ?? '');
+        if (text.toLowerCase().includes(query)) {
+            return true;
+        }
+        if (text.startsWith('@')) {
+            return this.#translateItemTextForFilter(text).toLowerCase().includes(query);
+        }
+        return false;
+    }
+    /** Fast path for search filtering — skips sync translation for plain labels. */
+    #translateItemTextForFilter(text) {
+        const value = String(text ?? '');
+        if (!value.startsWith('@')) {
+            return value;
+        }
+        return this.#translation.translateSync(value, { waitForLoad: false });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXComboBoxComponent, isStandalone: true, selector: "ax-combo-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [