@skyux/list-builder 8.9.0 → 8.10.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.
|
@@ -297,7 +297,7 @@ SkyListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
297
297
|
ListToolbarState,
|
|
298
298
|
ListToolbarStateDispatcher,
|
|
299
299
|
ListToolbarStateModel,
|
|
300
|
-
], 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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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\"></ng-content>\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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i7.λ40, selector: "sky-toolbar-view-actions" }, { kind: "component", type: i8.SkySearchComponent, selector: "sky-search", inputs: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i9.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { kind: "component", type: i9.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i9.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i10.SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: i11.SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
300
|
+
], 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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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\"></ng-content>\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: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.λ37, selector: "sky-toolbar" }, { kind: "component", type: i7.λ39, selector: "sky-toolbar-item" }, { kind: "component", type: i7.λ38, selector: "sky-toolbar-section" }, { kind: "component", type: i7.λ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: i9.λ14, selector: "sky-sort", inputs: ["showButtonText"] }, { kind: "component", type: i9.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i9.λ1, selector: "sky-filter-button", inputs: ["filterButtonId", "ariaControls", "ariaExpanded", "active", "disabled", "showButtonText"], outputs: ["filterButtonClick"] }, { kind: "component", type: i10.SkyListToolbarItemRendererComponent, selector: "sky-list-toolbar-item-renderer", inputs: ["template"] }, { kind: "component", type: i11.SkyListMultiselectToolbarComponent, selector: "sky-list-multiselect-toolbar", inputs: ["showOnlySelected"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
301
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
|
|
302
302
|
type: Component,
|
|
303
303
|
args: [{ selector: 'sky-list-toolbar', providers: [
|
|
@@ -2639,7 +2639,7 @@ SkyListToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
|
|
|
2639
2639
|
ListToolbarState,
|
|
2640
2640
|
ListToolbarStateDispatcher,
|
|
2641
2641
|
ListToolbarStateModel,
|
|
2642
|
-
], 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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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\"></ng-content>\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" }, { 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: ["searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i4.λ14, selector: "sky-sort", inputs: ["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", "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 });
|
|
2642
|
+
], 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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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></ng-content>\n\n <sky-toolbar-view-actions *ngIf=\"hasViewActions\">\n <ng-content select=\"sky-list-toolbar-view-actions\"> </ng-content>\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\"> </ng-content>\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\"></ng-content>\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" }, { 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: ["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", "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 });
|
|
2643
2643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
|
|
2644
2644
|
type: Component,
|
|
2645
2645
|
args: [{ selector: 'sky-list-toolbar', providers: [
|