@skyux/list-builder 11.0.0 → 11.2.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.
@@ -1482,13 +1482,13 @@ class SkyListFilterInlineItemRendererComponent {
1482
1482
  }
1483
1483
  }
1484
1484
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1485
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: { template: "template", filter: "filter" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true }); }
1485
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: { template: "template", filter: "filter" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container />', isInline: true }); }
1486
1486
  }
1487
1487
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterInlineItemRendererComponent, decorators: [{
1488
1488
  type: Component,
1489
1489
  args: [{
1490
1490
  selector: 'sky-list-filter-inline-item-renderer',
1491
- template: '<ng-template #container></ng-template>',
1491
+ template: '<ng-template #container />',
1492
1492
  }]
1493
1493
  }], propDecorators: { template: [{
1494
1494
  type: Input
@@ -1594,11 +1594,11 @@ class SkyListFilterInlineComponent {
1594
1594
  });
1595
1595
  }
1596
1596
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterInlineComponent, deps: [{ token: ListStateDispatcher }, { token: ListState }], target: i0.ɵɵFactoryTarget.Component }); }
1597
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content />\n\n<sky-filter-inline>\n <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n <sky-list-filter-inline-item-renderer\n [template]=\"filter.template\"\n [filter]=\"filter\"\n >\n </sky-list-filter-inline-item-renderer>\n </sky-filter-inline-item>\n</sky-filter-inline>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i4.λ3, selector: "sky-filter-inline-item" }, { kind: "component", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }] }); }
1597
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterInlineComponent, selector: "sky-list-filter-inline", queries: [{ propertyName: "filters", predicate: SkyListFilterInlineItemComponent }], ngImport: i0, template: "<ng-content />\n\n<sky-filter-inline>\n <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n <sky-list-filter-inline-item-renderer\n [template]=\"filter.template\"\n [filter]=\"filter\"\n />\n </sky-filter-inline-item>\n</sky-filter-inline>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.λ2, selector: "sky-filter-inline" }, { kind: "component", type: i4.λ3, selector: "sky-filter-inline-item" }, { kind: "component", type: SkyListFilterInlineItemRendererComponent, selector: "sky-list-filter-inline-item-renderer", inputs: ["template", "filter"] }] }); }
1598
1598
  }
1599
1599
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterInlineComponent, decorators: [{
1600
1600
  type: Component,
1601
- args: [{ selector: 'sky-list-filter-inline', template: "<ng-content />\n\n<sky-filter-inline>\n <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n <sky-list-filter-inline-item-renderer\n [template]=\"filter.template\"\n [filter]=\"filter\"\n >\n </sky-list-filter-inline-item-renderer>\n </sky-filter-inline-item>\n</sky-filter-inline>\n" }]
1601
+ args: [{ selector: 'sky-list-filter-inline', template: "<ng-content />\n\n<sky-filter-inline>\n <sky-filter-inline-item *ngFor=\"let filter of inlineFilters\">\n <sky-list-filter-inline-item-renderer\n [template]=\"filter.template\"\n [filter]=\"filter\"\n />\n </sky-filter-inline-item>\n</sky-filter-inline>\n" }]
1602
1602
  }], ctorParameters: () => [{ type: ListStateDispatcher }, { type: ListState }], propDecorators: { filters: [{
1603
1603
  type: ContentChildren,
1604
1604
  args: [SkyListFilterInlineItemComponent]
@@ -1644,11 +1644,11 @@ class SkyListFilterSummaryComponent {
1644
1644
  this.summaryItemClick.emit(item);
1645
1645
  }
1646
1646
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterSummaryComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
1647
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n <sky-filter-summary-item\n *ngFor=\"let item of appliedFilters | async; let i = index\"\n (dismiss)=\"filterSummaryItemDismiss(i)\"\n (itemClick)=\"filterSummaryItemClick(item)\"\n [dismissible]=\"item.dismissible\"\n >\n {{ item.label || item.value }}\n </sky-filter-summary-item>\n</sky-filter-summary>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i4.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
1647
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListFilterSummaryComponent, selector: "sky-list-filter-summary", outputs: { summaryItemClick: "summaryItemClick" }, ngImport: i0, template: "<sky-filter-summary>\n <sky-filter-summary-item\n *ngFor=\"let item of appliedFilters | async; let i = index\"\n [dismissible]=\"item.dismissible\"\n (dismiss)=\"filterSummaryItemDismiss(i)\"\n (itemClick)=\"filterSummaryItemClick(item)\"\n >\n {{ item.label || item.value }}\n </sky-filter-summary-item>\n</sky-filter-summary>\n", dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.λ5, selector: "sky-filter-summary" }, { kind: "component", type: i4.λ4, selector: "sky-filter-summary-item", inputs: ["dismissible"], outputs: ["dismiss", "itemClick"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }] }); }
1648
1648
  }
1649
1649
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListFilterSummaryComponent, decorators: [{
1650
1650
  type: Component,
1651
- args: [{ selector: 'sky-list-filter-summary', template: "<sky-filter-summary>\n <sky-filter-summary-item\n *ngFor=\"let item of appliedFilters | async; let i = index\"\n (dismiss)=\"filterSummaryItemDismiss(i)\"\n (itemClick)=\"filterSummaryItemClick(item)\"\n [dismissible]=\"item.dismissible\"\n >\n {{ item.label || item.value }}\n </sky-filter-summary-item>\n</sky-filter-summary>\n" }]
1651
+ args: [{ selector: 'sky-list-filter-summary', template: "<sky-filter-summary>\n <sky-filter-summary-item\n *ngFor=\"let item of appliedFilters | async; let i = index\"\n [dismissible]=\"item.dismissible\"\n (dismiss)=\"filterSummaryItemDismiss(i)\"\n (itemClick)=\"filterSummaryItemClick(item)\"\n >\n {{ item.label || item.value }}\n </sky-filter-summary-item>\n</sky-filter-summary>\n" }]
1652
1652
  }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }], propDecorators: { summaryItemClick: [{
1653
1653
  type: Output
1654
1654
  }] } });
@@ -1762,13 +1762,13 @@ class SkyListPagingComponent extends ListPagingComponent {
1762
1762
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListPagingComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }, { token: i3.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
1763
1763
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListPagingComponent, selector: "sky-list-paging", inputs: { pageSize: "pageSize", maxPages: "maxPages", pageNumber: "pageNumber" }, providers: [
1764
1764
  { provide: ListPagingComponent, useExisting: listPagingComponentRef },
1765
- ], usesInheritance: true, ngImport: i0, template: "<sky-paging\n [pageSize]=\"itemsPerPage | async\"\n [maxPages]=\"maxDisplayedPages | async\"\n [currentPage]=\"currentPageNumber | async\"\n [itemCount]=\"itemCount | async\"\n (currentPageChange)=\"pageChange($event)\"\n>\n</sky-paging>\n", dependencies: [{ kind: "component", type: i4.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1765
+ ], usesInheritance: true, ngImport: i0, template: "<sky-paging\n [pageSize]=\"itemsPerPage | async\"\n [maxPages]=\"maxDisplayedPages | async\"\n [currentPage]=\"currentPageNumber | async\"\n [itemCount]=\"itemCount | async\"\n (currentPageChange)=\"pageChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: i4.λ7, selector: "sky-paging", inputs: ["currentPage", "itemCount", "maxPages", "pageSize", "pagingLabel"], outputs: ["currentPageChange", "contentChange"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1766
1766
  }
1767
1767
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListPagingComponent, decorators: [{
1768
1768
  type: Component,
1769
1769
  args: [{ selector: 'sky-list-paging', providers: [
1770
1770
  { provide: ListPagingComponent, useExisting: listPagingComponentRef },
1771
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-paging\n [pageSize]=\"itemsPerPage | async\"\n [maxPages]=\"maxDisplayedPages | async\"\n [currentPage]=\"currentPageNumber | async\"\n [itemCount]=\"itemCount | async\"\n (currentPageChange)=\"pageChange($event)\"\n>\n</sky-paging>\n" }]
1771
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sky-paging\n [pageSize]=\"itemsPerPage | async\"\n [maxPages]=\"maxDisplayedPages | async\"\n [currentPage]=\"currentPageNumber | async\"\n [itemCount]=\"itemCount | async\"\n (currentPageChange)=\"pageChange($event)\"\n/>\n" }]
1772
1772
  }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { pageSize: [{
1773
1773
  type: Input
1774
1774
  }], maxPages: [{
@@ -1934,11 +1934,11 @@ class SkyListSecondaryActionsHostComponent {
1934
1934
  this.ngUnsubscribe.complete();
1935
1935
  }
1936
1936
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListSecondaryActionsHostComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyListSecondaryActionsService }], target: i0.ɵɵFactoryTarget.Component }); }
1937
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host", ngImport: i0, template: "<div\n class=\"sky-list-secondary-actions\"\n [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n <sky-dropdown\n [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"ellipsis-h\" />\n <span class=\"sky-list-secondary-actions-btn-text\">\n {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i3$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i3$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i3$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1937
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListSecondaryActionsHostComponent, selector: "sky-list-secondary-actions-host", ngImport: i0, template: "<div\n class=\"sky-list-secondary-actions\"\n [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n <sky-dropdown\n [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"ellipsis-h\" />\n <span class=\"sky-list-secondary-actions-btn-text\">\n {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\" />\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$2.λ2, selector: "sky-dropdown-button" }, { kind: "component", type: i3$2.λ3, selector: "sky-dropdown", inputs: ["buttonStyle", "buttonType", "disabled", "label", "horizontalAlignment", "messageStream", "title", "trigger"] }, { kind: "component", type: i3$2.λ1, selector: "sky-dropdown-item", inputs: ["ariaRole"] }, { kind: "component", type: i3$2.λ4, selector: "sky-dropdown-menu", inputs: ["ariaLabelledBy", "ariaRole", "useNativeFocus"], outputs: ["menuChanges"] }, { kind: "component", type: i4$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1938
1938
  }
1939
1939
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListSecondaryActionsHostComponent, decorators: [{
1940
1940
  type: Component,
1941
- args: [{ selector: 'sky-list-secondary-actions-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-list-secondary-actions\"\n [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n <sky-dropdown\n [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"ellipsis-h\" />\n <span class=\"sky-list-secondary-actions-btn-text\">\n {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\"> </ng-container>\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"] }]
1941
+ args: [{ selector: 'sky-list-secondary-actions-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"sky-list-secondary-actions\"\n [ngClass]=\"{ 'sky-list-secondary-actions-hidden': dropdownHidden }\"\n>\n <sky-dropdown\n [attr.title]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n [label]=\"'skyux_list_show_secondary_actions_button' | skyLibResources\"\n >\n <sky-dropdown-button>\n <sky-icon icon=\"ellipsis-h\" />\n <span class=\"sky-list-secondary-actions-btn-text\">\n {{ 'skyux_list_show_secondary_actions_button' | skyLibResources }}\n </span>\n </sky-dropdown-button>\n <sky-dropdown-menu>\n <sky-dropdown-item *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\" />\n </sky-dropdown-item>\n </sky-dropdown-menu>\n </sky-dropdown>\n</div>\n<ng-content />\n", styles: [".sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select{padding:6px 12px}.sky-list-secondary-actions ::ng-deep .sky-dropdown-button-type-select sky-icon[icon=ellipsis-h]{font-size:1.33333em;line-height:.75em;vertical-align:-15%}.sky-list-secondary-actions-hidden{display:none}:host .sky-list-secondary-actions-btn-text{display:none}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:none}:host-context(.sky-responsive-container-xs) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:none}@media (min-width: 768px){:host .sky-list-secondary-actions-btn-text{display:inline}:host .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions-btn-text,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions-btn-text{display:inline}:host-context(.sky-responsive-container-sm) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-md) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret,:host-context(.sky-responsive-container-lg) .sky-list-secondary-actions ::ng-deep .sky-dropdown-caret{display:inline-block}\n"] }]
1942
1942
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyListSecondaryActionsService }] });
1943
1943
 
1944
1944
  /**
@@ -2019,13 +2019,13 @@ class SkyListToolbarItemRendererComponent {
2019
2019
  }
2020
2020
  }
2021
2021
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListToolbarItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2022
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: { template: "template" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container></ng-template>', isInline: true }); }
2022
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: { template: "template" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-template #container />', isInline: true }); }
2023
2023
  }
2024
2024
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListToolbarItemRendererComponent, decorators: [{
2025
2025
  type: Component,
2026
2026
  args: [{
2027
2027
  selector: 'sky-list-toolbar-item-renderer',
2028
- template: '<ng-template #container></ng-template>',
2028
+ template: '<ng-template #container />',
2029
2029
  }]
2030
2030
  }], propDecorators: { template: [{
2031
2031
  type: Input
@@ -2162,11 +2162,11 @@ class SkyListMultiselectToolbarComponent {
2162
2162
  return true;
2163
2163
  }
2164
2164
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
2165
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-select-all'\"\n (click)=\"selectAll(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n (click)=\"clearSelections(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n <sky-checkbox\n [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n [checked]=\"showOnlySelected\"\n (change)=\"changeVisibleItems($event)\"\n >\n <sky-checkbox-label>\n {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n </sky-checkbox-label>\n </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4$2.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
2165
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: { showOnlySelected: "showOnlySelected" }, ngImport: i0, template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\" />\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\" />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <ng-container *ngTemplateOutlet=\"showSelectedTemplate\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-select-all'\"\n (click)=\"selectAll(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n (click)=\"clearSelections(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n <sky-checkbox\n [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n [checked]=\"showOnlySelected\"\n (change)=\"changeVisibleItems($event)\"\n >\n <sky-checkbox-label>\n {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n </sky-checkbox-label>\n </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$2.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "icon", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4$2.λ4, selector: "sky-checkbox-label" }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "pipe", type: i5.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
2166
2166
  }
2167
2167
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
2168
2168
  type: Component,
2169
- args: [{ selector: 'sky-list-multiselect-toolbar', template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\">\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <ng-container *ngTemplateOutlet=\"showSelectedTemplate\"></ng-container>\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-select-all'\"\n (click)=\"selectAll(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n (click)=\"clearSelections(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n <sky-checkbox\n [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n [checked]=\"showOnlySelected\"\n (change)=\"changeVisibleItems($event)\"\n >\n <sky-checkbox-label>\n {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n </sky-checkbox-label>\n </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"] }]
2169
+ args: [{ selector: 'sky-list-multiselect-toolbar', template: "<sky-toolbar class=\"sky-list-multiselect-toolbar\">\n <sky-toolbar-section>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"selectAllTemplate\" />\n </sky-toolbar-item>\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer [template]=\"clearSelectionsTemplate\" />\n </sky-toolbar-item>\n <sky-toolbar-view-actions>\n <ng-container *ngTemplateOutlet=\"showSelectedTemplate\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n</sky-toolbar>\n\n<ng-template #selectAllTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-select-all'\"\n (click)=\"selectAll(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_select_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #clearSelectionsTemplate>\n <button\n class=\"sky-btn sky-btn-link\"\n type=\"button\"\n [attr.id]=\"multiselectToolbarId + '-clear-all'\"\n (click)=\"clearSelections(); $event.preventDefault()\"\n >\n {{ 'skyux_list_multiselect_clear_all' | skyLibResources }}\n </button>\n</ng-template>\n\n<ng-template #showSelectedTemplate>\n <sky-checkbox\n [attr.id]=\"multiselectToolbarId + '-show-selected'\"\n [checked]=\"showOnlySelected\"\n (change)=\"changeVisibleItems($event)\"\n >\n <sky-checkbox-label>\n {{ 'skyux_list_multiselect_show_selected' | skyLibResources }}\n </sky-checkbox-label>\n </sky-checkbox>\n</ng-template>\n", styles: [":host-context(sky-toolbar)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container,:host-context(.sky-list-toolbar-search)+.sky-list-multiselect-toolbar ::ng-deep .sky-toolbar-container{border-top:none}\n"] }]
2170
2170
  }], ctorParameters: () => [{ type: ListState }, { type: ListStateDispatcher }], propDecorators: { showOnlySelected: [{
2171
2171
  type: Input
2172
2172
  }] } });
@@ -2634,7 +2634,7 @@ class SkyListToolbarComponent {
2634
2634
  ListToolbarState,
2635
2635
  ListToolbarStateDispatcher,
2636
2636
  ListToolbarStateModel,
2637
- ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: SkySearchComponent, descendants: true, read: SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-list-toolbar-container\">\n <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n <sky-toolbar-section>\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n\n <sky-toolbar-section\n *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n >\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n </sky-toolbar>\n\n <div\n *ngIf=\"\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n \"\n class=\"sky-list-toolbar-search\"\n >\n <sky-toolbar>\n <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n sky-cmp-id=\"search\"\n [template]=\"search\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n *ngIf=\"item.id !== 'search'\"\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"isFilterBarDisplayed\"\n [attr.aria-labelledby]=\"filterButtonId\"\n [id]=\"listFilterInlineId\"\n >\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n <sky-search\n [disabled]=\"isToolbarDisabled\"\n [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n [placeholderText]=\"placeholder\"\n [searchText]=\"searchTextInput | async\"\n (searchApply)=\"updateSearchText($event)\"\n >\n </sky-search>\n <ng-content select=\"sky-list-toolbar-search-actions\" />\n </div>\n</ng-template>\n\n<ng-template #sortSelector>\n <div\n *ngIf=\"\n (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n \"\n class=\"sky-toolbar-item-sort-container\"\n >\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item\n *ngFor=\"let item of sortSelectors | async\"\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n </sky-sort>\n </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n <sky-filter-button\n [active]=\"hasAppliedFilters | async\"\n [ariaControls]=\"filterButtonAriaControls\"\n [ariaExpanded]=\"inlineFilterBarExpanded\"\n [disabled]=\"isToolbarDisabled\"\n [filterButtonId]=\"filterButtonId\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"inlineFilterButtonClick()\"\n >\n </sky-filter-button>\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2637
+ ], queries: [{ propertyName: "toolbarItems", predicate: SkyListToolbarItemComponent }, { propertyName: "toolbarSorts", predicate: SkyListToolbarSortComponent }, { propertyName: "filterSummary", predicate: SkyListFilterSummaryComponent }, { propertyName: "inlineFilter", predicate: SkyListFilterInlineComponent }, { propertyName: "viewActions", predicate: SkyListToolbarViewActionsComponent }], viewQueries: [{ propertyName: "searchComponent", first: true, predicate: SkySearchComponent, descendants: true, read: SkySearchComponent }, { propertyName: "searchTemplate", first: true, predicate: ["search"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortSelectorTemplate", first: true, predicate: ["sortSelector"], descendants: true, read: TemplateRef, static: true }, { propertyName: "inlineFilterButtonTemplate", first: true, predicate: ["inlineFilterButton"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-list-toolbar-container\">\n <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n <sky-toolbar-section>\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n\n <sky-toolbar-section\n *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n >\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n </sky-toolbar>\n\n <div\n *ngIf=\"\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n \"\n class=\"sky-list-toolbar-search\"\n >\n <sky-toolbar>\n <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n sky-cmp-id=\"search\"\n [template]=\"search\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n *ngIf=\"item.id !== 'search'\"\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"isFilterBarDisplayed\"\n [attr.aria-labelledby]=\"filterButtonId\"\n [id]=\"listFilterInlineId\"\n >\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\" />\n</div>\n\n<ng-template #search>\n <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n <sky-search\n [disabled]=\"isToolbarDisabled\"\n [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n [placeholderText]=\"placeholder\"\n [searchText]=\"searchTextInput | async\"\n (searchApply)=\"updateSearchText($event)\"\n />\n <ng-content select=\"sky-list-toolbar-search-actions\" />\n </div>\n</ng-template>\n\n<ng-template #sortSelector>\n <div\n *ngIf=\"\n (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n \"\n class=\"sky-toolbar-item-sort-container\"\n >\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item\n *ngFor=\"let item of sortSelectors | async\"\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n </sky-sort>\n </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n <sky-filter-button\n [active]=\"hasAppliedFilters | async\"\n [ariaControls]=\"filterButtonAriaControls\"\n [ariaExpanded]=\"inlineFilterBarExpanded\"\n [disabled]=\"isToolbarDisabled\"\n [filterButtonId]=\"filterButtonId\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"inlineFilterButtonClick()\"\n />\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.λ37, selector: "sky-toolbar", inputs: ["listDescriptor"] }, { kind: "component", type: i5$1.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i5$1.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i5$1.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i4.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i4.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i4.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "ariaLabel", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2638
2638
  }
2639
2639
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
2640
2640
  type: Component,
@@ -2642,7 +2642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImpor
2642
2642
  ListToolbarState,
2643
2643
  ListToolbarStateDispatcher,
2644
2644
  ListToolbarStateModel,
2645
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-list-toolbar-container\">\n <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n <sky-toolbar-section>\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n\n <sky-toolbar-section\n *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n >\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n </sky-toolbar>\n\n <div\n *ngIf=\"\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n \"\n class=\"sky-list-toolbar-search\"\n >\n <sky-toolbar>\n <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n sky-cmp-id=\"search\"\n [template]=\"search\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n *ngIf=\"item.id !== 'search'\"\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n >\n </sky-list-toolbar-item-renderer>\n </sky-toolbar-item>\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"isFilterBarDisplayed\"\n [attr.aria-labelledby]=\"filterButtonId\"\n [id]=\"listFilterInlineId\"\n >\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\">\n </sky-list-multiselect-toolbar>\n</div>\n\n<ng-template #search>\n <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n <sky-search\n [disabled]=\"isToolbarDisabled\"\n [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n [placeholderText]=\"placeholder\"\n [searchText]=\"searchTextInput | async\"\n (searchApply)=\"updateSearchText($event)\"\n >\n </sky-search>\n <ng-content select=\"sky-list-toolbar-search-actions\" />\n </div>\n</ng-template>\n\n<ng-template #sortSelector>\n <div\n *ngIf=\"\n (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n \"\n class=\"sky-toolbar-item-sort-container\"\n >\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item\n *ngFor=\"let item of sortSelectors | async\"\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n </sky-sort>\n </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n <sky-filter-button\n [active]=\"hasAppliedFilters | async\"\n [ariaControls]=\"filterButtonAriaControls\"\n [ariaExpanded]=\"inlineFilterBarExpanded\"\n [disabled]=\"isToolbarDisabled\"\n [filterButtonId]=\"filterButtonId\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"inlineFilterButtonClick()\"\n >\n </sky-filter-button>\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"] }]
2645
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-list-toolbar-container\">\n <sky-toolbar *ngIf=\"(type | async) !== 'search'\">\n <sky-toolbar-section>\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n\n <sky-toolbar-section\n *ngIf=\"showFilterSummary && (hasAppliedFilters | async)\"\n >\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n </sky-toolbar>\n\n <div\n *ngIf=\"\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n \"\n class=\"sky-list-toolbar-search\"\n >\n <sky-toolbar>\n <sky-toolbar-section *ngIf=\"isSearchEnabled | async\">\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n sky-cmp-id=\"search\"\n [template]=\"search\"\n />\n </sky-toolbar-item>\n </sky-toolbar-section>\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n <sky-toolbar-item *ngFor=\"let item of leftTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item *ngFor=\"let item of centerTemplates\">\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <sky-toolbar-item\n *ngFor=\"let item of rightTemplates\"\n [attr.sky-toolbar-id]=\"item.id\"\n >\n <sky-list-toolbar-item-renderer\n *ngIf=\"item.id !== 'search'\"\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n <ng-content />\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n <div\n *ngIf=\"isFilterBarDisplayed\"\n [attr.aria-labelledby]=\"filterButtonId\"\n [id]=\"listFilterInlineId\"\n >\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n <sky-list-multiselect-toolbar *ngIf=\"isMultiselectEnabled | async\" />\n</div>\n\n<ng-template #search>\n <div *ngIf=\"isSearchEnabled | async\" class=\"sky-list-toolbar-search-wrapper\">\n <sky-search\n [disabled]=\"isToolbarDisabled\"\n [expandMode]=\"(type | async) === 'search' ? 'fit' : 'responsive'\"\n [placeholderText]=\"placeholder\"\n [searchText]=\"searchTextInput | async\"\n (searchApply)=\"updateSearchText($event)\"\n />\n <ng-content select=\"sky-list-toolbar-search-actions\" />\n </div>\n</ng-template>\n\n<ng-template #sortSelector>\n <div\n *ngIf=\"\n (isSortSelectorEnabled | async) && (sortSelectors | async).length > 0\n \"\n class=\"sky-toolbar-item-sort-container\"\n >\n <sky-sort [showButtonText]=\"true\">\n <sky-sort-item\n *ngFor=\"let item of sortSelectors | async\"\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n </sky-sort>\n </div>\n</ng-template>\n\n<ng-template #inlineFilterButton>\n <sky-filter-button\n [active]=\"hasAppliedFilters | async\"\n [ariaControls]=\"filterButtonAriaControls\"\n [ariaExpanded]=\"inlineFilterBarExpanded\"\n [disabled]=\"isToolbarDisabled\"\n [filterButtonId]=\"filterButtonId\"\n [showButtonText]=\"true\"\n (filterButtonClick)=\"inlineFilterButtonClick()\"\n />\n</ng-template>\n", styles: [".sky-list-toolbar-search-wrapper{display:flex}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-dismiss-absolute{padding:0;position:static}.sky-list-toolbar-search-wrapper ::ng-deep .sky-search-container{position:relative;height:100%}.sky-list-toolbar-search-wrapper ::ng-deep sky-search{flex:1 1 auto}.sky-list-toolbar-search-wrapper ::ng-deep sky-list-toolbar-search-actions{flex:0 0 auto;z-index:1}.sky-list-toolbar-container ::ng-deep .sky-toolbar-section-items sky-toolbar-item{flex:0 1 auto;align-self:flex-start}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section{padding-top:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-section-items{display:block;width:100%}.sky-list-toolbar-search ::ng-deep .sky-toolbar-item{margin:0}.sky-list-toolbar-search ::ng-deep .sky-toolbar-container,.sky-list-toolbar-search ::ng-deep .sky-search-dismiss-absolute{background-color:#eeeeef}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:#cdcfd2;opacity:1}.sky-list-toolbar-container ::ng-deep sky-toolbar-item[sky-toolbar-id=sort-selector] .sky-toolbar-item{margin-right:0}.sky-list-toolbar-container ::ng-deep sky-checkbox{position:relative;top:-2px}\n"] }]
2646
2646
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { inMemorySearchEnabled: [{
2647
2647
  type: Input
2648
2648
  }], placeholder: [{