@magicx-eng/ai-autocomplete-angular 0.9.0 → 0.10.0

package/fesm2020/magicx-eng-ai-autocomplete-angular.mjs

@@ -601,8 +601,10 @@ class AIAutocompleteDropdownComponent {
             // during re-edit (the bar then shows an already answered param).
             // Deliberately NOT gated on showsPills: with pills rendered elsewhere
             // (pillPlacement "inline"/"hidden") the bar renders as a skip-only
-            // row holding just the button.
-            const showsSkip = dd.pills.length > 0 && showSkipButton && !dd.isEditing;
+            // row holding just the button. Hidden while the input is empty — the
+            // footer hint doesn't advertise "→ to skip" until the user has typed,
+            // so the pristine starting state stays free of the affordance too.
+            const showsSkip = dd.pills.length > 0 && showSkipButton && !dd.isEditing && !dd.isInputEmpty;
             const showsOptions = options.length > 0;
             const showsFallbackSkeleton = dd.isLoading && !showsOptions;
             // Either half is enough to keep the panel up: products render with no
@@ -722,7 +724,7 @@ function deriveField(source$, selector, equalityFn) {
  * `@magicx-eng/ai-autocomplete-vanilla` core and exposes its state as RxJS
  * observables plus thin action methods.
  *
- * Per TDB §3.3, the controller is consumer-managed — the consumer creates it
+ * The controller is consumer-managed — the consumer creates it
  * with `new`, holds the reference, and **must call `destroy()`** in their
  * own `ngOnDestroy`. The Tier 1 `<ai-autocomplete>` component does this
  * automatically; Tier 2 consumers do not get auto-cleanup.
@@ -732,7 +734,7 @@ function deriveField(source$, selector, equalityFn) {
 class AIAutocompleteController {
     /**
      * Throws if invoked outside a browser environment. For SSR / Angular
-     * Universal, gate construction with `isPlatformBrowser` — see TDB §16.3.
+     * Universal, gate construction with `isPlatformBrowser`.
      */
     constructor(opts = {}) {
         // optionsPosition isn't part of CoreState (it's a core option), so track it
@@ -1375,7 +1377,8 @@ class AIAutocompleteComponent {
          * that dismisses the active pill — same action as pressing → at the end of
          * the input. Set to false to hide it. When pills render elsewhere
          * (`pillPlacement: "inline"` / `"hidden"`) the bar renders as a skip-only
-         * row holding just the button.
+         * row holding just the button. Hidden while the input is empty — it appears
+         * alongside the footer's "→ to skip" hint once the user has typed.
          */
         this.showSkipButton = true;
         /** Focus the editor on mount. Default: true. */
@@ -1416,6 +1419,7 @@ class AIAutocompleteComponent {
             return;
         this.controller = new AIAutocompleteController({
             apiConfig: this.apiConfig,
+            additionalContext: this.additionalContext,
             optionOverrides: this.optionOverrides,
             maskCompletedText: this.maskCompletedText,
             columns: this.columns,
@@ -1497,6 +1501,7 @@ class AIAutocompleteComponent {
         }
         // Reactive options
         if (changes["apiConfig"] ||
+            changes["additionalContext"] ||
             changes["optionOverrides"] ||
             changes["dropdownTrigger"] ||
             changes["optionsPosition"] ||
@@ -1505,6 +1510,7 @@ class AIAutocompleteComponent {
             changes["products"]) {
             this.controller.update({
                 apiConfig: this.apiConfig,
+                additionalContext: this.additionalContext,
                 optionOverrides: this.optionOverrides,
                 dropdownTrigger: this.dropdownTrigger,
                 optionsPosition: this.optionsPosition,
@@ -1684,7 +1690,7 @@ class AIAutocompleteComponent {
     }
 }
 AIAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AIAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIAutocompleteComponent, isStandalone: true, selector: "ai-autocomplete", inputs: { apiConfig: "apiConfig", optionOverrides: "optionOverrides", maskCompletedText: "maskCompletedText", columns: "columns", pillPlacement: "pillPlacement", mode: "mode", optionsPosition: "optionsPosition", animations: "animations", dropdownTrigger: "dropdownTrigger", closeDropdownOnBlur: "closeDropdownOnBlur", showNonTappableOptions: "showNonTappableOptions", showSkipButton: "showSkipButton", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", products: "products", submitButton: "submitButton" }, outputs: { submitted: "submitted", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
+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", autoFocus: "autoFocus", value: "value", completedParams: "completedParams", products: "products", submitButton: "submitButton" }, outputs: { submitted: "submitted", errored: "errored", valueChange: "valueChange", completedParamsChange: "completedParamsChange", focused: "focused", blurred: "blurred", productSelect: "productSelect" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -1710,6 +1716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ], template: "<div\n  #container\n  class=\"magicx-aia magicx-aia-container\"\n  [attr.data-pill-placement]=\"pillPlacement\"\n  [attr.data-options-position]=\"optionsPosition\"\n  [attr.data-animations]=\"animations ? 'on' : 'off'\"\n  [attr.data-mode]=\"resolvedMode\"\n>\n  <ai-autocomplete-dropdown\n    *ngIf=\"controller\"\n    [controller]=\"controller\"\n    [showPills]=\"showDropdownPills\"\n    [showSkipButton]=\"showSkipButton\"\n  ></ai-autocomplete-dropdown>\n\n  <div\n    class=\"magicx-aia-input-wrapper\"\n    (click)=\"onWrapperClick($event)\"\n    (keyup)=\"$event.stopPropagation()\"\n  >\n    <div class=\"magicx-aia-editor-area\" data-aia-editor=\"\">\n      <div\n        #editor\n        *ngIf=\"controller\"\n        [aiaEditorHost]=\"controller\"\n        [autoFocus]=\"autoFocus\"\n        class=\"magicx-aia-input\"\n        data-aia-input=\"\"\n      ></div>\n\n      <ng-container *ngIf=\"controller && showInlinePills\">\n        <span\n          #pillContainer\n          class=\"magicx-aia-pill-list-container\"\n          data-aia-pill-list-container=\"\"\n          *ngIf=\"\n            (controller.isLoading$ | async) ||\n              ((controller.suggestionPills$ | async)?.length ?? 0) > 0\n          \"\n        >\n          <aia-pill-list\n            [pills]=\"(controller.suggestionPills$ | async) ?? []\"\n            [activePillIndex]=\"0\"\n            [activeSelected]=\"(controller.isActivePillSelected$ | async) ?? false\"\n            [loading]=\"(controller.isLoading$ | async) ?? false\"\n            (selectPill)=\"onSelectPill($event)\"\n          ></aia-pill-list>\n        </span>\n      </ng-container>\n    </div>\n\n    <ng-container [ngSwitch]=\"submitButtonState\">\n      <aia-submit-button\n        *ngSwitchCase=\"'default'\"\n        [disabled]=\"\n          !(\n            controller &&\n            canSubmit({\n              segments: (controller.segments$ | async) ?? [],\n              completedParams: (controller.completedParams$ | async) ?? []\n            })\n          )\n        \"\n        (submit)=\"onSubmitButtonClick($event)\"\n      ></aia-submit-button>\n\n      <span\n        *ngSwitchCase=\"'custom'\"\n        data-aia-submit=\"\"\n        class=\"magicx-aia-submit-slot\"\n        (click)=\"onSubmitSlotClick($event)\"\n      >\n        <ng-container *ngTemplateOutlet=\"customSubmitTemplate\"></ng-container>\n      </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":where(.magicx-aia,.magicx-aia *,.magicx-aia *::before,.magicx-aia *::after){box-sizing:border-box}:where(.magicx-aia),:where(.magicx-aia[data-mode=\"light\"]){--aia-surface: #ffffff;--aia-border: #b0b0b0;--aia-dropdown-border: rgba(231, 231, 231, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #333539;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .105);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #000000;--aia-option-bg: #eef2ff;--aia-option-color: #1a1b1d;--aia-option-color-selected: #000000;--aia-option-font-size: 16px;--aia-written-text-color: #000000;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #000000);--aia-submit-bg: #000000;--aia-submit-color: #ffffff;--aia-color-text-muted: #6b7280;--aia-skeleton-bg: rgba(189, 189, 189, .25);--aia-streak-rgb: 99, 102, 241;--aia-streak-glass-bg: rgba(99, 102, 241, .1);--aia-footer-hint-color: #505050;--aia-footer-brand-color: #b0b0b0;--aia-footer-badge-border: rgba(189, 189, 189, .51)}:where(.magicx-aia[data-mode=\"dark\"]){--aia-surface: #000000;--aia-border: #505050;--aia-dropdown-border: rgba(72, 72, 72, .5);--aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, .05);--aia-pill-bg: #bdbdbd;--aia-pill-color: #b0b0b0;--aia-pill-font-size: 16px;--aia-completed-pill-bg: rgba(189, 189, 189, .15);--aia-completed-pill-bg-active: rgba(189, 189, 189, .35);--aia-completed-pill-color: #ffffff;--aia-option-bg: #323232;--aia-option-color: #e7e7e7;--aia-option-color-selected: #ffffff;--aia-option-font-size: 16px;--aia-written-text-color: #ffffff;--aia-written-text-font-size: 16px;--aia-caret-color: var(--aia-written-text-color, #ffffff);--aia-submit-bg: #ffffff;--aia-submit-color: #000000;--aia-color-text-muted: #c1c4cb;--aia-skeleton-bg: #1a1b1d;--aia-streak-rgb: 255, 255, 255;--aia-streak-glass-bg: rgba(255, 255, 255, .1);--aia-footer-hint-color: #b0b0b0;--aia-footer-brand-color: #505050;--aia-footer-badge-border: #505050}[data-aia-dropdown]{--aia-footer-row-height: 23px;--aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));--aia-grid-scroll-bottom: var(--aia-footer-band);--aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-lead: 20px;--aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0}[data-aia-dropdown] [data-aia-pillbar] .aia-pill-list{padding-inline:10px}[data-aia-dropdown] [data-aia-pillbar] .aia-pill{justify-content:flex-start;border-inline-width:0;padding-inline:0}[data-aia-dropdown][data-aia-has-products]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: 0px;--aia-grid-overlap-top: 0px;--aia-footer-fade-lead: 0px}[data-aia-dropdown] .aia-grid[data-scroll]{padding-top:var(--aia-grid-scroll-top, 0);padding-bottom:var(--aia-grid-scroll-bottom, 0);margin-top:var(--aia-grid-overlap-top, 0);margin-bottom:var(--aia-grid-overlap-bottom, 0)}[data-aia-dropdown] [data-aia-footer]:before{content:\"\";position:absolute;inset:var(--aia-footer-fade-inset, -20px 0 0);z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--aia-surface, #ffffff))}[data-aia-dropdown][data-aia-surface=glass]{--aia-footer-chip-bg: transparent}[data-aia-dropdown][data-aia-surface=glass] [data-aia-footer]:before{display:none}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown]{--aia-grid-scroll-bottom: 0px;--aia-grid-overlap-bottom: 0px;--aia-grid-scroll-top: var(--aia-footer-band);--aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));--aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));top:auto;bottom:100%;margin-top:0;margin-bottom:6px}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] .aia-stack{flex-direction:column-reverse}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]{padding:0 8px var(--aia-footer-gap, 8px)}:where(.magicx-aia[data-options-position=\"above\"]) [data-aia-dropdown] [data-aia-footer]:before{background:linear-gradient(to top,transparent,var(--aia-surface, #ffffff))}:where(.magicx-aia[data-animations=\"off\"]) *,:where(.magicx-aia[data-animations=\"off\"]) *:before,:where(.magicx-aia[data-animations=\"off\"]) *:after{animation-duration:0s!important;transition-duration:0s!important}.magicx-aia-container{position:relative;font-family:var(--aia-font-family, inherit);container-type:inline-size}.magicx-aia-input-wrapper{padding:12px 16px;border:1px solid var(--aia-border, #b0b0b0);border-radius:20px;background:var(--aia-surface, #ffffff);box-shadow:var(--aia-shadow, none);overflow:hidden;display:flex;align-items:flex-start;gap:12px}.magicx-aia-editor-area{position:relative;flex:1;min-width:0;min-height:22px;line-height:var(--aia-editor-line-height, 1.9);font-family:inherit;font-size:var(--aia-written-text-font-size, 14px);white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;max-height:var(--aia-editor-max-height, calc(var(--aia-editor-line-height, 1.9) * 5em));overflow-y:auto;scrollbar-width:none}.magicx-aia-editor-area::-webkit-scrollbar{display:none}.magicx-aia-input{display:inline;outline:none;background:transparent;color:var(--aia-written-text-color, var(--aia-color-text-default, #fff));caret-color:var( --aia-caret-color, var(--aia-written-text-color, var(--aia-color-text-default, #fff)) );font-weight:300;vertical-align:middle}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]{display:inline;padding:3px 6px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background:var(--aia-completed-pill-bg, rgba(189, 189, 189, .105));color:var(--aia-completed-pill-color, var(--aia-written-text-color, #fff));font-size:var(--aia-pill-font-size, 14px);font-weight:400;line-height:normal;white-space:normal;letter-spacing:var(--aia-completed-pill-tracking, -.02em);cursor:pointer;transition:background-color .15s ease}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--completed]:hover{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35))}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]{background:var(--aia-completed-pill-bg-active, rgba(189, 189, 189, .35));caret-color:transparent;cursor:text}.magicx-aia-input:has(strong[class~=\"magicx-aia-segment--editing\"]){caret-color:transparent}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::selection{background:transparent;color:inherit}:where(.magicx-aia-input) strong[class~=magicx-aia-segment--editing]::-moz-selection{background:transparent;color:inherit}.magicx-aia-input[data-aia-empty=true][data-placeholder]:before{content:attr(data-placeholder);color:var(--aia-color-text-muted, #c1c4cb);opacity:.7;pointer-events:none}.magicx-aia-input[data-aia-empty=true]{display:inline-block;min-width:1px}.magicx-aia-pill-list-container{display:inline;margin-left:8px}.magicx-aia-pill-list-container:empty,.magicx-aia-pill-list-container[data-aia-pill-wrapped]{margin-left:0}.magicx-aia-submit-slot{display:contents}:where(.magicx-aia-input) strong[class~=magicx-aia-shimmer-sweep]{animation:aiaPillReveal .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes aiaPillReveal{0%{opacity:0}}\n"] }]
         }], propDecorators: { apiConfig: [{
                 type: Input
+            }], additionalContext: [{
+                type: Input
             }], optionOverrides: [{
                 type: Input
             }], maskCompletedText: [{
@@ -2062,9 +2070,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * Public API surface for @magicx-eng/ai-autocomplete-angular.
  *
- * Populated incrementally as features land — see TDB.md §6.6 for the full
- * planned export list. Only symbols re-exported here are considered part of
- * the package's public contract (TDB §19.2).
+ * Populated incrementally as features land. Only symbols re-exported here
+ * are considered part of the package's public contract.
  */
 // === Submit-result builder (folds skipped params into completed_params) ===