@skyux/lookup 14.0.0-alpha.12 → 14.0.0-alpha.13
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.
|
@@ -2421,7 +2421,7 @@ class SkySelectionModalComponent {
|
|
|
2421
2421
|
});
|
|
2422
2422
|
}
|
|
2423
2423
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySelectionModalComponent, isStandalone: true, 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2424
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkySelectionModalComponent, isStandalone: true, 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i5.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkySelectionModalItemSelectedPipe, name: "skySelectionModalItemSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2425
2425
|
}
|
|
2426
2426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkySelectionModalComponent, decorators: [{
|
|
2427
2427
|
type: Component,
|
|
@@ -2439,7 +2439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2439
2439
|
SkyToolbarModule,
|
|
2440
2440
|
SkyWaitModule,
|
|
2441
2441
|
SkyViewkeeperModule,
|
|
2442
|
-
], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-margin-
|
|
2442
|
+
], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.selectionDescriptor\n }}\n }\n </sky-modal-header>\n <sky-modal-content\n [skyViewkeeper]=\"['.sky-lookup-show-more-toolbar-wrapper']\"\n >\n <sky-wait [isWaiting]=\"isSearching\" />\n <div class=\"sky-lookup-show-more-toolbar-wrapper\">\n <sky-toolbar\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDisplayedItems()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (!isSearching && displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater\n class=\"sky-lookup-show-more-repeater\"\n expandMode=\"none\"\n [ngClass]=\"{ 'hover-rows': context.selectMode === 'single' }\"\n >\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\n [isSelected]=\"\n item[context.idProperty]\n | skySelectionModalItemSelected: selectedIdMap\n \"\n [itemName]=\"item[context.descriptorProperty]\"\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: {\n item: item,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"hasMoreItems && (!onlyShowSelected || !!searchText)\"\n [loading]=\"isLoadingMore\"\n (scrollEnd)=\"infiniteScrollEnd()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.selectionDescriptor\n \"\n [disabled]=\"isSearching\"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\n</ng-template>\n", styles: [".sky-lookup-show-more-modal:not(.sky-theme-modern *){--sky-override-selection-modal-no-results-padding: 20px 0}.sky-lookup-show-more-no-results{padding:var(--sky-override-selection-modal-no-results-padding, var(--sky-space-inset-vertical-top-xl) var(--sky-space-inset-vertical-right-xl) var(--sky-space-inset-vertical-bottom-xl) var(--sky-space-inset-vertical-left-xl))}label.selection-modal-item-label{display:block}\n"] }]
|
|
2443
2443
|
}], ctorParameters: () => [] });
|
|
2444
2444
|
|
|
2445
2445
|
/**
|
|
@@ -2981,7 +2981,7 @@ class SkyLookupShowMoreModalComponent {
|
|
|
2981
2981
|
});
|
|
2982
2982
|
}
|
|
2983
2983
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupShowMoreModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-margin-inline-compact': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\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}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2984
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyLookupShowMoreModalComponent, isStandalone: true, selector: "sky-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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\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}label.selection-modal-item-label{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyCheckboxModule }, { kind: "component", type: i2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i3.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyInfiniteScrollModule }, { kind: "component", type: i4.λ6, selector: "sky-infinite-scroll", inputs: ["enabled", "loading"], outputs: ["scrollEnd"] }, { kind: "ngmodule", type: SkyLookupResourcesModule }, { kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i5$1.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i5$1.λ2, selector: "sky-modal-content" }, { kind: "component", type: i5$1.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i5$1.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyRepeaterModule }, { kind: "component", type: i4.λ11, selector: "sky-repeater", inputs: ["activeIndex", "ariaLabel", "reorderable", "expandMode"], outputs: ["activeIndexChange", "orderChange"] }, { kind: "component", type: i4.λ10, selector: "sky-repeater-item", inputs: ["disabled", "itemName", "inlineFormConfig", "inlineFormTemplate", "isExpanded", "isSelected", "reorderable", "selectable", "showInlineForm", "tag"], outputs: ["collapse", "expand", "inlineFormClose", "isSelectedChange"] }, { kind: "component", type: i4.λ8, selector: "sky-repeater-item-content" }, { kind: "ngmodule", type: SkySearchModule }, { kind: "component", type: SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i7.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "ngmodule", type: SkyToolbarModule }, { kind: "component", type: i8$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i8$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i8$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i8$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "ngmodule", type: SkyViewkeeperModule }, { kind: "directive", type: i1.λ3, selector: "[skyViewkeeper]", inputs: ["skyViewkeeper", "skyViewkeeperOmitShadow"] }, { kind: "pipe", type: i8.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2985
2985
|
}
|
|
2986
2986
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyLookupShowMoreModalComponent, decorators: [{
|
|
2987
2987
|
type: Component,
|
|
@@ -2997,7 +2997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2997
2997
|
SkyThemeModule,
|
|
2998
2998
|
SkyToolbarModule,
|
|
2999
2999
|
SkyViewkeeperModule,
|
|
3000
|
-
], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-margin-
|
|
3000
|
+
], 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 @if (context.userConfig?.title) {\n {{ context.userConfig.title }}\n } @else {\n {{\n 'skyux_lookup_show_more_modal_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n }}\n }\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\n class=\"sky-lookup-show-more-modal-toolbar\"\n [listDescriptor]=\"context.userConfig.selectionDescriptor\"\n >\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-search\n [debounceTime]=\"250\"\n [searchText]=\"searchText\"\n (searchApply)=\"searchApplied($event)\"\n />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n @if (context.showAddButton) {\n <button\n type=\"button\"\n class=\"sky-btn sky-btn-link sky-lookup-show-more-modal-add\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_add_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n (click)=\"addButtonClicked()\"\n >\n <sky-icon iconName=\"add\" />\n {{ 'skyux_lookup_show_more_add' | skyLibResources }}\n </button>\n }\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n @if (context.selectMode === 'multiple') {\n <sky-toolbar class=\"sky-lookup-show-more-modal-multiselect-toolbar\">\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [attr.aria-label]=\"\n 'skyux_lookup_show_more_clear_all_button_aria_label'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\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 [labelText]=\"\n 'skyux_lookup_show_more_show_selected_option_title'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [(checked)]=\"onlyShowSelected\"\n (change)=\"updateDataState()\"\n />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n }\n </div>\n @if (displayedItems.length === 0) {\n <div class=\"sky-font-deemphasized sky-lookup-show-more-no-results\">\n {{ 'skyux_lookup_show_more_no_results' | skyLibResources }}\n </div>\n }\n <sky-repeater class=\"sky-lookup-show-more-repeater\" expandMode=\"none\">\n @for (item of displayedItems; track item) {\n <sky-repeater-item\n #repeaterItem\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: {\n item: item.value,\n checkboxId:\n context.selectMode === 'multiple'\n ? 'sky-checkbox-' +\n repeaterItem.contentId +\n '-item-checkbox-input'\n : undefined\n }\n \"\n />\n </sky-repeater-item-content>\n </sky-repeater-item>\n }\n </sky-repeater>\n <sky-infinite-scroll\n [enabled]=\"itemsHaveMore\"\n [loading]=\"itemsLoading\"\n (scrollEnd)=\"addItems()\"\n />\n </sky-modal-content>\n <sky-modal-footer>\n <button\n class=\"sky-btn sky-btn-primary sky-lookup-show-more-modal-save\"\n type=\"button\"\n [attr.aria-label]=\"\n 'skyux_lookup_show_more_select_context'\n | skyLibResources: context.userConfig.selectionDescriptor\n \"\n [skyThemeClass]=\"{\n 'sky-theme-margin-right-xs': 'default'\n }\"\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 #defaultItemTemplate let-item=\"item\" let-checkboxId=\"checkboxId\">\n @if (checkboxId) {\n <label class=\"selection-modal-item-label\" [attr.for]=\"checkboxId\">{{\n item[context.descriptorProperty]\n }}</label>\n } @else {\n {{ item[context.descriptorProperty] }}\n }\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}label.selection-modal-item-label{display:block}\n"] }]
|
|
3001
3001
|
}], ctorParameters: () => [] });
|
|
3002
3002
|
|
|
3003
3003
|
class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
|