@skyux/lookup 14.2.0 → 14.2.2

package/fesm2022/skyux-lookup.mjs

@@ -3057,7 +3057,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     set tokens(tokens) {
         const value = this.#getValue();
         // Collapse the tokens into a single token if the user has selected many options.
-        if (this.enableShowMore && value.length > 5) {
+        if (this.enableShowMore() && value.length > 5) {
             this.#resourcesService
                 .getString('skyux_lookup_tokens_summary', value.length.toString())
                 .pipe(take(1))
@@ -3139,7 +3139,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
          * Whether to enable users to open a picker where they can view all options.
          * @default false
          */
-        this.enableShowMore = false;
+        this.enableShowMore = input(false, { ...(ngDevMode ? { debugName: "enableShowMore" } : {}), transform: booleanAttribute });
         /**
          * Whether to display a button that lets users add options to the list.
          * @default false
@@ -3176,17 +3176,16 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         if (ngControl) {
             ngControl.valueAccessor = this;
         }
+        effect(() => {
+            this.enableShowMore();
+            this.#populateInputBox();
+        });
     }
     ngOnInit() {
         if (this.inputBoxHostSvc && this.inputTemplateRef) {
             this.controlId = this.inputBoxHostSvc.controlId;
             this.ariaDescribedBy = this.inputBoxHostSvc.ariaDescribedBy;
-            this.inputBoxHostSvc.populate({
-                inputTemplate: this.inputTemplateRef,
-                buttonsTemplate: this.enableShowMore
-                    ? this.showMoreButtonTemplateRef
-                    : undefined,
-            });
+            this.#populateInputBox();
             this.inputBoxHostSvc?.setRequired(this.required);
         }
         else {
@@ -3247,6 +3246,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             this.#setValue(value, { emitEvent: true });
         }
     }
+    onTokenSelected() {
+        if (this.enableShowMore()) {
+            this.openPicker('');
+        }
+    }
     onTokensFocusIndexOverRange() {
         this.#windowRef.nativeWindow.setTimeout(() => {
             this.#focusInput();
@@ -3652,12 +3656,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #pickerModalOpen() {
         return !!(this.#openNativePicker || this.#openSelectionModal);
     }
+    #populateInputBox() {
+        if (this.inputBoxHostSvc && this.inputTemplateRef) {
+            this.inputBoxHostSvc.populate({
+                inputTemplate: this.inputTemplateRef,
+                buttonsTemplate: this.enableShowMore()
+                    ? this.showMoreButtonTemplateRef
+                    : undefined,
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i2$1.NgControl, optional: true, self: true }, { token: i2.SkyInputBoxHostService, optional: true }, { token: i7.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], enableShowMore: ["enableShowMore", "enableShowMore", booleanAttribute], placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: ["showAddButton", "showAddButton", booleanAttribute], showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n  <div\n    #lookupWrapper\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n      (openChange)=\"onAutocompleteOpenChange($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          @if (selectMode === 'multiple') {\n            <sky-tokens\n              class=\"sky-lookup-tokens\"\n              [disabled]=\"disabled\"\n              [displayWith]=\"descriptorProperty\"\n              [focusable]=\"false\"\n              [messageStream]=\"tokensController\"\n              [trackWith]=\"idProperty\"\n              [tokens]=\"tokens\"\n              (keyup)=\"onTokensKeyUp($event)\"\n              (tokensChange)=\"onTokensChange($event)\"\n              (tokensRendered)=\"onTokensRendered()\"\n              (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n              (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n            >\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n                (keydown)=\"inputKeydown($event)\"\n                (keyup)=\"inputKeyup($event)\"\n              ></textarea>\n            </sky-tokens>\n          } @else if (selectMode === 'single') {\n            <div class=\"sky-lookup-single-control\">\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n              ></textarea>\n            </div>\n          }\n        </div>\n        @if (!inputBoxHostSvc && enableShowMore) {\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n        }\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon iconName=\"search\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLookupComponent, isStandalone: false, selector: "sky-lookup", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, autocompleteAttribute: { classPropertyName: "autocompleteAttribute", publicName: "autocompleteAttribute", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableShowMore: { classPropertyName: "enableShowMore", publicName: "enableShowMore", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: false, isRequired: false, transformFunction: null }, idProperty: { classPropertyName: "idProperty", publicName: "idProperty", isSignal: false, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, showMoreConfig: { classPropertyName: "showMoreConfig", publicName: "showMoreConfig", isSignal: false, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: false, isRequired: false, transformFunction: null }, wrapperClass: { classPropertyName: "wrapperClass", publicName: "wrapperClass", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", openChange: "openChange", selectionModalOpenChange: "selectionModalOpenChange" }, providers: [SkyLookupAdapterService], viewQueries: [{ propertyName: "autocompleteInputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true, read: SkyAutocompleteInputDirective }, { propertyName: "showMoreButtonTemplateRef", first: true, predicate: ["showMoreButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "lookupWrapperRef", first: true, predicate: ["lookupWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (!inputBoxHostSvc) {\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n  <div\n    #lookupWrapper\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore()\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n      (openChange)=\"onAutocompleteOpenChange($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          @if (selectMode === 'multiple') {\n            <sky-tokens\n              class=\"sky-lookup-tokens\"\n              [disabled]=\"disabled\"\n              [displayWith]=\"descriptorProperty\"\n              [focusable]=\"false\"\n              [messageStream]=\"tokensController\"\n              [trackWith]=\"idProperty\"\n              [tokens]=\"tokens\"\n              (keyup)=\"onTokensKeyUp($event)\"\n              (tokensChange)=\"onTokensChange($event)\"\n              (tokensRendered)=\"onTokensRendered()\"\n              (tokenSelected)=\"onTokenSelected()\"\n              (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n            >\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n                (keydown)=\"inputKeydown($event)\"\n                (keyup)=\"inputKeyup($event)\"\n              ></textarea>\n            </sky-tokens>\n          } @else if (selectMode === 'single') {\n            <div class=\"sky-lookup-single-control\">\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n              ></textarea>\n            </div>\n          }\n        </div>\n        @if (!inputBoxHostSvc && enableShowMore()) {\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n        }\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon iconName=\"search\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "component", type: i5.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange", "tokensRendered"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!inputBoxHostSvc) {\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n  <div\n    #lookupWrapper\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n      (openChange)=\"onAutocompleteOpenChange($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          @if (selectMode === 'multiple') {\n            <sky-tokens\n              class=\"sky-lookup-tokens\"\n              [disabled]=\"disabled\"\n              [displayWith]=\"descriptorProperty\"\n              [focusable]=\"false\"\n              [messageStream]=\"tokensController\"\n              [trackWith]=\"idProperty\"\n              [tokens]=\"tokens\"\n              (keyup)=\"onTokensKeyUp($event)\"\n              (tokensChange)=\"onTokensChange($event)\"\n              (tokensRendered)=\"onTokensRendered()\"\n              (tokenSelected)=\"enableShowMore ? openPicker('') : undefined\"\n              (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n            >\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n                (keydown)=\"inputKeydown($event)\"\n                (keyup)=\"inputKeyup($event)\"\n              ></textarea>\n            </sky-tokens>\n          } @else if (selectMode === 'single') {\n            <div class=\"sky-lookup-single-control\">\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n              ></textarea>\n            </div>\n          }\n        </div>\n        @if (!inputBoxHostSvc && enableShowMore) {\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n        }\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon iconName=\"search\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}\n"] }]
+            args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (!inputBoxHostSvc) {\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n}\n\n<ng-template #inputTemplateRef>\n  <div\n    #lookupWrapper\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy || inputBoxHostSvc?.labelId\"\n      [attr.data-sky-lookup-show-more-picker-id]=\"showMorePickerId\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore()\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"searchOrDefault\"\n      [searchAsyncDisabled]=\"searchAsync.observers.length === 0\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (searchAsync)=\"onSearchAsync($event)\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n      (openChange)=\"onAutocompleteOpenChange($event)\"\n    >\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused && !disabled\n          }\"\n        >\n          @if (selectMode === 'multiple') {\n            <sky-tokens\n              class=\"sky-lookup-tokens\"\n              [disabled]=\"disabled\"\n              [displayWith]=\"descriptorProperty\"\n              [focusable]=\"false\"\n              [messageStream]=\"tokensController\"\n              [trackWith]=\"idProperty\"\n              [tokens]=\"tokens\"\n              (keyup)=\"onTokensKeyUp($event)\"\n              (tokensChange)=\"onTokensChange($event)\"\n              (tokensRendered)=\"onTokensRendered()\"\n              (tokenSelected)=\"onTokenSelected()\"\n              (focusIndexOverRange)=\"onTokensFocusIndexOverRange()\"\n            >\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n                (keydown)=\"inputKeydown($event)\"\n                (keyup)=\"inputKeyup($event)\"\n              ></textarea>\n            </sky-tokens>\n          } @else if (selectMode === 'single') {\n            <div class=\"sky-lookup-single-control\">\n              <textarea\n                class=\"sky-form-control sky-lookup-input\"\n                rows=\"1\"\n                skyAutocomplete\n                wrap=\"off\"\n                [attr.aria-describedby]=\"ariaDescribedBy | async\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.id]=\"controlId\"\n                [attr.placeholder]=\"placeholderText\"\n                [autocompleteAttribute]=\"autocompleteAttribute\"\n                [disabled]=\"disabled\"\n                (blur)=\"onAutocompleteBlur()\"\n                (focus)=\"onFocus($event)\"\n              ></textarea>\n            </div>\n          }\n        </div>\n        @if (!inputBoxHostSvc && enableShowMore()) {\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\" />\n        }\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template #showMoreButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n      [attr.aria-label]=\"\n        'skyux_lookup_search_button_show_more' | skyLibResources\n      \"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon iconName=\"search\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n", styles: [".sky-lookup:not(.sky-theme-modern *){--sky-override-lookup-form-control-background-color: transparent;--sky-override-lookup-input-box-margin-top: 0;--sky-override-lookup-input-box-padding-top: 0;--sky-override-lookup-input-box-search-background-color: inherit;--sky-override-lookup-input-box-search-padding: 6px 12px 5px 3px;--sky-override-lookup-input-box-tokens-align-items: baseline;--sky-override-lookup-input-box-tokens-content-padding-left: 10px;--sky-override-lookup-search-background-color: #ffffff;--sky-override-lookup-search-border: 1px solid #cdcfd2;--sky-override-lookup-search-disabled-background-color: #cdcfd2;--sky-override-lookup-search-line-height: 1.428571429em;--sky-override-lookup-single-control-padding-left: 7px;--sky-override-lookup-textarea-padding-left: 0;--sky-override-lookup-token-margin-top: 0;--sky-override-lookup-tokens-margin-top: -5px;--sky-override-lookup-tokens-padding-left: 0;--sky-override-lookup-tokens-row-gap: 0}.sky-lookup .sky-lookup-input.sky-form-control{resize:none;box-sizing:content-box;overflow:hidden;padding:0;background-color:var(--sky-override-lookup-form-control-background-color, inherit);border:0}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:none;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:var(--sky-override-lookup-search-disabled-background-color, inherit)}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:none}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{row-gap:var(--sky-override-lookup-tokens-row-gap, var(--sky-space-gap-action_group-s));margin-top:var(--sky-override-lookup-tokens-margin-top, -6px);margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{flex-basis:100px;padding-top:5px;padding-bottom:5px;padding-left:10px}.sky-lookup .sky-lookup-single-control{display:flex;padding-left:var(--sky-override-lookup-single-control-padding-left, inherit);width:100%}.sky-lookup-search{cursor:text;background-color:var(--sky-override-lookup-search-background-color, inherit);line-height:var(--sky-override-lookup-search-line-height, inherit);padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border:var(--sky-override-lookup-search-border, var(--sky-border-width-input-base) solid var(--sky-color-border-action-input-base))}.sky-lookup-disabled .sky-lookup-search{cursor:default}.sky-lookup-focused .sky-tokens-content{flex-basis:100px}.sky-lookup-single sky-tokens.sky-lookup-tokens sky-token{display:none}sky-lookup.ng-invalid.ng-touched .sky-lookup-search{box-shadow:0 0 8px #ef404499;border:1px solid var(--sky-highlight-color-danger);outline:none}sky-input-box .sky-lookup{width:100%;margin-top:var(--sky-override-lookup-input-box-margin-top, calc(-1 * (var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom))));padding-top:var(--sky-override-lookup-input-box-padding-top, calc(var(--sky-font-line_height-input-label) * var(--sky-font-size-input-label) + var(--sky-comp-input-label-space-inset-top) + var(--sky-comp-input-label-space-inset-bottom)))}sky-input-box .sky-lookup .sky-lookup-search{background-color:var(--sky-override-lookup-input-box-search-background-color, transparent);border:none;padding:var(--sky-override-lookup-input-box-search-padding, inherit);width:100%}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}:host-context(.sky-theme-modern) sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens sky-token{z-index:1}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:0;margin-bottom:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens:has(sky-token){padding-left:var(--sky-override-lookup-tokens-padding-left, var(--sky-comp-input-value-space-inset-left))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{align-items:var(--sky-override-lookup-input-box-tokens-align-items, flex-start)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0;margin-top:var(--sky-override-lookup-token-margin-top, -1px)}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-bottom:0;padding-top:0;padding-left:var(--sky-override-lookup-input-box-tokens-content-padding-left, var(--sky-space-gap-text_action-xs))}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens:has(sky-token) textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, 0)}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content{padding-left:0}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active{box-shadow:none}.sky-theme-modern sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:var(--sky-override-lookup-textarea-padding-left, var(--sky-comp-input-value-space-inset-left));resize:none}\n"] }]
         }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3680,10 +3694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }], required: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], enableShowMore: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], placeholderText: [{
+            }], enableShowMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableShowMore", required: false }] }], placeholderText: [{
                 type: Input
             }], idProperty: [{
                 type: Input