@skyux/lookup 4.17.2 → 4.17.7

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# 4.17.7 (2021-11-03)
+
+- Added bug fixes and features from the `master` branch. [#231](https://github.com/blackbaud/skyux-lookup/pull/231)
+
+# 4.17.6 (2021-10-13)
+
+- Fixed lookup component to allow for setting the value programatically when the component is disabled. [#226](https://github.com/blackbaud/skyux-lookup/pull/226) (Thanks [@ThomasOrtiz](https://github.com/ThomasOrtiz)!)
+
+# 4.17.5 (2021-09-15)
+
+- Fixed the lookup component to only send search text to the show more picker when a search is being executed. [#213](https://github.com/blackbaud/skyux-lookup/pull/213)
+
+# 4.17.4 (2021-08-30)
+
+- Updated screenshots to reflect theme updates. [#214](https://github.com/blackbaud/skyux-lookup/pull/214)
+
+# 4.17.3 (2021-08-11)
+
+- Fixed the lookup styles in Firefox and Safari. [#211](https://github.com/blackbaud/skyux-lookup/pull/211)
+
 # 4.17.2 (2021-08-05)
 
 - Fixed the lookup component's show more picker to respect the component's `search` and `propertiesToSearch` inputs. [#208](https://github.com/blackbaud/skyux-lookup/pull/208)

package/bundles/skyux-lookup.umd.js

@@ -1126,7 +1126,8 @@
             if (!this.overlay) {
                 var overlay = this.overlayService.create({
                     enableClose: false,
-                    enablePointerEvents: true
+                    enablePointerEvents: true,
+                    wrapperClass: this.wrapperClass
                 });
                 overlay.attachTemplate(this.resultsTemplateRef);
                 this.overlay = overlay;
@@ -1284,6 +1285,9 @@
         __decorate([
             core.Input()
         ], SkyAutocompleteComponent.prototype, "messageStream", null);
+        __decorate([
+            core.Input()
+        ], SkyAutocompleteComponent.prototype, "wrapperClass", void 0);
         __decorate([
             core.Input()
         ], SkyAutocompleteComponent.prototype, "propertiesToSearch", null);
@@ -1569,8 +1573,8 @@
         };
         SkyCountryFieldComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            this.themeSvc.settingsChange
-                .subscribe(function (change) {
+            var _a;
+            (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.subscribe(function (change) {
                 _this.currentTheme = change.currentSettings.theme.name;
                 _this.updateInputBox();
                 _this.changeDetector.markForCheck();
@@ -2181,7 +2185,7 @@
                 selector: 'skyux-lookup-show-more-modal',
                 template: "<sky-modal>\n  <sky-modal-header>\n    <ng-container *ngIf=\"context.userConfig?.title; else defaultTitle\">\n      {{context.userConfig.title}}\n    </ng-container>\n  </sky-modal-header>\n  <sky-modal-content>\n    <div\n      [skyViewkeeper]=\"['.sky-lookup-show-more-modal-toolbar', '.sky-lookup-show-more-modal-muiltiselect-toolbar']\"\n    >\n      <sky-toolbar\n        class=\"sky-lookup-show-more-modal-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <sky-search\n              [debounceTime]=\"250\"\n              [searchText]=\"searchText\"\n              (searchApply)=\"searchApplied($event)\"\n            >\n            </sky-search>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <button *ngIf=\"context.showAddButton\"\n              type=\"button\"\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n              (click)=\"addButtonClicked()\"\n            >\n              <sky-icon *skyThemeIf=\"'modern'\"\n                icon=\"add\"\n                iconType=\"skyux\"\n              ></sky-icon>\n              <sky-icon *skyThemeIf=\"'default'\"\n                icon=\"plus-circle\"\n              ></sky-icon>\n              {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n            </button>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n      <sky-toolbar *ngIf=\"context.selectMode === 'multiple'\"\n        class=\"sky-lookup-show-more-modal-muiltiselect-toolbar\"\n      >\n        <sky-toolbar-section>\n          <sky-toolbar-item>\n            <button\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-select-all-btn\"\n              type=\"button\"\n              (click)=\"selectAll()\"\n            >\n              {{'skyux_lookup_show_more_select_all_button_title' | skyLibResources}}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-item>\n            <button\n              class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-clear-all-btn\"\n              type=\"button\"\n              (click)=\"clearAll()\"\n            >\n              {{'skyux_lookup_show_more_clear_all_button_title' | skyLibResources}}\n            </button>\n          </sky-toolbar-item>\n          <sky-toolbar-view-actions>\n            <sky-checkbox\n              [(checked)]=\"onlyShowSelected\"\n              (change)=\"updateDataState()\"\n            >\n              <sky-checkbox-label>\n                {{'skyux_lookup_show_more_show_selected_option_title' | skyLibResources}}\n              </sky-checkbox-label>\n            </sky-checkbox>\n          </sky-toolbar-view-actions>\n        </sky-toolbar-section>\n      </sky-toolbar>\n    </div>\n    <div *ngIf=\"displayedItems.length===0\"\n      class=\"sky-font-deemphasized sky-lookup-show-more-no-results\"\n    >\n      {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n    </div>\n    <sky-repeater\n      class=\"sky-lookup-show-more-repeater\"\n      expandMode=\"none\"\n    >\n      <sky-repeater-item *ngFor=\"let item of displayedItems\"\n        [selectable]=\"context.selectMode === 'multiple'\"\n        [(isSelected)]=\"item.selected\"\n        (click)=\"itemClick(item)\"\n        (keyup.enter)=\"itemClick(item)\"\n        (isSelectedChange)=\"onItemSelect($event, item)\"\n      >\n        <sky-repeater-item-content>\n          <ng-container\n            *ngTemplateOutlet=\"context.userConfig?.itemTemplate ? context.userConfig?.itemTemplate : defaultItemTemplate; context: { item: item.value }\">\n          </ng-container>\n        </sky-repeater-item-content>\n      </sky-repeater-item>\n    </sky-repeater>\n    <sky-infinite-scroll\n      [enabled]=\"itemsHaveMore\"\n      (scrollEnd)=\"addItems()\"\n    >\n    </sky-infinite-scroll>\n  </sky-modal-content>\n  <sky-modal-footer>\n    <button\n      class=\"sky-btn sky-btn-primary sky-margin-inline-compact sky-lookup-show-more-modal-save\"\n      type=\"button\"\n      (click)=\"modalInstance.save(selectedItems)\"\n    >\n      {{ 'skyux_lookup_show_more_select' | skyLibResources}}\n    </button>\n    <button\n      class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-close\"\n      type=\"button\"\n      (click)=\"modalInstance.close()\"\n    >\n      {{ 'skyux_lookup_show_more_cancel' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n\n<ng-template\n  let-item=\"item\"\n  #defaultItemTemplate\n>\n  {{ item[context.descriptorProperty] }}\n</ng-template>\n\n<ng-template #defaultTitle>\n  <ng-container *ngIf=\"context.selectMode === 'single'\">\n    {{ 'skyux_lookup_show_more_modal_title_single' | skyLibResources }}\n  </ng-container>\n  <ng-container *ngIf=\"context.selectMode === 'multiple'\">\n    {{ 'skyux_lookup_show_more_modal_title_multiple' | skyLibResources }}\n  </ng-container>\n</ng-template>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [".sky-lookup-show-more-no-results{padding:20px 0}.sky-theme-modern .sky-lookup-show-more-no-results,:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}"]
+                styles: [".sky-lookup-show-more-no-results{padding:20px 0}:host-context(.sky-theme-modern) .sky-lookup-show-more-no-results{padding:30px 0}.sky-theme-modern .sky-lookup-show-more-no-results{padding:30px 0}"]
             })
         ], SkyLookupShowMoreModalComponent);
         return SkyLookupShowMoreModalComponent;
@@ -2328,6 +2332,7 @@
         });
         SkyLookupComponent.prototype.ngOnInit = function () {
             var _this = this;
+            var _a;
             if (this.inputBoxHostSvc) {
                 this.inputBoxHostSvc.populate({
                     inputTemplate: this.inputTemplateRef,
@@ -2339,9 +2344,7 @@
             if (this.themeSvc) {
                 // This is required for the autocomplete directive to be set after elements
                 // are rearranged when switching themes.
-                this.themeSvc.settingsChange
-                    .pipe(operators.takeUntil(this.ngUnsubscribe))
-                    .subscribe(function () {
+                (_a = this.themeSvc) === null || _a === void 0 ? void 0 : _a.settingsChange.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function () {
                     _this.changeDetector.markForCheck();
                 });
             }
@@ -2418,10 +2421,8 @@
             }
         };
         SkyLookupComponent.prototype.writeValue = function (value) {
-            if (!this.disabled) {
-                this.value = value ? value : [];
-                this.updateForSelectMode();
-            }
+            this.value = value ? value : [];
+            this.updateForSelectMode();
         };
         SkyLookupComponent.prototype.registerOnChange = function (fn) {
             this.onChange = fn;
@@ -2493,8 +2494,17 @@
             }
         };
         SkyLookupComponent.prototype.onSearchButtonClick = function () {
+            /*istanbul ignore next*/
+            if (this.disabled) {
+                return;
+            }
             this.sendAutocompleteMessage(SkyAutocompleteMessageType.CloseDropdown);
-            this.openPicker(this.autocompleteInputDirective.inputTextValue);
+            var isValueInTextBox = false;
+            if (this.selectMode === exports.SkyLookupSelectMode.single) {
+                isValueInTextBox = this.autocompleteInputDirective.inputTextValue === this.autocompleteInputDirective.value[this.descriptorProperty];
+            }
+            this.openPicker(isValueInTextBox ? '' : this.autocompleteInputDirective.inputTextValue);
+            this.autocompleteInputDirective.restoreInputTextValueToPreviousState();
         };
         SkyLookupComponent.prototype.onShowMoreClick = function (event) {
             this.openPicker(event === null || event === void 0 ? void 0 : event.inputValue);
@@ -2530,7 +2540,8 @@
                         {
                             provide: SkyLookupShowMoreNativePickerContext, useValue: context
                         }
-                    ]
+                    ],
+                    wrapperClass: this.wrapperClass
                 });
                 this.openNativePicker.componentInstance.addClick.subscribe(function () {
                     _this.addButtonClicked();
@@ -2703,6 +2714,9 @@
         __decorate([
             core.Input()
         ], SkyLookupComponent.prototype, "selectMode", null);
+        __decorate([
+            core.Input()
+        ], SkyLookupComponent.prototype, "wrapperClass", void 0);
         __decorate([
             core.Output()
         ], SkyLookupComponent.prototype, "addClick", void 0);
@@ -2738,13 +2752,13 @@
         SkyLookupComponent = __decorate([
             core.Component({
                 selector: 'sky-lookup',
-                template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template\n  #inputTemplateRef\n>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      (addClick)=\"addButtonClicked()\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\n\n      <div class=\"sky-lookup-search-flex-wrapper\">\n        <div\n          class=\"sky-lookup-search\"\n          [ngClass]=\"{\n            'sky-field-status-active': isInputFocused\n          }\"\n        >\n          <sky-tokens *ngIf=\"selectMode === 'multiple'\"\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            (tokenSelected)=\"enableShowMore ? openPicker(undefined) : 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-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event, $event.target.value)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\"></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template\n  #showMoreButtonTemplateRef\n>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      class=\"sky-btn sky-btn-default\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_lookup_search_button_show_more' | skyLibResources\"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"search\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template\n  #searchIconTemplateRef\n>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n",
+                template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n  <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template\n  #inputTemplateRef\n>\n  <div\n    class=\"sky-lookup\"\n    [ngClass]=\"{\n      'sky-lookup-focused': isInputFocused,\n      'sky-lookup-disabled': disabled,\n      'sky-lookup-single': selectMode === 'single'\n    }\"\n    #lookupWrapper\n  >\n    <sky-autocomplete\n      [ariaLabelledBy]=\"ariaLabelledBy\"\n      [data]=\"data\"\n      [debounceTime]=\"debounceTime\"\n      [descriptorProperty]=\"descriptorProperty\"\n      [enableShowMore]=\"enableShowMore\"\n      [messageStream]=\"autocompleteController\"\n      [propertiesToSearch]=\"propertiesToSearch\"\n      [search]=\"search\"\n      [searchFilters]=\"searchFilters\"\n      [searchResultsLimit]=\"searchResultsLimit\"\n      [searchResultTemplate]=\"searchResultTemplate\"\n      [searchTextMinimumCharacters]=\"searchTextMinimumCharacters\"\n      [showAddButton]=\"showAddButton\"\n      [wrapperClass]=\"wrapperClass\"\n      (addClick)=\"addButtonClicked()\"\n      (selectionChange)=\"onAutocompleteSelectionChange($event)\"\n      (showMoreClick)=\"onShowMoreClick($event)\"\n    >\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          <sky-tokens *ngIf=\"selectMode === 'multiple'\"\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            (tokenSelected)=\"enableShowMore ? openPicker(undefined) : 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-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n              (keydown)=\"inputKeydown($event, $event.target.value)\"\n              (keyup)=\"inputKeyup($event)\"\n            ></textarea>\n          </sky-tokens>\n          <div *ngIf=\"selectMode === 'single'\"\n            class=\"sky-lookup-single-control\"\n          >\n            <textarea\n              class=\"sky-form-control sky-lookup-input\"\n              rows=\"1\"\n              skyAutocomplete\n              wrap=\"off\"\n              [attr.aria-label]=\"ariaLabel\"\n              [attr.aria-labelledby]=\"ariaLabelledBy\"\n              [attr.placeholder]=\"placeholderText\"\n              [autocompleteAttribute]=\"autocompleteAttribute\"\n              [disabled]=\"disabled\"\n              (blur)=\"onAutocompleteBlur()\"\n            ></textarea>\n          </div>\n        </div>\n        <ng-container *ngIf=\"!inputBoxHostSvc && enableShowMore\">\n          <ng-container *ngTemplateOutlet=\"showMoreButtonTemplateRef\"></ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n          <ng-container *ngTemplateOutlet=\"searchIconTemplateRef\"></ng-container>\n        </ng-container>\n      </div>\n    </sky-autocomplete>\n  </div>\n</ng-template>\n\n<ng-template\n  #showMoreButtonTemplateRef\n>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      class=\"sky-btn sky-btn-default\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"{'sky-btn-disabled': disabled}\"\n      type=\"button\"\n      [attr.aria-label]=\"'skyux_lookup_search_button_show_more' | skyLibResources\"\n      (click)=\"onSearchButtonClick()\"\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"search\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        iconType=\"skyux\"\n        icon=\"search\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template\n  #searchIconTemplateRef\n>\n  <div\n    class=\"sky-input-group-icon sky-input-box-icon-inset\"\n    [ngClass]=\"{'sky-lookup-disabled': disabled}\"\n  >\n    <sky-icon *skyThemeIf=\"'default'\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n    <sky-icon *skyThemeIf=\"'modern'\"\n      iconType=\"skyux\"\n      icon=\"search\"\n      [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n    ></sky-icon>\n  </div>\n</ng-template>\n",
                 providers: [
                     SkyLookupAdapterService
                 ],
                 encapsulation: core.ViewEncapsulation.None,
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
-                styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:0;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:0}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.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 rgba(239,64,68,.6);border:1px solid #ef4044;outline:0}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens,:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens,:host-context(.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 sky-token,: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}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content,: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}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child,: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}.sky-theme-modern sky-input-box .sky-lookup.sky-lookup-single sky-tokens.sky-lookup-tokens .sky-tokens-content,:host-context(.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,:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-search{background-color:transparent;padding:0 0 0 15px}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-search.sky-field-status-active,:host-context(.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,:host-context(.sky-theme-modern) sky-input-box .sky-lookup textarea.sky-lookup-input.sky-form-control{padding-left:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control,:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}"]
+                styles: [".sky-lookup .sky-lookup-input.sky-form-control{resize:none;border:0;box-sizing:content-box;height:1.428571429em;overflow:hidden;padding:0;background-color:transparent}.sky-lookup .sky-lookup-input.sky-form-control:focus{outline:0;box-shadow:none}.sky-lookup .sky-lookup-search-flex-wrapper{display:flex}.sky-lookup.sky-lookup-disabled .sky-lookup-search{background-color:#cdcfd2}.sky-lookup sky-tokens.sky-lookup-tokens:focus{outline:0}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-5px;margin-bottom:-5px}.sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content{padding-top:5px;padding-bottom:5px;padding-left:10px;flex-basis:100px}.sky-lookup .sky-lookup-single-control{display:inline-flex;padding-left:7px;width:100%}.sky-lookup-search{cursor:text;background-color:#fff;line-height:1.428571429em;padding:6px 12px 6px 3px;flex-grow:1}.sky-lookup-search:not(.sky-field-status-active){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}.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 rgba(239,64,68,.6);border:1px solid #ef4044;outline:0}sky-input-box .sky-lookup{width:100%}sky-input-box .sky-lookup .sky-lookup-search{border:none;padding-bottom:5px;width:100%}:host-context(.sky-theme-modern) sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}: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 sky-token{padding-bottom:0;padding-top:0}: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}: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-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{background-color:transparent;padding:0 0 0 15px}: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:0;resize:none}:host-context(.sky-theme-modern) sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}.sky-theme-modern sky-tokens.sky-lookup-tokens .sky-tokens{margin-top:-6px}.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 .sky-tokens-content,.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens sky-token{padding-bottom:0;padding-top:0}.sky-theme-modern sky-input-box .sky-lookup sky-tokens.sky-lookup-tokens .sky-tokens .sky-tokens-content:first-child,.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{background-color:transparent;padding:0 0 0 15px}.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:0;resize:none}.sky-theme-modern sky-input-box .sky-lookup .sky-lookup-single-control{padding-left:0}"]
             }),
             __param(3, core.Self()), __param(3, core.Optional()),
             __param(7, core.Optional()),