@skyux/lookup 4.17.6 → 4.17.7

package/fesm5/skyux-lookup.js

@@ -919,7 +919,8 @@ var SkyAutocompleteComponent = /** @class */ (function () {
         if (!this.overlay) {
             var overlay = this.overlayService.create({
                 enableClose: false,
-                enablePointerEvents: true
+                enablePointerEvents: true,
+                wrapperClass: this.wrapperClass
             });
             overlay.attachTemplate(this.resultsTemplateRef);
             this.overlay = overlay;
@@ -1077,6 +1078,9 @@ var SkyAutocompleteComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], SkyAutocompleteComponent.prototype, "messageStream", null);
+    __decorate([
+        Input()
+    ], SkyAutocompleteComponent.prototype, "wrapperClass", void 0);
     __decorate([
         Input()
     ], SkyAutocompleteComponent.prototype, "propertiesToSearch", null);
@@ -2283,6 +2287,10 @@ var SkyLookupComponent = /** @class */ (function (_super) {
         }
     };
     SkyLookupComponent.prototype.onSearchButtonClick = function () {
+        /*istanbul ignore next*/
+        if (this.disabled) {
+            return;
+        }
         this.sendAutocompleteMessage(SkyAutocompleteMessageType.CloseDropdown);
         var isValueInTextBox = false;
         if (this.selectMode === SkyLookupSelectMode.single) {
@@ -2325,7 +2333,8 @@ var SkyLookupComponent = /** @class */ (function (_super) {
                     {
                         provide: SkyLookupShowMoreNativePickerContext, useValue: context
                     }
-                ]
+                ],
+                wrapperClass: this.wrapperClass
             });
             this.openNativePicker.componentInstance.addClick.subscribe(function () {
                 _this.addButtonClicked();
@@ -2498,6 +2507,9 @@ var SkyLookupComponent = /** @class */ (function (_super) {
     __decorate([
         Input()
     ], SkyLookupComponent.prototype, "selectMode", null);
+    __decorate([
+        Input()
+    ], SkyLookupComponent.prototype, "wrapperClass", void 0);
     __decorate([
         Output()
     ], SkyLookupComponent.prototype, "addClick", void 0);
@@ -2533,7 +2545,7 @@ var SkyLookupComponent = /** @class */ (function (_super) {
     SkyLookupComponent = __decorate([
         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
             ],