@skyux/lookup 7.5.0 → 7.6.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 +86 -86
- package/esm2020/lib/modules/autocomplete/autocomplete-input.directive.mjs +3 -3
- package/esm2020/lib/modules/autocomplete/autocomplete-search-async-disabled.pipe.mjs +5 -5
- package/esm2020/lib/modules/autocomplete/autocomplete.component.mjs +13 -13
- package/esm2020/lib/modules/autocomplete/autocomplete.module.mjs +4 -4
- package/esm2020/lib/modules/autocomplete/types/autocomplete-message.mjs +1 -1
- package/esm2020/lib/modules/autocomplete/types/autocomplete-search-async-result.mjs +1 -1
- package/esm2020/lib/modules/autocomplete/types/autocomplete-selection-change.mjs +1 -1
- package/esm2020/lib/modules/country-field/country-field.component.mjs +8 -8
- package/esm2020/lib/modules/country-field/types/country.mjs +1 -1
- package/esm2020/lib/modules/lookup/lookup-autocomplete-adapter.mjs +5 -5
- package/esm2020/lib/modules/lookup/lookup-show-more-modal.component.mjs +3 -3
- package/esm2020/lib/modules/lookup/lookup.component.mjs +6 -6
- package/esm2020/lib/modules/lookup/types/lookup-show-more-config.mjs +1 -1
- package/esm2020/lib/modules/lookup/types/lookup-show-more-custom-picker-context.mjs +1 -1
- package/esm2020/lib/modules/lookup/types/lookup-show-more-native-picker-config.mjs +1 -1
- package/esm2020/lib/modules/search/search.component.mjs +4 -4
- package/esm2020/lib/modules/selection-modal/selection-modal.component.mjs +3 -3
- package/fesm2015/skyux-lookup.mjs +43 -43
- package/fesm2015/skyux-lookup.mjs.map +1 -1
- package/fesm2020/skyux-lookup.mjs +43 -43
- package/fesm2020/skyux-lookup.mjs.map +1 -1
- package/lib/modules/autocomplete/autocomplete-input.directive.d.ts +2 -2
- package/lib/modules/autocomplete/autocomplete-search-async-disabled.pipe.d.ts +3 -3
- package/lib/modules/autocomplete/autocomplete.component.d.ts +14 -14
- package/lib/modules/autocomplete/autocomplete.module.d.ts +1 -1
- package/lib/modules/autocomplete/types/autocomplete-message.d.ts +1 -1
- package/lib/modules/autocomplete/types/autocomplete-search-async-result.d.ts +1 -1
- package/lib/modules/autocomplete/types/autocomplete-selection-change.d.ts +1 -1
- package/lib/modules/country-field/country-field.component.d.ts +7 -7
- package/lib/modules/country-field/types/country.d.ts +1 -1
- package/lib/modules/lookup/lookup-autocomplete-adapter.d.ts +8 -8
- package/lib/modules/lookup/lookup.component.d.ts +11 -11
- package/lib/modules/lookup/types/lookup-show-more-config.d.ts +2 -2
- package/lib/modules/lookup/types/lookup-show-more-custom-picker-context.d.ts +3 -3
- package/lib/modules/lookup/types/lookup-show-more-native-picker-config.d.ts +2 -2
- package/lib/modules/search/search.component.d.ts +5 -5
- package/package.json +10 -10
|
@@ -136,7 +136,7 @@ class SkyAutocompleteInputDirective {
|
|
|
136
136
|
__classPrivateFieldSet(this, _SkyAutocompleteInputDirective_textChangesObs, __classPrivateFieldGet(this, _SkyAutocompleteInputDirective_textChanges, "f").asObservable(), "f");
|
|
137
137
|
}
|
|
138
138
|
/**
|
|
139
|
-
*
|
|
139
|
+
* The value for the `autocomplete` attribute on the form input.
|
|
140
140
|
* @default "off"
|
|
141
141
|
*/
|
|
142
142
|
set autocompleteAttribute(value) {
|
|
@@ -152,7 +152,7 @@ class SkyAutocompleteInputDirective {
|
|
|
152
152
|
return __classPrivateFieldGet(this, _SkyAutocompleteInputDirective__autocompleteAttribute, "f") || 'off';
|
|
153
153
|
}
|
|
154
154
|
/**
|
|
155
|
-
*
|
|
155
|
+
* Whether to disable the autocomplete field.
|
|
156
156
|
* @default false
|
|
157
157
|
*/
|
|
158
158
|
set disabled(value) {
|
|
@@ -325,14 +325,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
325
325
|
/**
|
|
326
326
|
* @internal
|
|
327
327
|
*/
|
|
328
|
-
class
|
|
328
|
+
class SkyAutocompleteSearchAsyncDisabledPipe {
|
|
329
329
|
transform(searchAsync, searchAsyncDisabled) {
|
|
330
330
|
return searchAsyncDisabled || searchAsync.observers.length === 0;
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type:
|
|
333
|
+
SkyAutocompleteSearchAsyncDisabledPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
334
|
+
SkyAutocompleteSearchAsyncDisabledPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" });
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteSearchAsyncDisabledPipe, decorators: [{
|
|
336
336
|
type: Pipe,
|
|
337
337
|
args: [{
|
|
338
338
|
name: 'skyAutocompleteSearchAsyncDisabled',
|
|
@@ -467,12 +467,12 @@ class SkyAutocompleteComponent {
|
|
|
467
467
|
_SkyAutocompleteComponent_instances.add(this);
|
|
468
468
|
/**
|
|
469
469
|
* @internal
|
|
470
|
-
*
|
|
470
|
+
* Whether to display a button in the dropdown that opens a picker where users can view all options.
|
|
471
471
|
*/
|
|
472
472
|
this.enableShowMore = false;
|
|
473
473
|
/**
|
|
474
474
|
* @internal
|
|
475
|
-
*
|
|
475
|
+
* Whether to display a button that lets users add options to the data source.
|
|
476
476
|
* @default false
|
|
477
477
|
*/
|
|
478
478
|
this.showAddButton = false;
|
|
@@ -555,7 +555,7 @@ class SkyAutocompleteComponent {
|
|
|
555
555
|
this.resultsWrapperId = `sky-autocomplete-wrapper-${id}`;
|
|
556
556
|
}
|
|
557
557
|
/**
|
|
558
|
-
*
|
|
558
|
+
* The static data source for the autocomplete component to search
|
|
559
559
|
* when users enter text. For a dynamic data source such as an array that
|
|
560
560
|
* changes due to server calls, use `search` or `searchAsync` instead.
|
|
561
561
|
*/
|
|
@@ -566,7 +566,7 @@ class SkyAutocompleteComponent {
|
|
|
566
566
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__data, "f");
|
|
567
567
|
}
|
|
568
568
|
/**
|
|
569
|
-
*
|
|
569
|
+
* How many milliseconds to wait before searching while users
|
|
570
570
|
* enter text in the autocomplete field.
|
|
571
571
|
* @default 0
|
|
572
572
|
*/
|
|
@@ -577,7 +577,7 @@ class SkyAutocompleteComponent {
|
|
|
577
577
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__debounceTime, "f");
|
|
578
578
|
}
|
|
579
579
|
/**
|
|
580
|
-
*
|
|
580
|
+
* The object property to display in the text input after users
|
|
581
581
|
* select an item in the dropdown list.
|
|
582
582
|
* @default "name"
|
|
583
583
|
*/
|
|
@@ -588,7 +588,7 @@ class SkyAutocompleteComponent {
|
|
|
588
588
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__descriptorProperty, "f");
|
|
589
589
|
}
|
|
590
590
|
/**
|
|
591
|
-
*
|
|
591
|
+
* The observable of `SkyAutocompleteMessage` that can close the dropdown.
|
|
592
592
|
* @internal
|
|
593
593
|
*/
|
|
594
594
|
set messageStream(value) {
|
|
@@ -599,7 +599,7 @@ class SkyAutocompleteComponent {
|
|
|
599
599
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__messageStream, "f");
|
|
600
600
|
}
|
|
601
601
|
/**
|
|
602
|
-
*
|
|
602
|
+
* The object properties to search.
|
|
603
603
|
* @default ["name"]
|
|
604
604
|
* @deprecated We recommend against using this property. To search specific properties, use the `searchAsync` event instead.
|
|
605
605
|
*/
|
|
@@ -611,7 +611,7 @@ class SkyAutocompleteComponent {
|
|
|
611
611
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__propertiesToSearch, "f");
|
|
612
612
|
}
|
|
613
613
|
/**
|
|
614
|
-
*
|
|
614
|
+
* The function that dynamically manages the data source when users
|
|
615
615
|
* change the text in the autocomplete field. The search function must return
|
|
616
616
|
* an array or a promise of an array. The `search` property is particularly
|
|
617
617
|
* useful when the data source does not live in the source code.
|
|
@@ -630,7 +630,7 @@ class SkyAutocompleteComponent {
|
|
|
630
630
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__search, "f");
|
|
631
631
|
}
|
|
632
632
|
/**
|
|
633
|
-
*
|
|
633
|
+
* The minimum number of characters that users must enter before
|
|
634
634
|
* the autocomplete component searches the data source and displays search
|
|
635
635
|
* results in the dropdown list.
|
|
636
636
|
* @default 1
|
|
@@ -642,7 +642,7 @@ class SkyAutocompleteComponent {
|
|
|
642
642
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchTextMinimumCharacters, "f");
|
|
643
643
|
}
|
|
644
644
|
/**
|
|
645
|
-
*
|
|
645
|
+
* The array of functions to call against each search result in order
|
|
646
646
|
* to filter the search results when using the default search function. When
|
|
647
647
|
* using the `search` property to specify a custom search function, you must
|
|
648
648
|
* manually apply filters inside that function. The function must return `true`
|
|
@@ -657,7 +657,7 @@ class SkyAutocompleteComponent {
|
|
|
657
657
|
return __classPrivateFieldGet(this, _SkyAutocompleteComponent__searchFilters, "f");
|
|
658
658
|
}
|
|
659
659
|
/**
|
|
660
|
-
*
|
|
660
|
+
* The maximum number of search results to display in the dropdown list.
|
|
661
661
|
* By default, the component displays all matching results.
|
|
662
662
|
*/
|
|
663
663
|
set searchResultsLimit(value) {
|
|
@@ -1134,7 +1134,7 @@ _SkyAutocompleteComponent_activeElementIndex = new WeakMap(), _SkyAutocompleteCo
|
|
|
1134
1134
|
}
|
|
1135
1135
|
};
|
|
1136
1136
|
SkyAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.SkyAffixService }, { token: SkyAutocompleteAdapterService }, { token: i1.SkyOverlayService }, { token: i5.SkyInputBoxHostService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1137
|
-
SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n <div\n class=\"sky-autocomplete-results-container\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"resultsListId\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (mousedown)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources: (data.length | skyNumeric: { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric: { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (mousedown)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type:
|
|
1137
|
+
SkyAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAutocompleteComponent, selector: "sky-autocomplete", inputs: { ariaLabelledBy: "ariaLabelledBy", data: "data", debounceTime: "debounceTime", descriptorProperty: "descriptorProperty", enableShowMore: "enableShowMore", messageStream: "messageStream", wrapperClass: "wrapperClass", propertiesToSearch: "propertiesToSearch", search: "search", searchResultTemplate: "searchResultTemplate", searchTextMinimumCharacters: "searchTextMinimumCharacters", searchFilters: "searchFilters", searchResultsLimit: "searchResultsLimit", showAddButton: "showAddButton", noResultsFoundText: "noResultsFoundText", searchAsyncDisabled: "searchAsyncDisabled" }, outputs: { addClick: "addClick", showMoreClick: "showMoreClick", selectionChange: "selectionChange", searchAsync: "searchAsync" }, providers: [SkyAutocompleteAdapterService], queries: [{ propertyName: "inputDirective", first: true, predicate: SkyAutocompleteInputDirective, descendants: true }], viewQueries: [{ propertyName: "resultsTemplateRef", first: true, predicate: ["resultsTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "resultsRef", first: true, predicate: ["resultsRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n <div\n class=\"sky-autocomplete-results-container\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"resultsListId\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (mousedown)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources: (data.length | skyNumeric: { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric: { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (mousedown)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i8.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: i1.SkyNumericPipe, name: "skyNumeric" }, { kind: "pipe", type: SkyAutocompleteSearchAsyncDisabledPipe, name: "skyAutocompleteSearchAsyncDisabled" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1138
1138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteComponent, decorators: [{
|
|
1139
1139
|
type: Component,
|
|
1140
1140
|
args: [{ selector: 'sky-autocomplete', providers: [SkyAutocompleteAdapterService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n class=\"sky-autocomplete\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.aria-owns]=\"isOpen ? resultsListId : null\"\n [attr.id]=\"resultsWrapperId\"\n>\n <ng-content></ng-content>\n</div>\n\n<ng-template #resultsTemplateRef>\n <div\n class=\"sky-autocomplete-results-container\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-4': 'modern'\n }\"\n (keydown)=\"handleKeydown($event)\"\n #resultsRef\n >\n <div\n *ngIf=\"isSearchingAsync; else resultControlsTemplateRef\"\n class=\"sky-autocomplete-results-waiting\"\n >\n <sky-wait [isWaiting]=\"true\"></sky-wait>\n </div>\n </div>\n</ng-template>\n\n<ng-template #resultControlsTemplateRef>\n <div\n *ngIf=\"searchText && (!showActionsArea || searchResults.length > 0)\"\n class=\"sky-autocomplete-results\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [attr.id]=\"resultsListId\"\n >\n <ng-container *ngFor=\"let result of searchResults; let i = index\">\n <div\n *ngIf=\"\n (!searchResultsLimit || i < searchResultsLimit) &&\n !(enableShowMore && i >= 5)\n \"\n class=\"sky-autocomplete-result\"\n role=\"option\"\n tabindex=\"0\"\n [attr.aria-selected]=\"isElementFocused(searchResultEl)\"\n [attr.data-descriptor-value]=\"result.data[descriptorProperty]\"\n [attr.id]=\"result.elementId\"\n [skyHighlight]=\"highlightText\"\n (mousedown)=\"onResultMouseDown(result.elementId, $event)\"\n (mousemove)=\"onResultMouseMove(i)\"\n #searchResultEl\n >\n <ng-container\n *ngTemplateOutlet=\"\n searchResultTemplate || defaultSearchResultTemplate;\n context: { item: result.data }\n \"\n >\n </ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"searchResults.length === 0\"\n class=\"sky-deemphasized sky-padding-squish-default\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n </div>\n <div *ngIf=\"showActionsArea\" class=\"sky-autocomplete-actions\">\n <button\n *ngIf=\"enableShowMore && (!searchText || searchResults.length > 0)\"\n class=\"sky-autocomplete-action sky-autocomplete-action-more sky-btn sky-btn-link\"\n type=\"button\"\n (mousedown)=\"moreButtonClicked()\"\n >\n <ng-container\n *ngIf=\"\n !(\n searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled\n ) &&\n searchResults.length === 0 &&\n !searchText\n \"\n >\n {{ 'skyux_autocomplete_show_all' | skyLibResources }}\n </ng-container>\n <ng-container\n *ngIf=\"\n (searchAsync\n | skyAutocompleteSearchAsyncDisabled: searchAsyncDisabled) &&\n !searchText\n \"\n >\n {{\n 'skyux_autocomplete_show_all_count'\n | skyLibResources: (data.length | skyNumeric: { truncate: false })\n }}\n </ng-container>\n <ng-container *ngIf=\"searchText\">\n {{\n 'skyux_autocomplete_show_matches_count'\n | skyLibResources\n : (searchResultsCount === undefined\n ? data.length\n : (searchResultsCount | skyNumeric: { truncate: false }))\n }}\n </ng-container>\n </button>\n <div\n *ngIf=\"searchText && searchResults.length === 0\"\n class=\"sky-font-deemphasized sky-autocomplete-actions-no-results\"\n >\n {{\n noResultsFoundText ||\n ('skyux_autocomplete_no_results' | skyLibResources)\n }}\n </div>\n <button\n *ngIf=\"showAddButton\"\n class=\"sky-autocomplete-action sky-autocomplete-action-add sky-btn sky-btn-link\"\n tabindex=\"0\"\n type=\"button\"\n [class.focused]=\"isElementFocused(addButtonEl)\"\n (mousedown)=\"addButtonClicked()\"\n #addButtonEl\n >\n <sky-icon *skyThemeIf=\"'modern'\" icon=\"add\" iconType=\"skyux\"></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></sky-icon>\n {{ 'skyux_autocomplete_add' | skyLibResources }}\n </button>\n </div>\n</ng-template>\n\n<ng-template let-item=\"item\" #defaultSearchResultTemplate>\n {{ item[descriptorProperty] }}\n</ng-template>\n", styles: [".sky-autocomplete-results-container{position:fixed;background-color:#fff}.sky-autocomplete-results-waiting{height:70px}.sky-autocomplete-results{display:flex;flex-direction:column;padding:4px;overflow-y:auto;overflow-x:hidden;min-height:35px;max-height:calc(50vh - 50px)}.sky-autocomplete-result{color:#212327;margin-bottom:4px;padding:3px 20px;cursor:pointer}.sky-autocomplete-result:last-child{margin-bottom:0}.sky-autocomplete-actions{border-top:1px solid #cdcfd2}.sky-autocomplete-actions .sky-autocomplete-action{border:none}.sky-autocomplete-actions .sky-autocomplete-actions-no-results{display:inline-block;padding:7px 13px}.sky-autocomplete-action-add{float:right}.sky-autocomplete-action-add sky-icon{padding-right:5px}.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:#eeeeef}.sky-autocomplete-descendant-focus.sky-autocomplete-action{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}::ng-deep .sky-theme-modern .sky-autocomplete-results-container{border-radius:6px}::ng-deep .sky-theme-modern .sky-autocomplete-results{padding:10px 0}::ng-deep .sky-theme-modern .sky-autocomplete-result{margin-bottom:0;padding:10px 0 10px 15px}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus:not(.sky-autocomplete-action){background-color:inherit}::ng-deep .sky-theme-modern .sky-autocomplete-descendant-focus{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d}\n"] }]
|
|
@@ -1200,7 +1200,7 @@ class SkyAutocompleteModule {
|
|
|
1200
1200
|
SkyAutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1201
1201
|
SkyAutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.11", ngImport: i0, type: SkyAutocompleteModule, declarations: [SkyAutocompleteComponent,
|
|
1202
1202
|
SkyAutocompleteInputDirective,
|
|
1203
|
-
|
|
1203
|
+
SkyAutocompleteSearchAsyncDisabledPipe], imports: [CommonModule,
|
|
1204
1204
|
FormsModule,
|
|
1205
1205
|
SkyAffixModule,
|
|
1206
1206
|
SkyTextHighlightModule,
|
|
@@ -1228,7 +1228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
|
|
|
1228
1228
|
declarations: [
|
|
1229
1229
|
SkyAutocompleteComponent,
|
|
1230
1230
|
SkyAutocompleteInputDirective,
|
|
1231
|
-
|
|
1231
|
+
SkyAutocompleteSearchAsyncDisabledPipe,
|
|
1232
1232
|
],
|
|
1233
1233
|
imports: [
|
|
1234
1234
|
CommonModule,
|
|
@@ -1299,7 +1299,7 @@ class SkyCountryFieldComponent {
|
|
|
1299
1299
|
this.countrySearchFormControl = new UntypedFormControl();
|
|
1300
1300
|
}
|
|
1301
1301
|
/**
|
|
1302
|
-
*
|
|
1302
|
+
* The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
|
|
1303
1303
|
* country code for the default country.
|
|
1304
1304
|
* When search results include the default country, it appears at the top of the list.
|
|
1305
1305
|
* @default "us"
|
|
@@ -1318,7 +1318,7 @@ class SkyCountryFieldComponent {
|
|
|
1318
1318
|
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__defaultCountry, "f");
|
|
1319
1319
|
}
|
|
1320
1320
|
/**
|
|
1321
|
-
*
|
|
1321
|
+
* Whether to disable the country field.
|
|
1322
1322
|
* @default false
|
|
1323
1323
|
*/
|
|
1324
1324
|
set disabled(isDisabled) {
|
|
@@ -1333,7 +1333,7 @@ class SkyCountryFieldComponent {
|
|
|
1333
1333
|
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__disabled, "f");
|
|
1334
1334
|
}
|
|
1335
1335
|
/**
|
|
1336
|
-
*
|
|
1336
|
+
* Whether to hide the flag in the input element.
|
|
1337
1337
|
* @default false
|
|
1338
1338
|
*/
|
|
1339
1339
|
set hideSelectedCountryFlag(value) {
|
|
@@ -1343,7 +1343,7 @@ class SkyCountryFieldComponent {
|
|
|
1343
1343
|
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__hideSelectedCountryFlag, "f");
|
|
1344
1344
|
}
|
|
1345
1345
|
/**
|
|
1346
|
-
*
|
|
1346
|
+
* Whether to include phone information in the selected country and country dropdown.
|
|
1347
1347
|
* @default false
|
|
1348
1348
|
*/
|
|
1349
1349
|
set includePhoneInfo(value) {
|
|
@@ -1354,7 +1354,7 @@ class SkyCountryFieldComponent {
|
|
|
1354
1354
|
return __classPrivateFieldGet(this, _SkyCountryFieldComponent__includePhoneInfo, "f");
|
|
1355
1355
|
}
|
|
1356
1356
|
/**
|
|
1357
|
-
*
|
|
1357
|
+
* The [International Organization for Standardization Alpha 2](https://www.nationsonline.org/oneworld/country_code_list.htm)
|
|
1358
1358
|
* country codes for the countries that users can select. By default, all countries are available.
|
|
1359
1359
|
*/
|
|
1360
1360
|
set supportedCountryISOs(value) {
|
|
@@ -1449,7 +1449,7 @@ class SkyCountryFieldComponent {
|
|
|
1449
1449
|
}
|
|
1450
1450
|
}
|
|
1451
1451
|
/**
|
|
1452
|
-
* Angular lifecycle hook for when the
|
|
1452
|
+
* Angular lifecycle hook for when the component is destructed.
|
|
1453
1453
|
* @internal
|
|
1454
1454
|
*/
|
|
1455
1455
|
ngOnDestroy() {
|
|
@@ -1587,7 +1587,7 @@ _SkyCountryFieldComponent_changeDetector = new WeakMap(), _SkyCountryFieldCompon
|
|
|
1587
1587
|
}
|
|
1588
1588
|
});
|
|
1589
1589
|
if (selectedCountry) {
|
|
1590
|
-
// Note: We are looking up this data here to ensure we are using the
|
|
1590
|
+
// Note: We are looking up this data here to ensure we are using the official data from the
|
|
1591
1591
|
// library and not the data provided by the user on initialization of the component
|
|
1592
1592
|
const foundCountry = this.countries.find((country) => country.iso2 === selectedCountry.iso2.toLocaleLowerCase());
|
|
1593
1593
|
if (foundCountry) {
|
|
@@ -1773,7 +1773,7 @@ class SkySearchComponent {
|
|
|
1773
1773
|
__classPrivateFieldSet(this, _SkySearchComponent_changeRef, changeRef, "f");
|
|
1774
1774
|
}
|
|
1775
1775
|
/**
|
|
1776
|
-
*
|
|
1776
|
+
* The expand mode for the search input. The valid options
|
|
1777
1777
|
* include `"responsive"` to collapse the search input into a button on
|
|
1778
1778
|
* mobile devices, `"none"` to *not* collapse the search input on mobile
|
|
1779
1779
|
* devices, and `"fit"` to extend the search input to fit the width of its container.
|
|
@@ -1786,7 +1786,7 @@ class SkySearchComponent {
|
|
|
1786
1786
|
return __classPrivateFieldGet(this, _SkySearchComponent__expandMode, "f");
|
|
1787
1787
|
}
|
|
1788
1788
|
/**
|
|
1789
|
-
*
|
|
1789
|
+
* How many milliseconds to wait before searching after users enter text in the search input.
|
|
1790
1790
|
* @default 0
|
|
1791
1791
|
*/
|
|
1792
1792
|
set debounceTime(value) {
|
|
@@ -1797,7 +1797,7 @@ class SkySearchComponent {
|
|
|
1797
1797
|
return __classPrivateFieldGet(this, _SkySearchComponent__debounceTime, "f");
|
|
1798
1798
|
}
|
|
1799
1799
|
/**
|
|
1800
|
-
*
|
|
1800
|
+
* Whether to disable the filter button.
|
|
1801
1801
|
* @default false
|
|
1802
1802
|
*/
|
|
1803
1803
|
set disabled(value) {
|
|
@@ -2237,10 +2237,10 @@ _SkySelectionModalComponent_changeDetector = new WeakMap(), _SkySelectionModalCo
|
|
|
2237
2237
|
}
|
|
2238
2238
|
};
|
|
2239
2239
|
SkySelectionModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkySelectionModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkySelectionModalContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2240
|
-
SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-
|
|
2240
|
+
SkySelectionModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkySelectionModalComponent, selector: "sky-selection-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-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 {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && 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 class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\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=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\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 [disabled]=\"isSearching\"\n (click)=\"save()\"\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 let-item=\"item\" #defaultItemTemplate>\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", 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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "component", type: i6.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2241
2241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2242
2242
|
type: Component,
|
|
2243
|
-
args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-
|
|
2243
|
+
args: [{ selector: 'sky-selection-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\"></sky-wait>\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-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 {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\n </button>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <sky-checkbox\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n >\n <sky-checkbox-label>\n {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"!isSearching && 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 class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *ngFor=\"let item of displayedItems\"\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [selectable]=\"context.selectMode === 'multiple'\"\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=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\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 [disabled]=\"isSearching\"\n (click)=\"save()\"\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 let-item=\"item\" #defaultItemTemplate>\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", 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}\n"] }]
|
|
2244
2244
|
}], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkySelectionModalContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyIdService }]; } });
|
|
2245
2245
|
|
|
2246
2246
|
class SkySelectionModalModule {
|
|
@@ -2547,10 +2547,10 @@ class SkyLookupShowMoreModalComponent {
|
|
|
2547
2547
|
}
|
|
2548
2548
|
_SkyLookupShowMoreModalComponent_changeDetector = new WeakMap(), _SkyLookupShowMoreModalComponent_itemIndex = new WeakMap(), _SkyLookupShowMoreModalComponent_ngUnsubscribe = new WeakMap();
|
|
2549
2549
|
SkyLookupShowMoreModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [{ token: i1$1.SkyModalInstance }, { token: SkyLookupShowMoreNativePickerContext }, { token: i0.ChangeDetectorRef }, { token: i1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2550
|
-
SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-
|
|
2550
|
+
SkyLookupShowMoreModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLookupShowMoreModalComponent, selector: "skyux-lookup-show-more-modal", ngImport: i0, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-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 {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *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 class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *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=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"addItems()\">\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 let-item=\"item\" #defaultItemTemplate>\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", 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}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "indeterminate", "required"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i5.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i6.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i7.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "component", type: i1$1.λ5, selector: "sky-modal", inputs: ["ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy"] }, { kind: "component", type: i1$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$1.λ4, selector: "sky-modal-header" }, { kind: "component", type: i7.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i7.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i7.λ8, selector: "sky-repeater-item-content" }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "directive", type: i8.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "component", type: i10.λ37, selector: "sky-toolbar" }, { kind: "component", type: i10.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i10.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i10.λ40, selector: "sky-toolbar-view-actions" }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper"] }, { kind: "pipe", type: i4$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2551
2551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
2552
2552
|
type: Component,
|
|
2553
|
-
args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-
|
|
2553
|
+
args: [{ selector: 'skyux-lookup-show-more-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-modal\n class=\"sky-lookup-show-more-modal\"\n [attr.id]=\"id\"\n [ngClass]=\"'sky-lookup-show-more-modal-' + context.selectMode\"\n>\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 [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar class=\"sky-lookup-show-more-modal-toolbar\">\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\n *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\n *skyThemeIf=\"'modern'\"\n icon=\"add\"\n iconType=\"skyux\"\n ></sky-icon>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"plus-circle\"></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\n *ngIf=\"context.selectMode === 'multiple'\"\n class=\"sky-lookup-show-more-modal-multiselect-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 {{\n 'skyux_lookup_show_more_select_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_clear_all_button_title'\n | skyLibResources\n }}\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 {{\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources\n }}\n </sky-checkbox-label>\n </sky-checkbox>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *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 class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n <sky-repeater-item\n *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=\"\n repeaterItemTemplate ?? defaultItemTemplate;\n context: { item: item.value }\n \"\n >\n </ng-container>\n </sky-repeater-item-content>\n </sky-repeater-item>\n </sky-repeater>\n <sky-infinite-scroll [enabled]=\"itemsHaveMore\" (scrollEnd)=\"addItems()\">\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 let-item=\"item\" #defaultItemTemplate>\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", 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}\n"] }]
|
|
2554
2554
|
}], ctorParameters: function () { return [{ type: i1$1.SkyModalInstance }, { type: SkyLookupShowMoreNativePickerContext }, { type: i0.ChangeDetectorRef }, { type: i1.SkyIdService }]; } });
|
|
2555
2555
|
|
|
2556
2556
|
/**
|
|
@@ -2594,7 +2594,7 @@ class SkyLookupAutocompleteAdapter {
|
|
|
2594
2594
|
_SkyLookupAutocompleteAdapter__searchFilters.set(this, void 0);
|
|
2595
2595
|
}
|
|
2596
2596
|
/**
|
|
2597
|
-
*
|
|
2597
|
+
* The object property to display in the text input after users
|
|
2598
2598
|
* select an item in the dropdown list.
|
|
2599
2599
|
* @default "name"
|
|
2600
2600
|
*/
|
|
@@ -2605,7 +2605,7 @@ class SkyLookupAutocompleteAdapter {
|
|
|
2605
2605
|
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__descriptorProperty, "f");
|
|
2606
2606
|
}
|
|
2607
2607
|
/**
|
|
2608
|
-
*
|
|
2608
|
+
* The array of object properties to search.
|
|
2609
2609
|
* @default ["name"]
|
|
2610
2610
|
*/
|
|
2611
2611
|
set propertiesToSearch(value) {
|
|
@@ -2616,7 +2616,7 @@ class SkyLookupAutocompleteAdapter {
|
|
|
2616
2616
|
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__propertiesToSearch, "f");
|
|
2617
2617
|
}
|
|
2618
2618
|
/**
|
|
2619
|
-
*
|
|
2619
|
+
* The function to dynamically manage the data source when users
|
|
2620
2620
|
* change the text in the lookup field. The search function must return
|
|
2621
2621
|
* an array or a promise of an array. The `search` property is particularly
|
|
2622
2622
|
* useful when the data source does not live in the source code. If the
|
|
@@ -2636,7 +2636,7 @@ class SkyLookupAutocompleteAdapter {
|
|
|
2636
2636
|
return __classPrivateFieldGet(this, _SkyLookupAutocompleteAdapter__search, "f");
|
|
2637
2637
|
}
|
|
2638
2638
|
/**
|
|
2639
|
-
*
|
|
2639
|
+
* The array of functions to call against each search result in order
|
|
2640
2640
|
* to filter the search results when using the default search function. When
|
|
2641
2641
|
* using a custom search function via the `search` property filters must be
|
|
2642
2642
|
* applied manually inside that function. The function must return `true` or
|
|
@@ -2861,7 +2861,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2861
2861
|
}
|
|
2862
2862
|
}
|
|
2863
2863
|
/**
|
|
2864
|
-
*
|
|
2864
|
+
* The data source for the lookup component to search when users
|
|
2865
2865
|
* enter text. You can specify static data such as an array of objects, or
|
|
2866
2866
|
* you can pull data from a database.
|
|
2867
2867
|
* @default []
|
|
@@ -2876,7 +2876,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2876
2876
|
return __classPrivateFieldGet(this, _SkyLookupComponent__data, "f") || [];
|
|
2877
2877
|
}
|
|
2878
2878
|
/**
|
|
2879
|
-
*
|
|
2879
|
+
* Whether to disable the lookup field.
|
|
2880
2880
|
* @default false
|
|
2881
2881
|
*/
|
|
2882
2882
|
set disabled(value) {
|
|
@@ -2886,7 +2886,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2886
2886
|
return __classPrivateFieldGet(this, _SkyLookupComponent__disabled, "f");
|
|
2887
2887
|
}
|
|
2888
2888
|
/**
|
|
2889
|
-
*
|
|
2889
|
+
* Whether to enable users to open a picker where they can view all options.
|
|
2890
2890
|
* @default false
|
|
2891
2891
|
*/
|
|
2892
2892
|
set enableShowMore(value) {
|
|
@@ -2896,7 +2896,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2896
2896
|
return __classPrivateFieldGet(this, _SkyLookupComponent__enableShowMore, "f");
|
|
2897
2897
|
}
|
|
2898
2898
|
/**
|
|
2899
|
-
*
|
|
2899
|
+
* Whether to display a button that lets users add options to the list.
|
|
2900
2900
|
* @default false
|
|
2901
2901
|
*/
|
|
2902
2902
|
set showAddButton(value) {
|
|
@@ -2906,7 +2906,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|
|
|
2906
2906
|
return __classPrivateFieldGet(this, _SkyLookupComponent__showAddButton, "f");
|
|
2907
2907
|
}
|
|
2908
2908
|
/**
|
|
2909
|
-
*
|
|
2909
|
+
* The ability for users to select one option or multiple options.
|
|
2910
2910
|
* @default "multiple"
|
|
2911
2911
|
*/
|
|
2912
2912
|
set selectMode(value) {
|