@magicx-eng/ai-autocomplete-angular 0.28.3 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -2
- package/esm2020/lib/ai-autocomplete/ai-autocomplete.component.mjs +16 -6
- package/esm2020/lib/controller/ai-autocomplete.controller.mjs +10 -1
- package/esm2020/lib/internal/suggestion-item/suggestion-item.component.mjs +3 -3
- package/esm2020/lib/shared/types.mjs +1 -1
- package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs +26 -7
- package/fesm2015/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
- package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs +26 -7
- package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs.map +1 -1
- package/lib/ai-autocomplete/ai-autocomplete.component.d.ts +8 -1
- package/lib/ai-autocomplete/ai-autocomplete.component.d.ts.map +1 -1
- package/lib/controller/ai-autocomplete.controller.d.ts +5 -0
- package/lib/controller/ai-autocomplete.controller.d.ts.map +1 -1
- package/lib/shared/types.d.ts +7 -0
- package/lib/shared/types.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -638,10 +638,10 @@ class SuggestionItemComponent {
|
|
|
638
638
|
}
|
|
639
639
|
}
|
|
640
640
|
SuggestionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
641
|
-
SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading", showIcon: "showIcon", showImage: "showImage", showCount: "showCount", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, ngImport: i0, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n [attr.data-aia-image]=\"imageSrc ? '' : null\"\n [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <span class=\"aia-suggestion-content\">\n <!-- The tile keeps a placeholder fill under the picture, so a slow or\n failed load leaves a neutral square rather than a gap. The picture is\n decorative: the text is the option's accessible name. -->\n <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n <img\n [src]=\"src\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n referrerpolicy=\"no-referrer\"\n draggable=\"false\"\n [hidden]=\"imageFailed\"\n (error)=\"onImageError()\"\n />\n </span>\n <span\n *ngIf=\"iconHtml\"\n class=\"aia-suggestion-icon\"\n aria-hidden=\"true\"\n [innerHTML]=\"iconHtml\"\n ></span>\n <span class=\"aia-suggestion-text\">{{ label }}</span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n <!-- Part of the row's accessible name, read after the option's text. -->\n <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:cover}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
641
|
+
SuggestionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestionItemComponent, isStandalone: true, selector: "aia-suggestion-item", inputs: { option: "option", isHighlighted: "isHighlighted", id: "id", loading: "loading", showIcon: "showIcon", showImage: "showImage", showCount: "showCount", scrollHint: "scrollHint", enterDelayMs: "enterDelayMs" }, outputs: { select: "select", highlight: "highlight", unhighlight: "unhighlight" }, ngImport: i0, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n [attr.data-aia-image]=\"imageSrc ? '' : null\"\n [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <span class=\"aia-suggestion-content\">\n <!-- The tile keeps a placeholder fill under the picture, so a slow or\n failed load leaves a neutral square rather than a gap. The picture is\n decorative: the text is the option's accessible name. -->\n <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n <img\n [src]=\"src\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n referrerpolicy=\"no-referrer\"\n draggable=\"false\"\n [hidden]=\"imageFailed\"\n (error)=\"onImageError()\"\n />\n </span>\n <span\n *ngIf=\"iconHtml\"\n class=\"aia-suggestion-icon\"\n aria-hidden=\"true\"\n [innerHTML]=\"iconHtml\"\n ></span>\n <span class=\"aia-suggestion-text\">{{ label }}</span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n <!-- Part of the row's accessible name, read after the option's text. -->\n <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:cover}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
642
642
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestionItemComponent, decorators: [{
|
|
643
643
|
type: Component,
|
|
644
|
-
args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n [attr.data-aia-image]=\"imageSrc ? '' : null\"\n [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <span class=\"aia-suggestion-content\">\n <!-- The tile keeps a placeholder fill under the picture, so a slow or\n failed load leaves a neutral square rather than a gap. The picture is\n decorative: the text is the option's accessible name. -->\n <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n <img\n [src]=\"src\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n referrerpolicy=\"no-referrer\"\n draggable=\"false\"\n [hidden]=\"imageFailed\"\n (error)=\"onImageError()\"\n />\n </span>\n <span\n *ngIf=\"iconHtml\"\n class=\"aia-suggestion-icon\"\n aria-hidden=\"true\"\n [innerHTML]=\"iconHtml\"\n ></span>\n <span class=\"aia-suggestion-text\">{{ label }}</span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n <!-- Part of the row's accessible name, read after the option's text. -->\n <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:cover}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\n"] }]
|
|
644
|
+
args: [{ selector: "aia-suggestion-item", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n [id]=\"id\"\n role=\"option\"\n data-aia-option=\"\"\n [attr.data-aia-loading]=\"loading ? '' : null\"\n [attr.data-aia-icon]=\"iconHtml && option.icon ? option.icon : null\"\n [attr.data-aia-image]=\"imageSrc ? '' : null\"\n [attr.data-aia-item-count]=\"countLabel !== null ? option.item_count : null\"\n [attr.aria-selected]=\"isHighlighted\"\n class=\"aia-suggestion-item\"\n [style.--aia-option-enter-delay]=\"(enterDelay ?? 0) + 'ms'\"\n [class.aia-suggestion-item-highlighted]=\"isHighlighted && !loading\"\n [class.aia-suggestion-item-tappable]=\"option.is_tappable\"\n [class.aia-suggestion-item-non-tappable]=\"!option.is_tappable\"\n [class.aia-suggestion-item-pressed]=\"pressed\"\n [class.aia-suggestion-item-scroll-hint]=\"scrollHint\"\n [attr.tabindex]=\"loading || !option.is_tappable ? -1 : 0\"\n (click)=\"onSelect()\"\n (keydown)=\"onKeyDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n>\n <span class=\"aia-suggestion-content\">\n <!-- The tile keeps a placeholder fill under the picture, so a slow or\n failed load leaves a neutral square rather than a gap. The picture is\n decorative: the text is the option's accessible name. -->\n <span *ngIf=\"imageSrc as src\" class=\"aia-suggestion-image\" aria-hidden=\"true\">\n <img\n [src]=\"src\"\n alt=\"\"\n loading=\"lazy\"\n decoding=\"async\"\n referrerpolicy=\"no-referrer\"\n draggable=\"false\"\n [hidden]=\"imageFailed\"\n (error)=\"onImageError()\"\n />\n </span>\n <span\n *ngIf=\"iconHtml\"\n class=\"aia-suggestion-icon\"\n aria-hidden=\"true\"\n [innerHTML]=\"iconHtml\"\n ></span>\n <span class=\"aia-suggestion-text\">{{ label }}</span>\n <span *ngIf=\"option.tag\" class=\"aia-suggestion-tag\">{{ option.tag }}</span>\n <!-- Part of the row's accessible name, read after the option's text. -->\n <span *ngIf=\"countLabel !== null\" class=\"aia-suggestion-count\">{{ countLabel }}</span>\n </span>\n</div>\n", styles: [".aia-suggestion-item{position:relative;overflow:hidden;overflow:clip;display:flex;align-items:flex-start;font-family:inherit;font-size:var(--aia-option-font-size, 16px);font-weight:450;line-height:21px;color:var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));white-space:normal;word-break:break-word;border-radius:8px;padding:8px 10px}@keyframes aiaSuggestionFadeIn{0%{opacity:0}}@keyframes aiaSuggestionRiseIn{0%{transform:translateY(16px)}}@media (prefers-reduced-motion: reduce){.aia-suggestion-item,.aia-suggestion-content{animation-duration:0s;animation-delay:0s}}.aia-suggestion-content{position:relative;z-index:2;animation:aiaSuggestionRiseIn .28s cubic-bezier(.25,.46,.45,.94) both,aiaSuggestionFadeIn .15s ease-out both;animation-delay:var(--aia-option-enter-delay, 0ms)}.aia-suggestion-item-tappable{cursor:pointer}.aia-suggestion-item-tappable:hover{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff))}.aia-suggestion-item-non-tappable{cursor:default}.aia-suggestion-item-highlighted{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));background:var(--aia-option-bg, transparent);font-weight:500}.aia-suggestion-tag{font-size:11px;margin-left:6px;opacity:.5}.aia-suggestion-item-pressed{color:var(--aia-option-color-selected, var(--aia-color-text-default, #fff));animation:aiaPressCompress .17s ease forwards}[role=listbox]:has(.aia-suggestion-item-pressed) .aia-suggestion-item:not(.aia-suggestion-item-pressed){opacity:.35;transition:opacity 60ms ease}@keyframes aiaPressCompress{0%{transform:scale(1)}25%{transform:scale(.93)}60%{transform:scale(.93)}to{transform:scale(1)}}.aia-suggestion-item-scroll-hint .aia-suggestion-content{mask-image:linear-gradient(to bottom,rgb(0 0 0),rgb(0 0 0 / .6))}.aia-suggestion-item[data-aia-loading]{cursor:default;animation:aiaSuggestionSkeletonPulse 1.4s ease-in-out infinite}.aia-suggestion-item[data-aia-loading] .aia-suggestion-text{color:transparent;background:var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, .25)));border-radius:999px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:aiaSkeletonBarIn .1s ease-out}.aia-suggestion-item[data-aia-loading] .aia-suggestion-tag{display:none}.aia-suggestion-icon{display:inline-flex;align-items:center;height:21px;margin-right:8px;vertical-align:top;will-change:transform}.aia-suggestion-icon svg{display:block;width:1em;height:1em}.aia-suggestion-item[data-aia-loading] .aia-suggestion-icon{visibility:hidden}.aia-suggestion-content:not(:has(.aia-suggestion-count)):has(.aia-suggestion-icon){padding-left:calc(1em + 8px);text-indent:calc(-1em - 8px)}.aia-suggestion-content:has(.aia-suggestion-image),.aia-suggestion-content:has(.aia-suggestion-count){display:flex;flex:1 1 auto;align-items:flex-start;min-width:0}.aia-suggestion-content:has(.aia-suggestion-image) .aia-suggestion-text,.aia-suggestion-content:has(.aia-suggestion-count) .aia-suggestion-text{flex:1 1 auto;min-width:0}.aia-suggestion-item[data-aia-loading] .aia-suggestion-content .aia-suggestion-text{flex:0 1 auto}.aia-suggestion-content:has(.aia-suggestion-image){align-items:center;gap:var(--aia-option-image-gap, 12px)}.aia-suggestion-image{flex:0 0 auto;display:block;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);border-radius:var(--aia-option-image-radius, 12px);overflow:hidden;background:var(--aia-option-image-bg, var(--aia-skeleton-bg, rgba(189, 189, 189, .083)))}.aia-suggestion-image img{display:block;width:100%;height:100%;object-fit:cover}.aia-suggestion-image img[hidden]{display:none}.aia-suggestion-count{flex:0 0 auto;margin-left:auto;padding-left:12px;font-size:var(--aia-option-count-font-size, 12px);font-weight:400;line-height:21px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--aia-option-count-color, inherit);opacity:var(--aia-option-count-opacity, .6)}.aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit, \"items\")}.aia-suggestion-item[data-aia-item-count=\"1\"] .aia-suggestion-count:after{content:\" \" var(--aia-option-count-unit-one, var(--aia-option-count-unit, \"item\"))}.aia-suggestion-item[data-aia-loading] .aia-suggestion-image img{visibility:hidden}.aia-suggestion-item[data-aia-loading] .aia-suggestion-count{display:none}[data-aia-group]:has(.aia-suggestion-image){--aia-option-row-height: calc(var(--aia-option-image-size, 40px) + 16px)}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)){display:flex;flex:1 1 auto;align-items:center;gap:var(--aia-option-image-gap, 12px);min-width:0;min-height:var(--aia-option-image-size, 40px);padding-left:0;text-indent:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon{flex:0 0 auto;justify-content:center;width:var(--aia-option-image-size, 40px);height:var(--aia-option-image-size, 40px);margin-right:0}[data-aia-group]:has(.aia-suggestion-image) .aia-suggestion-content:not(:has(.aia-suggestion-image)) .aia-suggestion-icon svg{width:var(--aia-option-tile-icon-size, 1.5em);height:var(--aia-option-tile-icon-size, 1.5em)}@keyframes aiaSuggestionSkeletonPulse{0%,to{filter:brightness(1)}50%{filter:brightness(.55)}}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-content,[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading] .aia-suggestion-text{animation:none}[data-aia-skeleton-exiting] .aia-suggestion-item[data-aia-loading]{animation:aiaSkeletonOut .1s ease-in forwards}@keyframes aiaSkeletonBarIn{0%{background-color:transparent;color:inherit}}@keyframes aiaSkeletonOut{to{opacity:0}}\n"] }]
|
|
645
645
|
}], propDecorators: { option: [{
|
|
646
646
|
type: Input
|
|
647
647
|
}], isHighlighted: [{
|
|
@@ -1365,6 +1365,15 @@ class AIAutocompleteController {
|
|
|
1365
1365
|
return;
|
|
1366
1366
|
this.core.reset();
|
|
1367
1367
|
}
|
|
1368
|
+
/**
|
|
1369
|
+
* Records a submit in telemetry. Enter is recorded by the SDK; call this
|
|
1370
|
+
* from a submit button you render, so each submit is counted once.
|
|
1371
|
+
*/
|
|
1372
|
+
recordSubmit(result) {
|
|
1373
|
+
if (this.isDestroyed)
|
|
1374
|
+
return;
|
|
1375
|
+
this.core.recordSubmit(result);
|
|
1376
|
+
}
|
|
1368
1377
|
/** Pick a dropdown option (or replace the re-edited param if in re-edit mode). */
|
|
1369
1378
|
selectOption(option) {
|
|
1370
1379
|
if (this.isDestroyed)
|
|
@@ -2064,6 +2073,7 @@ class AIAutocompleteComponent {
|
|
|
2064
2073
|
this.controller = new AIAutocompleteController({
|
|
2065
2074
|
apiConfig: this.apiConfig,
|
|
2066
2075
|
additionalContext: this.additionalContext,
|
|
2076
|
+
visitorId: this.visitorId,
|
|
2067
2077
|
optionOverrides: this.optionOverrides,
|
|
2068
2078
|
maskCompletedText: this.maskCompletedText,
|
|
2069
2079
|
columns: this.columns,
|
|
@@ -2151,6 +2161,7 @@ class AIAutocompleteComponent {
|
|
|
2151
2161
|
// Reactive options
|
|
2152
2162
|
if (changes["apiConfig"] ||
|
|
2153
2163
|
changes["additionalContext"] ||
|
|
2164
|
+
changes["visitorId"] ||
|
|
2154
2165
|
changes["optionOverrides"] ||
|
|
2155
2166
|
changes["dropdownTrigger"] ||
|
|
2156
2167
|
changes["optionsPosition"] ||
|
|
@@ -2161,6 +2172,7 @@ class AIAutocompleteComponent {
|
|
|
2161
2172
|
this.controller.update({
|
|
2162
2173
|
apiConfig: this.apiConfig,
|
|
2163
2174
|
additionalContext: this.additionalContext,
|
|
2175
|
+
visitorId: this.visitorId,
|
|
2164
2176
|
optionOverrides: this.optionOverrides,
|
|
2165
2177
|
dropdownTrigger: this.dropdownTrigger,
|
|
2166
2178
|
optionsPosition: this.optionsPosition,
|
|
@@ -2300,7 +2312,9 @@ class AIAutocompleteComponent {
|
|
|
2300
2312
|
* the React component uses — so the emitted query reflects whatever's in
|
|
2301
2313
|
* the DOM right now, not a possibly-stale state snapshot.
|
|
2302
2314
|
*/
|
|
2303
|
-
|
|
2315
|
+
// `fromButton`: the SDK records an Enter submit itself before it calls back
|
|
2316
|
+
// here; a click on our own button never passes through it.
|
|
2317
|
+
handleSubmit(_result, fromButton = false) {
|
|
2304
2318
|
var _a, _b;
|
|
2305
2319
|
const editor = (_a = this.editorRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
2306
2320
|
if (!editor)
|
|
@@ -2308,11 +2322,14 @@ class AIAutocompleteComponent {
|
|
|
2308
2322
|
const text = extractPlainText(editor);
|
|
2309
2323
|
const state = this.controller.getState();
|
|
2310
2324
|
const params = (_b = this.completedParams) !== null && _b !== void 0 ? _b : state.completedParams;
|
|
2311
|
-
|
|
2325
|
+
const result = buildSubmitResult$1(text, params, state.skippedParams, {
|
|
2312
2326
|
identifiedParams: state.identifiedParams,
|
|
2313
2327
|
isReady: state.isReady,
|
|
2314
2328
|
customFields: state.customFields,
|
|
2315
|
-
})
|
|
2329
|
+
});
|
|
2330
|
+
if (fromButton)
|
|
2331
|
+
this.controller.recordSubmit(result);
|
|
2332
|
+
this.submitted.emit(result);
|
|
2316
2333
|
if (this.resetOnSubmit)
|
|
2317
2334
|
this.controller.reset();
|
|
2318
2335
|
}
|
|
@@ -2329,7 +2346,7 @@ class AIAutocompleteComponent {
|
|
|
2329
2346
|
completed_params: [],
|
|
2330
2347
|
identified_params: [],
|
|
2331
2348
|
is_ready: state.isReady,
|
|
2332
|
-
});
|
|
2349
|
+
}, true);
|
|
2333
2350
|
}
|
|
2334
2351
|
measurePillWrap() {
|
|
2335
2352
|
var _a, _b;
|
|
@@ -2357,7 +2374,7 @@ class AIAutocompleteComponent {
|
|
|
2357
2374
|
}
|
|
2358
2375
|
}
|
|
2359
2376
|
AIAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2360
|
-
AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", additionalContext: "additionalContext", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", showChipIcons: "showChipIcons", showChipImages: "showChipImages", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", showProducts: "showProducts", products: "products", submitButton: "submitButton", resetOnSubmit: "resetOnSubmit" }, outputs: { submitted: "submitted", resultChange: "resultChange", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
|
|
2377
|
+
AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", additionalContext: "additionalContext", visitorId: "visitorId", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", showOptionIcons: "showOptionIcons", showOptionImages: "showOptionImages", showOptionCounts: "showOptionCounts", productsLayout: "productsLayout", productImageFallback: "productImageFallback", showChipIcons: "showChipIcons", showChipImages: "showChipImages", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", showProducts: "showProducts", products: "products", submitButton: "submitButton", resetOnSubmit: "resetOnSubmit" }, outputs: { submitted: "submitted", resultChange: "resultChange", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
|
|
2361
2378
|
{
|
|
2362
2379
|
provide: NG_VALUE_ACCESSOR,
|
|
2363
2380
|
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
|
@@ -2385,6 +2402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2385
2402
|
type: Input
|
|
2386
2403
|
}], additionalContext: [{
|
|
2387
2404
|
type: Input
|
|
2405
|
+
}], visitorId: [{
|
|
2406
|
+
type: Input
|
|
2388
2407
|
}], optionOverrides: [{
|
|
2389
2408
|
type: Input
|
|
2390
2409
|
}], maskCompletedText: [{
|