@skyux/lookup 6.16.0 → 6.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/documentation.json +653 -697
- package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs +12 -12
- package/esm2020/lib/modules/lookup/lookup.component.mjs +2 -2
- package/esm2020/testing/autocomplete/autocomplete-harness-filters.mjs +1 -1
- package/esm2020/testing/autocomplete/autocomplete-harness.mjs +2 -1
- package/esm2020/testing/autocomplete/autocomplete-search-result-harness-filters.mjs +1 -1
- package/esm2020/testing/autocomplete/autocomplete-search-result-harness.mjs +2 -1
- package/esm2020/testing/country-field/country-field-fixture.mjs +2 -1
- package/esm2020/testing/country-field/country-field-testing.module.mjs +4 -1
- package/esm2020/testing/lookup/lookup-harness-filters.mjs +1 -1
- package/esm2020/testing/lookup/lookup-harness.mjs +2 -1
- package/esm2020/testing/lookup/lookup-selection-harness-filters.mjs +1 -1
- package/esm2020/testing/lookup/lookup-selection-harness.mjs +2 -1
- package/esm2020/testing/lookup/lookup-selections-list-harness.mjs +2 -1
- package/esm2020/testing/lookup/lookup-show-more-picker-harness-filters.mjs +1 -1
- package/esm2020/testing/lookup/lookup-show-more-picker-harness.mjs +2 -1
- package/esm2020/testing/lookup/lookup-show-more-picker-search-result-harness-filters.mjs +1 -1
- package/esm2020/testing/lookup/lookup-show-more-picker-search-result-harness.mjs +2 -1
- package/esm2020/testing/search/search-fixture.mjs +2 -1
- package/esm2020/testing/search/search-harness-filters.mjs +1 -1
- package/esm2020/testing/search/search-harness.mjs +2 -1
- package/esm2020/testing/search/search-testing.module.mjs +4 -1
- package/fesm2015/skyux-lookup-testing.mjs +16 -0
- package/fesm2015/skyux-lookup-testing.mjs.map +1 -1
- package/fesm2015/skyux-lookup.mjs +13 -13
- package/fesm2015/skyux-lookup.mjs.map +1 -1
- package/fesm2020/skyux-lookup-testing.mjs +16 -0
- package/fesm2020/skyux-lookup-testing.mjs.map +1 -1
- package/fesm2020/skyux-lookup.mjs +13 -13
- package/fesm2020/skyux-lookup.mjs.map +1 -1
- package/package.json +10 -10
- package/testing/autocomplete/autocomplete-harness-filters.d.ts +1 -0
- package/testing/autocomplete/autocomplete-harness.d.ts +1 -0
- package/testing/autocomplete/autocomplete-search-result-harness-filters.d.ts +1 -0
- package/testing/autocomplete/autocomplete-search-result-harness.d.ts +1 -0
- package/testing/country-field/country-field-fixture.d.ts +1 -0
- package/testing/country-field/country-field-testing.module.d.ts +3 -0
- package/testing/lookup/lookup-harness-filters.d.ts +1 -0
- package/testing/lookup/lookup-harness.d.ts +1 -0
- package/testing/lookup/lookup-selection-harness-filters.d.ts +1 -0
- package/testing/lookup/lookup-selection-harness.d.ts +1 -0
- package/testing/lookup/lookup-selections-list-harness.d.ts +1 -0
- package/testing/lookup/lookup-show-more-picker-harness-filters.d.ts +1 -0
- package/testing/lookup/lookup-show-more-picker-harness.d.ts +1 -0
- package/testing/lookup/lookup-show-more-picker-search-result-harness-filters.d.ts +1 -0
- package/testing/lookup/lookup-show-more-picker-search-result-harness.d.ts +1 -0
- package/testing/search/search-fixture.d.ts +1 -0
- package/testing/search/search-harness-filters.d.ts +1 -0
- package/testing/search/search-harness.d.ts +1 -0
- package/testing/search/search-testing.module.d.ts +3 -0
|
@@ -95,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
95
95
|
}]
|
|
96
96
|
}] });
|
|
97
97
|
|
|
98
|
-
var _SkyAutocompleteInputDirective_instances, _SkyAutocompleteInputDirective_blur, _SkyAutocompleteInputDirective_control, _SkyAutocompleteInputDirective_elementRef, _SkyAutocompleteInputDirective_focus, _SkyAutocompleteInputDirective_isFirstChange, _SkyAutocompleteInputDirective_ngUnsubscribe, _SkyAutocompleteInputDirective_renderer, _SkyAutocompleteInputDirective_textChanges,
|
|
98
|
+
var _SkyAutocompleteInputDirective_instances, _SkyAutocompleteInputDirective_blur, _SkyAutocompleteInputDirective_blurObs, _SkyAutocompleteInputDirective_control, _SkyAutocompleteInputDirective_elementRef, _SkyAutocompleteInputDirective_focus, _SkyAutocompleteInputDirective_focusObs, _SkyAutocompleteInputDirective_isFirstChange, _SkyAutocompleteInputDirective_ngUnsubscribe, _SkyAutocompleteInputDirective_renderer, _SkyAutocompleteInputDirective_textChanges, _SkyAutocompleteInputDirective_textChangesObs, _SkyAutocompleteInputDirective__autocompleteAttribute, _SkyAutocompleteInputDirective__disabled, _SkyAutocompleteInputDirective__displayWith, _SkyAutocompleteInputDirective__value, _SkyAutocompleteInputDirective_setAttributes, _SkyAutocompleteInputDirective_getValueByKey;
|
|
99
99
|
const SKY_AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
100
100
|
provide: NG_VALUE_ACCESSOR,
|
|
101
101
|
useExisting: forwardRef(() => SkyAutocompleteInputDirective),
|
|
@@ -110,19 +110,19 @@ class SkyAutocompleteInputDirective {
|
|
|
110
110
|
constructor(elementRef, renderer) {
|
|
111
111
|
_SkyAutocompleteInputDirective_instances.add(this);
|
|
112
112
|
_SkyAutocompleteInputDirective_blur.set(this, void 0);
|
|
113
|
+
_SkyAutocompleteInputDirective_blurObs.set(this, void 0);
|
|
113
114
|
_SkyAutocompleteInputDirective_control.set(this, void 0);
|
|
114
115
|
_SkyAutocompleteInputDirective_elementRef.set(this, void 0);
|
|
115
116
|
_SkyAutocompleteInputDirective_focus.set(this, void 0);
|
|
117
|
+
_SkyAutocompleteInputDirective_focusObs.set(this, void 0);
|
|
116
118
|
_SkyAutocompleteInputDirective_isFirstChange.set(this, true);
|
|
117
119
|
_SkyAutocompleteInputDirective_ngUnsubscribe.set(this, new Subject());
|
|
118
120
|
_SkyAutocompleteInputDirective_renderer.set(this, void 0);
|
|
119
121
|
_SkyAutocompleteInputDirective_textChanges.set(this, void 0);
|
|
122
|
+
_SkyAutocompleteInputDirective_textChangesObs.set(this, void 0);
|
|
120
123
|
_SkyAutocompleteInputDirective__autocompleteAttribute.set(this, void 0);
|
|
121
|
-
_SkyAutocompleteInputDirective__blurObs.set(this, void 0);
|
|
122
124
|
_SkyAutocompleteInputDirective__disabled.set(this, false);
|
|
123
125
|
_SkyAutocompleteInputDirective__displayWith.set(this, '');
|
|
124
|
-
_SkyAutocompleteInputDirective__focusObs.set(this, void 0);
|
|
125
|
-
_SkyAutocompleteInputDirective__textChangesObs.set(this, void 0);
|
|
126
126
|
_SkyAutocompleteInputDirective__value.set(this, void 0);
|
|
127
127
|
// istanbul ignore next
|
|
128
128
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
@@ -132,9 +132,9 @@ class SkyAutocompleteInputDirective {
|
|
|
132
132
|
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blur, new Subject(), "f");
|
|
133
133
|
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focus, new Subject(), "f");
|
|
134
134
|
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChanges, new Subject(), "f");
|
|
135
|
-
__classPrivateFieldSet(this,
|
|
136
|
-
__classPrivateFieldSet(this,
|
|
137
|
-
__classPrivateFieldSet(this,
|
|
135
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_blurObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blur, "f").asObservable(), "f");
|
|
136
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_focusObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focus, "f").asObservable(), "f");
|
|
137
|
+
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChangesObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").asObservable(), "f");
|
|
138
138
|
}
|
|
139
139
|
/**
|
|
140
140
|
* Specifies the value for the `autocomplete` attribute on the form input.
|
|
@@ -164,7 +164,7 @@ class SkyAutocompleteInputDirective {
|
|
|
164
164
|
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__disabled, "f");
|
|
165
165
|
}
|
|
166
166
|
get blur() {
|
|
167
|
-
return __classPrivateFieldGet(this,
|
|
167
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_blurObs, "f");
|
|
168
168
|
}
|
|
169
169
|
get displayWith() {
|
|
170
170
|
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__displayWith, "f");
|
|
@@ -174,7 +174,7 @@ class SkyAutocompleteInputDirective {
|
|
|
174
174
|
this.inputTextValue = __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_instances, "m", _SkyAutocompleteInputDirective_getValueByKey).call(this);
|
|
175
175
|
}
|
|
176
176
|
get focus() {
|
|
177
|
-
return __classPrivateFieldGet(this,
|
|
177
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_focusObs, "f");
|
|
178
178
|
}
|
|
179
179
|
get inputTextValue() {
|
|
180
180
|
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value;
|
|
@@ -183,7 +183,7 @@ class SkyAutocompleteInputDirective {
|
|
|
183
183
|
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_elementRef, "f").nativeElement.value = value || '';
|
|
184
184
|
}
|
|
185
185
|
get textChanges() {
|
|
186
|
-
return __classPrivateFieldGet(this,
|
|
186
|
+
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChangesObs, "f");
|
|
187
187
|
}
|
|
188
188
|
get value() {
|
|
189
189
|
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__value, "f");
|
|
@@ -299,7 +299,7 @@ class SkyAutocompleteInputDirective {
|
|
|
299
299
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
300
300
|
onTouched() { }
|
|
301
301
|
}
|
|
302
|
-
_SkyAutocompleteInputDirective_blur = new WeakMap(),
|
|
302
|
+
_SkyAutocompleteInputDirective_blur = new WeakMap(), _SkyAutocompleteInputDirective_blurObs = new WeakMap(), _SkyAutocompleteInputDirective_control = new WeakMap(), _SkyAutocompleteInputDirective_elementRef = new WeakMap(), _SkyAutocompleteInputDirective_focus = new WeakMap(), _SkyAutocompleteInputDirective_focusObs = new WeakMap(), _SkyAutocompleteInputDirective_isFirstChange = new WeakMap(), _SkyAutocompleteInputDirective_ngUnsubscribe = new WeakMap(), _SkyAutocompleteInputDirective_renderer = new WeakMap(), _SkyAutocompleteInputDirective_textChanges = new WeakMap(), _SkyAutocompleteInputDirective_textChangesObs = new WeakMap(), _SkyAutocompleteInputDirective__autocompleteAttribute = new WeakMap(), _SkyAutocompleteInputDirective__disabled = new WeakMap(), _SkyAutocompleteInputDirective__displayWith = new WeakMap(), _SkyAutocompleteInputDirective__value = new WeakMap(), _SkyAutocompleteInputDirective_instances = new WeakSet(), _SkyAutocompleteInputDirective_setAttributes = function _SkyAutocompleteInputDirective_setAttributes(elementRef) {
|
|
303
303
|
const element = elementRef.nativeElement;
|
|
304
304
|
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocomplete', this.autocompleteAttribute);
|
|
305
305
|
__classPrivateFieldGet(this, _SkyAutocompleteInputDirective_renderer, "f").setAttribute(element, 'autocapitalize', 'none');
|
|
@@ -3046,10 +3046,10 @@ _SkyLookupComponent_adapter = new WeakMap(), _SkyLookupComponent_elementRef = ne
|
|
|
3046
3046
|
}
|
|
3047
3047
|
};
|
|
3048
3048
|
SkyLookupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAppWindowRef }, { token: SkyLookupAdapterService }, { token: i1$1.SkyModalService }, { token: i4$1.SkyLibResourcesService }, { token: i8.NgControl, optional: true, self: true }, { token: i7.SkyInputBoxHostService, optional: true }, { token: i7$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3049
|
-
SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, 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 }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\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 [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]=\"search\"\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 >\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\n *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\"\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)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n </sky-tokens>\n <div\n *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\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"search\"\n [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n ></sky-icon>\n <sky-icon\n *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", 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:none;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:none}.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 #ef404499;border:1px solid #ef4044;outline:none}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-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{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{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{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}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3049
|
+
SkyLookupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SkyLookupComponent, selector: "sky-lookup", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", autocompleteAttribute: "autocompleteAttribute", data: "data", disabled: "disabled", enableShowMore: "enableShowMore", placeholderText: "placeholderText", idProperty: "idProperty", showAddButton: "showAddButton", showMoreConfig: "showMoreConfig", selectMode: "selectMode", wrapperClass: "wrapperClass" }, outputs: { addClick: "addClick" }, 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 }, { propertyName: "searchIconTemplateRef", first: true, predicate: ["searchIconTemplateRef"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\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 [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]=\"search\"\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 >\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\n *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\"\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)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n </sky-tokens>\n <div\n *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\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"search\"\n [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n ></sky-icon>\n <sky-icon\n *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", 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:none;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:none}.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 #ef404499;border:1px solid #ef4044;outline:none}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-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 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-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 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{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{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{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}\n"], components: [{ type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync"] }, { type: i4.λ13, selector: "sky-tokens", inputs: ["disabled", "dismissible", "displayWith", "trackWith", "focusable", "tokens", "messageStream"], outputs: ["focusIndexOverRange", "focusIndexUnderRange", "tokenSelected", "tokensChange"] }, { type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SkyAutocompleteInputDirective, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { type: i7$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i4$1.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3050
3050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SkyLookupComponent, decorators: [{
|
|
3051
3051
|
type: Component,
|
|
3052
|
-
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\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 [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]=\"search\"\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 >\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\n *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\"\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)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n </sky-tokens>\n <div\n *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\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"search\"\n [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n ></sky-icon>\n <sky-icon\n *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", 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:none;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:none}.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 #ef404499;border:1px solid #ef4044;outline:none}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-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{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{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{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}\n"] }]
|
|
3052
|
+
args: [{ selector: 'sky-lookup', providers: [SkyLookupAdapterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!inputBoxHostSvc\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n</ng-container>\n\n<ng-template #inputTemplateRef>\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 [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]=\"search\"\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 >\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\n *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\"\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)\"\n (keyup)=\"inputKeyup($event)\"\n ></textarea>\n </sky-tokens>\n <div\n *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\n *ngTemplateOutlet=\"showMoreButtonTemplateRef\"\n ></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!inputBoxHostSvc && !enableShowMore\">\n <ng-container\n *ngTemplateOutlet=\"searchIconTemplateRef\"\n ></ng-container>\n </ng-container>\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 [disabled]=\"disabled\"\n [ngClass]=\"{ 'sky-btn-disabled': disabled }\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_search_button_show_more' | skyLibResources\n \"\n (click)=\"onSearchButtonClick()\"\n >\n <sky-icon *skyThemeIf=\"'default'\" icon=\"search\"></sky-icon>\n <sky-icon\n *skyThemeIf=\"'modern'\"\n iconType=\"skyux\"\n icon=\"search\"\n ></sky-icon>\n </button>\n </div>\n</ng-template>\n\n<ng-template #searchIconTemplateRef>\n <div\n class=\"sky-input-group-icon sky-input-box-icon-inset\"\n [ngClass]=\"{ 'sky-lookup-disabled': disabled }\"\n >\n <sky-icon\n *skyThemeIf=\"'default'\"\n icon=\"search\"\n [attr.aria-label]=\"'skyux_lookup_search_icon' | skyLibResources\"\n ></sky-icon>\n <sky-icon\n *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", 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:none;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:none}.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 #ef404499;border:1px solid #ef4044;outline:none}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-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 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-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 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{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{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{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}\n"] }]
|
|
3053
3053
|
}], ctorParameters: function () {
|
|
3054
3054
|
return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.SkyAppWindowRef }, { type: SkyLookupAdapterService }, { type: i1$1.SkyModalService }, { type: i4$1.SkyLibResourcesService }, { type: i8.NgControl, decorators: [{
|
|
3055
3055
|
type: Self
|