@skyux/list-builder 13.0.0-alpha.3 → 13.0.0-alpha.4
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.
|
@@ -2148,7 +2148,7 @@ class SkyListMultiselectToolbarComponent {
|
|
|
2148
2148
|
return true;
|
|
2149
2149
|
}
|
|
2150
2150
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyListMultiselectToolbarComponent, deps: [{ token: ListState }, { token: ListStateDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyListMultiselectToolbarComponent, isStandalone: false, 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "
|
|
2151
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyListMultiselectToolbarComponent, isStandalone: false, 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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4$1.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "component", type: i4$1.λ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" }] }); }
|
|
2152
2152
|
}
|
|
2153
2153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyListMultiselectToolbarComponent, decorators: [{
|
|
2154
2154
|
type: Component,
|
|
@@ -2622,7 +2622,7 @@ class SkyListToolbarComponent {
|
|
|
2622
2622
|
ListToolbarState,
|
|
2623
2623
|
ListToolbarStateDispatcher,
|
|
2624
2624
|
ListToolbarStateModel,
|
|
2625
|
-
], 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 @if ((type | async) !== 'search') {\n <sky-toolbar>\n <sky-toolbar-section>\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\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 @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n @if (showFilterSummary && (hasAppliedFilters | async)) {\n <sky-toolbar-section>\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n\n @if (\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n ) {\n <div class=\"sky-list-toolbar-search\">\n <sky-toolbar>\n @if (isSearchEnabled | async) {\n <sky-toolbar-section>\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 }\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n @if (item.id !== 'search') {\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n }\n </sky-toolbar-item>\n }\n <ng-content />\n @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n }\n @if (isFilterBarDisplayed) {\n <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n }\n @if (isMultiselectEnabled | async) {\n <sky-list-multiselect-toolbar />\n }\n</div>\n\n<ng-template #search>\n @if (isSearchEnabled | async) {\n <div 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 }\n</ng-template>\n\n<ng-template #sortSelector>\n @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n <div class=\"sky-toolbar-item-sort-container\">\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortSelectors | async; track item) {\n <sky-sort-item\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n }\n </sky-sort>\n </div>\n }\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
|
|
2625
|
+
], 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 @if ((type | async) !== 'search') {\n <sky-toolbar>\n <sky-toolbar-section>\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\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 @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n @if (showFilterSummary && (hasAppliedFilters | async)) {\n <sky-toolbar-section>\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n\n @if (\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n ) {\n <div class=\"sky-list-toolbar-search\">\n <sky-toolbar>\n @if (isSearchEnabled | async) {\n <sky-toolbar-section>\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 }\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n @if (item.id !== 'search') {\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n }\n </sky-toolbar-item>\n }\n <ng-content />\n @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n }\n @if (isFilterBarDisplayed) {\n <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n }\n @if (isMultiselectEnabled | async) {\n <sky-list-multiselect-toolbar />\n }\n</div>\n\n<ng-template #search>\n @if (isSearchEnabled | async) {\n <div 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 }\n</ng-template>\n\n<ng-template #sortSelector>\n @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n <div class=\"sky-toolbar-item-sort-container\">\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortSelectors | async; track item) {\n <sky-sort-item\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n }\n </sky-sort>\n </div>\n }\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-container:not(.sky-theme-modern *){--sky-override-list-toolbar-search-background: #eeeeef;--sky-override-list-toolbar-search-disabled-background: #cdcfd2}.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:var(--sky-override-list-toolbar-search-background, var(--sky-color-background-container-base))}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:var(--sky-override-list-toolbar-search-disabled-background);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: "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: i7.SkySearchComponent, selector: "sky-search", inputs: ["ariaLabel", "ariaLabelledBy", "searchText", "expandMode", "debounceTime", "disabled", "placeholderText"], outputs: ["searchApply", "searchChange", "searchClear"] }, { kind: "component", type: i3$1.λ14, selector: "sky-sort", inputs: ["ariaLabel", "showButtonText"] }, { kind: "component", type: i3$1.λ13, selector: "sky-sort-item", inputs: ["active"], outputs: ["itemSelect"] }, { kind: "component", type: i3$1.λ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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2626
2626
|
}
|
|
2627
2627
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyListToolbarComponent, decorators: [{
|
|
2628
2628
|
type: Component,
|
|
@@ -2630,7 +2630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
|
|
|
2630
2630
|
ListToolbarState,
|
|
2631
2631
|
ListToolbarStateDispatcher,
|
|
2632
2632
|
ListToolbarStateModel,
|
|
2633
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-list-toolbar-container\">\n @if ((type | async) !== 'search') {\n <sky-toolbar>\n <sky-toolbar-section>\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\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 @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n @if (showFilterSummary && (hasAppliedFilters | async)) {\n <sky-toolbar-section>\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n\n @if (\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n ) {\n <div class=\"sky-list-toolbar-search\">\n <sky-toolbar>\n @if (isSearchEnabled | async) {\n <sky-toolbar-section>\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 }\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n @if (item.id !== 'search') {\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n }\n </sky-toolbar-item>\n }\n <ng-content />\n @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n }\n @if (isFilterBarDisplayed) {\n <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n }\n @if (isMultiselectEnabled | async) {\n <sky-list-multiselect-toolbar />\n }\n</div>\n\n<ng-template #search>\n @if (isSearchEnabled | async) {\n <div 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 }\n</ng-template>\n\n<ng-template #sortSelector>\n @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n <div class=\"sky-toolbar-item-sort-container\">\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortSelectors | async; track item) {\n <sky-sort-item\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n }\n </sky-sort>\n </div>\n }\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
|
|
2633
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-list-toolbar-container\">\n @if ((type | async) !== 'search') {\n <sky-toolbar>\n <sky-toolbar-section>\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\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 @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n @if (showFilterSummary && (hasAppliedFilters | async)) {\n <sky-toolbar-section>\n <ng-content select=\"sky-list-filter-summary\" />\n </sky-toolbar-section>\n }\n </sky-toolbar>\n }\n\n @if (\n (type | async) === 'search' &&\n ((isSearchEnabled | async) || hasAdditionalToolbarSection)\n ) {\n <div class=\"sky-list-toolbar-search\">\n <sky-toolbar>\n @if (isSearchEnabled | async) {\n <sky-toolbar-section>\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 }\n <sky-toolbar-section [hidden]=\"!hasAdditionalToolbarSection\">\n @for (item of leftTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of centerTemplates; track item) {\n <sky-toolbar-item>\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n </sky-toolbar-item>\n }\n @for (item of rightTemplates; track item) {\n <sky-toolbar-item [attr.sky-toolbar-id]=\"item.id\">\n @if (item.id !== 'search') {\n <sky-list-toolbar-item-renderer\n [attr.sky-cmp-id]=\"item.id\"\n [template]=\"item.template\"\n />\n }\n </sky-toolbar-item>\n }\n <ng-content />\n @if (hasViewActions) {\n <sky-toolbar-view-actions>\n <ng-content select=\"sky-list-toolbar-view-actions\" />\n </sky-toolbar-view-actions>\n }\n </sky-toolbar-section>\n </sky-toolbar>\n </div>\n }\n @if (isFilterBarDisplayed) {\n <div [attr.aria-labelledby]=\"filterButtonId\" [id]=\"listFilterInlineId\">\n <ng-content select=\"sky-list-filter-inline\" />\n </div>\n }\n @if (isMultiselectEnabled | async) {\n <sky-list-multiselect-toolbar />\n }\n</div>\n\n<ng-template #search>\n @if (isSearchEnabled | async) {\n <div 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 }\n</ng-template>\n\n<ng-template #sortSelector>\n @if ((isSortSelectorEnabled | async) && (sortSelectors | async).length > 0) {\n <div class=\"sky-toolbar-item-sort-container\">\n <sky-sort [showButtonText]=\"true\">\n @for (item of sortSelectors | async; track item) {\n <sky-sort-item\n [active]=\"item.selected\"\n (itemSelect)=\"setSort(item.sort)\"\n >\n {{ item.sort.text }}\n </sky-sort-item>\n }\n </sky-sort>\n </div>\n }\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-container:not(.sky-theme-modern *){--sky-override-list-toolbar-search-background: #eeeeef;--sky-override-list-toolbar-search-disabled-background: #cdcfd2}.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:var(--sky-override-list-toolbar-search-background, var(--sky-color-background-container-base))}.sky-list-toolbar-search ::ng-deep input[type=text]:disabled,.sky-list-toolbar-search ::ng-deep .sky-search-btn:disabled{background-color:var(--sky-override-list-toolbar-search-disabled-background);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"] }]
|
|
2634
2634
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ListState }, { type: ListStateDispatcher }, { type: ListToolbarState }, { type: ListToolbarStateDispatcher }, { type: i3.SkyLogService }], propDecorators: { inMemorySearchEnabled: [{
|
|
2635
2635
|
type: Input
|
|
2636
2636
|
}], placeholder: [{
|